誰でもわかるWebデザインに役に立つ配色の3つ小技

誰でもわかるWebデザインに役に立つ配色の3つ小技

こんにちは、外国人のWebデザイナーのShowDDDD(略称SD)です。
今回は、『誰でもわかるWebデザインに役に立つ配色の3つ小技』をご紹介したいと思います。良いデザインには、バランス・センスの良い配色は欠かせないはずです。しかし、デザイン要素の中に、もっとも難しいのも配色だと思います。色は見る人によって、与えられたイメージは様々だと言われていますが、大まかなルールやよく使う手段はあります。今回ご紹介の3つの小技は、SDが普段勉強や実務で感じたことなので、ぜひご参考にいただければ嬉しいです。

Webデザインにおける631ルール

いきなりに631と言っても、七五三しか知らないと言われそうです(すみません、外人のつまらないジョークなので、突っ込まらないで下さい)。
これは、Webデザインをする時に、カラーの配分を示しています。

631は、
ベースカラー:60%
+
メインカラー:30%
+
アクセントカラー:10%

ベースカラー(全体の約60%〜70%)

ベースカラーとは、サイト全体で一番面積を大きく使っている色のことを示しています。一番面積を大きく使っていると言っても、実は主役ではなくて、とても優秀な脇役なんです。背景などによく使われていて、日本のWebサイトでは特に白やグレーなどの薄色を多いような感じです。

メインカラー(全体の約20%〜30%)

メインカラーはそのままの意味で、【メイン=主役】になります。
SDがメインカラーを選ぶ時は、下記のように決めていきます。

  • クライアントさんからのカラーコードの指定があれば、それを使います。
  • クライアントさんからの色の希望があれば、例えば、赤が良いと言われたら、赤で明暗・彩度の異なるパータンをいくつか用意して、その中から適切なカラーを抽出する
  • ブランドカラー(ロゴなど)からの展開もよくあるパターンです。
  • 「お任せ」の場合は、クライアントさんの企業業種やユーザーに与えたいイメージ次第で、複数のカラーをピックアップして、担当者と一緒に決める

アクセントカラー(全体の約5%〜10%)

アクセントカラーは一番使用量が少ないのにも関わらず、Webサイトにおいては、アイコンやボタンなどによく使うことによって、目を引いたり、アクションを起こしたりすることが出来て、とても重要です。

従来で色に対するイメージを覚えること

人は同じ色に対しても、異なるイメージを受けますが、また、国や宗教などにより、ある特定の色の解釈が変わります。例えば日本の伝統的な婚礼衣装は白ですが、白は純潔で「太陽の光の色」と一般的に考えられます。同じアジアに住んでいる中国人は、白に対して「無、死亡」のような感覚が多いので、結婚式に白い服を着る人はまったくいなくて、お葬式の時にしか着ないです。

色に対する一般的な印象を詳しく知りたい方はこちら
https://ja.wikipedia.org/wiki/色#色に対する一般的な印象

SDがWebデザインで配色を決める時に、良くWebデザインまとめサイトを参考しています。そのようなサイトで「カラー別」で検索したりして、ヒントを得ることが出来ます。またどうしてもしっくり来ない時に、「業種別」や「雰囲気別」などを検索して、参考させていただいています。これは結構実用的なやり方だと思います。

SDがよく使うWebデザインの参考サイト(日本)

役に立つグレーの使い方

SDはWebサイトをデザインする時に、見せたい内容や要素の重要度によって、文字の濃さを変えています。つまり、異なるグレーを使っています。
SDは新人の時に、全くそれが知らなくて、文字を真っ黒(#000)でデザインしていましたので、見ているだけで目がきつかったです。

例としては、こんな感じです。

  • 大見出し:#222
  • 小見出し:#333
  • タイトル:#333
  • サブタイトル:#555
  • 本文:#555
  • 補足的な要素:#999
  • 区切り用の背景やライン要素など:#eee

 

たくさんのグレーはあまり使わないようにしています。数が増えて来ると、デザインガイドは破綻しやすくなり、デザイナーも混乱してしまい、エンジニアが悲鳴をあげることもあります。

上記のように、グレーを異なるレベル感の要素に使いつつ、大きさを変えたりしてコントラストを加えることによって、コンテンツがぱっと見でも分かりやすく、読みやすくなるのです。

こちらの記事は、例付きで詳しく分かりやすく説明されています。ご参考までにどうぞ〜


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

まとめ

今回は配色について、ちょっとした小技を紹介いたしました。
もちろんこれだけではないですが、これだけでもしっかりと行っておけば、Webデザインのクオリティーはグッと上がると思います(SDの経験談)。
是非是非、ご活用いただけたら嬉しいです。