スマホのChromeでネットサーフィンしているとたまに見かけるのがステータスバーの色がカスタマイズされているWEBサイトです。ステータスバーは通知領域のことで、Android端末画面の一番上にあたる部分です。
これは2014年にGoogleが提唱したマテリアルデザインによる仕様のようで、アプリにもこの仕様がすでに対応されています。
関連記事: 「Android版・Twitter」マテリアルデザインに対応する！
photo by Ashwin Kamath
ステータスバーの色を変える
新しいデザインなら試してみる価値あり？という考えの元、当サイトにもまお試しでそのマテリアルデザインを取り入れることに。
ステータスバーの色を変更する方法は簡単です。「theme-color」タグを使用して<head> ～ </head>の間に以下のコードを記述するだけ。
// 赤色 <meta name="theme-color" content="#ff0000">
「content」でステータスバーの色にしたい色を指定します。たったこれだけで最新のマテリアルデザインを取り入れる事ができるわけです。
ただし、残念ながら全ての環境に対応しているわけではないようです。以下2つの条件をクリアしているユーザー環境であれば表示されることとなります。
- 「Android」Google Chrome 39 以降～
- Android 5.0 Lollipop 以降～
デザイン例
ステータスバーの色を変えることでどのように変化するのか、イメージを見てみましょう。デフォルトは黒ですが、その色がお好みの色に変化するわけです。
青・赤・茶・緑で試してみました。
▼デフォルト
▼青
▼赤
▼茶
▼緑
上部にあるステータスバーの色を変えることができるというだけですが、ご覧の通り色を変えるだけでこんなにもイメージを変えることができます。サイトのイメージ色を持っている場合は是非取り入れたいデザインです。
まとめ
このステータスバーの色が変わるという仕様は、しっくりこずまだ違和感があると感じているユーザーがいるかもしれません。デフォルトの黒色を見慣れていますからね。
ただ、もう既にYouTubeやGmailの色は変わっています。YouTubeやGmailのユーザー数は相当数なのでそのうちステータスバーの色に見慣れてくるユーザーが増えると予想できるでしょう。
マテリアルデザインが様々なデバイス・WEB・アプリ間の統一がテーマみたいなので、試してみる価値はあるかと。簡単なコードで設定できますし。
また、見方によっては一番上の色と統一されているということでスマホの全体画面が大きく感じるという効果もあるかと思います。数年後にはステータスバーの色を変えるというのがメディアサイトやサイト運営者の間で一般的になっているかもしれません。