デザインの階層ルールをつくる、5つの効果的なテクニックまとめ

5visual-hierarchy-top

 

海外デザインブログCanva Design School Blogで公開された「5 Principles of Effective Visual Hierarchy」の著者より許可をもらい、まとめて日本語抄訳しています。

 

 

王室ファミリー(英: the Royal family)にとって、「王位」の重要性があるのと同じようで、デザインプロセスにも重要な段階が存在します。

 

階層(英: Hierarchy)はデザインの順序をきめ、もっとも重要な要素がまず最初に目に留まるよう適用されます。フォントやイメージ写真、配色、シェイプ、アイコンなど、複数のグラフィックデザインを一緒に手がけているときは、階層の利用がメッセージをはっきり、手短に伝えるためにとても重要になってきます。

 

 

今回は、効果的なビジュアル階層、ヒエラルキー(英: Visual Hierarchy)を作成する5つのデザインテクニックをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

01. 見出し、小見出し、ボディコピーをサイズによって整理しよう。

 

Order-your-title-subtitle-and-body-copy-by-size-1324x569

 

上記に示した要素は、タイポグラフィにとって三銃士のようなもので、もっとも大きなサイズから小さなサイズまで、意識することなく、順序通りにコンテンツを読んでもらう必要があります。

 

読み手はまず、見出しタイトルに目が止まることを考慮して、デザインが他の要素に比べ目立っているか確認しましょう。またもっとも大きなフォントサイズに、ひと目を惹くデザインを心がけましょう。小見出し(英: subtitle)は、見出しをサポートするように、少しフォントサイズを小さくするとよいでしょう。

 

コンテンツ本文のボディ・コピー(英: Body Copy)は、もっとも小さなフォントサイズを採用し、はっきりとした読みやすさが大切になります。手の込んだ筆記体や、アルファベットの大文字だけを利用してしまうと、可読性が著しく低下してしまいます。

 

 

 

02. アイコンを大きくして、重要性を表現しよう。

 

もっとも重要な要素は、もっとも大きく表示することを忘れずに。デザイン要素のサイズを増加させることで、視覚的な重要性を表現することができるでしょう。

 

アイコンのサイズを大きくしてみましょう。そうすることでそうすることで、「call to Action」ボタンのような訴求力のある振る舞いをし、コンテンツに関連するアイコンを使用することで、機能面もより良くしてくれるでしょう。

 

Increase-the-size-of-icons-to-reflect-their-importance-1324x569

 

 

 

03. 色をつかってコンテンツを強調しよう。

 

Use-color-as-a-visual-highlight-1324x569

 

色(英: Color)はさまざまな感情を呼び起こすだけでなく、重要度レベルに合わせて、色使いで選別することができます。

 

明るい、鮮やかな色使いは、コンテンツを強調することができ、もっとも注目して欲しいフォーカル・ポイントをデザインの中に盛り込むことができます。

 

上のサンプルイメージでは、背景イメージに使われているひまわりの鮮やかな黄色を、テキスト文字とマッチさせています。「Sunshine」という単語を独立させることで、デザインにおける重要性を示しています。

 

 

 

04. フォントスタイルを組み合わせよう。

 

多くのフォントでは、太字やイタリック斜体など、異なるスタイルを収録しており、デザインに階層を作成するときに役立ちます。特に注目して欲しい単語(”Sale”や”Attention”など)は、他とは異なるフォントスタイルを採用してみましょう。

 

Experiment-with-font-styles-1324x569

 

 

 

05. グリッドを使ってイメージ写真を整理しよう。

 

Use-grids-to-order-your-images--1324x569

 

階層ルールを作成するためにグリッドを利用することは、イメージの重要度を並べて表示し、ビジュアル的なストーリー(英: Visual Narrative)を作成するのにも、最適な方法と言えるでしょう。もっとも重要な写真をもっとも大きなスペースに配置し、その他の写真を小さなスペースに配置することで解決できます。

 

同時に首尾一貫したビジュアルを実現するために、イメージ写真には同じカラーフィルタやPSアクション素材などを利用するようにしましょう。

 

 

階層を利用することで、もっとも重要な要素が最初に見られるように、デザイン順序を作成する手助けをしてくれます。これらのデザインテクニックを、今後のデザインプロジェクトにも活用してみてはいかがでしょう。

 

 

 

現役デザイナーが明かす!デザインを良くする12個の鉄板ルールと具体例

完成したデザインをより魅力的にみせる、12個のテクニック、ルールをまとめています。

12-design-diy-rule-top

 

 

参照元リンク : 5 Principles of Effective Visual Hierarchy – Canva Design School