
海外デザインブログCanva Design School Blogで公開された「5 Principles of Effective Visual Hierarchy」の著者より許可をもらい、まとめて日本語抄訳しています。
王室ファミリー(英: the Royal family)にとって、「王位」の重要性があるのと同じようで、デザインプロセスにも重要な段階が存在します。
階層(英: Hierarchy)はデザインの順序をきめ、もっとも重要な要素がまず最初に目に留まるよう適用されます。フォントやイメージ写真、配色、シェイプ、アイコンなど、複数のグラフィックデザインを一緒に手がけているときは、階層の利用がメッセージをはっきり、手短に伝えるためにとても重要になってきます。
今回は、効果的なビジュアル階層、ヒエラルキー(英: Visual Hierarchy)を作成する5つのデザインテクニックをまとめてご紹介します。
詳細は以下から。
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