---
title: "Webアプリマニフェストが効かない・PWAとして扱われないときの確認点"
description: "ホーム画面追加のアイコンが出ず、PWAとしてインストールできない原因を調べている開発者向け。manifest.jsonの必須項目チェックからHTTPS・Service Workerの条件まで、インストール可能になるかを一つずつ判断できる確認リストを提供します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/manifest-pwa-not-installable"
markdown: "https://giga-site.com/articles/manifest-pwa-not-installable/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Webアプリマニフェストが効かない・PWAとして扱われないときの確認点

ホーム画面に追加されるはずのアイコンが出ない、PWAとしてインストールできない。原因の多くはWebアプリマニフェスト(manifest.json)の読み込みや必須項目の不足です。インストール条件を一つずつ確認し、確認・共有環境での制約も含めて整理します。

> Source HTML: https://giga-site.com/articles/manifest-pwa-not-installable
> Article index: https://giga-site.com/articles/index.md

## Webアプリマニフェストの役割

Webアプリマニフェストは、WebサイトをPWA(Progressive Web App)としてホーム画面に追加するための設定をまとめたJSONファイルです。アプリ名、アイコン、表示モード、テーマカラーなどを定義します。

ブラウザはこのマニフェストと、HTTPS配信・Service Workerの有無・必須項目の充足などの条件をすべて満たしたときに、インストール可能と判断します。どれか一つでも欠けるとインストールの導線が出ません。

つまり「アイコンが出ない」原因は、マニフェストの記述ミスだけでなく、配信条件や周辺要件にまたがっていることが多いのです。

## 読み込まれない典型パターン

まず多いのが、HTMLの head に link rel="manifest" の記述がない、またはパスが間違っているケースです。相対パスの解決ミスでmanifest.jsonに辿り着けていないと、ブラウザは設定を読み込めません。

次に、manifest.json自体のJSONが壊れている(末尾カンマや構文エラー)場合も読み込みに失敗します。開発者ツールで内容がパースできているか確認するのが近道です。

アイコンのサイズ不足もよくある原因です。インストールには十分な解像度のアイコンが必要で、小さい画像しか指定していないとインストール条件を満たせません。

## 症状別チェック表

Webアプリマニフェストが効かない・PWAとして扱われないときの確認点は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 確認すべき項目の手順

インストール可能性は複数条件のANDなので、上から順に潰していくと原因にたどり着けます。

1. 開発者ツールのApplicationタブで Manifest を開き、項目が正しく読めているか確認する
2. head に link rel="manifest" href="..." があり、パスが正しいか確認する
3. manifest.jsonのJSON構文にエラーがないか(末尾カンマなど)を点検する
4. name / short_name / start_url / icons / display など必須項目が揃っているか確認する
5. 十分なサイズのアイコン(大きめの正方形)が指定されているか確認する
6. HTTPSで配信されているか、Service Workerの要件を満たしているか確認する

## HTTPSとサブパスの落とし穴

PWAのインストールは原則HTTPS配信が前提です。ローカルのfileプロトコルやHTTPでは、マニフェストが正しくてもインストールできません。配信方式を確認するのが最初のチェックポイントです。

また start_url や scope の指定がサイトの実際のパスとずれていると、インストールはできても起動時に意図しないページに飛ぶことがあります。配信されるURL構造に合わせて設定する必要があります。

ZIPで配布する構成では、相対パスの基準がどこになるかを意識しないと、manifestやアイコンへの参照が崩れがちです。

## 確認共有環境での制約を理解する

ギガサイト便はHTTPSが自動で付くため、PWAのHTTPS要件はクリアしやすい一方、一時公開ページには noindex が付き、認証を併用すれば閲覧前にログインが入ります。こうした確認・レビュー向けの位置づけでは、フルなPWA運用よりも「マニフェストや挙動の確認」を目的にするのが現実的です。

CSS/JS/画像を含むZIPをドロップして共有すれば、manifest.jsonやアイコンを含めた一式をまとめて確認してもらえます。設定を直すたびに同じURLのまま差し替えられるので、インストール条件の試行錯誤がしやすくなります。本番のWebサイト運用そのものではなく、確認・共有の用途として捉えるのが適切です。

## よくある質問

### manifest.jsonを置けば必ずインストールできますか

いいえ。HTTPS配信、必須項目の充足、十分なサイズのアイコン、Service Workerなどの条件をすべて満たして初めてインストール可能と判断されます。一つ欠けても導線は出ません。

### マニフェストが読めているかをどう確認しますか

開発者ツールのApplicationタブにあるManifestの項目を開くと、読み込めた内容と不足項目が表示されます。ここでエラーや空欄を確認するのが最短の切り分けです。

### アイコンが表示されないのはなぜですか

iconsの指定漏れ、パスの誤り、解像度不足のいずれかが多いです。インストールには十分なサイズの正方形アイコンが必要で、小さい画像だけでは条件を満たせません。

### 確認用の共有でPWAをフルに試せますか

HTTPSは自動で付くためマニフェストや基本挙動の確認には向きます。ただし一時共有はnoindexや認証併用が前提の位置づけなので、本番のPWA運用そのものではなく確認用途として使うのが適切です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [認証メール（コード）が届かないときの確認点](https://giga-site.com/articles/auth-email-not-arriving/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Webアプリマニフェストが効かない・PWAとして扱われないときの確認点",
  "description": "ホーム画面追加のアイコンが出ず、PWAとしてインストールできない原因を調べている開発者向け。manifest.jsonの必須項目チェックからHTTPS・Service Workerの条件まで、インストール可能になるかを一つずつ判断できる確認リストを提供します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/manifest-pwa-not-installable",
  "url": "https://giga-site.com/articles/manifest-pwa-not-installable",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "manifest.jsonを置けば必ずインストールできますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。HTTPS配信、必須項目の充足、十分なサイズのアイコン、Service Workerなどの条件をすべて満たして初めてインストール可能と判断されます。一つ欠けても導線は出ません。"
      }
    },
    {
      "@type": "Question",
      "name": "マニフェストが読めているかをどう確認しますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "開発者ツールのApplicationタブにあるManifestの項目を開くと、読み込めた内容と不足項目が表示されます。ここでエラーや空欄を確認するのが最短の切り分けです。"
      }
    },
    {
      "@type": "Question",
      "name": "アイコンが表示されないのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iconsの指定漏れ、パスの誤り、解像度不足のいずれかが多いです。インストールには十分なサイズの正方形アイコンが必要で、小さい画像だけでは条件を満たせません。"
      }
    },
    {
      "@type": "Question",
      "name": "確認用の共有でPWAをフルに試せますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTTPSは自動で付くためマニフェストや基本挙動の確認には向きます。ただし一時共有はnoindexや認証併用が前提の位置づけなので、本番のPWA運用そのものではなく確認用途として使うのが適切です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```