ブラウザのアドレスバーをブランドカラーに！タグの使い方と実装ポイント

Posted on by

ウェブサイトのユーザーエクスペリエンスを向上させ、ブランドの一貫性を強調する手段として、
<meta name="theme-color"> タグを使用してブラウザのアドレスバーや
ユーザーインターフェースの色をカスタマイズする方法があります。

theme-color とは？

theme-color は、HTML の <meta> 要素の name 属性に指定する値で、
ユーザーエージェント（ブラウザなど）がページやその周辺のユーザーインターフェースの表示を
カスタマイズするための推奨色を示します。
これにより、モバイルブラウザのアドレスバーやステータスバーの色を指定することが可能となります。

対応ブラウザ

theme-color に対応している主なブラウザは以下のとおりです。

Android: Chrome 45 以降
iOS: Safari 15 以降
デスクトップ: Safari 15 以降

ただし、すべてのブラウザが対応しているわけではないため、
ユーザーの使用ブラウザに応じて効果が異なることを考慮する必要があります。

実装方法

<head> タグ内に以下のように記述します：

<meta name="theme-color" content="#4285f4">

これにより、指定したカラーコード（例では #4285f4）が
対応ブラウザのアドレスバーやステータスバーに反映されます。

ダークモードへの対応

ユーザーのデバイス設定に合わせて、ライトモードとダークモードで異なる色を指定することも可能です。

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

これにより、ユーザーのカラースキーム設定に応じて適切な色が適用されます。

注意点

視認性の確保

選択する色は、ユーザーインターフェースの他の要素と調和し、視認性を損なわないように注意が必要です。

ブラウザの制限

一部のブラウザやOSでは、ユーザーの視認性を確保するため、指定した色が無視される場合があります。

SEO への影響

theme-color の設定自体が直接的に SEO に影響を与えることはありませんが、
ユーザーエクスペリエンスの向上に寄与することで、間接的な効果が期待できます。

まとめ

<meta name="theme-color"> タグを適切に活用することで、
ウェブサイトのブランドカラーをユーザーのブラウザに反映させ、統一感のあるデザインを提供できます。
ユーザーエクスペリエンスの向上やサイトの差別化を図るために、ぜひ導入を検討してみてください。