デザイン会社が発信!バナー制作情報メディア

バナーの視線誘導とは?ボタンまで読ませる配置のコツと5つの方法

公開日 更新日
バナーの視線誘導とは?ボタンまで読ませる配置のコツと5つの方法
バナーの視線誘導とは、見る人の目が「商品→ひと言→ボタン」と、作り手の決めた順番で動くように配置することです。横長・縦長それぞれの目の動き方、大きさ・色・人物の視線・矢印・余白で視線を動かす5つの方法、ボタンまで導く置き方、「誘導バナー」の作り方まで、バナー制作会社が解説します。

目次

バナーの視線誘導とは

バナーは、ほんの一瞬しか見てもらえません。その一瞬で「何の広告か」「何がうれしいか」「どうすればいいか」を順番に伝えるために、目が動く道筋をデザインで作ることを視線誘導といいます。

視線誘導ができていないバナーは、どこから見ればいいか分からず、ボタンまで目が届かないまま流されてしまいます。反対に、見る順番が決まっているバナーは、短い時間でも内容が伝わります。

目の動きの基本パターン

目の動き方には、よく知られたパターンがあります。バナーの形にあわせて使い分けます。

視線を動かす5つの方法

目の動きのパターンにあわせて、次の5つの方法で「ここから見て、次はここ」と道筋を作ります。

ボタン(行動)まで導く置き方

  • ボタンは、目の流れの最後(横長は右下、縦長は一番下)に置く
  • ボタンは1つにしぼる。選択肢が多いと、どれも押されにくくなる
  • ボタンの文字は「詳しく見る」「無料で試す」など、押した後に何が起きるか分かる言葉にする
  • ボタンの周りに余白をとり、ほかの要素とくっつけない

「誘導バナー」を作るときのポイント

サイトの中で、別のページ(キャンペーン、資料請求、商品一覧など)へ案内するバナーを「誘導バナー」と呼ぶことがあります。ページの中に置くので、周りの記事や画像に埋もれない工夫が必要です。
  • 案内先で何が分かるか、何ができるかをひと言で書く
  • ページの色やトーンになじませつつ、ボタンだけは目立つ色にする
  • 記事の流れの区切り(見出しの前後や記事の終わり)に置く
  • 案内先のページの見た目とバナーをそろえ、押した後に「違うページに来た」と感じさせない

文字の配置と読む順番

視線誘導は、写真やボタンの位置だけでなく、文字の大きさの差でも作れます。文字は「大・中・小」の3段階くらいに分け、読んでほしい順に大きくします。
段階入れるもの大きさの目安
大キャッチコピー(いちばん伝えたい一言)いちばん大きく、太く
中補足(商品名・価格・特典)大の半分前後
小条件・注意書き・ボタンの文言読める最小の大きさ
  • 同じ段階の文字は、書体・大きさ・色をそろえる
  • 行の頭(左端)をそろえると、目が次の行に移りやすい
  • いちばん小さい文字でも読めるようにする。弊社では1000×1000pxで作る場合、36pxくらいを目安にしている

視線誘導ができているか確かめる方法

  • 目を細めてバナーを見る。ぼやけても目に入る順番が、狙った順番になっているか
  • 1秒だけ見せて、何の広告だったか言えるか、ほかの人に試してもらう
  • 実際の大きさ(スマホの画面など)で見て、ボタンまで目が届くか

バナー制作を頼むなら

バナー制作.jpでは、バナーのサイズに関係なく1本4,000円(税別、別途ディレクション費20%)で制作しています。同じデザインのサイズ違いは1サイズ2,000円です。詳しくは制作料金をご覧ください。
やっぱりLP制作はプロに任せたい!まず制作事例を見る

まとめ

  • 視線誘導は、目が「商品→ひと言→ボタン」と動くように配置すること
  • 横長はZ型、縦長は上から下。文字は少なくして流し読みを防ぐ
  • 大きさ・色・人物の視線・矢印・余白で道筋を作る
  • ボタンは目の流れの最後に1つだけ置く
あわせて読みたい
この記事を書いたライター
2009年創業のデザイン会社です。バナー制作.jp(バナー制作実績)では、Instagram・X(旧Twitter)・LINE・Meta・Google・LINEヤフーなどの広告バナーを年間3,000本以上制作しています。制作実績は累計40,000件以上(バナー以外の制作を含む)、取引社数は4,000社以上です。記事の書き方と確認の流れは編集方針をご覧ください。

バナー制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    件名
    会社名

    会社名ふりがな

    担当者

    担当者ふりがな

    電話番号

    メールアドレス

    都道府県
    ご商談希望
    (3~4候補)

    web商談時に
    聞きたい事

    ご返信方法
    電話連絡の場合
    ※複数回答可

    お問い合わせ内容

    バナーサイズ
    (単位:px)

    デザイン参考

    バナーにいれる
    テキスト情報

    イメージ
    フォント
    リンク先URL

    レギュレーション(仕様)

    素材画像URL

    ※GigaFile便でアップロードしたURLを上記に張り付けてください
    ※提供素材が無い場合は有料素材のみで制作

    規約に同意する


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

     
    バナーアーカイブ