2025年8月17日日本語

Web App Manifest を深く理解して、Progressive Web App (PWA) の可能性を最大限に引き出しましょう。最適なユーザーエクスペリエンスと発見性を実現するための PWA の設定方法を学びます。

Web App Manifest: Progressive Web App 設定ガイド

Web App Manifest は、Web アプリケーションに関する情報をブラウザやオペレーティングシステムに提供する JSON ファイルです。この情報は、アプリがユーザーのデバイスにインストールされる際に使用され、Progressive Web App (PWA) としてどのように表示および動作するのかを定義します。Webサイトをインストール可能なアプリのようなエクスペリエンスに変える青写真と考えてください。適切に設定されたマニフェストは、ユーザーエンゲージメントと発見性にとって非常に重要です。

Progressive Web App (PWA) とは？

Web App Manifest について詳しく説明する前に、PWA とは何であるかをおさらいしましょう。PWA は、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリケーションです。PWA は以下の特徴を持っています。

信頼性：サービスワーカーのおかげで、瞬時に読み込まれ、オフラインまたは低品質のネットワークでも動作します。
高速：スムーズなアニメーションとぎこちないスクロールがなく、ユーザーの操作にすばやく応答します。
魅力的：プッシュ通知やホーム画面へのインストール機能など、没入型のユーザーエクスペリエンスを提供します。

Web App Manifest の役割

Web App Manifest は PWA の要です。ブラウザに次の情報を提供します。

PWA のインストール：ユーザーがデバイスに Web アプリをインストールできるようにし、ホーム画面またはアプリランチャーに追加します。
PWA の正しい表示：アプリの名前、アイコン、テーマカラー、その他の視覚的な側面を定義します。
PWA の動作の制御：アプリの起動方法（例：フルスクリーンモードまたはスタンドアロンウィンドウ）や、オペレーティングシステムとの統合方法を指定します。

`manifest.json` ファイルの作成

Web App Manifest は JSON ファイルで、通常は `manifest.json` という名前です。Web アプリケーションのルートディレクトリに配置する必要があります。基本的な例を次に示します。

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

これらの各プロパティを見ていきましょう。

`name`

Web アプリケーションのフルネーム。この名前は、アプリのインストールを促すメッセージやアプリランチャーに表示されます。

例：

            "name": "Global News App"

`short_name`

アプリの短い名前で、ホーム画面やアプリランチャーなど、スペースが限られている場合に使用されます。簡潔にしてください。

例：

            "short_name": "Global News"

`start_url`

アプリの起動時に読み込まれる URL です。通常は Web アプリケーションのホームページですが、特定のランディングページにすることもできます。

例：

            "start_url": "/"

クエリパラメータを使用して、ユーザーがどのように PWA を起動しているかを追跡することもできます。

            "start_url": "/?utm_source=homescreen"

`display`

起動時のアプリの表示方法を定義します。いくつかのオプションがあります。

`standalone`：アプリは、アドレスバーなどのブラウザ UI 要素のない独自のトップレベルウィンドウで開きます。
`fullscreen`：アプリは画面全体を占め、ステータスバーも非表示になります。
`minimal-ui`：`standalone` と似ていますが、戻るボタンや更新ボタンなど、最小限のブラウザ UI が提供されます。
`browser`：アプリは通常のブラウザタブまたはウィンドウで開きます。

推奨事項： PWA には、通常 `standalone` が最適なオプションです。

例：

            "display": "standalone"

`background_color`

アプリの起動時のスプラッシュスクリーンの背景色です。アプリのアイコンとアプリのコンテンツ間のシームレスなトランジションを提供するために重要です。

例：

            "background_color": "#ffffff"

`theme_color`

Android のステータスバーなど、アプリの UI のスタイリングに使用されるテーマカラーです。この色は、アプリのブランディングと一致している必要があります。

例：

            "theme_color": "#000000"

`icons`

アプリのアイコンをそれぞれ表すオブジェクトの配列です。さまざまなデバイスや解像度でアプリが適切に表示されるように、さまざまなサイズの複数のアイコンを提供する必要があります。

各アイコンのプロパティ：

`src`：アイコン画像の URL。
`sizes`：アイコンの寸法（ピクセル単位）（例："192x192"）。
`type`：アイコン画像の MIME タイプ（例："image/png"）。

推奨アイコンサイズ：

48x48
72x72
96x96
144x144
192x192
512x512

例：

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]

その他のマニフェストプロパティ

上記のプロパティが最も一般的ですが、Web App Manifest は PWA を構成するための他の多くのオプションをサポートしています。

`id`

