視覚的階層は、デザイン要素を重要性の順に編成する方法です。 言い換えれば、それは、私たちが見るものに注目する順序に影響を与える一連の原則です。
このガイドでは、すべての初心者デザイナーが知っておくべき視覚的階層の 12 の原則をリストアップしています。
カバーすることがたくさんあるので、始めましょう。
目次
視覚的階層構造とは何か。
原則1: サイズは視認性に影響する
原則2: 遠近法は奥行きを感じさせる
原則3: 色とコントラストは注目を集める
原則4: フォントはデザインをまとめる
原則5: 空間は強調と動きを与える
原則6: 空間とフォントの関係
原則1:色とフォントの組み合わせ
原則2:色とコントラストは視覚を強調し、動きを出す
#p>原則3と原則2の組み合わせ
原則3と原則2の組み合わせ
#p>原則3と原則3の組み合わせ #p>原則4と原則2の組み合わせ #p> 原則3と原則4の組み合わせp 近接は関係を示唆する
原則7: 負の空間は強調する
原則8: 整列は視線を誘導する
原則9: 奇数のグループは焦点を作る
原則10: 繰り返しは構図を統一する
原則11: 構成を変える。 線は動きを示唆する
原則 12: 格子はデザインを整理する
視覚的階層
視覚的階層とは
視覚的階層は、デザインにおける要素の配置方法を意味するデザイン原理です。
デザインでは、これは、ヘッダーが最大のフォントで最上部にあり、後続の各要素は重要性に基づいてサイズ調整されることを意味します。
視覚的階層が理解すべき重要な原則である理由は、見る人が最初にどこを見るか考えなくてもよいように階層を作成することが、デザイナーの責任であるからです。
このブログ投稿の動画版も作成しましたので、視覚的階層をさらに理解するのにお役立てください。 以下で見ることができます。
1 Size Impacts Visibility
大きいことは良いことでしょう？ この古典的な格言はまだ議論の余地がありますが、サイズは、視覚的要素を強調する最も効果的な方法であることは間違いありません。
新聞の見出しが大きなフォントで表示され、主要な記事の見出しがページの他の部分の記事よりもさらに大きくなることが多いのは、まさにこのためです。
上記の例で、最も大きな単語が最も印象的で感情的であることに注目してください。 読者は、2番目に大きい単語である基本的な「パフォーマンス」よりも、「クラッキング」という単語に素早く反応する可能性がはるかに高いのです。
この概念に関連するもう 1 つの重要な原則は、スケール (別のオブジェクトとの関係におけるオブジェクトのサイズ) です。 1 つのオブジェクトは、どんなに大きくても小さくても、別のオブジェクトと比較されるまではスケールを持ちません。 これによって、デザインにバランスを持たせ、支配的な要素に焦点を当てることができるのです。
2 遠近法による奥行きの錯覚
遠近法を利用することにより、設計者は数インチから数マイルまでの奥行の錯覚を作ることができます。
たとえば、道路のイラストは、通常、最も低い位置が広く、キャンバス全体に広がるほど徐々に狭くなります。 同様に、見る人に最も近いオブジェクトは、遠くにある同じオブジェクトよりも常に大きく見えます。
適切な遠近法は、適切な距離を正確に伝えるために、スケールと比率の両方を使用します。
適切な遠近法は、適切な距離を正確に伝えるために、縮尺と比率の両方を用います。5マイルの道路を描くと、同じサイズのキャンバスに描かれた半マイルの道路よりはるかに鋭く後退します。
3 色とコントラストは注意を引く
大きな要素が小さな要素よりも重要だと認識されるように、明るい色は通常鈍色よりも注意を引くのです。
劇的なコントラストを持つ色は、穏やかなスペクトルに比べて特定の要素を強調することもできます。
デザインに使用される色の組み合わせと、それらが互いにどのように関連するかは、配色として知られています。
デザインに使用される色の組み合わせと、それらが互いにどのように関連しているかを配色と呼びます。デザイナーの配色の選択は、作品の中に統一、調和、リズム、バランスを生み出すことができますが、コントラストや強調も生み出すことができます。
あまりに多くの対照的な色を使用するデザインは、しばしば無秩序でまとまりのない印象を与えます。
類似の色は、デザイン内の関連する要素をグループ化するために使用することができ、色の選択は重さや距離を示唆することさえできます。 赤や黄色などの暖色系は、暗い背景を持つデザインの前景に進み、青や緑などの寒色系は通常背景に退きます。 一方、明るい背景のデザインでは、その逆となります。 青や緑などの寒色系は、暖色系よりも近くに見えるのです。 これは、人間の目がそう感じるだけなのです。
Color depth chart
したがって、色の選択は、デザイン内の背景から図を識別する視聴者の能力に本当に影響を与えることができます。
効果的な色の組み合わせは、カラー ホイール上の各色相の位置だけでなく、周囲の色との暖かさやコントラストに依存します。
インパクトのある配色を選択するための Visme のチュートリアルをご覧ください。
概要、従来の履歴書や目次について考えてみてください。 一般に、それぞれいくつかのサイズの活字で構成され、大見出しは小項目や細かい部分より大きなポイントサイズになっています。
書体の階層は、さまざまなサイズ、ウェイト、スペースのテキスト、または各要素の組み合わせで作ることができます。
デザイン全体で単一のフォントが使用されている場合でも、そのサイズと重量を変えることで、より重要な要素に注意を向けるだけでなく、読みやすく理解しやすい全体的な構成を作成できます。 これは、ずさんな印象を与えるだけでなく、大量の応募書類にすばやく目を通す人に、大きな混乱を引き起こす可能性があります。
同様に、すべて同じサイズ、フォント、およびウェイトの活字を使用したデザインは、効果的に何かに注目させることはできません。
このような理由から、ほとんどの Web デザイン プログラムでは、書体の属性を手動で選択できるだけでなく、基本的なコピー テキストに加えて、タイトル、サブタイトル、および段階的な見出しフォントからなるプリセット階層が提供されています。 すべての単語が同じサイズであるとき、または階層構造の原則が適用されているとき、より整理されて読みやすく見えますか
5 空間は強調と動きを与える
Rule of space
視覚構成の最も基本的な考え方の1つが、デザインから外すものを扱うことです。
構成の要素を配置するとき、デザイナーはコンテンツの周りのスペースを使用して、特定の要素に注意を引く (白紙のページ上の 1 つの要素を考える) こともできますし、有名な FedEx のロゴに見られる隠れた「矢印」のように、まったく別の視覚的メッセージを送信することもできます。
戦略的なスペーシングは、ページ走査パターンに貢献することにより、ターゲットとなるシーケンスでページ全体に視聴者の目を引きつけることもできます。
読者は、目の動きによって観察できる特定のパターンに基づいてページを走査する傾向があります。
たとえば、英語を母国語とする人は、左から右へ読みます。
たとえば、英語を母国語とする人は、左から右に読みます。したがって、テキストのページに直面したとき、彼らは通常、同様のスキャン パターンを提示します。 一方、アラビア語は、右から左へ書きます。 アラビア語の読み方に慣れている人は、この「逆」方向にページをスキャンする傾向があります。
F-パターン
英語読者の最も一般的な視線移動パターンは、F パターンです。 なぜでしょうか。 それは、私たちが本や手紙、Web ページを読むときに、まさにそのように読むからです。
この自然な傾向のため、デザイナーは、テキストに大きく依存する Web サイトやその他のイラストを構成する際に、F パターンを最もよく利用します。
Z パターン
画像に多く依存するデザインは、多くの場合、Z パターンで構成されます。
デザイナーは、この一般的な「Z」視線移動パターンに沿って配置することで、構成の特定の要素を強調することができます。 見出し、画像、小見出しを考えてみてください。
6 近接は関係を示唆する
白い画面の片側に 5 つの点のグループがあり、反対側に 1 つの点がある場合を考えてみてください。
要素を近くに配置することで、他のメッセージも送ることができます。 たとえば、地図上の特定の位置に要素を配置することで、近いか遠いかにかかわらず、観客に距離の理解を与えることができます。 もちろん、これは地図のサイズと縮尺にも依存します。 1インチが1マイルとは限りません。
互いの特定の近さに要素を配置することにより、付加的なイメージやメッセージを作成することができます。 3 つの円と 1 本の線が、幸せな顔や悲しい顔の形を示唆するように配置されているのをよく見かけると思いますが、考えてみてください。 そのとき、個々の要素よりも、提案されたイメージの方が注目されることが多いのです。
7 ネガティブ スペースが強調する
近くのアイテムをグループ化してそれらの関連性を示唆するように、要素の周りに白い領域を含むことは情報の別々のグループを明確にすることになります。
十分な余白がない構成は、ごちゃごちゃした、混乱した、混沌としたデザインになる可能性があります。 言い換えれば、少ないほど良いということです。 経験豊富なデザイナーは、余白を利用して、追加の視覚的メッセージを示唆することもできます。 例えば、有名なFedExのロゴの中央にある「矢印」や、上のコカ・コーラのデザインを考えてみてください。
8 視線を誘導する配置
配置は、デザインに要素を配置する構造の一部分です。 テキストであれ画像であれ、視覚的なコンポーネントが構成全体にわたって恣意的に配置されないように規定されています。
多くの視覚的なデザインは中央揃えまたは両端揃えで、左右の余白を共有するようにページ全体に間隔をあけて配置されます。 文字が縦横無尽に散らばっていたら、とても混乱しますよね。
Fパターンでは、オブジェクトは一般に左に配置され、Zパターンでは、上の広告のように、左、中央、右の配置の組み合わせがよく使われます。
シンプルな視覚的デザインは、最も頻繁にフレームの中央に配置され、バランスと調和を提供し、美的にも好ましい形式です。
ほとんどの西洋の読者は、ページの左から右のサイズに読むことに慣れています。
右寄せは、左側が視覚的に重くなりがちな全体のデザインにバランスを与えるために採用されることがよくあります。 同様に、左揃えは逆のシナリオでも同じ効果を提供できます。
9 奇数のグループはフォーカスを生み出す
たとえば、1 つまたは 3 つの要素のグループは、1 組の要素よりも印象的です。 同様に、奇数のオブジェクトで構成されるグループは、ほとんどの場合、偶数のグループよりも興味深く、美的に好ましいと考えられています。 なぜでしょうか？ 人はバランスをとることでより快適に感じるのです。
10 反復は構図を統一する
コントラストがデザイン要素を強調し注意を引くように、繰り返しは統一感を生み出し、理解と認識を深めます。
出版されたほとんどのテキストを思い浮かべてみてください。 ページのデザインは、本文はすべて 1 つのフォント、章の見出しは別のフォント、脚注は 3 番目の異なるフォントで構成され、出版物全体を通してすべて統一されています。
統一されたデザインを実現するには、フォント、色、形、サイズなど、何らかの要素を構成全体にわたって繰り返すことです。
たとえば、冒頭のインフォグラフィックは、12のビジュアルヒエラルキーの原則を紹介しています。 ドキュメント全体で同じフォントとスタイルを繰り返すことで、リストを明確に統一し、各項目が全体の一部であることを読者に伝えています。
繰り返しは、要素に新しい意味を与えることもできます。 青い下線付きのテキストがページ上で際立っているのをよく見かけるのではないでしょうか。 そのフォントがハイパーリンクであることを即座に認識できるほどでしょう? デザインの中でこのスタイルを繰り返すことで、視聴者に、どこをクリックすればより多くの情報が得られるかを伝えることができます。
11 線で動きを表現する
誘導線は、繰り返される要素、たとえば点の列、オブジェクトや図形の近接、および正と負の空間の関係の使用によって暗示されることがあります。 たとえば、オブジェクトを上下に傾けることにより、飛行や降下を示唆する線を作成できます。
デザインを整理する 12 のグリッド
最も効果的なデザインは、ある種のグリッドを通じて構成されています。
アーティスト、写真家、グラフィック デザイナーは、長い間、構図の全体的なバランスを向上させるために、三分の一の法則を採用してきました。
重要な視覚的要素は、線に沿って配置し、線が交差する 4 つのポイントを強調します。 一般に、オフセンターの構成は、メインフォーカスポイントがフレームの中央に配置されたデザインと比較して、より審美的に美しいと考えられています。
最も一般的であるだけでなく、モジュール式グリッドは一般的に最も読みやすいデザインです。
代替のグリッド
古典的な垂直-水平グリッドの代わりに、デザイナーは、ページ上で作品が際立って、視聴者の全体の注意を引くように、斜めに配置された構成を選択するかもしれません。 その周囲のテキストは、同じデザインまたは周囲のページにあることがあります。
ランダムという概念に惑わされないでください。 特定の理由や戦略なしに背景の上にランダムに要素を散りばめても、ジャクソン・ポロックの傑作に奇跡的に変身することはないでしょう。
ビジュアル ヒエラルキーの原則は、デザインの要素を強調し、ビジュアル メッセージを明確にするための最も効果的な戦略の 1 つです。
視覚的階層性の原則は、デザインの要素を強調し、視覚的メッセージを明確にするための最も効果的な戦略の一部です。
デザイナーは、採用する原則を賢く選択しなければならず、そうしないと、強調が薄れ、視覚的な階層が崩れてしまう危険があります。
階層が効果的かどうかわからないのですか?
階層が効果的かどうかわからない場合は、テストしてみましょう。 実際のデザインが背景に溶け込み、形や色がぼんやり見えるようになるまで、ページや画面の前の空間を見つめるだけでよいのです。
あるいは、目をつぶってしまうのを防ぐために、デザインのスクリーンショットを撮り、Photoshop で開いてガウスぼかしフィルタを適用して、ぼかしテストを行うこともできます。
それでも主役はあなたが強調しようと計画した要素であれば、あなたの視覚階層は有効です。
Visual Hierarchy Infographic
Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.
Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>