ブラウザのアドレスバーをブランドカラーに合わせたテーマに設定する のプログレッシブ ウェブアプリ(PWA)を使用すると、没入感の高いユーザー エクスペリエンスを実現できます。
ブラウザの互換性
2022 年 12 月より、ブラウザのアドレスバーのテーマ設定が Android ベースのブラウザ、Google Chrome、Microsoft Edge です。詳しくは、 ブラウザの互換性 をご覧ください。
Lighthouse テーマカラーの監査が失敗する仕組み
灯台 アドレスバーにテーマが適用されていないページにフラグを設定します。
![Lighthouse の監査で、アドレスバーのテーマがページの色に設定されていないと表示される](https://developer.chrome.com/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=7&hl=ja)
Lighthouse で theme-color
メタタグがページの
ウェブアプリ マニフェストの HTML と theme_color
プロパティ。
なお、Lighthouse では、それらの値が有効な CSS の色値であるかどうかはテストされません。
アドレスバーのテーマの色を設定する方法
ステップ 1: ブランディングするすべてのページに theme-color
メタタグを追加する
theme-color
メタタグを使用すると、次の場合にアドレスバーをブランド化できます。
ユーザーが通常のウェブページとしてサイトにアクセスします。
タグの content
属性に、有効な CSS の色値を設定します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Google の theme-color
メタタグの詳細
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)