---
title: "Web App Manifestとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AI生成サイトの共有時にホーム画面追加バナーやPWAインストール要求が表示されて困っているWeb担当者向け。Web App Manifestの役割と共有時の挙動、不要な場合の無効化手順を具体的に解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-web-manifest-html-share"
markdown: "https://giga-site.com/articles/what-is-web-manifest-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Web App Manifestとは？HTML共有・AI生成サイトでの意味をやさしく解説
AI生成のWebサイトを共有しているとき、スマートフォンのブラウザに「ホーム画面に追加」のバナーが出たり、受け取った相手が「アプリみたいに開ける」と言ってくることがある。これはWeb App Manifestというファイルがページに設定されているサインだ。共有・配信の場面でこの設定が及ぼす影響を知っておくと、意図しないUXを防げる。
> Source HTML: https://giga-site.com/articles/what-is-web-manifest-html-share
> Article index: https://giga-site.com/articles/index.md
## ひとことで言うと
Web App Manifest（`manifest.json`または`manifest.webmanifest`）とは、WebサイトがPWA（Progressive Web App）として動作するための設定ファイルだ。アプリ名、アイコン、テーマカラー、表示モード（fullscreen/standaloneなど）をJSONで定義し、HTMLから``で参照する。
このファイルがページに存在し、HTTPSで配信されている場合、ブラウザは自動でインストール可能なPWAと判断しホーム画面への追加バナーを表示する。AI生成ツールがPWAテンプレートを使って出力した場合に、意図せずこの挙動が発生することがある。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## HTML共有で関係する場面
社内レビュー用にHTTPSのURLを共有したとき、スマホで開いた担当者に「インストールしますか？」バナーが表示されると、レビューに集中できず混乱を招く。manifest.jsonを含めないか、`display`を`browser`に変更してスタンドアロン起動を無効化するだけでこのバナーを抑制できる。
manifest.jsonにはアプリアイコン画像のパスが記述されており、アイコンPNGファイルもフォルダに含める必要がある。共有zipにアイコンファイルが含まれていないと404エラーがコンソールに出るが、ページの表示自体には影響しない。レビュー用途なら気にせずプロジェクトの完成度確認に集中して問題ない。
## よくある誤解
「Web App Manifestがあればオフラインで動く」という誤解がある。オフライン動作にはService Workerが別途必要で、Manifest単体ではオフライン機能は実現しない。Manifestはあくまでホーム画面追加時の見た目と起動方法を定義するだけだ。
「manifestを使うとApp StoreやGoogle Playに申請できる」というのも誤解だ。PWAとしてのWebインストールとストアへの申請は別の話で、ストアに出すにはTWA（Trusted Web Activity）やPWABuilderなど追加の対応が必要だ。AI生成の共有サイトにmanifestが入っていてもストアには自動で掲載されない。
## 安全に使うための注意点
manifest.jsonにはアプリの`start_url`が記述されており、これがホーム画面から起動するURLになる。共有先のドメインと`start_url`が一致しない場合、ホーム画面から起動すると想定外のURLに飛ぶことがある。ギガサイト便など一時URLで配信する場合は、manifest.jsonを含めないかstart_urlを`./`に変更しておくと安全だ。
manifest.jsonの`scope`が設定されているとPWAとして開いた際にスコープ外URLへのナビゲーションがブラウザで開き直される。例えばスコープが`/app/`に限定されているのに外部リンクを踏むとデフォルトブラウザが別途起動する。レビュー相手が混乱しないよう、共有版ではスタンドアロンモードを無効化してからURLを渡そう。
## よくある質問
### manifest.jsonをHTMLから削除せずにPWAインストールバナーだけ非表示にする方法はありますか？
manifest.jsonの`display`を`browser`に変更するだけでバナーが抑制されます。PWAとしてのインストール条件を満たさなくなるため、レビュー共有時に相手に余計なプロンプトが出なくなります。
### AI生成コードにmanifest.jsonが含まれているかどうか、どうやって確認しますか？
HTMLの``内に``が記述されているか確認してください。あるいはフォルダ内に`manifest.json`や`manifest.webmanifest`という名前のファイルが存在するかを確認します。
### manifest.jsonのアイコン画像はどんな形式・サイズを用意すればいいですか？
最低限192×192pxと512×512pxのPNG画像を用意するのが標準的です。インストールバナーの表示にはこのサイズが必要ですが、レビュー共有のみが目的ならアイコン画像の有無はPWAインストール機能に関係するだけで表示には影響しません。
## 関連記事
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Web App Manifestとは？HTML共有・AI生成サイトでの意味をやさしく解説",
"description": "AI生成サイトの共有時にホーム画面追加バナーやPWAインストール要求が表示されて困っているWeb担当者向け。Web App Manifestの役割と共有時の挙動、不要な場合の無効化手順を具体的に解説する。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/what-is-web-manifest-html-share",
"url": "https://giga-site.com/articles/what-is-web-manifest-html-share",
"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をHTMLから削除せずにPWAインストールバナーだけ非表示にする方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "manifest.jsonの`display`を`browser`に変更するだけでバナーが抑制されます。PWAとしてのインストール条件を満たさなくなるため、レビュー共有時に相手に余計なプロンプトが出なくなります。"
}
},
{
"@type": "Question",
"name": "AI生成コードにmanifest.jsonが含まれているかどうか、どうやって確認しますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "HTMLの``内に``が記述されているか確認してください。あるいはフォルダ内に`manifest.json`や`manifest.webmanifest`という名前のファイルが存在するかを確認します。"
}
},
{
"@type": "Question",
"name": "manifest.jsonのアイコン画像はどんな形式・サイズを用意すればいいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "最低限192×192pxと512×512pxのPNG画像を用意するのが標準的です。インストールバナーの表示にはこのサイズが必要ですが、レビュー共有のみが目的ならアイコン画像の有無はPWAインストール機能に関係するだけで表示には影響しません。"
}
}
]
}
```