アプリのテーマと背景色をカスタマイズする
プログレッシブウェブアプリ (PWA) を構築する際には、アプリのコンテンツの外観だけでなく、アプリがインストールされた後のユーザーの端末上でのアプリの表示方法も考慮することが重要です。
アプリが表示されるウィンドウをカスタマイズするには、 theme_color と background_color というウェブアプリマニフェストのメンバーを使用します。
PWA マニフェストで theme_color と background_color メンバーを定義することで、ユーザーにより洗練された体験を提供できます。これらの小さな詳細が、 PWA を OS ネイティブアプリのような感覚に近づけ、ユーザーにとってより親しみやすいものにするのに役立ちます。
アプリウィンドウの背景色のカスタマイズ
background_color マニフェストメンバーは、アプリのスタイルシートが読み込まれる前にアプリケーションウィンドウに表示される色を定義します。
この色はスタイルシートが読み込まれる前に表示されるため、その値をアプリケーションのスタイルシート内の background-color プロパティと同じ色値に設定してください。これにより、ウェブアプリケーションの起動とコンテンツの読み込みの間でスムーズな視覚的な移行が確保されます。
値は有効な CSS の <color> です。このウェブアプリのマニフェストファイルの例では、アプリケーションの背景色は名前付き色である peachpuff に設定されています。
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "256x256",
"type": "image/webp"
}
],
"display": "standalone",
"background_color": "peachpuff"
}
このアプリケーションは、 body 要素の背景色に同じ色を適用するスタイルシートも読み込みます。
body {
background-color: peachpuff;
}
次のスクリーンショットは、上記のコードが動作している様子を示しています。このコードを使用する PWA は Windows にインストールされており、スクリーンショットはアプリの内容が読み込まれる前のアプリケーションウィンドウの表示状態を示しています。
テーマ色の定義
PWA マニフェスト内の theme_color メンバーは、アプリケーション内で使用されるオペレーティングシステムとブラウザーの UI 要素の既定の色を定義します。
端末、オペレーティングシステム、ブラウザーが異なると、theme_color メンバーが適用される方法も代わります。
- モバイル端末では、テーマカラーがステータスバーに適用されます。
- デスクトップオペレーティングシステムでは、テーマカラーはスタンドアロンアプリウィンドウのタイトルバーをカスタマイズするために使用されます。
theme_color は、 PWA の全体的なデザインとブランドイメージに調和し、さまざまな端末やプラットフォームで一貫したユーザー体験を提供できるように、適切に選択してください。
background_color と同様に、任意の <color> 値が有効です。このウェブアプリマニフェストファイルの例では、 theme_color は rgb(255 218 185) に設定されており、これは peachpuff の RGB 相当値です。
{
"name": "My app",
"start_url": "/",
"icons": [
{
"src": "icon.webp",
"sizes": "48x48",
"type": "image/webp"
}
],
"display": "standalone",
"background_color": "peachpuff",
"theme_color": "rgb(255 218 185)"
}
次のスクリーンショットは、アプリが Windows にインストールされた際に上記のコードが動作する様子です。この際、 theme_color マニフェストメンバーがタイトルバーの色として使用されています。
theme-color のメタ要素の値との関係
theme-color 属性値は、 name 属性を持つ <meta> 要素を使用して、各ウェブページごとのテーマカラーを定義できます。これは、アプリ全体で一度だけグローバルに定義するtheme_color マニフェストメンバーとは異なります。
両方が設定されている場合、theme-color メタ要素の値が theme_color マニフェストメンバーの値を上書きします。これにより、アプリ全体でグローバルな色を定義し、特定のページで上書きすることが可能です。
一部のブラウザー、たとえば macOS の Safari や Android の Chrome などでは、 theme-color メタ要素の値がブラウザーの UI のスタイル設定にも使用されます。