ウェブアプリマニフェスト(manifest.json)の設定項目まとめ

ウェブアプリマニフェスト(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でテーマカラーを設定する - ★★

各項目の詳細な説明は下記のページをどうぞ。

ウェブアプリマニフェスト | MDN

ケースごとのオススメ設定項目

ブログ / ホームページ向けのマニフェスト

オンライン前提のブログやホームページであれば、最低限のマニフェスト設定があれば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)の設定項目まとめとケースごとのおすすめ設定をみてきました。

しっかり設定することで、ブックマークやホームに追加してもらう時のイメージがかなり変わってくるので、ぜひ設定してみてください。