初心者向けのビジュアルヒエラルキー

視覚的階層とは、意図した領域に注意を引くために特定の順序でオブジェクトを編成することです。

UX デザインで一般的に使用される視覚的な階層は、読み手が簡単に移動できるようにし、必要な場所に注意を向けるのに役立ちます。

不適切な使用や視覚的な階層の欠如は、Web サイトの訪問者を混乱させ、迷子にする可能性があります。

意図した要素に注意を向けさせるために、ポスターや広告では視覚的な階層が一般的です。

このブログでは、初心者向けにビジュアル階層の基本を説明します。

分解されたビジュアルヒエラルキー

ビジュアル階層をより単純なチャンクに分割すると、デザイナーがデザイン コンセプトにどのように取り組むかを説明するのに役立ちます。

3 つはビジュアル階層における 3 つの主要な役割であり、そのうちの 2 つは大きく関連しています。

サイズ

オブジェクトのサイズを変更すると、注意を引き付けたり、遠ざけたりすることができます。

表現したい最も重要な情報のために、最大のサイズを残すことが不可欠です。 同様のサイズの要素をあまりにも多く使用すると、何も目立たなくなるため、この効果が失われます。

サイズのスケーリングは、他のオブジェクトとの比較を示すために不可欠です。 バランス感覚を養うことは、最大のオブジェクトを小さなオブジェクトと比較する方法を強調するスケーリングに役立ちます。

重要でない情報がある場合、小さいサイズにすることで邪魔にならず、ユーザーが最後に見る場所に置いておくことができます。

色とコントラスト

明るい色は、他の色よりも注目を集めるのに適しています。 明るい色と暗い背景を組み合わせると、この効果が高まります。 その結果、あなたの情報がより目立ち、簡単に注目を集めることができます。

色とコントラストは視覚的な階層の 2 つの部分ですが、どちらも完璧に連携して注目を集めます。

この方法を使用する 1 つの方法は、テキストを派手な色で強調表示して、テキストの色を変更することです。 他のくすんだ色のテキストよりも先に注目を集めます。

コントラストが大きいほど、注意が引き付けられます。 真っ赤なフォントに暗い背景などの劇的な色の違いを追加すると、ユーザーの注意を引き、画像や Web ページで最初に気付くようになります。

注意を引くために対照的な色を作成するときは、それらを最小限に抑えるのが最善です. 対照的なオブジェクトが多すぎると、読者が混乱し、望ましくない不快な効果が生じます。

色を使用するもう 1 つの方法は、類似したパレットを選択して、特定のオブジェクト間の相関関係を作成することです。

最初にすべての注意を向けたい場所であるため、この戦術は、ページ上で最も必要な要素に対してのみ予約することをお勧めします。

優れた UX デザインには十分なコントラストが含まれており、ほとんどの美学では強いコントラストを使用して見事な作品を作成しています。

F & Z パターン

主にテキストを介して情報を提供する場合、視覚情報の処理方法を最大限に活用する主なパターンが 2 つあります。

これらのパターンはほとんどの言語で機能しますが、英語では単語が左から右、上から下に読み取られるため、うまく機能します。

Fパターン

F パターンは、長いテキストを含むデザインに最適です。 デザインは、左上から右に向かって、それにちなんで名付けられた文字に従います。

その後、視聴者は背表紙をスキャンして小見出しや見出しを探します。

このパターンは E パターンとも呼ばれますが、F パターンの方がより象徴的です。

F パターンを使用するには、すべての重要な情報を左側に小さな見出しで配置して注意を引く必要があります。

このデザインは、段落の大きなブロックからテキストを読むことに伴う退屈を解消するのに優れています.

ユーザーは見出しをスキャンして、目を引く見出しや箇条書きを見つけることができます。これらは注目を集めるのに役立つからです。

Zパターン

F パターンはテキストの多い Web サイトに適していますが、Z パターンは異なります。

Z パターンは、複数の段落のテキストがない Web サイトや広告に最適です。

設計は、最も優先度の高い情報を左上に配置することから始まり、次に重要度が右上、左下、右下にカスケードします。

Z パターンはよく使用されるわかりやすいデザインであるため、ユーザーは簡単に Z パターンをナビゲートできます。

左上のセクションは、人々が最初に気付くため、通常はロゴ用に予約されています。 右上には、ユーザーが会社のロゴを見た後に配置された行動を促すフレーズがあります。 この状況での行動を促すフレーズは、通常、登録プロンプトです。

