画像・アセットツール

無料 Webアプリマニフェストジェネレーター

PWA対応静的サイト向けのsite.webmanifest JSONファイルを生成します。

ツールを読み込み中...

Webアプリマニフェストジェネレーターとは

ウェブアプリマニフェストは、ブラウザにウェブアプリケーションに関する情報と、ユーザーのデバイスにインストールされたときの動作を伝えるJSONファイルです。アプリ名、アイコン、カラー、起動動作を制御します。GitHub Pages上の静的サイトにとって、マニフェストはサイトをプログレッシブウェブアプリとしてインストール可能にするための重要なステップです。

クイックアンサー

ウェブアプリマニフェストは、デバイスのホーム画面にインストールされたときのサイトの外観を制御します。PWA対応の静的サイト向けに、アプリ名、アイコン、テーマカラー、起動動作を設定します。

Last updated: 2026-06-11

制限事項

  • マニフェストはHTTPSでのみ機能します。HTTPサイトではマニフェストをインストールプロンプトに使用できません。
  • マニフェストには指定されたパスに実際のアイコン画像ファイルが必要です。アイコンが存在しない、または名前が間違っていると、ブラウザがマニフェストを拒否します。
  • インストール動作はAndroidとiOSで異なります。Androidはマニフェストをインストールプロンプトに使用しますが、iOSはApple touchアイコンメタタグに依存し、マニフェストからの完全なPWAインストールをサポートしていません。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. サイト名と、12文字以内のオプションの短縮名を入力します。
  2. 表示モードを選択します。standaloneはブラウザクロームを削除してアプリのような体験を提供します。
  3. 推奨サイズ(192x192や512x512など)のPNG画像へのアイコンパスを設定します。
  4. 生成されたマニフェストJSONをコピーし、サイトルートにsite.webmanifestとして保存します。

主な用途

  • 静的なドキュメンテーションサイトをモバイルのホーム画面にインストール可能にする。
  • ブログにPWAメタデータを追加し、再訪問者がアプリのように起動できるようにする。
  • PWAディレクトリにサイトを提出する前に、ウェブアプリマニフェストを準備する。

用途

使用例

スタンドアロンモードのツールサイト

ブラウザベースのユーティリティツールを公開する静的サイトが、displayをstandaloneに、theme-colorをコーラルブランドアクセントに設定します。Androidの訪問者はサイトをホーム画面に追加し、アドレスバーなしで開くことができます。

最小限のマニフェストのブログ

個人ブログがname、short name、192x192アイコンのみを使用します。displayはbrowserのままで、orientationはスキップします。ブログは通常のショートカットとして表示されますが、ホーム画面にはブランドアイコンが表示されます。

よくあるミス

  • 無効な場所や存在しないファイルを指すアイコンパスを設定し、ブラウザがマニフェストを拒否する原因になる。
  • マニフェストを生成したが、ページのheadに<link rel="manifest" href="/site.webmanifest">タグを追加するのを忘れ、ブラウザがマニフェストを読み取らない。
  • コンテンツ量の多いサイトでfullscreenやstandalone表示を選択し、ユーザーがナビゲーションにアドレスバーを必要とする場合がある。

検証

  1. Chrome DevTools > Application > Manifestを開き、マニフェストが正しく解析され、アイコンにアクセスできることを確認する。
  2. HTTPS経由でAndroidデバイスのChromeでサイトをテストし、Add to Home Screenプロンプトが表示されることを確認する。

FAQ

WebアプリマニフェストジェネレーターのFAQ

マニフェストファイルはどこに配置すべきですか?

site.webmanifestをサイトルートに配置し、ページのheadで<link rel="manifest" href="/site.webmanifest">から参照します。ファイルはapplication/manifest+json MIMEタイプで提供される必要があります。

通常の静的サイトにマニフェストは必要ですか?

マニフェストはオプションですが推奨されます。ユーザーがサイトをホーム画面に保存したときの外観を制御する唯一の方法です。マニフェストがない場合、ブラウザは一般的なスクリーンショットをアイコンとして使用します。

PWAに必要なアイコンサイズは?

最低でも192x192と512x512のPNGアイコンを提供してください。192x192アイコンはホーム画面用で、512x512アイコンはAndroidのインストール可能なPWAバッジに必要です。

マニフェストを機能させるためにサービスワーカーは必要ですか?

いいえ。ウェブアプリマニフェストはサービスワーカーとは独立して機能します。マニフェストは、ホーム画面に保存されたときのサイトの表示方法(名前、アイコン、テーマカラー、表示モード)を制御します。サービスワーカーは、完全なオフライン機能、バックグラウンド同期、プッシュ通知が必要な場合にのみ必要です。通常の静的サイトにサービスワーカーなしでマニフェストを追加できます。

関連ツール

その他の画像・アセットツール

こちらもお試しください

こちらもお試しください