2.IDEA

JP only

【デモあり】webデザインにおけるグレー(灰色)の上手な使い方

私は「webデザインで無くなったら一番困る色は?」と聞かれたら「グレー」と答えるくらい、webデザインにおけるグレーの役割は大きいと思っています。
デザイン上級者であればあるほど、グレーの使い方に気を配っているように思います。逆にグレーの使い方が悪いと、デザイン全体がしまらなくなってしまいます。

今回はそんなグレーについて、「大手webサイト・サービスでどういう使われ方をしているか」をベースに、カラーコードごとに話します。

大手のサイト・サービス風のデザインが確認できるデモはこちらです

■ #000000(真っ黒)

webデザインにおいて真っ黒が使われることは稀です。普段使っているサイトの黒に見えるテキストも、ほとんどが黒に近いグレーです。
理由は、使ってみたらわかりますが、ディスプレイが明るいとチカチカするし、デザイン的に前に出てきて(主張しすぎて)しまいます。

このカラーコードが使われている箇所は以下です(※私が見つけた範囲です、次からこの一文は割愛します)。

サイト場所カラーコード
amazonテキストや見出し#000000
youtube動画ページ内の動画タイトル:ホバー時#000000

■ #222222■ #333333付近(見た目は黒に見える)

この範囲が、多くのwebサイト・サービスの「メインコンテンツの文字色」で使われている色です。

普通のテキストの色として使用されるので、この色のテキストにリンクが貼られることは稀ですが(リンクだと判別できないため)、youtubeではサイドバーのナビゲーションやフッターで使用されています。ナビゲーションやフッターにあるテキストは、色に関係なくリンクだと判別できるからですかね。

サイト場所カラーコード
googleヘッダータブ(ウェブ、画像などを切り替える部分):ホバー時#222222
「他のキーワード」「もしかして...」など検索のガイドとなるテキスト
ナレッジグラフ(人物、場所などを検索したときに右に出るやつ)
facebookテキスト#141823
twitterテキスト#292F33
youtube動画ページ内の動画タイトル#222222
トップページのサイドバーナビゲーション(クリック可能)
フッターのメインリンク(クリック可能)#333333
ユーザ名(クリック可能)
動画説明欄のテキスト
動画ページ内のタブ:アクティブ時(クリック可能)
amazonレビュー欄のテキスト#333333
bootstrapbodyのcolor#333333

■ #444444■ #555555付近(黒ではないなとわかる)

一般的な(?)ブログはこの辺りをメインの文字色にしている気がします。

googleの検索結果の説明文が#222(メインコンテンツ用の色)ではなくこの範囲にあるのが特徴的です。
googleのサービスは「ユーザーが求めている情報やサイトやを提供すること」であるため、その「補助」となる説明文が#222になるのは筋違い、という解釈ができます。その証拠に、「ねこ」と打ったときに右に出てくるナレッジグラフの文字色は、「ユーザーが求めているもの」であるため#222になっています。

サイト場所カラーコード
google検索結果の説明文#545454
youtube再生数#555555
bootstrapformのcolorなど#555555

■ #666666■ #999999付近(灰色に見える)

「見える必要はあるが注意を引かなくていい、読まなくていい」箇所に使われます。

具体的には、補足的な情報(日付、著者など)や、どうでもいいリンク(フッターリンクなど)、ナビゲーションの非アクティブ時などです。

また、メインテキストとは違う色であるため、リンクだと判別することが容易になります。

※追記:弱視の利用者、高齢者も利用するサイトの場合、背景と文字色のコントラストは一定以上必要です。以下のサイトで、文字と背景のコントラストを計算するブークマークレットが提供されています。白の背景に#828282以上で"fair"、#464646以上で"OK"でした。
Color Checker Bookmarklets

サイト場所カラーコード
googleヘッダータブ(クリック可能)#666666
フッターリンク(クリック可能)#777777
○○を報告(クリック可能)#808080
検索数
日付・時間
facebook投稿時間(クリック可能)#898F9C
フッター(プライバシーなどがあるところ)(クリック可能)
twitter各項目の見出し#66757F
ツイート数, フォロー数の見出し(クリック可能)#8899A6
フッター(プライバシーなどがあるところ)(クリック可能)
youtubeフッターサブリンク(クリック可能)#666666
動画一覧での動画投稿日#999999
動画ページ内のタブ(クリック可能)
動画ページ内のライセンス・URL(クリック可能)・カテゴリ(クリック可能)
動画ページでの関連動画の作成者・再生回数(クリック可能)
amazon商品のジャンル#666666
注文画面内の返品についての説明#888888
フッターのコピーライト#999999
bootstrapsmallのcolor, .text-mutedなど#999999

