ウェブアプリマニフェスト（manifest.json）の設定項目まとめ
WEBZINNEトピックス編集部公開日：2020年5月26日
ウェブアプリマニフェスト（manifest.json）の設定項目をまとめました。PWAアプリなど、ケースごとのオススメ設定もピックアップしています。
ウェブアプリマニフェスト（manifest.json）の項目一覧
ウェブアプリマニフェスト（manifest.json）の基本的な設定項目は下記の通りになっています。
| キー | バリュー | 説明 | 必須 | 優先 |
|---|---|---|---|---|
| background_color | CSSカラー | サイトのCSSが読み込まれるまでの背景カラー | - | ★★★ |
| categories | 文字列 | W3CのWebサイトカテゴリに合わせた値 | - | ★ |
| description | 文字列 | サイトの説明文。 | - | ★★★ |
| dir | auto ltr rtl |
manifestの文字の読む方向 | - | ★ |
| display | fullscreen standalone minimal-ui minimal-ui |
ブラウザの推奨表示モード。PWAでは表示モードの指定 | - | ★★★ |
| iarc_rating_id | 文字列 | IARCの推奨年齢認証コード | - | ★ |
| icons | 配列 | アイコンファイルの指定 | ● | ★★★ |
| lang | 文字列 | Webサイトの表示言語指定 | - | ★ |
| name | 文字列 | Webサイトの名前 | ● | ★★★ |
| orientation | any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary |
Webサイトのデフォルトの画面向き | - | ★★ |
| prefer_related_applications | true or false | related_applicationsで設定したアプリで開くことを推奨するか | - | ★★ |
| related_applications | 配列 | Webサイトの代替となるネイティブアプリの指定 | - | ★★ |
| scope | 文字列 | ナビゲーションの制限。指定することでパスがスコープされる | - | ★ |
| screenshots | 配列 | PWAのショーケース向けのスクリーンショット | - | ★★ |
| short_name | 文字列 | Webサイトの名前の短縮版。アプリやショートカットを見やすくできる | - | ★★★ |
| start_url | 文字列 | ショートカットなどから起動した時のデフォルトパス | - | ★★ |
| theme_color | CSSカラー | 対応OSでテーマカラーを設定する | - | ★★ |
各項目の詳細な説明は下記のページをどうぞ。
ケースごとのオススメ設定項目
ブログ / ホームページ向けのマニフェスト
オンライン前提のブログやホームページであれば、最低限のマニフェスト設定があればOKでしょう。
必須項目プラス、Webサイトをブックマークしてもらった時のことを考慮した項目を設定するのがオススメです。
| キー | バリュー | 説明 | 必須 | 優先 |
|---|---|---|---|---|
| background_color | CSSカラー | サイトのCSSが読み込まれるまでの背景カラー | - | ★★★ |
| description | 文字列 | サイトの説明文。 | - | ★★★ |
| icons | 配列 | アイコンファイルの指定 | ● | ★★★ |
| name | 文字列 | Webサイトの名前 | ● | ★★★ |
| scope | 文字列 | ナビゲーションの制限。指定することでパスがスコープされる | - | ★ |
| theme_color | CSSカラー | 対応OSでテーマカラーを設定する | - | ★★ |
アプリがあるホームページ
もし、iOSやAndroidなどのネイティブアプリも公開しているのであれば、マニフェストの基本をベースに「related_applications」関連を追加すると良いでしょう。
| キー | バリュー | 説明 | 必須 | 優先 |
|---|---|---|---|---|
| background_color | CSSカラー | サイトのCSSが読み込まれるまでの背景カラー | - | ★★★ |
| description | 文字列 | サイトの説明文。 | - | ★★★ |
| icons | 配列 | アイコンファイルの指定 | ● | ★★★ |
| name | 文字列 | Webサイトの名前 | ● | ★★★ |
| scope | 文字列 | ナビゲーションの制限。指定することでパスがスコープされる | - | ★ |
| theme_color | CSSカラー | 対応OSでテーマカラーを設定する | - | ★★ |
| prefer_related_applications | true or false | related_applicationsで設定したアプリで開くことを推奨するか | - | ★★ |
| related_applications | 配列 | Webサイトの代替となるネイティブアプリの指定 | - | ★★ |
PWA(プログレッシブ・ウェブ・アプリ)
Service Workerを内包するPWAの場合は、必須項目がグッと増えます。
特に、ネイティブアプリと同列で使われることを考えると、ブラウザ関連のほとんど全ての項目は設定しておきましょう。
| キー | バリュー | 説明 | 必須 | 優先 |
|---|---|---|---|---|
| background_color | CSSカラー | サイトのCSSが読み込まれるまでの背景カラー | - | ★★★ |
| description | 文字列 | サイトの説明文。 | - | ★★★ |
| dir | auto ltr rtl |
manifestの文字の読む方向 | - | ★ |
| display | fullscreen standalone minimal-ui minimal-ui |
ブラウザの推奨表示モード。PWAでは表示モードの指定 | - | ★★★ |
| icons | 配列 | アイコンファイルの指定 | ● | ★★★ |
| name | 文字列 | Webサイトの名前 | ● | ★★★ |
| orientation | any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary |
Webサイトのデフォルトの画面向き | - | ★★ |
| short_name | 文字列 | Webサイトの名前の短縮版。アプリやショートカットを見やすくできる | - | ★★★ |
| start_url | 文字列 | ショートカットなどから起動した時のデフォルトパス | - | ★★ |
| theme_color | CSSカラー | 対応OSでテーマカラーを設定する | - | ★★ |
なお、これ以外にもPWAアプリのための「share_target」という項目もあります。
share_targetを登録することで、OSネイティブのシェア・ダイアログにPWAを表示させることができるので、PWA側に受け取る機能があるのであれば、設定しておきましょう。
PWAアプリをOSのシェアダイアログの一覧に登録させてデータをシェアする方法
ウェブアプリマニフェスト（manifest.json）の設定項目まとめとケースごとのおすすめ設定をみてきました。
しっかり設定することで、ブックマークやホームに追加してもらう時のイメージがかなり変わってくるので、ぜひ設定してみてください。