もう悩まない！見やすいスライドを作るためのデザインの基礎知識〜色〜

Public Relation TEAM

こんにちは、中澤です。
早速ですが、大阪大学COIの手がけるスーパー日本人プロジェクトをご存知でしょうか。
大阪大学COIホームページ

話題のスーパー日本人プロジェクト、全スライドが神がかってるから本当にヤバい。ヤバいとしか言えない。4DXで上映してほしいhttps://t.co/o4gyhFtzsZ pic.twitter.com/paQ8WYIGOq

— 天才ミニミニ子宮マン (@sprGK) 2016年3月1日

ネットでは、『ド○ラゴン○ボール』のスーパーサイヤ人を連想させる「スーパー日本人」や、
「ハピネス社会」「脳マネジメント」「潜在能力」といった抽象的な言葉を随所に使っていることで話題になりました。

子供から高齢者に至るまで人間力を飛躍的に活性化させ、常に意欲的に潜在力（個人が持つ最大の能力）を発揮できる“スーパー日本人”を育成し、「一人一人が活き活きと最高に輝く社会“ハピネス社会”

を目指しているようであり、今後の展開に期待するとして・・・。

何よりも気になる神がかったスライド資料。
まず、こちらをご覧ください。（プロジェクトPDFが開きます。）
内容もさることながら、このスライドは確かにヤバイとしか言えないですね。

統一感がない色彩、フリーと言わんばかりに貼り付けられたフリー素材、そして混沌としたレイアウト

c_1

重ねに重ねられ、溢れ出ている図形

c_2

主張し合うフォントのサイズ、種類

c_3

スーパー圧がある内容でしたね。（一通見終えると目が疲れます。）
このスライドをきっかけに、「見やすく、伝わるスライドとは何か」を改めて考えさせられたのでありました。

見やすいスライドとは？

「見やすさ」を意識し、文字や図表、色の使い方、レイアウトにほんの少し気を配るだけで、資料の仕上がりはぐっと見違えてきます。
プレゼンテーションのスライドの内容は、文字や図形など様々な要素からできているので、それぞれの要素が持つ特性を理解し、ルールに沿って見せてあげることで内容がさらに伝わりやすくなります。
スライドを作る上で押さえておきたい基本を「色」・「文字」・「レイアウト」の要素に分けて、ご紹介していきます。

色

color_6

人間の目から入る視覚情報のうち、８割以上が「色彩の情報」と言われています。
色が人に与える影響は大きく、配色1つで好印象にも悪印象にもなります。
人は色に対してイメージを持っているので、そのイメージを活用する必要があります。
色について３つのポイントをご紹介します。

1.使う色は、できるだけ少なく。

「ベースカラー」・「メインカラー」・「アクセントカラー」を決めて、使いまわしましょう。

color_2

ベースカラー：背景に使用される広範囲を占める色
メインカラー：全体を通してのイメージカラー。見出し、ボックスなどに使う色
アクセントカラー：閲覧者に特に注目させたい内容や、注意書きなどに使用する色。少ない面積でも、しっかり主張できる色を。
それぞれを使用する割合としては順番に70%、25%、5%が理想のようです。
色が多いと、混沌とした印象になってしまうので、必要がなければできるだけ少なくしましょう。
そして、大切なことは、テーマカラーのルールを資料全体で一貫して守るということです。
同じ色・配色を繰り返すことによって、記号として認識されスライドの意図が伝わりやすくなります。
「この色がでてきたから、ここが強調箇所」といったように、読み手に自然に思ってもらえるようになることが、テーマカラーのゴールです。

2.原色は避けよう。

color_3

色を選択する際、特にメインカラーを選ぶときには原色は避けるようにしましょう。
原色を使う場合は日常でも信号など「特に注意を呼びかける」場合がほとんどです。
また、彩度が少しくらい方が落ち着いた印象になります。

3.本文には濃いグレーを。

color_4

ほとんどのスライドで、黒が使用されていると思います。ですが、webデザインで真っ黒が使われることは稀なのです。
白い紙であれば黒文字が最も見やすいとされていますが、「紙」と「画面」の色の出方が違うので注意！
本文には黒の代わりに「濃いグレー」を使用することをお勧めします。白いベースカラーの上に真っ黒（#000000）の文字を乗せた場合、コントラストが少し強くなります。
長く読み続ける必要のある本文であれば、目がチカチカしますし、デザインがきつく主張してしまうので
あえてグレーを使用してコントラストを落とし、目の負担に配慮するのが良いと思います。
webデザインにおけるグレー(灰色)の上手な使い方