配色」タグアーカイブ

色差・明度差をすぐ計算できる『配色シミュレーター』の作り方と活用法

前回の記事で、色差・明度差をつけることで見やすい配色になることは、お伝えできたと思います。

色覚異常でも見やすい配色になる『2つの差』の埋め方

しかし、どちらの差も計算式が複雑で、いちいち計算していられませんよね。

そこで簡単に計算できる、配色シミュレーターを作りました。

ちなみに、当方 Macbook ですので Keynote で作成しました。
関数はそのまま Excel へ転用できるのでご安心ください。

表計算ソフトでシミュレーター作成

左側にセル、右側にグラフを配置します。

セルは、行(タテ)に色、列(ヨコ)に RGB値と計算結果。
グラフは、選んだ色(この場合は文字色)の色差と明度差が基準を越えているか、一目でわかるようにします。

基準をおさらい

色差は RGB値それぞれの差を合計したもの
明度差は RGB値それぞれに重みをつけた値の差
でしたね。

見やすい配色の基準は、色差が 500 以上、明度差が 125 以上です。

セル:関数には絶対値を忘れずに

まず表計算ソフトの基本ですが、ベタ打ちの数字は青、計算結果は黒と色分けしています。
間違えて関数を消してしまわないように、いじって良い数値を青色にして、一目でわかるようにしてください。

関数の中身は以下の通りです。
差がマイナスにならないように、引き算には ABS関数を使って絶対値にしてください。

色差は、背景色から各色の RGB値を引き、その差を足せばいいので

= SUM ( ABS($B$2-B3), ABS($C$2-C3), ABS($D$2-D3) )
これを I3 へ入力します。

一方、明度差はまず各色の差を計算します。

= ( B3*299 + C3*587 + D3*114 ) / 1000
これを G3 へ入力し、背景色との差を取ります。

= ABS ( $G$2-G3 )
これを J3 へ入力。

最後に、見やすい基準に達しているかを判定します。

= IF ( I3 >= 500, IF ( J3 >= 125, “OK”, “NG” ), “NG” )
これを K3 へ入力。

色差が 500 以上、明度差が 125 以上であれば、K3 セルに『OK』と表示されます。

もっとも差が大きい白と黒を比べているので、色差・明度差とも最大値になっていますね。

グラフ:基準線を追加して分かりやすく

グラフは散布図、グラフの範囲は I3 : J3 に設定します。
次に X軸と Y軸、それぞれの目盛りと基準線を調整しましょう。

X軸(色差)の場合、目盛りは 0 〜 765 に、基準線は 500 にしてください。
これで、色差が 500 以上かどうかが一目で分かります。
同じく Y軸も設定してください。

これで配色シミュレーターは完成です。色を追加したい場合は、行を挿入してください。
では、実際に色々試してみましょう!

配色の基本 + 背景色は白

慣れるまで背景色はシンプルに白にしましょう。
配色の基本は、『3色の比率を守ること』です。

ベース(背景):メイン:アクセント
=70 : 25 : 5
3色の場合は、この比率を守るとバランスが良くなります。

配色の基本

基本パターン:文字色とメインカラーを統一

基本は 3色で、文字色とメインカラーを同じ色にします。

文字色とメインカラーを同じ色にする場合、全体が重くならないよう工夫してください。
たとえば色が強い場合は塗りつぶしを避ける、文字が多い場合は細いフォントを使うなどが効果的です。

4色パターン:前記事の例

前記事での実例です。

基本的に背景色は白、文字色は黒でいいのですが、これだと差が大きすぎるので、この例では黒を少し弱めてグレーにしています。
実際に、多くのサイトでは文字色にグレーが使われていますよ。

基準内では rgb(87, 87, 87) のグレーまで使用できるので、お好みで設定してください。

多色パターン:3色の比率をキープ

レゴ®︎クリックブリック

さらに色を増やしたいときも、3色の比率をキープするのが大原則です。

増やす色の選び方ですが、大きく 2パターンあります。

  1. トーン (彩度と明度) を固定して、色相を変える
  2. 色相を固定して、トーンを変える

こうすることで色を増やしても見にくい配色になるのを避けることができます。

背景色には最適な範囲がある

少し慣れてきたと思うので、背景色を白以外にしてみましょう。

しかし、すべての色が背景色に適しているわけではありません。
背景色に最適な色には、条件があるのです。

黒はややグレー気味に

背景色を黒にすると、文字色は白です。
文字色を黒→グレーにしたのと同じように、背景色も完全な黒ではなくグレーにした方がコントラストを抑えられます。

有彩色では差をつけにくい

背景色に白と黒、グレーいわゆる無彩色を使ってきましたが、有彩色でも試してみましょう。

