meta theme-color の解説

1. 役割

ページを開いたときに、ブラウザの アドレスバーやタブの背景色 を指定色に変える。
スマホの「ホーム画面に追加」時の表示色にも影響する（PWA風の体験を演出できる）。

2. 基本の書き方

<meta name="theme-color" content="#ffffff">

content に CSS カラー値（HEX / RGB / hsl / 名前色など）を指定。
推奨は HEX（#RRGGBB）。

3. 複数スキーム対応（2025年のベストプラクティス）

OSやブラウザがダークモードのときは違う色にしたい → media 属性を併用できます。

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)">

OS設定に応じて色を切り替え可能。
Android Chrome / Safari / Edge など主要ブラウザが対応。

4. 効果が出る場所

Android Chrome: アドレスバーやタスク切り替え画面のバーの色
iOS Safari: 近年サポートされ、タブ背景などが変化
デスクトップ Chrome/Edge: タブ色やタイトルバーに反映（テーマ依存）
PWA（インストール時）: スプラッシュ画面やウィンドウ枠の色

5. 注意点

背景色と揃えるのが基本 ページの <body> 背景と大きく違う色を設定すると「読み込み中に色が変わる」ので不自然。
1つだけだとライト/ダークで違和感が出る 必要なら media="(prefers-color-scheme: …)" を使って切替える。
SEOには無関係 完全に見た目やユーザー体験のための設定。

6. まとめ

<meta name="theme-color"> は ブラウザUIの色を決めるタグ。
SEO効果はないが、UI一体感を演出できる → ブランド感UP。
2025年の標準はライト/ダーク両方指定。