NowLoading...

NowLoading
  1. ホーム
  2. 技術備忘録
  3. 視線誘導テクニック

デザイン

  • facebook
  • twitter
  • line
  • hatena
  • pocket

視線誘導テクニック

WEBや紙、ゲームの画面などなどいろいろなタイプのデザインを今まで経験してきましたが、そのどれもが基本的な考え方は一緒です。
ユーザー(読み手)に正しく情報を伝達できるか?

デザインというのはただ単に見た目を整えて、おしゃれにすればいいというわけではありません。
情報を的確に素早く伝達するためには”見せる”技術が必要であり、それらのテクニックを組み合わせて日常のありとあらゆるプロダクトをデザインするのが我々デザイナーの使命です。
今回は僕が普段からよく使う「実践で役立つ視線誘導テクニック」をご紹介します。

その1色を変える

画面の中で特に注目させたい箇所の”色”を変えることで視線を誘導させるテクニック

色を変える

画面全体のカラーバランスをある程度統一した状態で、ユーザーの目を引きたい箇所の色を変えると自然と視線を誘導できます。
「大事なところ赤!」というあれと同じですね。

lego parkhouse

ただし、これが使えるのは1画面内の限られた場所だけです。
どこもかしこも同じように色変したら意味がありません。埋もれてしまうのでかえって解りづらくなります。 iroiro

トーンを変える

色を変えるに似ていますが、明度や彩度といった”トーン”を変えることで視線の流れを生み出します。
全体的な明度や彩度が統一されている画面で、部分的に変化を与えると、その差によって視線が誘導されます。 tone カラーリング状態ではわかりずらいですが、グレースケールにしてみると解りやすくなります。 shawshank 色の識別が苦手な方などには特に有効な手段になるでしょう。 croro

その2バランスを崩す

要素を傾けたり、一部分だけを大きくしたり、オブジェクトのバランスを変えることで注目ポイントを創り出します。

サイズを変える

視線を集めたい箇所のオブジェクトサイズを変えるだけで、注目ポイントを作りだせます。 sizebalance ただし、いたるところで多用すると目立たなくなるので、使用するポイントは限定した方が効果的です。 dame

傾ける

全体的に傾けると傾けた方向に視線が流れます。注目ポイントを作りたいときはその部分だけバランスを崩すと、その位置で視線が止まります。 SALE persona ”停止点”を作り出しましょう。(停止点がないと視線が定まりません) balance

その3表現を変える

tone2 2のバランスを崩すの手法に似ていますが、
ルール化されたデザインの中で一部分だけ表現を変えるだけで注目ポイントを創り出せます。

その4写真やイラストを利用する

ブログやニュースサイト、ネットショップなどに多く見られる手法で、文字だけの文章の中に挿絵や写真が入ると、それだけで注目ポイントが生まれます。 news blog 目を引きたい文章を画像の近くに置くと、画像と一緒に文章も視界に入るので画像と文字のセットをうまく利用するのもテクニックです。
アイコンを利用するのもいいですね。

face また、”人は本能的に人の顔に注目する”動物なので人物の写真をうまく利用すれば、それだけでも視線を誘導できます。

関連記事

もっと見る

技術備忘録 でよく読まれている記事

人気記事TOP10