2016.03.31
グレースケールのひと工夫でワンランク上のWebデザイン
こんにちは！Maromaroのデザイナー・コーダーのhoshidaです。
どのような配色のWebサイトでも、グレースケールは必ず使用すると思います。文字色、ボーダーなどですね。
このグレースケール、R・G・Bの3つの値が同一である、#FFFFFFから#000000へのグラデーションの中から使用するのが一般的かと思いますが、これを少し色みのあるスケールにすることで、デザインのクオリティがぐっと上がります。
色みのあるスケールを使用しているサイト
みなさんが三度の飯より好きなTwitterです。
テーマカラーの水色にちなんだ、青みがかったグレーのスケールを使用しています。
絆整骨院
濃いピンクのテーマカラーを効果的に使っている素敵な接骨院のWebサイトです。
テキストカラーや背景など、テーマカラーに合わせた赤みがかったグレーのスケールをサイト全体で使用しています。
純粋なグレースケールは、人間の視覚にはやや黄色みがかって見えるので、このようにテーマカラーに添わせた色にすると自然な色に見えるのですね。
なぜ通常のグレーが黄色みがかって見えるのかというと、網膜にある視細胞のうち明るさを感知する錐体細胞は青色への感度が低く同じ光量でも緑や赤色よりも暗く見えるため経験的に青色……
色みのあるスケールの作り方
最も薄い色と最も濃い色を決め、その中間の色をグラフィックソフトの機能を使って生成するのが良いでしょう。
コツは、薄い色や濃い色に「#FFFFFF」や「#000000」を使用するのを避けること。
彩度は低めにすること。
また、始点の色と終点の色は、単に明度を変えるだけでなく色相を若干ずらすといい感じになります。
グレースケールに色みをつけるとしても「#FFFFFF」は使うと思うので、一つ下の「#DDDDDD」から「#000000」に相当する15色を作成すると良いでしょう。
Illustratorの場合
二つのパスを作り、ブレンドツールでその中間を作成しましょう。ブレンドツールの使い方はこちら
Adobe Illustrator * オブジェクトのブレンド
Fireworksの場合
カラーパレットにあるブレンダ―機能でグラデーションを作成できます。
Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 | バニデザノート
Webサービスを使う
0to255というサイトでは、指定した色を起点にしたいい感じのグラデーションを取得することができます。
こちらで手っ取り早く済ませるのもいいでしょう。
色みのあるスケールの例
純粋なグレースケール
まあ普通な感じです。
青色のスケール
#E6E6EF、#D8D8E1、#C9C9D4、#BBBBC7、#ACACBA、#9D9EAC、#8F8F9F、#808192、#727285、#636477、#54556A、#46475D、#373850、#292A42、#1A1B35
洗練された感じがします。すこし紫っぽいのでもう少し赤みを減らすとTwitterのようにさわやかな感じになるでしょう。
茶色のスケール
#EDEAE7、#E0DCD9、#D3CECB、#C6C1BD、#B9B3AF、#ACA5A1、#9F9793、#918985、#847B77、#776D69、#6A5F5B、#5D524D、#50443F、#433631、#362823
高級感を持たせたい場合有効かもしれません。
緑色のスケール
#E9EBE8、#DADCD8、#CACEC9、#BBBFBA、#ACB1AA、#9DA29B、#8E948C、#7E857C、#6F776D、#60685E、#515A4E、#424B3F、#323D30、#232E20、#142011
ナチュラルな感じがしますね。
まとめ
色みのあるスケールの難点は、コードを見ても明るさが感覚的に分かりずらいために、コーディングに時間がかかることです。
まず「#FFFFFF」～「#000000」の16色でコーディングし、あとから置換するのもよいかもしれません。
もし気合を入れてデザインしたい場合など、使ってみるのはいかがでしょうか。ではでは