PWA の一意の識別子です。同じ名前の複数の PWA がある場合に競合を回避するために重要です。

例：

            "id": "com.example.myapp"

`scope`

アプリのナビゲーションスコープを定義します。これにより、Webサイト内のどの URL が PWA の一部と見なされるかが決定されます。ユーザーがスコープ外に移動すると、アプリは通常のブラウザタブで開きます。

例：

            "scope": "/app/"

この例では、`/app/` で始まる URL のみが PWA の一部と見なされます。

`orientation`

アプリの優先画面の向きを指定します。オプションには、`portrait`、`landscape`、`any` などがあります。

例：

            "orientation": "portrait"

`related_applications`

関連するネイティブアプリケーションを定義するオブジェクトの配列です。これにより、PWA を既にインストールしているユーザーにネイティブアプリを宣伝できます。

例：

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]

この例は、Google Play ストアに `com.example.myapp` という ID の関連ネイティブアプリがあることを示しています。

`prefer_related_applications`

ユーザーが PWA ではなく、関連するネイティブアプリケーションをインストールするように促すかどうかを示すブール値。

例：

            "prefer_related_applications": true

`categories`

アプリのカテゴリを表す文字列の配列です。これにより、ユーザーがアプリストアまたは検索結果でアプリを見つけるのに役立ちます。

例：

            "categories": ["news", "information"]

`shortcuts`

ユーザーがホーム画面のアプリアイコンからアクセスできるショートカットのリストを定義します。これにより、ユーザーはアプリ内で一般的なタスクをすばやく実行できます。

例：

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]

Web アプリへのマニフェストのリンク

`manifest.json` ファイルを作成したら、HTML の `` セクションに `` タグを追加して、Web アプリケーションにリンクする必要があります。

            <link rel="manifest" href="/manifest.json">

マニフェストの検証

`manifest.json` ファイルが正しくフォーマットされており、必要なすべてのプロパティが含まれていることを確認するために、検証することが重要です。 JSONLint や Chrome DevTools などのオンラインツールを使用して、マニフェストを検証できます。

PWA のテスト

マニフェストを作成してリンクしたら、さまざまなブラウザやデバイスで PWA をテストして、期待どおりに動作することを確認する必要があります。Chrome DevTools（Application -> Manifest）を使用して、マニフェストを検査し、問題を診断します。

Web App Manifest 設定のベストプラクティス

Web App Manifest を構成する際に留意すべきベストプラクティスを次に示します。

必要なすべてのプロパティを提供する： `name`、`short_name`、`start_url`、`display`、`background_color`、`theme_color`、`icons` などの必須プロパティをすべて含めていることを確認します。
適切なアイコンサイズを使用する： さまざまなデバイスや解像度をサポートするために、さまざまなサイズの複数のアイコンを提供します。
適切な表示モードを選択する： アプリのユーザーエクスペリエンスに最適な `display` モードを選択します。通常は `standalone` が最適なオプションです。
マニフェストを検証する： `manifest.json` ファイルが正しくフォーマットされていることを確認するために、常に検証します。
PWA をテストする： さまざまなブラウザやデバイスで PWA をテストして、期待どおりに動作することを確認します。
SEO に最適化する： `name`、`short_name`、`description` に関連キーワードを使用して、アプリの発見性を向上させます。
ローカライゼーションを検討する： アプリがグローバルなオーディエンスを対象としている場合は、さまざまな言語のさまざまな名前、説明、アイコンを使用して、マニフェストのローカライズされたバージョンを提供することを検討してください。

適切に構成された Web App Manifest の例

人気のある PWA からの、適切に構成された Web App Manifest の例をいくつか示します。

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}

Web App Manifest の将来

Web App Manifest は進化し続ける標準であり、新しい機能と機能が随時追加されています。PWA が最新のテクノロジーを最大限に活用していることを確認するために、W3C からの最新の更新情報と推奨事項に注意してください。

結論

Web App Manifest は、すべての PWA の不可欠なコンポーネントです。マニフェストを適切に構成することにより、シームレスで魅力的なユーザーエクスペリエンスを提供し、Web アプリをネイティブアプリケーションのように感じることができます。このガイドでは、Web App Manifest のプロパティ、ベストプラクティス、例など、Web App Manifest の包括的な概要を示しました。これらのガイドラインに従うことで、PWA の可能性を最大限に引き出し、世界中のユーザーに優れたユーザーエクスペリエンスを提供できます。

Web App Manifest の力を活用し、Webサイトをインストール可能なアプリのようなエクスペリエンスに変えて、ユーザーを喜ばせ、エンゲージメントを促進してください。