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

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

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

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

詳細は以下から。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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