■ #AAAAAA■ #BBBBBB付近(薄い灰色)

最も使用率の低い範囲かと思います(私は勝手に「デッドレンジ」と読んでいます)。
テキストに使うと薄くて見え辛いし、背景やボーダーに使おうとすると濃すぎてチープに見えます。

辛うじて、一カ所だけ見つけることができました(笑)

サイト場所カラーコード
bootstrapdefalt buttonのborder:ホバー時#ADADAD

#CCCCCC #DDDDDD付近(超薄い灰色)

この範囲は枠線の色に使用されることが多いです。

表の罫線や入力欄の枠線など、意味のまとまりをつくるための線に使われます。
逆に、あるまとまりとあるまとまりを区切る「仕切り線」は、次に紹介する#EEEEEE付近のほうが使用頻度が多いです。

サイト場所カラーコード
googleボタンの枠線#DDDDDD
ボタンの枠線:ホバー時#C6C6C6
入力欄の枠線#C0C0C0
#D9D9D9
facebookボタンの枠線#CDCED0
#C5C6C8
#B6B7B9
twitterツイート入力欄の枠線#BFE0EC(#D9D9D9と同明度)
youtubeボタンの枠線#D3D3D3
ボタンの枠線:ホバー時#C6C6C6
入力欄の枠線#CCCCCC
amazon入力欄の枠線#D0D0D0
枠線・仕切り線#DDDDDD
bootstrapdefalt buttonのborder#CCCCCC
inputのborder
table(td,th)のborder#DDDDDD

#EEEEEE付近(白に近い灰色)

さきほど言ったように、仕切り線に使われることが多いです。

また、影の色としても使われたり(rgba(0,0,0,0.1)=#e5e5e5)、濃いめの背景として使われたりします。

サイト場所カラーコード
googleボタンの影#E5E5E5(rgba(0,0,0,0.1))
関連ワードの仕切り線#EDEDED
入力欄エリアとの仕切り線#E5E5E5
ヘッダーナビの線#EBEBEB
facebook入力欄の枠線#E5E5E5
投稿内の仕切り線#E9E9E9
背景が灰色のときの仕切り線#E1E2E3
twitter仕切り線・枠線#E1E8ED
youtubeボタンの影#E5E5E5(rgba(0,0,0,0.1))
動画ページ内の仕切り線#E6E6E6
トップページやフッターの仕切り線#E2E2E2
amazonフッターの仕切り線#E7E7E7
bootstrapdefault buttonのbackground:ホバー時#EBEBEB
hr#EEEEEE

#F0F0F0 #FAFAFA付近(ほぼ白に見える)

ここから背景色に使用されることが多いです。#F0F0F0より濃い色を背景色に使うと、チープに見えます。

「bodyの背景を白、その上のブロックの背景を#F6F6F6」のように、白(#FFF)と一緒に使うことが多いです。一緒に使うときは、コントラストが非常に低いので、borderやbox-shadowで区切ることが必須になるかと思います。

サイト場所カラーコード
google検索欄のエリア#F2F2F2
ボタンの背景#F2F2F2 -> #F7F7F7
ボタンの背景:ホバー時#F2F2F2 -> #FAFAFA
facebook背景#E9EAED
コメント欄のエリア#F6F7F8
ボタンの背景
ボタンの影#F2F2F2(rgba(0,0,0,0.05))
facebookページの基本情報(旧ver)#F1F3F8
twitter友達を見つけましょうのエリア#F5F8FA
タイムラインのツイート:ホバー時
youtube背景#F1F1F1
ボタンの背景#F8F8F8
ボタンの背景:ホバー時#F0F0F0
bootstraptable:ホバー時#F5F5F5
dropdown menu:ホバー時
table stripe#F9F9F9

神は細部に宿る...じゃないですが

ちょっと細かすぎるくらい区別して説明してきました。
ちょっとしたブログとかだったらそこまで気にする必要は無いですが、大規模なwebサービスを運営するとなると情報量が膨大になってくるので、細かな色の使い分けがユーザビリティの要になってくるんじゃないかと思います。

見た目だけに頼らずに、その色が意味するものを考えながら使い分けて、理にかなったデザインを心がけていきたいものですね。

#666666~#999999内でアクセシビリティについての話を追加