例えば、rgb(200, 100, 100) にしてみます。

RGB値の極値である白でも黒でも見やすい基準をクリアできないことが分かります。
つまり、基準をクリアするための背景色には一定の条件があるということです。

背景色を条件範囲に収める

見やすい背景色の条件範囲は、以下のとおりです。

『背景色のRGB値の合計が 265以下、または500以上』

この基準をクリアするように背景色を決めましょう。

そして、有彩色を使いたい場合でも、RGB値をこの範囲に収めると見やすさを維持できるということです。

まとめ

できるだけシンプルに作りましたが、少し複雑になってしまいました。

基本的には『背景色が白の 4色パターン』が、もっとも使い勝手が良いと思います。

ぜひ配色シミュレーターをご活用いただき、少しでも日々の資料作成のお力になれれば幸いです。

色覚異常でも見やすい配色になる『2つの差』の埋め方

スライドや資料を作るとき、配色にどれだけ気を配っていますか?

色の見え方は人によって違うため、他人も同じように見えているとは限りません。女性は男性よりも見える色の種類が多く、男性の 20人に 1人は色覚異常をもっています。

このように色の見え方には個人差があるのに、感覚で色を選んだり、デフォルトのままの色を使っていて良いのでしょうか。

実は、たった 『2つの差』を改善するだけで、男性・女性・色覚異常がある人にも見やすい配色にできるのです。

色差と明度差を『ある程度』つける

前提として、センスの良い配色と見やすい配色は違います。

今回は『センス無 × 見やすい』配色を目標にします。

誰でも見やすい配色には、色差明度差。この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色を揃えましょう。

  1. 背景色: 白で固定
  2. 文字色: rgb(87, 87, 87) までのグレー
  3. メインカラー:
  4. アクセントカラー:

基本的には、背景色は白、文字色は黒でいいのですが、これだと差が大きすぎるので、黒を少し弱めてグレーにするのがオススメです。
実際に、多くのサイトでは文字色にグレーが使われているんです。

このように背景色を固定し文字色をグレーにしてしまえば、決める色はメインカラー・アクセントカラーの2種類だけで良いのです。それぞれ、背景色である白との差を考えます。

メインカラーは内容に即した色

スライドの配色の主役になるメインカラーは、スライドの内容に即した色にします。また、文字色・背景色どちらにも使う色なので、白との相性も重要です。

  • ブランドカラー
  • 社内・社外どちらのプレゼンでも使える、万能な配色です。ただ、ブランドカラーが明るすぎる場合は避けた方が良いです。

  • スライドの目的・内容(定性ワード)
  • 承認のプレゼンであれば、厳格なネイビーなど明度低めの色。
    ワークショップ用の資料なら、黄色やオレンジなど明度高めの色がオススメです。

  • 聞き手に合わせる
  • 聞き手の立場や好みに合った色にすると、内容が伝わりやすくなります。
    新人にはフレッシュな緑系で彩度高めの色、上司やベテランには落ち着いたグレーや青系など。

  • 自分が好きな色
  • 例えば自己紹介のスライドなら、性格に合わせた配色にしましょう。活発なら赤やオレンジ、冷静なら青など。

配色はスライドを見やすくするため、見やすくするのは内容を伝えるためです。逆に内容との一貫性がない場合はノイズになってしまうので、注意してください。

アクセントカラーはメインカラーの補色

アクセントカラーは強調したい時に使う色で、1スライドにつき 1箇所だけ使うのが原則です。なぜならば、スライドの基本は 『1スライド = 1メッセージ』であり、強調するメッセージは 1つだけだからです。

アクセントカラーは背景色だけでなく、メインカラーとの相性も考えなければいけません。

なので、アクセントカラーはメインカラーの補色付近の色にしてください。

補色は、色の 3要素である HSB値を利用すると、彩度と明度を固定して、色相を 180° 回すだけで簡単に求められます。

Officeの場合、HSL値となっており、鮮やかさと明るさが 0〜255 までの 256 通りで表されます。画像の例はどちらも赤の原色を表していますが、HSL値では原色が明るさ 50%なのに対し、HSB値では明度 100%で原色を表します。

まとめ

見やすい配色には、色差と明度差をある程度つけましょう。
これは背景色との差なので、背景色を白に固定すると、決めるのはメインカラーとアクセントカラーの 2色だけです。
メインは内容に即した色、アクセントはメインの補色付近の色にすれば、見やすい配色を簡単に達成できます。

資料はあなたが伝えたいメッセージを伝えてくれる、あなたの味方です。
見やすい配色をマスターして、あなたの資料をさらに伝わりやすいものにしてください。

一番伝えたいことを確実に伝えるプレゼン資料の作り方

