アイコンとテーマの色を定義する
Windows にインストールされている PWA は、オペレーティング システム (OS) に表示される方法でカスタマイズできます。 PWA では、タイトル バーのアイコンのセットとテーマの色を定義できます。
アイコンを定義する
Windows では、アプリはアイコンによってユーザーに認識されます。 タスク バー、スタート メニュー、その他の場所 (システム設定など) にアイコンが表示されます。
PWA は、オペレーティング システムがこれらのさまざまな場所にアイコンを表示するために使用する必要があるイメージ ファイルを構成できます。 コンテキストに応じて、OS が選択する複数のイメージを提供できます。
Web アプリ マニフェスト ファイルでは、アプリ アイコンはメンバーで icons 定義されます。
{
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
配列内のicons各アイコンには、少なくとも と sizes プロパティがsrc付属している必要があります。 アイコンには、 プロパティと purpose プロパティを指定typeすることもできます。
| プロパティ | 説明 |
|---|---|
src |
イメージ ファイルへのパス。アプリのルート フォルダーからの相対パス、または絶対 URL を指定できます。 |
sizes |
対応するイメージを使用できるサイズのスペース区切りのリスト。 |
type |
OS がイメージの種類をすばやく検出するためのオプションのヒント。 |
purpose |
OS がコンテキストに応じて適切なアイコン イメージを選択するのに役立つオプションのヒント。 値には、 monochrome、、 maskableまたは を指定 anyできます。 |
アイコンの画像サイズ
Web アプリ マニフェストで特定のディメンションを持つイメージを提供することで、Windows で PWA を強化できます。 次のいずれかのオプションを選択することをお勧めします。
レベル 1: (基本イメージのサポート: 512x512) これは、不足しているイメージの生成元となる基本イメージです。
レベル 2: (タイル) このレベルでは、Web アプリ マニフェストには、既定の (1x) 表示スケールのタイル イメージが含まれています。 各画像は PNG 形式で、目的が設定されている
any必要があります。 推奨される画像とサイズの一覧を次に示します。- 44x44 - アプリ アイコン
- 71x71 - 小さいタイル
- 150x150 - 中タイル
- 310x150 - ワイド タイル
- 310x310 - 大きなタイル
- 50x50 - ストア ロゴ
- 620x300 - スプラッシュ画面
レベル 3: (表示スケールを持つタイル) このレベルでは、Web アプリ マニフェストには、すべての Windows ディスプレイ スケール サイズのタイル イメージが含まれている必要があります。 表示スケールは、Windows のユーザー構成です ([設定] [表示>スケール]> に移動して変更できます)。 Web アプリ マニフェスト アイコンには、次のディメンションを持つ画像が含まれている必要があります。
- 44x44 - アプリ アイコン
- 55x55 - アプリ アイコン 1.25x ディスプレイ スケール
- 66x66 - アプリ アイコン 1.5x ディスプレイ スケール
- 88x88 - アプリ アイコン 2x ディスプレイ スケール
- 176x176 - アプリ アイコン 4x ディスプレイ スケール
- 71x71 - 小さいタイル
- 89x89 - 小さなタイル 1.25x ディスプレイ スケール
- 107x107 - 小さなタイル 1.5x ディスプレイ スケール
- 142x142 - 小さなタイル 2x ディスプレイ スケール
- 284x284 - 小さなタイル 4x ディスプレイ スケール
- 150x150 - 中タイル
- 188x188 - 中タイル 1.25x ディスプレイ スケール
- 225x225 - 中タイル 1.5x ディスプレイ スケール
- 300x300 - 中タイル 2x ディスプレイ スケール
- 600x600 - 中タイル 4x ディスプレイ スケール
- 310x150 - ワイド タイル
- 388x188 - ワイド タイル 1.25x ディスプレイ スケール
- 465x225 - ワイドタイル1.5xディスプレイスケール
- 620x300 - ワイド タイル 2x ディスプレイ スケール
- 1240x600 - ワイドタイル4xディスプレイスケール
- 310x310 - 大きなタイル
- 388x388 - 大きなタイル 1.25x ディスプレイ スケール
- 465x465 - 大きなタイル 1.5x ディスプレイ スケール
- 620x620 - 大きなタイル 2x ディスプレイ スケール
- 1240x1240 - 大きなタイル 4x ディスプレイ スケール
- 50x50 - ストア タイル
- 63x63 - タイル 1.25x ディスプレイ スケールを格納する
- 75x75 - ストア タイル 1.5x ディスプレイ スケール
- 100x100 - ストア タイル 2x ディスプレイ スケール
- 200x200 - ストア タイル 4x ディスプレイ スケール
- 620x300 - スプラッシュ画面
- 775x375 - スプラッシュスクリーン1.25xディスプレイスケール
- 930x450 - スプラッシュ スクリーン 1.5x ディスプレイ スケール
- 1240x600 - スプラッシュ スクリーン 2x ディスプレイ スケール
- 2480x1200 - スプラッシュスクリーン4xディスプレイスケール
レベル 4 (タイル、表示スケール、ターゲット サイズ) このレベルでは、タスク バー、スタート メニュー、タスク マネージャー、Alt + Tab タスク スイッチャーなど、Windows のさまざまなサーフェスに表示するための表示スケールとターゲット サイズ イメージを含むタイルの画像を提供します。 これにより、ユーザーに最適なエクスペリエンスが提供されますが、開発者の労力も最も必要になります。 Web アプリ マニフェスト アイコンには、次のディメンションを持つ画像が含まれている必要があります。
- 44x44 - アプリ アイコン
- 55x55 - アプリ アイコン 1.25x ディスプレイ スケール
- 66x66 - アプリ アイコン 1.5x ディスプレイ スケール
- 88x88 - アプリ アイコン 2x ディスプレイ スケール
- 176x176 - アプリ アイコン 4x ディスプレイ スケール
- 71x71 - 小さいタイル
- 89x89 - 小さなタイル 1.25x ディスプレイ スケール
- 107x107 - 小さなタイル 1.5x ディスプレイ スケール
- 142x142 - 小さなタイル 2x ディスプレイ スケール
- 284x284 - 小さなタイル 4x ディスプレイ スケール
- 150x150 - 中タイル
- 188x188 - 中タイル 1.25x ディスプレイ スケール
- 225x225 - 中タイル 1.5x ディスプレイ スケール
- 300x300 - 中タイル 2x ディスプレイ スケール
- 600x600 - 中タイル 4x ディスプレイ スケール
- 310x150 - ワイド タイル
- 388x188 - ワイド タイル 1.25x ディスプレイ スケール
- 465x225 - ワイドタイル1.5xディスプレイスケール
- 620x300 - ワイド タイル 2x ディスプレイ スケール
- 1240x600 - ワイドタイル4xディスプレイスケール
- 310x310 - 大きなタイル
- 388x388 - 大きなタイル 1.25x ディスプレイ スケール
- 465x465 - 大きなタイル 1.5x ディスプレイ スケール
- 620x620 - 大きなタイル 2x ディスプレイ スケール
- 1240x1240 - 大きなタイル 4x ディスプレイ スケール
- 50x50 - ストア タイル
- 63x63 - タイル 1.25x ディスプレイ スケールを格納する
- 75x75 - ストア タイル 1.5x ディスプレイ スケール
- 100x100 - ストア タイル 2x ディスプレイ スケール
- 200x200 - ストア タイル 4x ディスプレイ スケール
- 620x300 - スプラッシュ画面
- 775x375 - スプラッシュスクリーン1.25xディスプレイスケール
- 930x450 - スプラッシュ スクリーン 1.5x ディスプレイ スケール
- 1240x600 - スプラッシュ スクリーン 2x ディスプレイ スケール
- 2480x1200 - スプラッシュスクリーン4xディスプレイスケール
- 16x16 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 20x20 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 24x24 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 30x30 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 32x32 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 36x36 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 40x40 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 44x44 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 48x48 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 60x60 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 64x64 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 72x72 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 80x80 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 96x96 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
- 256x256 - タスク バー、スタート メニュー、タスク マネージャーのターゲット サイズ
イメージ レベルの概要
たとえば、使用可能な領域に応じてアプリ アイコンに異なるコンテンツがどのように表示されるかを考えてみましょう。
- 小さい画面: タスク バーのアプリ アイコン (44 x 44) で、小さな省略形のロゴが表示されます。
- 大きな画面: スタート メニューの中タイル (150x150) で、アプリの完全なロゴが表示されます。
- 広い画面: スタート メニューの [ワイド] タイルで、より明確なアプリ アイコンが表示されます。
アイコンの内容がどのように変化したかに注目してください。 これは、より高いレベルのアイコンサポートを使用する場合にのみ可能です。 開発者は、Windows ユーザーに最適なエクスペリエンスを提供するために、より高いレベルを選択することをお勧めします。
アイコンの説明
次に、各アプリ アイコンと Windows に表示される場所の説明を示します。
スタート メニュー、タスク バー、またはタスク マネージャーに表示される通常のアプリ アイコン。
- 44x44
- 55x55 (1.25x スケール)
- 66x66 (1.5x スケール)
- 88x88 (2x スケール)
- 176x176 (4x スケール)
ユーザーがアプリのタイルを小さなサイズに設定すると、スタート メニューに小さなタイルが表示されます。
- 71x71
- 89x89 (1.25x スケール)
- 107x107 (1.5x スケール)
- 142x142 (2x スケール)
- 284x284 (4x スケール)
ユーザーがアプリのタイルを中程度のサイズに設定すると、スタート メニューに中タイル アイコンが表示されます。
- 150x150
- 188x188 (1.25x スケール)
- 225x225 (1.5x スケール)
- 300x300 (2x スケール)
- 600x600 (4x スケール)
ユーザーがアプリのタイルをワイド サイズに設定すると、スタート メニューにワイド タイル アイコンが表示されます。
- 310x150
- 388x188 (1.25x スケール)
- 465x225 (1.5x スケール)
- 620x300 (2x スケール)
- 1240x600 (4x スケール)
ユーザーがアプリのタイルを大きなサイズに設定すると、大きなタイル アイコンがスタート メニューに表示されます。
- 310x310
- 388x388 (1.25x スケール)
- 465x465 (1.5x スケール)
- 620x620 (2x スケール)
- 1240x1240 (4x スケール)
ストア ロゴ アイコンは、アプリ インストーラー、Windows パートナー センター、ストアの [アプリのレポート] オプション、ストアの [レビューの書き込み] オプションに表示されます。
- 50x50
- 63x63 (1.25x スケール)
- 75x75 (1.5x スケール)
- 100x100 (2x スケール)
- 200x200 (4x スケール)
スプラッシュ画面アセットは、アプリのスプラッシュ画面として表示されます。 現在、クラシック パッケージでのみサポートされています。 将来的には、最新のホステッド アプリ パッケージのサポートも追加される可能性があります。
- 620x300
- 775x375 (1.25x スケール)
- 930x450 (1.5x スケール)
- 1240x600 (2x スケール)
- 2480x1200 (4x スケール)
ターゲット サイズの画像
上記の標準的なスケール ファクター サイズに加えて、"ターゲット サイズ" 資産を作成することもお勧めします。 これらのアセットは、400 などの特定のスケール ファクターではなく、16 ピクセルなどの特定のサイズをターゲットとするため、ターゲット サイズと呼ばれます。 ターゲット サイズアセットは、スケーリング プラトー システムを使用しない Windows サーフェス用です。
たとえば、[ アプリ & 機能 ] の [Windows] 設定では、特定のサイズのアプリ アイコンが使用されます
- 16x16 (推奨)
- 20x20
- 24x24 (推奨)
- 30x30
- 32x32 (推奨)
- 36x36
- 40x40
- 48x48 (推奨)
- 60x60
- 64x64
- 72x72
- 80x80
- 96x96
- 256x256 (推奨)
テーマの色を選択する
Windows では、PWA には独自のアプリケーション ウィンドウがあり、タイトル バーにはアプリの名前が含まれており、システムはアイコンを 閉じ、 最大化し、 最小化 します。
PWA によって作成された Web コンテンツは、テーマの色でカスタマイズできるタイトル バー領域を除き、ウィンドウのサーフェス領域全体を塗りつぶします。
次の図は、テーマの色を使用していない場合と、アプリのメイン色に一致するテーマの色を使用している場合の PWA のタイトル バーの外観を示しています。
テーマの色を定義するには、Web アプリ マニフェスト メンバーを使用します theme_color 。
{
"theme_color": "#0d4c73"
}
個々の Web ページでは、メタ タグを使用してテーマの色をtheme-color定義することもできます。 このメタ タグがページに存在する場合、定義された色は Web アプリ マニフェストで見つかった色をオーバーライドします。
注:
ウィンドウ コントロール オーバーレイ機能を使用して、タイトル バー領域にアプリのコンテンツを表示できます。