インパクトを与えるだけでは未完成！？
完成間近だけど、未完成です。
なぜなら、インパクトのあるデザインで
お客さんの興味を引けたとしても、
視線の移動をうまく誘えなければ
その先にある伝えたい情報を
見てもらえないことがあるからです。
つまり、デザインを通して情報伝達がうまくできていない状態というわけです。
せっかく目を留めてもらえても、
次に見てほしい情報(一番伝えたいこと)に視線が流れなければ、
メッセージは十分に届きません。
そこで重要になるのが「視線誘導」です。
視線誘導は、ビジュアルを作る上で欠かせない要素なんです！
▼ちなみに、インパクトの作り方についてはこちらで詳しく解説していますよ▼
インパクトはデザインでどう作る？①
さて、今回は基本の視線誘導といわれる
Z型・N型・F型以外の方法。
おすすめしたい誘導の作り方を伝えていきます。
お話する方法は
他のデザイン要素と合わせやすく
誘導を作りやすいです。
私も長らくデザイナーとしてやっていますが、
数ある中でもよく使っている方法なんです。
情報をこの方法とうまく合わせることで
視線誘導の効果を発揮できます！
だから、ぜひ最後まで読んでくださいね♪
もちろん、Z型・N型・F型といった
基本の視線誘導と組み合わせて使っても
より強い視線の誘導につながります。
色で誘う
まずは「色」を使った視線誘導から。
人の視線は、色の変化やコントラストに自然と引き寄せられます。
そんな色をどう使っていくのか？
視線を誘導する配色（色の使い方）として、
ここでは2つの方法をお話していきますね！
では、スタート！
単色で視線を集める
デザインの中では
特定の色を視線の先に散りばめることで、
誘導に繋げられるんです。
例えば
●ポイントを絞って強調する
※飛ばし読みされても理解できる部分を強調するのも◎
●キャッチコピーの一部だけ&重要な部分だけを同じ色に絞る
●デザイン要素の一部だけ色を変え雰囲気を一定に保ちながら視線を流す
こんな方法があります。
文字だけ・言葉だけだと
やっぱりイメージ、湧きにくいですよね。
実際にデザインをみていきましょう！
まずは、こちらのデザイン。
タイトルの「春」が目に入ると
自然と視界の端に「くじ引き抽選会」のピンクが出てきますよね。
そして《上→下》へと流れる視線の流れと相まって
これまた自然に
視界に入ってきたピンク色を見てしまいませんか？
その流れで、
その下の文字やA賞→C賞
そして、
右下の飴のイラストが、
自然と視界の端に入ってきます。
そうして、同じ色を目で追わせる
つくりになっています。
最後まで、まんべんなく見てもらう工夫。
しっかりとポイントの表れているデザインです。
では、次！
こちらも単色を効果的に散りばめられたデザイン。
黄色がポイントになっていますね！
全体的に馴染みの良い色の組み合わせ。
ですが！
主に使われている3色を比較すると
なかでも黄色が明るくて
目立ちやすいカラーでもありますね。
それによって、
たとえ「まちづくり～」のタイトルが
先に目に入ったとしても、
無意識に黄色を繋げて見ていることに気づくはず。
では、次はどうでしょう？
こちらは何色で誘導されていると思いますか？
.
.
.
Thinking Time
.
.
.
いかがでしょう！
そう！あなたも思いましたか？
オレンジ色で誘導されますね！！
イラストの一部オレンジ色があることで、
視線を動く流れを止めることなく
QRコードや帯に到着できます。
つまり、イラストのオレンジ色は、
全体的なまとまりのある配色を保ちながらも
視線を繋ぐ役割も果たしている、
そんなデザインになっています。
※全体的なまとまり というのは、
他の部分（黒✕オレンジ）と
揃えられた配色だということです
グラデーション
色のグラデーションも
視線誘導に使うことができますよ。
グラデーションを作ると、
自然と色の濃淡に沿って
人の視線も動きやすくなるんです。
視線の始まりから、
動かしたい方向へ向かって
グラデーションを作ると誘導効果が生まれます。
今回は、《薄い色 → 濃い色》
このグラデーションを考えてみましょう！
Zの法則、F型、N型のように、人の視線にはもともとある程度の流れがありますが、グラデーションを使うことでその流れを助けたり、視線を途切れず外れにくくする工夫ができます。
こちらのデザイン、
どこにグラデーションを見つけましたか？
A：「駆け込み」の文字
B：ボタン
主にこの2点にグラデーションが使われていますね。
A：「駆け込み」の文字は
《左→右》へと流れる視線に合わせて
グラデーションになっています。
B：ボタンは
《上→下》へと視線の流れに合わせて
グラデーションになっていますね。
これによって、特に文字は
右隣の文字が吸着してくるかのように
目に入ってきますよね(。-`ω-)
また、リズムもでるので
セールの賑わいも演出されています。
サイズで誘う
次に紹介するのは
「サイズ」を使った視線誘導です。
人の視線は、基本的に
《大きいもの → 小さいもの》へと
流れる傾向にあります。
これをうま～く活用します。
サイズの違いによって
共感を呼んだり
直感的に重要だと理解してもらえたり
するんですよね。
ポイントは、情報の優先順位！
つまり、最も見せたい要素を大きくする…
そして、その次に見てほしい情報を少し小さくする…
といったもの…なのですが！
場合によっては、
注意を引く目的で大きくすることもあります。
だから、視線誘導を促す時には
・どの情報で相手に目を留めてもらうか
・どの情報を最終的に見てもらいたいのか（とってほしい行動）
という、優先順位を、一度
分けて考えることがポイントです。
情報の重要性のみならず
プラスα、目に留めてもらうために
共感を呼ぶための優先順位も考えてサイズを調整しましょう！
さあ、今回も参考デザインをみてみましょう！
（こちらのデザインは、問いかけた悩みに対してお客さんが取るべき行動が示されていないので、恐らくこの画像と併せてテキスト形式などで情報提示されているはず…）
「冬・乾燥」から順を経て、
最後に「こんなお悩み〜」にたどり着きますね。
この場合、
最後に繋げたい情報＝最もアピールしたい情報は、
冬の乾燥対策方法のようなお悩みへのアプローチ法
（恐らく画像と一緒にテキストなどで提示されているであろう内容）
になると思います。
が！
アイキャッチとして
お客さんに目に留めてもらいたい情報は
「冬の悩み 乾燥肌」になっていますよね。
こんな風に、情報の大小差は
・目に留めてもらいたい情報
・お客さんの行動に繋がる情報
この2軸を分けて考えることが重要です！
方向で誘う
いよいよ、今回の最後の方法。
（ここまで読んでくれたあなたがいることが私はウレシイ♡）
最後は、
「方向」を使った視線誘導です。
人の視線は、向きや方向性のあるものにも影響を受けます。
例えば
・矢印
・人の視線
・流れのある形
など。
人の視線
例えば、人の視線について。
人物の写真ひとつとっても
その人物が正面を向いている場合・横を見ている場合
これだけでも視線誘導としては変わってくるんです。
私たちの傾向として
人の視線の先にある要素を見てしまうことが多いです。
そのため「人物の視線 → 見てほしい情報」
こんな配置をすると、
それだけでも自然な形で
視線誘導を仕掛けることができます。
また、矢印や流れのある図形なども、
視線を特定の方向へ誘導するのに役立ちます。
さて、さて、こちらも例をみてみましょう！
方向性のあるもの
前述でもあるように
矢印や方向性のあるものも
視線誘導の方法としては使いやすいですよ！
こちらもデザインを見てみてください。
「新生活応援フェア～」と「ポイント～」の間には
＞←この形が隠れていますね！
これによって
キレイに、そして強く心地よく
＞の先にある「ポイント～」の内容に終着しますよね。
ここまでの内容を、一部分かりやすく
動画で解説しました▼
まとめ
視線誘導は、デザインの中で
とても重要な役割を持っています。
併せてチェックしてみてくださいね！
インパクトのあるデザインで興味を引くだけでなく、
その後に《どこを見てもらうのか》を考えることが大切です。
今回紹介した
・色
・サイズ
・方向
は比較的取り入れやすく、
視線誘導を作るときにとても便利です。
また、グラデーションや矢印、
流れのある形は、
LPのセクション構成などでも使われることが多いです。
そして、Z型・N型・F型といった
基本の視線の流れと組み合わせることで、
より効果的なデザインを作ることができます。
もしあなたがデザインを作りながら
「なんとなく見づらいかも…」
「情報がうまく伝わらないなあ…」
そう感じたら、
視線がどのように動いているのか
これを意識してみると、
改善のヒントが見つかるかもしれません。
視線誘導って奥が深いんです。
だからこそ、
デザインにうまく取り入れられると
効果もグッと期待できます。
さあて、今日はここまでです！
試してみてくださいね！
〇インパクトの作り方インパクトはデザインでどう作る？②では、
冒頭のその①より視点を変えたものも紹介していますよ！
また別の記事でも会いましょうね〜(๑╹ω╹๑ )
《注》
この内容はみなとん個人の学びや見解によるもの。
「こんな見方もあるのね」って参考程度に楽しく読んでくださいね！
私も楽しく書いてます(@￣ρ￣@)
次も遊びに来てください〜！
comments
コメントなし