スマホのホーム画面にウェブサイトを追加する方法

まずはユーザー側からの設定方法です。

iPhoneの場合

Safariでお気に入りのサイトを開いたら、画面下の共有ボタン(四角に↑のマーク)をタップしてみてください。
メニューをスクロールすると「ホーム画面に追加」という項目が出てきます。
そこをタップして名前を編集したら「追加」を押すだけ。
これでアプリみたいにホーム画面からワンタップでアクセスできるようになります。

Androidの場合

Chromeでサイトを開いて、右上の三点メニューをタップします。
「ホーム画面に追加」を選んで名前を確認したら「追加」をタップ。
自動的にホーム画面にショートカットが作られます。
機種によっては「インストール」と表示されることもありますが、同じ機能です。
よく使うニュースサイトやSNS、天気予報なんかをホーム画面に置いておくと、
ブラウザを開いて検索する手間が省けて本当に便利ですよ。

次はウェブサイトオーナー側から見ると。

サイトを運営している側としては、ユーザーにホーム画面追加してもらいやすくする工夫ができます。
まず基本となるのがウェブアプリマニフェストの設置です。
manifest.jsonというファイルで、サイト名やアイコン、テーマカラーを指定します。
これがあるとAndroidでは「インストール」として認識され、より本格的なアプリ体験を提供できます。

次にアイコン画像の準備。AppleのSafari用にはapple-touch-iconタグでアイコンを指定します。
180×180ピクセル以上の画像を用意しておくと、Retinaディスプレイでもきれいに表示されます。
さらにPWA(Progressive Web App)化すれば、オフライン対応やプッシュ通知も可能になります。
Service Workerを実装することで、ネイティブアプリに近い体験をウェブ技術だけで実現できるんです。
ホーム画面に追加してもらえれば、再訪問率が格段に上がります。

自分も自作したアプリをスマホのホーム画面に入れて使っています。