ビジュアルウエイトを決める11の要素。ユーザーの目を惹くUIオブジェクトを作る方法

たった1秒の閲覧が結果を左右するWebデザインにおいて、ユーザーに意図したものをきちんと見てもらうことは大切です。

せっかくWebページを訪問してもらっても、重要度の低い情報のほうが目立っているために、意図した情報が伝わりきらない……ということは、意外なほどよくあります。

この記事では、ビジュアルウエイト（視覚的な重み）を操ることによって、ユーザーの目を惹くUIオブジェクトを作る方法を解説していきます。

ビジュアルウエイトとは

ビジュアルウエイトとは、見る人を惹きつける力です。Webページ上のすべての要素にはビジュアルウエイトがあり、ウエイトが重ければ重いほど、よりユーザーの注目を集められます。

▲出典：UX TIMES

たとえば上の図では、白いボックスよりも黒いボックスの方が強く印象に残り、注目を集めやすいですよね。これは背景全体が淡い水色のため、相対的に黒が強調されるからです。一方で背景全体が暗色系の場合は、ビジュアルウェイトは白いボックスの方が重くなります。

ビジュアルウエイトを使いこなせば、フォーカルポイント（Focal point：磁石のように人を惹きつける焦点となるポイント）を意図的に作ることが可能です。

ビジュアルウエイトの測りかた

物理的な重さとは違って、ビジュアルウエイトは定量的に測れません。

しかし以下のようなテストを行えば、Webページ上のどのオブジェクトのビジュアルウエイトが重いかを理解できます。

Webページや画面を数秒間見つめて、目を閉じてみてください。そのWebページのどのオブジェクトが記憶に残っているでしょうか？

このとき記憶に残っているものが、ビジュアルウエイトの重いオブジェクトです。

ビジュアルウエイトを決める11の要素

ここからは、ビジュアルウエイトを決める基本的な要素をご紹介します。

要素1. 大きさ

現実の世界でも、同じ種類のものが2つあったら、大きいもののほうが重量がありますよね。

これと同じく、小さいものよりも大きいもののほうが目を惹きます。

▲大きいオブジェクトのほうが小さいオブジェクトよりも目立つ

要素2. 形

規則的な形をしたオブジェクトは、不規則な形をした物体よりもビジュアルウエイトが重くなります。

これは不規則な形をしていると、オブジェクトの一部が取り除かれているという印象を与えるためです。

▲この場合、丸のほうが星よりもビジュアルウエイトが重い

要素3. 方向

横よりも縦のオブジェクトのほうが、ビジュアルウエイトは重くなります。

▲横長の長方形よりも、縦長の長方形のほうがビジュアルウエイトが重い

さらに斜めのオブジェクトは、縦や横のオブジェクトよりもビジュアルウエイトが重いです。斜め＞縦＞横の順にビジュアルウエイトが重くなります。

▲斜めの長方形は、縦の長方形よりもビジュアルウエイトが重い

要素4. 色

ビジュアルウエイトをコントロールするにあたり、とくに重要なのが色です。

下図の例では、左がもっともビジュアルウエイトが重く、右にいくほど軽くなります。

▲赤は青よりも、青は緑よりも目を惹く傾向がある

また、不飽和色よりも飽和色のほうが目立ちます。

▲ビビットな飽和色（左）のほうが、淡い不飽和色（右）よりも目を惹く

ニュートラルな色のなかにポップな色を配置すると、特定のオブジェクトにビジュアルウエイトを与えられます。

▲モノクロベースなビジュアル要素の中で、黄色のCTAボタンがもっとも目立つ（出典：Basecamp）

要素5. コントラスト

コントラストをつければ、オブジェクトを自然に目立たせることが可能です。

要素の色が周囲と大きく異なると、ビジュアルウエイトが重くなります。

▲コントラストが強い右のほうが、ビジュアルウエイトは重い

要素6. テクスチャ

テクスチャをつけた要素は、テクスチャをつけていない要素よりもビジュアルウエイトが重くなります。

これは、テクスチャが擬似3D効果を与えるためです。

▲無地の左よりも、テクスチャがついた右のほうがビジュアルウエイトは重い

要素7. ホワイトスペース

ホワイトスペース自体のビジュアルウエイトはゼロですが、オブジェクトを目立たせるのには最適です。

オブジェクト周りのホワイトスペースが広いと、オブジェクトがより目立ちます。

▲広いホワイトスペースが、キーメッセージとCTAボタンをひきたてている（出典：MailChimp）

要素8. Z軸の深さ

手前にある要素は、後ろに配置されている要素よりもビジュアルウエイトが重くなります。

▲フローティングアクションボタンと画面下部のナビゲーションバーは、注目を集めるために手前に配置されている（出典：Material Design）

▲奥にある背景よりも、手前の車が目立っている（出典：Tesla）

要素9. 個人的な興味

個人的な興味も、デザインの理解に影響を与えます。

たとえば、車と電車の画像を見たときに、電車が好きな人は電車のほうに注目しますよね。まったく同じWebページを見ていても、人によって注目するポイントが異なることもあります。

ユーザーの興味を惹くコンテンツを模索することも、ビジュアルウエイトを高めるのに有効です。

▲人によって注目するものが異なるケースもある（出典：Vectorstock）

要素10. 人の顔

目と顔は、ビジュアルウエイトが重い要素です。

Webページ内に人の顔があると、その部分のビジュアルウエイトが重くなります。

▲まず人の顔に注目し、そのあとに太字の見出しに目がいく（出典：BestBuy）

要素11. 動き

動いているものは、自然に人の注目を集めますよね。

オブジェクトにアニメーションを付加することで、ビジュアルウエイトを重くできます。

▲動きがついたオブジェクトは人の注意を自然に引く（出典：Your Plan, Your Planet）

おわりに

今回ご紹介した11の要素は、単独では機能しません。

たとえば、一般的に大きいオブジェクトは小さいオブジェクトよりもビジュアルウエイトが重いとされていますが、ホワイトスペースに囲まれた小さな赤い丸は、まわりの青い丸よりもビジュアルウエイトが重くなります。

単独の要素だけで判断せず、11の要素すべてを踏まえてビジュアルウエイトをつけるよう、注意しましょう。

（執筆：Nick Babich　翻訳：Nakajima Asuka　編集：Kimura Yumi）