Help us understand the problem. What is going on with this article?

Webデザインにおける視覚的階層の重要性

こんにちは。奥多摩日本語学校の留学、ミカと申します。ユーザーインターフェイスで要素の視覚的な階層構造を適切に使用することは、そのターゲットユーザーに大きな影響を与えます。 この記事では、ビジュアル階層とは何か、そしてWebデザインにとってその重要性について説明します。

視覚的階層について

Webページとイメージを見るとき、私たちの注意は最も重点を置いている要素に行きます。視覚的階層が視覚的要素の特定順番を使っていますから、ウェブサイトはもっとわかりやすくようになります。

以下は、視覚的な階層のある場合とない場合のテキストの例です。
QIITA2_EXAMPLE1.png

左の例では、強調がありませんから、このテキストは読みにくい。要点は強調されていません。

しかし、右の例では、見出しと副見出しが使っています。もしウェブサイトの記事のスタイルが使って、理解することはもっとやすいです。

ブランドンジョーンズによると、Understanding Visual Hierarchy in Web Design のブログから、「基本的には、デザインはビジュアルコミュニケーションに関するものです。効果的なデザイナーになるためには、あなたのアイディアを視聴者に明確に伝えるか、そうでなければ彼らの注意を失う必要があります。」

“At its core, design is all about visual communication: To be an effective designer, you have to be able to clearly communicate your ideas to viewers or else lose their attention.”
― Brandon Jones, Understanding Visual Hierarchy in Web Design

この手法はページの要素を整理して、そのデータを理解しやすくするのに役立つため、Webサイトは視覚的階層を使用してユーザーとのコミュニケーションを向上させることができます。それはまたページの焦点を強調します。 それは、最も重要な詳細に従って読者がどのように情報を取り込むべきかという、それらの重要性に従って配列されたデータのシーケンスを示しています。

視覚的階層の原則

6 Principles of Visual Hierarchy for Designersのブログによると、6つの原則があります。

ページスクリーニングパターン (Page scanning patterns)

  • F パターン

image.png

  • Z パターン

image.png

サイズ (Size)

image.png

空間と質感 (Space and texture)

image.png

書体の重さとペアリング (Typeface weight and pairing)

image.png

色と色合い (Color and tint)

image.png

方向 (Direction)

image.png

Webデザインにおける視覚的階層

現在のWebサイトでは、要素を整理する際に視覚的な階層を使用しています。

以下は一例です。例を見てみましょう。

RIO-Homepage.png

上記の例は、一般的なWebサイトデザインの例です。このWebサイトでは、タイポグラフィに階層が使用されているため、どのテキストを最初に注目する必要があるかがわかりやすくなります。

まとめ

デザインはWeb開発に重要な役割を果たします。Webページのコンテンツをどのように配置するかを知ることは重要です。Webサイトのコンテンツが読みやすく理解しにくいものであれば、それはユーザーとコミュニケーションをとることが難しいです。だから、視覚的階層の使うことのほうがいいです。視覚的な階層構造は、ページかエレメントの焦点を識別できるようにするために使用されます。これにより、お客さんはWebサイトの主なアイデアを理解しやすくなります。

ソース

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away