あなたの資料は、あなたが伝えたいことをきちんと伝えてくれていますか。

社会人にとって資料作成は避けては通れないスキルですが、伝えたいことが伝わらず、違う解釈をされてしまうことがありますよね。

この記事では、あなたが伝えたいことを確実に伝えるための、プレゼン資料の作り方をお伝えします。

プレゼン資料を作るうえでやってはいけないのは、とりあえずパワポを開くこと。

まずは、プレゼンの『目的』と『構成』を練ることから始めましょう。

プレゼンの3つの目的を使い分ける

プレゼンの目的は共有・説得・感動の3つに分類できます。

共有

共有とは、相手に何らかの情報を伝えること。

たとえば、社内報や業務連絡など、様々な立場の人に向けて伝えるものが多いです。

情報を正確に伝えることが目的なので、相手にとって分かりやすい資料にする必要があります。

説得

説得とは、相手に行動を起こさせること、あるいは行動を変えさせること。

まさに営業のことで、コンペや社内承認など、一般的なプレゼンの目的でもあります。

説得するためには分かりやすい資料だけでなく、相手を納得させるためのストーリーが必要です。

感動

感動とは、相手の感情を動かすこと。

結婚式のムービーなんかは感動のプレゼンですね。

先ほどの2つに加えて、よりパーソナルなストーリーや、動画や音楽など相手の感情に訴えかけるコンテンツが必要です。

以上、プレゼンの目的は3つありますが、理想的にはすべてのプレゼンは感動を目指すべきです。

しかし日報にいちいち感動していられないので、プレゼンする内容によってふさわしい目的を決めましょう。

一番伝えたいことを中心に構成する

プレゼンの目的を決めたら、次は構成を考えます。

プレゼンは、一番伝えたいことを伝えられるような構成にしなければなりません。

文字にすると当たり前かもしれませんが、これがなかなか難しいですよね。

以下の3つの手順で考えると、構成を組み立てやすくなると思います。

一番伝えたいことは?

まずは、一番伝えたいことを考えましょう。

一番伝えたいことは本のタイトルや曲名のように、一言で全体を表す必要があります。

一言で全体を表しているかどうか、次の3つの要素でチェックできます。

☑️簡潔
簡単で分かりやすい表現か、そして無駄な言葉がないかをチェックします。

なんとなく見ている新聞やニュースの見出しなど、実はとても参考になるので、ぜひ意識的にチェックしてみてください。

☑️具体的
抽象的な表現は、内容に即したものに変えます。

たとえばサイト内容を改善する場合だと、
before) 「読者の立場で考えましょう」
after) 「文字を読み飛ばす読者には画像が効果的です」
というふうに内容に即して言い換えるべきです。

☑️聞き手にとってのメリットがわかる
聞き手にとってどんなメリットがあるのかが伝らなければ、プレゼンの意味がありません。

聞き手の悩みや問題を理解し、このプレゼンでそれを解決できると思わせられるかがポイントです。

これらの要素を満たすと、なんとなく考えて作るよりもはるかに分かりやすく伝えられるようになります。

これ以降、一番伝えたいことを中心に構成していくので、ここで一番伝えたいことをどれだけ洗練させられるかがとても重要です。

納得できるまで何度も練り直しましょう。

Q&Aでブレイクダウンする

あなたが一番伝えたいことは新情報、つまり聞き手が知らないことなので、聞き手は疑問を抱くはずです。
その疑問に答えるように、伝えたいことをブレイクダウンしていきます。

ブレイクダウンの切り口は『なぜ』『どのように』などの疑問詞か、フレームワークをつかってモレのないようにします。

これ以上質問をしてこないであろうところまでブレイクダウンすることで、聞き手は納得します。

導入は『聞き手が知っていること』から

導入部は、聞き手が知っていることから始めましょう。

経験や価値観が一人ひとり違うように、脳内の理解プロセスも人それぞれ異なるので、いきなりあなたが伝えたいことを伝えても理解してもらえません。

ですので、聞き手の知らないことを伝えたいのであれば、まずは聞き手が知っていることから始めることによって、聞き手と話し手の理解プロセスを合わせることが重要です。

これで構成は完成ですが、伝えたいことが伝わった後どうなるのかも忘れずに示しましょう。

たとえば新商品の承認であれば、今後の導入スケジュールや売り上げ予測などを示すことで、読み手は安心して承認してくれるはずです。

聞き手の目線をコントロールするデザイン

ここで初めてパワポを開きます。

『目的』と『構成』をもとにスライドを作っていくのですが、デザインを適当にやってしまうと、せっかく練った構成が台無しです。

