制作するプレゼン資料に差が!ビジュアルヒエラルキーの重要ルール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
様々なコンテンツを配置する場合には、グリッドを意識してみると効果的です。闇雲にコンテンツを配置すると優先順位がぐちゃぐちゃになってしまうので、ヒエラルキーを意識して並べていきます。
グリッドを意識する際にも忘れないでほしいのが、**「重要なものは大きく、より重要ではないものは小さく」**という原則です。大きい要素は自然と最初に視線がいくので、それ以外に特別なギミックを施さなくとも強調されるのです。
まとめ
せっかく情報や内容が素晴らしいものであっても、**「伝わる工夫」**がなければ上手く伝えることができません。
次のような公式を覚えておいてください。
情報 × デザイン → 伝達
できるだけ見やすくしたいという思いは持っていても、「では実際どうすればいいんだ?」と疑問を持った時には、まずはビジュアルヒエラルキー(情報の重要度の重み)から見直してみてください。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング