Webデザイン基礎

Webデザインでよく使う視覚効果

デザインで使う視覚効果とは

バナー制作や広告など制作する際に視覚効果を生かしてデザインすることができます。
デザインにおいて視覚効果は、ユーザーの視線を意図的に誘導し、情報の伝達を効果的に行うために重要です。
ここでは、
【視線追従】【トンネル効果】【矢印効果】【道路効果】について説明しますので是非活用してみてください。

1. 視線追従(Eye Tracking)

概要

視線追従効果とは、デザインの要素がユーザーの視線を特定の方向に誘導する手法です。
視線の動きを予測し、それに基づいて要素を配置することで、ユーザーが自然に重要な情報に目を向けるように誘導します。

具体例人物の視線: 写真やイラストの中で人物が特定の方向を見ていると、ユーザーもその方向に視線を誘導されます。

レイアウト: 見出しや画像を戦略的に配置し、ユーザーの視線をページ内で自然に動かします。

使用例

広告バナーで、モデルが商品を見ている写真を使うと、ユーザーもその商品に注目しやすくなります。

ポイント

人間は、目線の先にあるものを自然と見る習性があり、それを生かして重要な情報をその位置に配置するとその情報が伝わりやすい傾向にあります。横顔などの写真素材やグラフィック素材があったら積極的に活用してみましょう。

2. トンネル効果(Tunnel Vision)

概要

トンネル効果とは、視覚的に中心に向かって焦点を絞り、他の要素を薄暗くすることで、ユーザーの注意を特定の要素に集中させる手法です。これにより、重要な情報やアクションを強調できます。

トンネル効果: 画像の周囲を暗くし、中央部分を明るくして中心に注意を集めます。

使用例

ポイント

人間は、目線の先にあるものを自然と見る習性があり、それを生かして重要な情報をその位置に配置するとその情報が伝わりやすい傾向にあります。横顔などの写真素材やグラフィック素材があったら積極的に活用してみましょう。

3. 矢印効果(Arrow Effect)

概要

矢印効果とは、矢印や指示的なラインを使用して、ユーザーの視線を特定の方向に誘導する手法です。矢印の指し示す方向に自然と目が向くため、ナビゲーションや行動喚起に効果的です。

具体的人物の指先: 人物の指指すの先に文章などの要素を配置する

ナビゲーション: WebサイトのナビゲーションメニューCTAに矢印を使い、ユーザーを次のステップや重要なセクションに誘導します。

ナビゲーションメニューとは

Webサイト上に掲載されているコンテンツに対してアクセスのしやすさを提供しながら、ユーザがすばやく簡単に閲覧できるようにするための機能です。ヘッダーメニューが代表的なそれにあたります。

CTAとは

CTAは「Call To Action」の略で「行動喚起」を意味します。Webサイトで訪問者をとってもらいたい行動に誘導することを意味し、多くの場合はボタンやリンクの形で表示される。

使用例

よく見かける【チャンネル登録】ボタンもCTAの一つですね。

ポイント

懐かしい一発屋芸人のバナーもいい例ですね

ポイント

人物写真が使われているバナーでは指差した先に要素があります。また三井住友カードのバナーでは永久無料の永久を矢印で表しています。使い方次第で様々な応用ができそうです。

4. 道路効果(Road Effect)

概要

道路効果は『道路は先に続いている』という固定概念により道路の先を追ってしまうという視線誘導効果の事です。それを利用して伝えたい要素を効率良く配置します。

使用例

ポイント

道路効果は、車やバイクなどのバナーで使われることが多いです。道の先に目線が行きやすいという効果を利用して要素を配置してあります。

まとめ

デザインにおける視覚効果を適切に活用することで、ユーザーの視線を意図した方向に誘導し、重要な情報を効果的に伝えることができます。視線追従、トンネル効果、矢印効果、道路効果を組み合わせて使用することで、視覚的に魅力的で機能的なデザインを実現しましょう。

  • この記事を書いた人

Gasson

Webデザインと海を愛する現役Webディレクター クリエイティブのヒントとなる情報と海のBLOGを発信します。

-Webデザイン基礎