制作するプレゼン資料に差が！ビジュアルヒエラルキーの重要ルール5選

「プレゼン資料の見栄えを良くしたいんだけれど、何から手を付けていいのかわからない」
「デザインのセンスには、ちょっと自信がない」

こんな悩みを持っていませんか？

デザインには、「センス」以上に**「ルール」**が重要になる場合が多くあります。プレゼン作りが上手い人は、こうしたルールを無意識のうちに取り入れています。

今回は、そうしたルールの中から最も取り組みやすいルール*「ビジュアルヒエラルキー」についてご紹介。中でも5つの重要デザインルール*をピックアップしてご説明していきます。
　　

「ビジュアルヒエラルキー」とは？

*ビジュアルヒエラルキー（Visual Hierarchy）は、日本語で「視覚的階層」とも訳される言葉で、デザインにおける「視覚的な情報の重み付け」*を意味します。

どんなに長い情報でも、最も伝えたい情報、2番目に伝えたい情報、と情報の重要度（重み）が違うわけですが、ビジュアルヒエラルキーの考え方ではそれをパッと一瞬見てわかるようにデザインしていきます。

ノンデザイナーがPowerPointなどのプレゼンテーション資料を作成する際、スライドが見にくくなってしまうのは様々な原因がありますが、その中でもビジュアルヒエラルキーを考えて配置しなおすだけでもだいぶ印象が変わります。見やすい資料になるはずです。
　　

制作する資料に差が出る！重要デザインルール5選

1. タイトル・サブタイトル・メインコピーをフォントサイズで並べる

Before

　　

After

ビジュアルヒエラルキーは、どの情報が優先順位が高いのかを、位置だけではなく大きさや色も含めて示していくことです。

おそらく多くの方が、普通"上"から"下"に視線を落とすので、"上"から"下"に順にテキストを並べればいいと考えるでしょう。しかし、情報の階層を明確にしたいのであれば、最低限サイズの差を作ったほうがベターです。

大きい字と小さい字であれば、大きい字の方が重要だと感じます。トップページのスライドなどでは、タイトル・サブタイトル・メインコピーを、文字の大きさに差をつけて並べるだけでも、デザインにアクセントが付きます。
　　

2. 重要な箇所にはアイコンを使う

Before

　　

After

重要な箇所に視線を集めたい場合に、文字の大きさや色だけでは物足りない時があります。そのような場合には、アイコンを使って視線を奪うのがいいでしょう。

上の例で言えば、*「水は1日に1.5リットル飲もう」*という言葉だけではメッセージが頭に入ってこないので、「水のしずく」をアイコンにして視線を集めています。単にメッセージだけを並べるよりもアイコンを使うほうが、強いメッセージで情報をダイレクトに伝えることが可能です。

参考：
見ただけでわかる！おもしろピクトグラムを無料配布しているサイト13選｜ferret
　　

3. アクセントで1色を使う

Before

　　

After

位置や大きさだけではなく、どんな色を使うかも考えてみるといいでしょう。色は様々な感情を掻き立てるのはもちろん、どれが重要でどれが重要ではないかを区別するためのレベルを作り出す重要な働きをします。

暗い背景の中で明るくて大胆な色を使うと、ハイライト効果によって注目を集めることが簡単になります。

ただし、あまりたくさんの色を使い過ぎるとかえって雑多になって重要度の優先順位を付けづらくなってしまいます。

上の例では、黄色をメインカラーとしてピックアップして、目立つように配置しています。配色を自分で決められない場合には、カラーパレットを決めてくれるようなサービスを使ってみるのもよいでしょう。最近では、AIが自動的に色を決めてくれる機能もあります。

参考：
【2017年最新版】AIによる配色選びも！誰でもクールな配色が作れるカラーパレットサービス7選｜ferret

配色を決めることに慣れていない場合は、ベースカラーを70％、サブカラーを25％、アクセントカラーを5％の割合で組んでみるとしっくりくることがあります。
　　

4. フォントを組み合わせる

Before

　　

After

それぞれのフォントに太さや幅などがあるため、フォントを組み合わせることで重要度の階層を決めていくような方法もあります。もちろん、太かったり幅があるフォントは、細くて華奢なフォントよりも重要に映ります。

テーマになるような言葉や*「セール！」「注目！」*といった特別な価値を表現したい言葉は、特にフォントを変えてみてください。しかし、注意しなくてはならないのは、フォントは配色と同じように、使いすぎるとかえって情報の優先順位がわからなくなってしまいます。

基本として使うフォントを決めた上で、タイトルに表示するフォントはせめて1～2種類程度にしておきましょう。
　　

5. グリッドを意識する

Before

　　

After

様々なコンテンツを配置する場合には、グリッドを意識してみると効果的です。闇雲にコンテンツを配置すると優先順位がぐちゃぐちゃになってしまうので、ヒエラルキーを意識して並べていきます。

グリッドを意識する際にも忘れないでほしいのが、**「重要なものは大きく、より重要ではないものは小さく」**という原則です。大きい要素は自然と最初に視線がいくので、それ以外に特別なギミックを施さなくとも強調されるのです。