iPhone・Androidでホーム画面に追加する方法|Safari・Chromeの手順と注意点
よく見るWebページを、毎回検索したりブックマークから探したりするのは少し面倒ですよね。
そんなときに便利なのが、スマホの「ホーム画面に追加」機能です。Webページをまるでアプリのようなアイコンとしてホーム画面に配置でき、ワンタップで即座にアクセスできるようになります。
ニュースサイト、お気に入りのショップ、予約ページ、ブログ、ポートフォリオなど、日常的に開くページはすべて対象です。
この記事では、iPhone(Safari)とAndroid(Chrome)でホーム画面に追加する最新の具体手順と、うまく追加できないときの原因・対処法を初心者向けにわかりやすく解説します。
「ホーム画面に追加」とは?アプリとの違い
「ホーム画面に追加」とは、Webページへの直接の入り口(ショートカット)をスマホの画面に置く機能です。アプリストア(App StoreやGoogle Play)から重いデータをインストールする必要はありません。
基本的にはブラウザでページを開くためのショートカットですが、サイト側が「PWA(Webアプリ化の仕組み)」に対応している場合は、起動時にURLバーが消え、本物のアプリと変わらない全画面表示や滑らかな動作になることもあります。
【iPhone編】ホーム画面に追加する手順(Safari)
iPhoneでホーム画面に追加する場合は、必ず標準ブラウザであるSafariを使用します。
※注意:LINE、X(旧Twitter)、Instagram、TikTokなどの「アプリ内ブラウザ」で開いている場合は、ホーム画面に追加できません。必ずメニューから「Safariで開く」を選ぶか、URLをコピーしてSafariに貼り付けて開き直してください。
操作ステップ
- 追加したいWebページをSafariで開きます。
- 画面下部(または上部)にある「共有ボタン」(四角から上向き矢印が飛び出しているアイコン)をタップします。
- 表示されたメニューを下にスクロールし、「ホーム画面に追加」をタップします。
- アイコンの表示名を確認・編集します(短くわかりやすい名前に変更するのがおすすめです)。
- 画面右上の「追加」をタップします。
※スクロール中にSafariのツールバー(共有ボタンがあるメニューバー)が隠れてしまった場合は、画面を軽く上下にスクロールすると再表示されます。
「ホーム画面に追加」の項目が見つからないときは?
メニューの中に項目がない場合は、やはり「Safari以外のブラウザ」で開いている可能性が非常に高いです。まずはブラウザの確認を最初に行ってください。また、メニューのかなり下方に隠れている場合もあるため、一番下までスクロールして確認してみましょう。
👉 Petal名刺とは?ホーム画面でつながる新しい名刺の形 の解説が役に立ちます。
【Android編】ホーム画面に追加する手順(Chrome)
Androidでは、基本的に標準ブラウザであるGoogle Chromeを使用します(端末やブラウザのバージョンにより、一部の表記が異なる場合があります)。
操作ステップ
- 追加したいWebページをChromeで開きます。
- 画面右上にあるメニューボタン(縦に点が3つ並んだ「︙」アイコン)をタップします。
- 「ホーム画面に追加」または「アプリをインストール」をタップします。
- 表示名を確認・編集し、「追加」(またはインストール)をタップします。
Androidの「追加」と「インストール」の違い
Androidでは、サイト側の作りによってメニューの文言が変わります。
- 「アプリをインストール」と出る場合:そのサイトがPWAに対応しています。追加後はアドレスバーのない、アプリ専用画面のように起動します。
- 「ホーム画面に追加」と出る場合:通常のWebサイトです。Chromeでそのページを開くための純粋なショートカットとして配置されます(アイコンの隅に小さなChromeマークがつくことがあります)。
【仕組み】アイコンや表示名が自動で決まる理由と制限
「ホーム画面に追加するとき、自分の好きな画像や名前に自由に変えたい」と思う方も多いですが、標準機能では基本的に自由に変更することはできません。
アイコンはサイト側の設定に依存する
ホーム画面に表示されるアイコンは、スマホのシステムがページ内の記述(iPhoneなら apple-touch-icon、Androidなら manifest.json のアイコン設定)を読み取って自動的に決定します。
そのため、ある特定のショップページや個人のプロフィールページを追加したとしても、サイト全体で共通の「サービスロゴ」になってしまうことがよくあります。これは仕様であり、スマホの不具合ではありません。
表示名は長すぎると省略される
追加時に名前を編集することは可能ですが、サイト側がPWA専用の名前(short_name)を固定している場合はそちらが優先されることがあります。名前が長すぎると、ホーム画面に並んだときに語尾が「…」と省略されてしまうため、できるだけ短く直感的な名前に整えるのがコツです。
また、基本的には「今追加したい個別ページそのものを開いて追加する」のが鉄則ですが、サイト側のPWA設定(start_url)によっては、個別ページを追加したはずなのに、起動すると必ずトップページに戻されるという現象が起きる場合もあります。
ホーム画面に追加できないときの原因と対処法チェックリスト
うまく追加できない、または追加したアイコンの挙動がおかしいときは、以下の原因と対処法を順番に試してみてください。
よくある原因
- SNSやLINEなどの「アプリ内ブラウザ」でページを開いている
- SafariやChrome以外のマイナーなブラウザアプリを使っている
- すでに同じサイト(PWA)がホーム画面に追加されている
- ブラウザに古いデータ(キャッシュ)が残っている
- サイト側のPWA設定ファイル(マニフェスト)にエラーがある
試すべき対処法
- iPhoneならSafari、AndroidならChromeで開き直す(最重要)
- 追加したい個別ページのURLを直接開いてから操作する
- すでにホーム画面にある古いアイコンを一度削除してからやり直す
- ブラウザのキャッシュ(閲覧履歴データ)を消去する
- スマホ端末自体を一度再起動する
標準機能の「得意なケース」と「苦手なケース」
◎ 標準機能が向いているケース(自分用)
- 自分が日常的にチェックするニュースやブログを登録したい
- 社内システムや、サービスの管理画面にすぐアクセスしたい
- アイコンの見た目やデザインにはこだわらない
- 準備なしで、とにかくその場ですぐにホーム画面に置きたい
✕ 標準機能が向いていないケース(他人への共有・ブランド重視)
- お気に入りの写真や自作のロゴをアイコンにして配置したい
- 自分のネットショップや作品ページを、自分独自のブランドアイコンでファンのスマホに置いてほしい
- 利用しているサービス共通のロゴ(BASEやnoteなどのロゴ)ではなく、自分専用のアイコンで他人に届けたい
自由なアイコンで「人に置いてもらう入口」を作るならOJapp
標準機能の「アイコンや名前がサイト側に縛られる」という弱点を解決するのが、OJappのようなサービスです。
OJappは、お好みのURLに対して「好きなアイコン画像」と「自由な表示名」をあらかじめセットした、ホーム画面追加のための専用の入り口(URL)を作成できます。作成したURLをSNSやQRコードで相手に共有すれば、受け取った人は複雑な設定なしで、あなたの狙い通りの美しいデザインのままホーム画面にサイトを追加できます。
- 標準機能は:「自分が今見ているページをとりあえず置く」ための機能
- OJappは:「お客様やファンに、素敵なアイコンでホーム画面に置いてもらう入り口を作る」ための機能
自分用のブックマークを超えて、クリエイター活動やショップ運営の導線を整えたい場合には、非常に強力な選択肢となります。
関連記事
- ホーム画面追加のトラブルを技術的・運営者目線でさらに深掘り:
ホーム画面に追加できない原因と解決方法まとめ - 「ショートカットアプリ」を使ったカスタムや、OJappとの違いを詳しく比較:
ショートカット・標準ホーム画面追加・OJapp方式の違いをわかりやすく比較 - アプリのように全画面で動く仕組み「PWA」と「WebClip」の境界線とは:
PWAとWebClipの違いとは?iPhoneではどっちを使うべきか
まとめ
スマホの「ホーム画面に追加」は、iPhoneならSafariの共有ボタン、AndroidならChromeのメニュー「︙」から、いつでも誰でも簡単に利用できる便利な機能です。
基本的には自分用のブックマークとして非常に優秀ですが、アイコンや名前がサイト側の設定に強制されてしまうという一面もあります。
自分が使う分には標準機能でサッと追加し、ショップや作品ページなど「人に綺麗なアイコンで置いてほしい」という場面ではOJappを活用するなど、用途に合わせて賢く使い分けてみてください!