通常、デザインの中央には、空の部分を埋めるための画像が含まれています。

左下と右下には、訪問者に表示したいすべての意図したテキストまたは情報が含まれます。

タイポグラフィを理解する

文字体裁の階層は理解しやすく、多くのテキストを含むあらゆるデザインに適用できます。 見出し、小見出し、本文の順に 3 つの部分に分けることができます。

見出しには重要な情報が含まれており、デザインの一番上に配置され、最も目立つコンテンツです。

小見出しは、すべてのテキストを並べ替え、パラグラフの乱雑さを整理する役割を果たします。 優先順位が競合しないように、小見出しは常に見出しよりも小さくしてください。

小見出しは、ユーザーが特定の情報を見つけるための簡単なナビゲーションを提供します。

最後のピースはテキストで、通常は段落を含みます。 フォント サイズは小さくする必要がありますが、読みやすさは維持してください。 前の 2 つのセクションは、ユーザーが密度の高いテキストを簡単にナビゲートできるようにするために機能します。

間隔の重要性

最小限の情報を含む Web サイトの場合、重要な情報を囲む十分なスペースを残すと、すべてのスペースがある中央に注意が引き付けられます。

この概念は、他のすべてのデザインにも適用する必要があります。情報を追加しすぎると、ユーザー エクスペリエンスが不快になります。

コンテンツをスペースで囲むことで、シンプルでわかりやすい UX デザインを提供します。

あまりにも多くの情報を詰め込み、エリアの周りにほとんどスペースを残さないデザインは、圧倒され、人々を困惑させてしまいます. ユーザーが混乱すると、常に Web サイトを離れる可能性があります。重要な情報のみを表示するようにしてください。

アライメントの使用

テキストをランダムに配置すると多忙なイメージが作成されるため、デザインを揃えることが重要です。

FパターンとZパターンの両方のデザインは、アライメントの使用を具体化しています. F パターンのデザインは左揃えを使用しますが、Z パターンのデザインは左と右の配置、および中央の配置を使用します。

テキストを中心にビジュアル デザインを作成する場合は、左に揃えるのが最適です。

シンプルに焦点を当てた厳密に視覚的なデザインの場合、すべての要素を中央に配置すると、魅力的なデザインが作成される傾向があります。

グリッドの使用

デザインを構築する場合、グリッドは作成プロセスに役立つ一般的な方法です。 三分割法を使用すると、デザインにバランスを加えることができます。

三分割法を使用するには、デザインにグリッドを追加し、水平と垂直の 2 本の線の上に置きます。 その結果、目に優しく快適なデザインが得られます。

中心に近いオブジェクトは注意を引き、遠くにあるオブジェクトは最後に注意を引きます。

近接と関係

要素が互いに接近している場合、読者はそれらが関連していると想定します。

これにより、多くの情報を整理し、視聴者が理解しやすくなります。

画像をテキストでグループ化することは、それらが関連していることを意味し、読者は 2 つを関連付けます。 画像とテキストが離れていると、読者は両方の要素が無関係であり、互いに何の関係もないと見なします。

フォントと視覚的階層

フォントのサイズを変更して、重要な情報用に大きなフォントを確保すると、それらに注意を向けるのに役立ちます。

ポスターの場合、名前は大きなフォントのいずれかで、住所などの項目は小さなフォントで書く必要があります。

フォント サイズから話を進めます。さまざまな種類のフォントを使用すると、ユーザーの注意を引くのに役立ちます。 タイトル、小見出し、および情報テキストには別のフォントを使用してください。 このデザイン方法は、読者の注目を集めて維持するために必要なポップさを作品に与えるのに役立ちます。

ビジュアル階層のヒント

デザインの作成を開始する前に、いくつかのメモを書き留めておくと、デザインを整理したり、より美しいデザインを作成したりするのに役立ちます.

優先順位を付ける必要がある最も重要な情報と、そのために使用する方法を書き留めます。

また、読者の旅を想像して、UX デザインを改善し、雑然とした詳細を取り除くようにしてください。

優れた UX デザインから得られる ROI は、追加の作業を行う価値があるため、その重要性を過小評価しないでください。

要約

視覚的な階層とは、読者の注意を引く順序を決定することです。 重要な情報を最初に表示してから、他のすべての情報を表示する必要があります。

コントラストを使用することで、ポップな色を作成し、読者がデザインで最初に気付くようにすることができます。

読者に最初に見てもらいたい情報を知ることで、視覚的階層のすべての要素を使用して、他の人に優れた UX デザインを提供することができます。