バナーの視線誘導とは?ボタンまで読ませる配置のコツと5つの方法
公開日 更新日
バナーの視線誘導とは、見る人の目が「商品→ひと言→ボタン」と、作り手の決めた順番で動くように配置することです。横長・縦長それぞれの目の動き方、大きさ・色・人物の視線・矢印・余白で視線を動かす5つの方法、ボタンまで導く置き方、「誘導バナー」の作り方まで、バナー制作会社が解説します。
目次
バナーの視線誘導とは
バナーは、ほんの一瞬しか見てもらえません。その一瞬で「何の広告か」「何がうれしいか」「どうすればいいか」を順番に伝えるために、目が動く道筋をデザインで作ることを視線誘導といいます。
視線誘導ができていないバナーは、どこから見ればいいか分からず、ボタンまで目が届かないまま流されてしまいます。反対に、見る順番が決まっているバナーは、短い時間でも内容が伝わります。
視線誘導ができていないバナーは、どこから見ればいいか分からず、ボタンまで目が届かないまま流されてしまいます。反対に、見る順番が決まっているバナーは、短い時間でも内容が伝わります。
目の動きの基本パターン
目の動き方には、よく知られたパターンがあります。バナーの形にあわせて使い分けます。
視線を動かす5つの方法
目の動きのパターンにあわせて、次の5つの方法で「ここから見て、次はここ」と道筋を作ります。
ボタン(行動)まで導く置き方
- ボタンは、目の流れの最後(横長は右下、縦長は一番下)に置く
- ボタンは1つにしぼる。選択肢が多いと、どれも押されにくくなる
- ボタンの文字は「詳しく見る」「無料で試す」など、押した後に何が起きるか分かる言葉にする
- ボタンの周りに余白をとり、ほかの要素とくっつけない
「誘導バナー」を作るときのポイント
サイトの中で、別のページ(キャンペーン、資料請求、商品一覧など)へ案内するバナーを「誘導バナー」と呼ぶことがあります。ページの中に置くので、周りの記事や画像に埋もれない工夫が必要です。
- 案内先で何が分かるか、何ができるかをひと言で書く
- ページの色やトーンになじませつつ、ボタンだけは目立つ色にする
- 記事の流れの区切り(見出しの前後や記事の終わり)に置く
- 案内先のページの見た目とバナーをそろえ、押した後に「違うページに来た」と感じさせない
文字の配置と読む順番
視線誘導は、写真やボタンの位置だけでなく、文字の大きさの差でも作れます。文字は「大・中・小」の3段階くらいに分け、読んでほしい順に大きくします。
| 段階 | 入れるもの | 大きさの目安 |
|---|---|---|
| 大 | キャッチコピー(いちばん伝えたい一言) | いちばん大きく、太く |
| 中 | 補足(商品名・価格・特典) | 大の半分前後 |
| 小 | 条件・注意書き・ボタンの文言 | 読める最小の大きさ |
- 同じ段階の文字は、書体・大きさ・色をそろえる
- 行の頭(左端)をそろえると、目が次の行に移りやすい
- いちばん小さい文字でも読めるようにする。弊社では1000×1000pxで作る場合、36pxくらいを目安にしている
視線誘導ができているか確かめる方法
- 目を細めてバナーを見る。ぼやけても目に入る順番が、狙った順番になっているか
- 1秒だけ見せて、何の広告だったか言えるか、ほかの人に試してもらう
- 実際の大きさ(スマホの画面など)で見て、ボタンまで目が届くか
バナー制作を頼むなら
まとめ
- 視線誘導は、目が「商品→ひと言→ボタン」と動くように配置すること
- 横長はZ型、縦長は上から下。文字は少なくして流し読みを防ぐ
- 大きさ・色・人物の視線・矢印・余白で道筋を作る
- ボタンは目の流れの最後に1つだけ置く
この記事を書いたライター

※アンケートモニター提供元:ゼネラルリサーチ
調査期間:2020年8月7日~12日
調査方法:インターネット調査
調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
調査対象:全国の20代~50代の男女 1052名














へのお問い合わせはこちらから