スライドや資料を作るとき、配色にどれだけ気を配っていますか?
色の見え方は人によって違うため、他人も同じように見えているとは限りません。女性は男性よりも見える色の種類が多く、男性の 20人に 1人は色覚異常をもっています。
このように色の見え方には個人差があるのに、感覚で色を選んだり、デフォルトのままの色を使っていて良いのでしょうか。
実は、たった 『2つの差』を改善するだけで、男性・女性・色覚異常がある人にも見やすい配色にできるのです。
Contents
色差と明度差を『ある程度』つける
前提として、センスの良い配色と見やすい配色は違います。
今回は『センス無 × 見やすい』配色を目標にします。
誰でも見やすい配色には、色差と明度差。この2つの差をつけられれば大丈夫です。なんの差かというと、背景と文字の差のこと。
色の表し方には言葉と数字の 2種類があります。赤色→ rgb (255, 0, 0) というように、差を比べるには、色を数字に変換してください。
今回は RGB値に置き換えます。
rgb は Red, Green, Blue の頭文字で、赤・緑・青の 3つの要素で色を数値化したものです。要素はそれぞれ 0〜255 までの 256 通りあるので、 理論上では 256 の 3乗の約 1,670 万通りの色を表すことができます。
こんな未知数な色の組み合わせを感覚でコントロールしようとすることが、いかに無謀なのかが分かると思います。
さっそく置き換えてみましょう。
ちなみに RGB値には、10進法で表す 0〜255と、16進法で表す #00〜FFの2種類があります。
このように、色を RGB値に置き換えることで、色差と明度差を計算することができます。
そして、色差と明度差、つまり色の種類と明るさに、背景との『ある程度』の違いを付ければ見やすくなるのです。
問題は、この『ある程度』がどの程度なのかです。
『ある程度』は数値化されている
実は『ある程度』の基準は、w3cによって定められています。
色覚異常 – Wikipedia
(6.1 デザイン・ウェブサイトの項を参照)
色差は、背景色と前景色の RGB値それぞれの差を取り、3つを足したものです。
この色差が500以上ならば、見やすい配色になります。
明度差は、(R×299 + G×587 + B×114) / 1000 で求められます。
明度差は125以上であれば良いです。
いかにも複雑な計算なので、配色シミュレーターを作りました。
色差・明度差をすぐ計算できる『配色シミュレーター』の作り方と活用法
たった 2色決めるだけで、配色完成
色差と明度差にどれだけ差をつければ良いかが分かったので、配色を決めていきましょう。
決めるのは、2色だけ
見やすい配色には、以下の 4色を揃えましょう。
- 背景色: 白で固定
- 文字色: rgb(87, 87, 87) までのグレー
- メインカラー:
- アクセントカラー:
基本的には、背景色は白、文字色は黒でいいのですが、これだと差が大きすぎるので、黒を少し弱めてグレーにするのがオススメです。
実際に、多くのサイトでは文字色にグレーが使われているんです。
このように背景色を固定し文字色をグレーにしてしまえば、決める色はメインカラー・アクセントカラーの2種類だけで良いのです。それぞれ、背景色である白との差を考えます。
メインカラーは内容に即した色
スライドの配色の主役になるメインカラーは、スライドの内容に即した色にします。また、文字色・背景色どちらにも使う色なので、白との相性も重要です。
- ブランドカラー
- スライドの目的・内容(定性ワード)
- 聞き手に合わせる
- 自分が好きな色
社内・社外どちらのプレゼンでも使える、万能な配色です。ただ、ブランドカラーが明るすぎる場合は避けた方が良いです。
承認のプレゼンであれば、厳格なネイビーなど明度低めの色。
ワークショップ用の資料なら、黄色やオレンジなど明度高めの色がオススメです。
聞き手の立場や好みに合った色にすると、内容が伝わりやすくなります。
新人にはフレッシュな緑系で彩度高めの色、上司やベテランには落ち着いたグレーや青系など。
例えば自己紹介のスライドなら、性格に合わせた配色にしましょう。活発なら赤やオレンジ、冷静なら青など。
配色はスライドを見やすくするため、見やすくするのは内容を伝えるためです。逆に内容との一貫性がない場合はノイズになってしまうので、注意してください。
アクセントカラーはメインカラーの補色
アクセントカラーは強調したい時に使う色で、1スライドにつき 1箇所だけ使うのが原則です。なぜならば、スライドの基本は 『1スライド = 1メッセージ』であり、強調するメッセージは 1つだけだからです。
アクセントカラーは背景色だけでなく、メインカラーとの相性も考えなければいけません。
なので、アクセントカラーはメインカラーの補色付近の色にしてください。
補色は、色の 3要素である HSB値を利用すると、彩度と明度を固定して、色相を 180° 回すだけで簡単に求められます。
Officeの場合、HSL値となっており、鮮やかさと明るさが 0〜255 までの 256 通りで表されます。画像の例はどちらも赤の原色を表していますが、HSL値では原色が明るさ 50%なのに対し、HSB値では明度 100%で原色を表します。
まとめ
見やすい配色には、色差と明度差をある程度つけましょう。
これは背景色との差なので、背景色を白に固定すると、決めるのはメインカラーとアクセントカラーの 2色だけです。
メインは内容に即した色、アクセントはメインの補色付近の色にすれば、見やすい配色を簡単に達成できます。
資料はあなたが伝えたいメッセージを伝えてくれる、あなたの味方です。
見やすい配色をマスターして、あなたの資料をさらに伝わりやすいものにしてください。