ホーム画面に追加したWebサイトはアプリ？ブックマーク？PWAとの違いを解説

iPhoneやAndroidでWebサイトを見ていると、「ホーム画面に追加」という機能があります。

追加するとホーム画面にアイコンが現れて、タップすればそのWebサイトを開けます。

見た目だけなら普通のアプリとかなり似ています。では、これはアプリになったのか、それとも単なるブックマークなのか。

結論から言うと、ホーム画面に追加したWebサイトがすべて同じ仕組みになるわけではありません。普通のWebサイトへの入口として追加される場合もあれば、Web App Manifestなどが設定されたPWAとして、よりアプリに近い形で起動する場合もあります。

ホーム画面にアイコンがあるだけではPWAとは限らない

まず一番分かりにくいのがここです。

ホーム画面に追加できるWebサイト＝すべてPWA、ではありません。

普通のWebサイトでも、ブラウザやOSの機能を使ってホーム画面へ入口を置ける場合があります。

そのアイコンをタップすると保存されていたURLが開くので、感覚としては「ホーム画面に置いたWebサイトへのショートカット」や「ブックマーク」に近いものです。

一方PWAでは、Web App Manifestを使ってアプリ名、アイコン、起動URL、表示方法などをWebサイト側から設定できます。

PWAそのものの仕組みについては、PWAとは？スマホのWebサイトを“アプリ化”する仕組みをわかりやすく解説でも紹介しています。

普通のホーム画面追加とPWAは何が違う？

大まかに分けると、こんな違いがあります。

ここで大事なのは、PWAになったからWebではなくなるわけではないということです。

PWAも本体はWebです。

Webのページや機能を、ホーム画面から使いやすい形に設計できるのがPWA、と考えると分かりやすいと思います。

OJapp Tips｜合わせて読みたい
ホーム画面名刺とは？新しいつながり方「Petal」の考え方と使い方 の解説が役に立ちます。

Manifestがあると「どんなアプリとして置くか」をWeb側で決められる

PWAで重要になるのがWeb App Manifestです。

例えばこんな内容を設定できます。

{
  "name": "My App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "512x512",
      "purpose": "any"
    }
  ]
}

これによって、ホーム画面で使う名前やアイコン、どこから起動するか、どのような表示モードで開くかなどを設計できます。

私がPWA LABで実機検証していて特に大きいと感じたのは、display の違いです。standalone や fullscreen を変えるだけでもAndroidではかなり見え方が変わりました。一方、iPhoneでは同じ設定でも変化が小さいケースがあり、PWAはOSによって挙動がかなり違います。

つまりManifestは、単に「ホーム画面にアイコンを出すファイル」ではなく、そのWebをホーム画面からどう使わせるかを決める設定でもあります。

Manifestの各項目については、PWAに必要なmanifest.jsonの基本で実機検証を含めて詳しくまとめています。

standaloneで開くと一気に「アプリっぽく」なる

PWAをアプリのように感じやすい理由のひとつが、display: standalone です。

{
  "display": "standalone"
}

通常のブラウザでWebサイトを開けば、アドレスバーやブラウザのUIがあります。

standaloneでホーム画面から起動すると、それらのブラウザUIが抑えられ、独立した画面として表示されます。

実際に自分でWebツールをホーム画面に置いて使っていると、ここで感覚がかなり変わります。中身は同じWebなのに、SafariやChromeから探して開くのではなく、専用アイコンを押して独立した画面で開くと「Webページを見る」より「ツールを起動する」に近くなります。

OJ-Passもその感覚をかなり意識して作ったWebツールで、URLを毎回探すのではなくホーム画面へ置くことで、軽量なローカルツールに近い使い方ができます。

PWAならオフラインや通知も自動で付くわけではない

ここもよく混ざりやすいところです。

PWAという言葉を見ると、

• オフラインで動く
• Push通知が来る
• 高速になる
• 端末の機能が使える

といった機能が全部セットになっているように見えることがあります。

でも、Manifestを設定してホーム画面からアプリらしく起動できるようにしただけで、これらが全部自動的に追加されるわけではありません。

例えばオフライン対応ならService WorkerやCache APIなどの実装が必要です。

逆に言えば、オフライン機能が必要なければ無理に入れる必要もありません。PWA開発を一瞬で終わらせる「とりあえず入れるPWA」で書いたように、まずホーム画面への入口だけ作るという軽いPWAもありです。

結局、アプリなの？ブックマークなの？

この疑問に一言で答えるなら、ホーム画面に追加しただけでは判断できないです。

普通のWebサイトをURLへの入口として置いているだけなら、かなりブックマークやショートカットに近い存在です。

一方でWeb App Manifestを設定し、standaloneで起動させ、必要ならService WorkerなどのWeb機能を組み合わせたPWAは、Webでありながらアプリとして使うことを意識した設計になります。

ただ、境界線を無理に引く必要もないと思っています。

Webなのか、アプリなのか。

ユーザーからすれば、ホーム画面にいつものアイコンがあって、タップすれば目的のページやツールがすぐ開く。それで十分「アプリのような入口」として機能します。

PWAの面白いところは、Webを捨ててアプリになることではなく、Webのままホーム画面まで出てこられること。

ホーム画面に追加したWebサイトを見るときは、「これはアプリかブックマークか」だけではなく、「ホーム画面からどんな使い方ができるように設計されているか」を見ると、その違いが分かりやすくなります。