ウェブページの重要な箇所を素早く伝える5つのデザインテクニック

ユーザーにウェブページの重要な箇所を素早く伝える5つのデザインテクニックを紹介します。

Creating Focal Points in Your Web Design

[ad#ad-2]

下記は各ポイントを意訳したものです。
元記事ではさらに多くのサイトが紹介されています。

• はじめに
• タイポグラフィ
• イラストレーション
• ボタン
• ホワイトスペース
• デコレーション

はじめに

ウェブサイトのユーザーは、少しでも速くものを見いだすことを望みます。そしてわたし達ウェブデザイナーは、そのようにサイトをデザインするべきです。これを実現する最も重要な方法の一つがフォーカルポイントです。
フォーカルポイントと、はユーザーの注目をガイドするようウェブページ上に目立つセクションのことです。フォーカルポイントは際立っており、他のコンポーネントとは別のものです。ウェブページの最も重要な外見を強調し、ウェブサイトの主となる目的を伝えることが可能です。

タイポグラフィ

タイポグラフィはサイズ、カラー、スペーシング、タイプフェイスなどさまざまなファクターからエレメントの強調を増やします。

Fajne Chlopaki
特大のタイポグラフィはユーザーの目をひきつけます。

Sandstone
ラベルを使い魅力的なフォーカルポイントを提供しています。

イラストレーション

グラフィカルなコンポーネントは多くの説明文を必要とせずに、ユーザーにたくさんのメッセージを伝えます。そして、ユーザーの注意力をつかむための視覚のフックとしても機能します。

Best Your Followers
ゴリラのメインイラストだけに目をうばわれますが、注目すべきはフォーカルポイントを処理するためのゴリラの腕とそのスペースです。

Aka-Acid
とても美しいデザインです、しかし特定のフォーカルポイントがないのは欠点です。

ボタン

近年のウェブデザインで最も人気の高いエレメントの一つがアクションボタンです。ほとんどのウェブサイトでこの大きいボタンがあります。ボタンは確かに魅力的なエレメントですが、過剰なものや誤用した場合には、その有効性が減少します。

Fatburgr
二つのシンプルなボタンがユーザーの注意をひきつけます。このサイズとカラーの選択はとても効果的です。

SolidShops
クリアで明白なボタンは上下の境目にフォーカルポイントを生み出すために使われています。

ホワイトスペース

ホワイトスペースを使うことは、目に見えるエレメントに訴えずに、ページの特定のエリアにユーザーの目をひきつける最もシンプルな方法です。

Apple
プロダクトを目立たせるためにホワイトスペースを使った素晴らしい例です。

Ask.com
検索ボックスの周りに十分なホワイトスペースを設けることで、そこに目をひきつけさせます。

デコレーション

数多くの中から区別する方法がシンプルなデコレーションを使うことです。カラーや配置は大きな効果を与え、他のエレメントの有効性はこれらの基本的なエレメントがどれほどうまく使われているかによります。

3rdM
注意をひきつける唯一のものはカラーのブルーです。シンプルながら、効果は大きいです。

UX Magazine
最も大きく、そしてカラーでも高いコントラストを持っているものはページで際立ちます。

[ad#ad-2]