ブラウザのアドレスバーのテーマをプログレッシブ ウェブアプリ(PWA)のブランドカラーに合わせると、より没入感のあるユーザー エクスペリエンスを実現できます。
ブラウザの互換性
2022 年 12 月現在、ブラウザのアドレスバーのテーマ設定は、Android ベースのブラウザ、Google Chrome、Microsoft Edge でサポートされています。更新については、ブラウザの互換性をご覧ください。
Lighthouse テーマの色の監査が失敗する仕組み
Lighthouse では、アドレスバーにテーマが適用されないページにフラグが付けられます。
Lighthouse で、ページの HTML に theme-color
メタタグと、ウェブアプリ マニフェストの theme_color
プロパティが見つからない場合、監査は不合格となります。
なお、Lighthouse では、CSS の色の値が有効かどうかはテストされません。
アドレスバーのテーマカラーを設定する方法
ステップ 1: ブランディングするすべてのページに theme-color
メタタグを追加する
theme-color
メタタグを使用すると、ユーザーが通常のウェブページとしてサイトにアクセスしたときに、アドレスバーがブランド名で表示されるようになります。タグの content
属性を有効な CSS の色値に設定します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
theme-color
メタタグについて詳しくは、Google の Android 向け Chrome 39 での theme-color
のサポートをご覧ください。
ステップ 2: ウェブアプリ マニフェストに theme_color
プロパティを追加する
ウェブアプリ マニフェストの theme_color
プロパティを使用すると、ユーザーがホーム画面から PWA を起動したときにアドレスバーにブランドが表示されます。theme-color
メタタグとは異なり、マニフェストで一度定義するだけで済みます。プロパティに有効な CSS カラー値を設定します。
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)