バナーのCTAボタンの作り方｜入れる・入れないの判断と、形・色・文言・配置の決め方

Webの調査会社Nielsen Norman Groupが2017年に行った視線計測の実験では、ボタンやリンクの「押せそうに見える手がかり」が弱いページは、強いページに比べて、押す場所を見つけるまでの時間が平均22%長く、視線が止まる回数も平均25%多くなりました（71人、9サイトのページで比較）。出典：Flat UI Elements Attract Less Attention and Cause Uncertainty（Nielsen Norman Group）

Webページでの実験ですが、小さな画面の中で一瞬で判断されるバナーでも、ボタンがボタンに見えることは大切です。

• 角丸の長方形など、よく見るボタンの形にする
• 背景と同じ色の枠線だけのボタン（ゴーストボタン）は避け、塗りつぶす
• 周りに余白をとり、ほかの文字や写真と重ねない
• 矢印（▶や＞）を添えると、先に進めることが伝わりやすい

色はブランドカラーやLPのトンマナに合わせつつ、背景との差がはっきり出る色を選びます。差の目安には、Webのアクセシビリティの国際基準WCAG 2.1のコントラスト比が使えます。

対象	WCAG 2.1の基準
ボタンの中の文字	背景との比が4.5:1以上（大きな文字は3:1以上）
ボタンの形（塗りや枠）	まわりの色との比が3:1以上

出典：WCAG 2.1 1.4.3 コントラスト（最低限）、1.4.11 非テキストのコントラスト（W3C）

バナーは画像なのでWCAGがそのまま当てはまるわけではありませんが、「小さい画面でも読めるか」を確かめる物差しになります。コントラストの確かめ方はバナーのアクセシビリティ、色の決め方はバナーの配色の決め方にまとめています。

弊社で制作するバナーでよく使うのは、「詳細はこちら」「クリック」「購入する」などの文言です。どのリンク先にも使える定番の言葉なので、迷ったときはこれらを使います。

リンク先でできることがはっきりしている場合は、それを短い動詞で書くと、押したあとに何が起きるかがより伝わります。

リンク先	文言の例
商品ページ・通販	購入する／商品を見る／カートに入れる
予約フォーム	予約する／空きを見る
資料ダウンロード	資料をダウンロード／資料を見る
無料体験・無料登録	無料で試す／無料で登録
問い合わせ・相談	お問い合わせ／無料で相談する
求人ページ	求人を見る／応募する
セール・クーポン	セール会場へ／クーポンを受け取る
LINE公式アカウント	友だち追加
アプリ	インストール／アプリをダウンロード
記事・特集	詳しく見る／続きを読む

• リンク先のLPのボタンと同じ言葉にそろえる（バナーとLPで言葉が変わると、違うページに来たと感じさせてしまう）
• 「無料」と書くなら、条件があるかを確かめ、条件があればバナーかLPで分かるようにする
• 文字数は全角10文字くらいまでにし、1行で読めるようにする

• キャッチコピー→補足→ボタンの順に読めるよう、コピーの下か右下に置く
• ボタンの文字も小さくしすぎない。弊社では1000×1000pxで作る場合、いちばん小さい文字でも36pxくらいを目安にしています
• 1枚のバナーにボタンは1つにする
• Metaのストーリーズやリールなど、画面の上下に媒体の表示が重なる配置では、ボタンをその範囲に置かない（範囲はMeta広告の画像サイズのセーフゾーンを参照）

広告の種類によっては、画像の外に媒体のボタンが表示されます。たとえばGoogle広告のレスポンシブ ディスプレイ広告では、作成画面の「その他のオプション」で、行動を促すフレーズのテキストをプルダウンから選べます（出典：レスポンシブ ディスプレイ広告を作成する｜Google 広告 ヘルプ）。Meta広告でも、広告の作成画面でボタンの文言を選びます。

• 媒体のボタンが付くときは、画像の中のボタンと文言をそろえる
• 画像の中のボタンを省き、そのぶんコピーや商品写真を大きくするのも一つの方法

CTAボタンは、まず入れるかどうかを目的とお客様のご要望で決め、入れる場合は「ボタンに見える形」「背景との差」「押したあとに起きることが分かる文言」「コピーを読み終えた位置」の4つで作ります。迷う部分はABテストで比べてください。