【色のデザイン】見やすい色の組み合わせってなに?

デザインTips「見やすい色使いの説明」

こんにちは、いけあつです!

みなさん色は好きですか?

ぼくは好きです!とくに緑が好きです。

ただ、色をつかうのってときどき難しいですよね、、、

パワポとか資料をつくってて、色をつけたとたんに

  • 見えにくくなった
  • わかりにくくなった
  • ダサくなった、、、

という経験ありませんか?

いろいろ試してみるけど、良くならなくて気がついたら1時間くらい失ってた、、、

なんてこともあるかと思います。

ということで、 この記事では「これさえ覚えておけば、とりあえず大丈夫!」

すぐにできる「見やすい色づかい」のデザインTipsを紹介したいと思います!

見やすい色づかいのポイントは「組み合わせる色の明るさの差!」

ポイントはズバリこれです。

「そもそも色の明るさって何?」という方は、パワポとかエクセルで色を選択するときに出てくるアレを思い出して見てください。

↓コレのことです↓

パワーポイントのカラーパレットの説明

「テーマの色」の行の下にずらっと並んでいるのが「明るさ違いの色たち」です。

上にある色ほど「明るい色」下にある色ほど「暗い色」です。

この「色の明るさの差」が見やすい色づかいのポイントになってきます。

まずはこのポイントをおさえておきましょう!

「組み合わせる色の明るさの差」が大きいほど見やすい!

具体的には、色を使うときに「組み合わせる色の明るさの差」を大きくするほど見やすくなります。

逆に「組み合わせる色の明るさの差」が小さいほど見えにくくなってきます。

図にするとこんな具合です。

組み合わせる色の明るさの差の説明

この「組み合わせる色の明るさの差」を意識して、自分が今までにつくったパワポとか資料を見直してみてください。

見やすい色づかいはできていましたか?

「見やすいデザイン」は白黒にしても見やすい!

「なんか、このデザイン見えにくいなー」と思ったらそのデザインをスクショして、スマホやPCの編集機能とか使って白黒にしてみてください。

おそらく、「見えにくい」と感じていた部分が「見えなくなってしまう」と思います。

「組み合わせる色の明るさの差」が小さいあるいは、差が無い場合、白黒にすると「見えなくなってしまう」んです。

一方で、「組み合わせる色の明るさの差」が大きくて見やすいデザインは白黒にしてもはっきり見えます。

デザインを進めているうちに「なんだか見えにくくなってきたな、、、」と感じたら「白黒にして確認してみる」ことをオススメします!

いちどに全部考えるのは大変だから、とりあえず「白・黒・グレー」でデザインする!

資料の内容も考えながら、色のことも考えるのは大変ですよね、、、

そこでオススメしたいのが、とりあえず「白・黒・グレー」でデザインするというテクニックです!

前の見出しで「見やすいデザインは白黒にしても見やすい」ことをお伝えしました。

ということは、それを逆手に利用して「白黒の状態で見やすいデザインをしてしまおう」という考え方です。

色は気にせずに「白・黒・グレー」で内容をガシガシ作っていって、内容が固まったところで色を置き換えていきます。

このときに注意してほしいのは「白・黒・グレーから置き換える色の明るさは同じにする」という点です。

↓具体的な例を紹介しますね↓

白黒グレーでデザインしてから色をたす説明

この画像は、こちらの記事で実際にぼくがリデザインした資料です。

じつは、この資料は「白・黒・グレー」でデザインした後に「アクセントの赤色」をたしてつくりました。

「組み合わせる色の明るさの差」を意識して、見やすいデザインをしよう!

ここまで読んでいただきありがとうございます!

最後にひとつ、「僕たちひとりひとりの目で見えている色は、実はちがいます」

ちょっと専門的な話になりますが、人間の目の奥には「色の認識」に関して4種類の細胞くんがいます。

それぞれに「明るさ」「赤さ」「緑さ」「青さ」を認識する機能が備わっています。

この4つの機能の強さが人によってちがうんです。

なかには生まれつき「緑さ」と「赤さ」の差が見えにくい人もいます。

この記事の最初に貼ってある画像が、その人にはこんな風に見えています。

デザインTips「見やすい色使いの説明」の色覚異常タイプP表示

ほとんど白黒にみえて、左下と右上の文字は見えなくなってしまいます。

つまり 「組み合わせる色の明るさの差」が小さいデザインをしてしまうと、不便する人がいるかもしれないということです。

この記事で紹介した「組み合わせる色の明るさの差」を意識したデザインは、詳しく言い換えると「誰にとっても見やすいデザイン」をするためのTipsです。(これを「ユニバーサルデザイン」って呼んだりします。)

自分の伝えたいことをたくさんの人に届けるためにも、「組み合わせる色の明るさの差」を意識して「誰にとっても見やすいデザイン」をしましょう!