ホーム画面に追加できない原因と解決方法まとめ｜iPhone・Android対応
iPhone や Android で「ホーム画面に追加」「インストール」が表示されない、
押しても追加されない、アイコンが変になる──
iPhoneやAndroidでWebページをホーム画面に追加しようとしたときに、うまくいかないことがあります。
- 「ホーム画面に追加」の項目が表示されない
- ボタンを押しても反応しない
- 追加できたのに、アイコンが意図しない画像（ただのスクリーンショットなど）になる
- 同じページを追加したつもりなのに、開くと別のページ（トップページなど）に飛んでしまう
これらの問題は、スマホ自体の不具合というよりも、ブラウザの種類、サイト側の設定、PWA（Webアプリ化の仕組み）、キャッシュの仕様が原因になっていることがほとんどです。
この記事では、iPhoneとAndroidでホーム画面に追加できない原因と、ユーザーがすぐ試せる対処法、そしてサイト制作者向けのチェックポイントを分かりやすく整理して解説します。
【ユーザー向け】ホーム画面に追加できないときによくある4つの原因と対処法
まずは、スマホを操作している「ユーザー側」で解決できる、よくある原因と対処法を紹介します。
原因1：SNSなどの「アプリ内ブラウザ」で開いている
一番多いのが、X（旧Twitter）、Instagram、TikTok、LINEなどのリンクから開いた「アプリ内ブラウザ」でページを見ているパターンです。
アプリ内ブラウザは機能が制限されているため、iPhoneのSafariで表示される「ホーム画面に追加」ボタンが出なかったり、メニュー自体が見つからなかったりします。
【対処法】SafariまたはChromeで開き直す
スマホに標準搭載されている「標準ブラウザ」で開き直すことで解決します。
- iPhoneの場合：Safariで開き直す
- Androidの場合：Google Chromeで開き直す
アプリ内ブラウザのメニュー（「…」や共有ボタン）から「Safariで開く」「ブラウザで開く」を選択するか、URLをコピーして直接SafariやChromeに貼り付けてみてください。
原因2：iPhone（Safari）で共有ボタンが見えていない
iPhoneのSafariでは、画面下部にある「共有ボタン」から「ホーム画面に追加」を選択します。しかし、ページをスクロールしている間は、このツールバー（メニューバー）が自動的に隠れてしまう仕様になっています。
【対処法】Safariのメニューを再表示させる
- 画面の最下部（または最上部）を軽くタップするか、ページを少し上にスクロールしてツールバーを表示させます。
- 四角から上矢印が飛び出している「共有ボタン」をタップします。
- メニューを下にスクロールし、「ホーム画面に追加」を選択します。
原因3：ブラウザやアイコンの「キャッシュ」が残っている
「サイト側がアイコンを変更したはずなのに古い画像のまま」「不具合が修正されたはずなのに直らない」という場合は、ブラウザに古いデータ（キャッシュ）が残っている可能性が高いです。特にホーム画面のアイコン情報は、通常のページ更新よりもキャッシュが強く残る傾向があります。
【対処法】古いアイコンを消してキャッシュをクリアする
- ホーム画面にある、うまく機能していない古いアイコンを一度削除します。
- SafariやChromeのブラウザキャッシュ（履歴データ）を消去します。
- ページを再読み込み（リフレッシュ）します。
- 念のため端末（スマホ）を再起動します。
- もう一度、標準ブラウザから「ホーム画面に追加」を試します。
原因4：Androidで「インストール」と「ショートカット」を混同している
AndroidのChromeでは、同じようにホーム画面へ追加する操作でも、サイトの設定によって以下の2種類の挙動に分かれます。
| 挙動の種類 | 特徴 |
|---|---|
| アプリのインストール | サイトがPWA対応している場合。全画面でアプリのように起動する。 |
| ショートカットの追加 | 通常のWebサイトの場合。アイコンにChromeの小さなマークがつくことがある。 |
【対処法】メニューの文言をよく確認する
Chromeのメニューを開いた際、サイトによって「アプリをインストール」と表示される場合と、「ホーム画面に追加」と表示される場合があります。文言が違っても、どちらもホーム画面にアイコンを置く機能ですので、表示されている方をタップすれば問題ありません。
【重要】「トップページじゃないと追加できない」は本当？
以前は「個別ページではなく、サイトのトップページを開かないとホーム画面に追加できない」と説明されることがありましたが、現在のスマホの仕様では正確ではありません。
基本的には、自分が日常的にアクセスしたい「追加したいページ」を直接開いた状態で追加して問題ありません。
ただし、個別ページを開いて追加したにもかかわらず、ホーム画面から起動すると必ずトップページに戻ってしまう現象が起きることがあります。これはユーザー側のミスではなく、次に解説する「サイト（制作者）側のPWA設定」が原因です。
👉 SafariのPWA制限とは？できること・できないことまとめ【2026】 の解説が役に立ちます。
【制作者向け】サイトが正しくホーム画面に追加されない原因と解決策
ここからは、Webサイトの運営者や開発者向けに、技術的な原因とmanifest.json等の設定方法を解説します。
1. manifest.jsonの「start_url」によってトップに戻されている
ユーザーが個別ページで「ホーム画面に追加」を行っても、ホーム画面から起動した際に別のページが開く場合、マニフェストファイルの start_url が原因です。
{
"start_url": "/"
}上記のように起動URLがルート（トップページ）に固定されていると、ユーザーがどの階層のページを追加しても、起動時は必ずトップページが開いてしまいます。
OJappのように「URLそのものを入口にする」設計のサービスや、ユーザーが各個別ページをブックマーク代わりにホーム画面に置くことを想定している場合は、start_url の指定がユーザー体験を損ねていないか見直す必要があります。
2. 「scope」の外に出てしまい、SafariのミニUIが表示される
iOS・Androidともに、PWAの scope （Webアプリとして扱うURLの範囲）が影響します。scope内で遷移している間はスタンドアロンなアプリとして動きますが、範囲外のURLへ移動した瞬間にブラウザのUI（アドレスバーなど）が出現し、ユーザーに「アプリ化が失敗した」と誤解されることがあります。
{
"start_url": "/app/",
"scope": "/app/"
}上記の設定の場合、/app/ 配下のみがアプリ扱いとなります。階層構造やドメインをまたぐ遷移がないか、設定範囲を確認してください。
3. アイコン画像の優先順位と「apple-touch-icon」の不一致
ホーム画面に追加した際、アイコンが白飛びしたり、サイトの意図しない画像になったりする場合は、iOSとAndroidでのアイコン参照元の違いを意識する必要があります。
- iOS（Safari）：HTML内の
<link rel="apple-touch-icon" href="/icon.png">の指定を強く優先します。 - Android（Chrome）：manifest.json内の
iconsを参照します。
Android用にマスク対応（maskable型：余白を持たせた丸型や角丸に切り取られるアイコン）を設定しつつ、iOS用に専用の apple-touch-icon を正しくHTMLヘッダーに記述できているか、双方のバランスを確認してください。
4. PWAとしての必須条件を満たしていない（Android Chrome）
Android Chromeで「アプリとしてインストール」の選択肢が出ない場合、ブラウザがPWAとして認識するための最低条件を満たしていない可能性があります。
- 完全にHTTPS化（SSL対応）されているか
- manifest.json が正しいパス、および正しいMIMEタイプ（
application/manifest+json）で返されているか nameやshort_nameが記述されているか- 適切な
displayモード（standaloneやfullscreenなど）が設定されているか - Service Worker（サービスワーカー）が正しく登録され、オフライン対応の要件を満たしているか
※パスの記述（例：/lab/ を /leb/ とタイポするなど）が1文字違うだけでも、PWA判定は無効になります。実機やデベロッパーツールのLighthouseなどを用いて検証してください。
OJappなら「追加できない」「アイコンが崩れる」を解決
OJappは、お好きなWebサイトのURLを、スマホのホーム画面に最適化された形で簡単に追加できるサービスです。
一般的なWebサイトは、ホーム画面に追加されることを前提に作られていないケースが多く、アイコンが粗くなったり、アプリ名が長すぎて見切れたりしがちです。OJappを使用すれば、以下のメリットを簡単に享受できます。
- お好みの画像を綺麗なホーム画面アイコンに設定可能
- ホーム画面での表示名を自由かつスマートに調整可能
- iPhoneとAndroid、それぞれの仕様の違いを意識することなく、最適な「ホーム画面の入口」を作成
※ただし、アプリ内ブラウザの制限やSafariの共有メニューといった「端末側の基本操作」は必要となるため、本記事の対処法とあわせてご活用ください。
関連記事
- iPhoneでの具体的な手順を画像付きで確認したい方はこちら：
iPhoneでホーム画面に追加する方法【2026年版】初心者でも簡単にできる手順 - PWAとWebClipの仕組みや違いを詳しく知りたい方はこちら：
PWAとWebClipの違いとは？iPhoneではどっちを使うべきか - PWA（プログレッシブウェブアプリ）の基本概念を知りたい方はこちら：
PWAとは？スマホのWebサイトを“アプリ化”する仕組みをわかりやすく解説
まとめ
Webサイトをホーム画面に追加できない原因は、ユーザー側の操作環境（アプリ内ブラウザなど）によるものから、サイト制作側のPWA設定（start_url や scope）によるものまで様々です。
トラブルに遭遇した際は、「まずアプリ内ブラウザではなく、SafariやChromeなどの標準ブラウザで直接そのページを開き直す」、それでも挙動が乱れる場合は「サイト側の設定やキャッシュを疑う」というステップを踏むと、スムーズに解決へとたどり着けます。