デザインは、伝えたいことを伝えるためにあります。
資料作成に即して言い換えると、デザインは聞き手の目線をコントロールすることによって、聞き手に確実に伝えたいことを理解してもらうためにあるのです。

では、具体的にどうデザインすればいいのでしょうか?

☑️枚数
枚数は少ない方がいいですが、情報を詰めすぎてはいけません。
原則は、1スライド=1メッセージです。

ただし、あらかじめプレゼン時間が決まっている場合は、1分=1枚を目安にしましょう。

基本的な構成は、導入1〜3枚、一番伝えたいこと1枚、ブレイクダウンした根拠3枚、今後のステップ1枚、合計6〜8枚で十分です。

導入や根拠の詳細まで説明する場合は、10枚を超えます。
そうなると聞き手は、全体のどこの話をしているか分からなくなるので、ナビゲーションが必要です。

スライドに位置情報をつけよう!聞き手を引きつけるナビゲーション例

☑️レイアウト
全スライドに共通する、メッセージ・根拠・フッターのレイアウトを決めます。

ここでは、デザインの4つの基本にしたがってコンテンツを配置するのがオススメです。

デザインの4つの基本

このうちレイアウトに使えそうなのは、整列と反復です。

レイアウトを見えない線に揃えることで、聞き手は内容を見やすくなります。

さらに同じレイアウトを繰り返すことで、聞き手は注意を削がれず内容に集中できます。

☑️フォント
日本語のフォントには、明朝体とゴシック体の2種類があります。
はね・はらいの装飾があるかないかの違いです。

契約書など正式な文書でない限り、読みやすいゴシック体で構いません。

基本的にはデフォルトで設定されているフォントで問題ありませんが、Windows 10はデフォルトのフォントがかなり読みづらいので設定した方が良いです。

【Windows 10】フリーソフトを使わずに今すぐ游ゴシックを読みやすくする方法

☑️フォントサイズ
フォントサイズは2〜3サイズでコントラストを意識します。
まず見て欲しい所は大サイズ、キーワードなど目立たせたい所は中サイズ、文章や注釈など時間をかけて読む所は小サイズと、目的に合わせてメリハリを付けましょう。簡単なスライドであれば大・中の2サイズで十分です。

コントラストが弱くなると聞き手の目線を誘導できず、結局何を言いたいのかが分からないスライドになるので気をつけてください。

☑️表現
原則として、聞き手は文字を読んでくれないという意識を持ってください。

文章や箇条書きはできる限り避けて、グラフや画像を使って表現しましょう。

特に画像は、文章や箇条書きよりも分かりやすく、多くの情報を伝えられます。

画像を選ぶポイントとしては、先に画像を選ぶのではなく、伝えたいことをベースに画像を選ぶといいです。

しかし、画像は強力なツールである一方、伝えたいことにマッチしなければ逆に分かりづらくなってしまうので、どんな画像を使うのかは注意が必要です。

☑️配色
配色は奥が深いですが、とりあえずこの3つを徹底するだけでも、かなり見やすい配色にできます。

ベースカラー
背景色。特に理由がなければ白にします。

メインカラー
プレゼンのテーマに即した色にしましょう。
自社のブランドカラーや、商品に使われている色を使うと統一感を出せます。

アクセントカラー
スライドで最も伝えたい、目線を集めたい箇所に使用します。
メインカラーの補色(反対色のこと)付近の色にしましょう。

テキストの色は、黒を少し明るくしたグレーがオススメです。
理由は、背景色の白とのコントラストが強すぎるからです。
実際にほとんどのウェブサイトでは、テキストに黒 (rgb(0, 0, 0)) を避けています。

色盲でも大丈夫!配色の基礎知識

プレゼン資料が完成したら、最後に資料をスライド1枚にまとめることをオススメします。

プレゼン相手は主に自分より職位が高い人、つまり忙しい人です。
急な会議などが入り、予定のプレゼン・報告の時間が取れないことなんて、忙しい部署にはよくある話です。

しかし事前に1枚にまとめておくと、短時間でも要点を伝えられるので慌てることがありません。

スライドデザインの6つの要素をうまく使って、聞き手の目線をコントロールし、伝えたいことを伝えられるプレゼン資料を目指してください。

まとめ

以上、
1. プレゼンの3つの目的を見分け、
2. 一番伝えたいことを中心に構成を考え、
3. 聞き手の目線を操るデザインによって、
一番伝えたいことを確実に伝えるプレゼン資料の作り方をお伝えしました。

僕は、大学でPowerPointを経験せずに社会人になったので、かつてはスライド作成が苦手で嫌いでした。

様々なウェブサイトや本から学び取ったものの一部しか提供できませんが、少しでもあなたのお役に立てれば嬉しいです。