CTAの配置とは?ファーストビュー・途中・最後・追従ボタンの使い分け

CTAの配置の基本

まずは、CTAの配置とは何を決めることなのか、そしてなぜ置く場所で成果が変わるのかを押さえましょう。

CTAの配置とは

CTAの配置とは、ページの中のどこに、いくつCTAを置くかを決めることです。

CTAとは「Call To Action(コール・トゥ・アクション)」の略で、日本語では「行動喚起」と訳されます。

Webサイトでは、「購入する」「無料で試す」「資料をダウンロードする」のように、見ている人に次の行動を促すボタンやリンクをCTAと呼びます。

CTAの文言・色・大きさといったボタンそのものの作り方はCTAボタンとは?で、ボタンの周りの余白はCTA周りの余白とは?で解説しているので、この記事では「ページのどこに置くか」に絞って見ていきます。

置く場所で成果が変わる2つの理由

CTAは、同じボタンでも置く場所によって押されやすさが変わります。

理由は、「見る人の気持ちのタイミング」と「そもそも目に入るかどうか」の2つです。

• 気持ちのタイミング
  まだ商品のことをよく知らない段階でボタンを見せられても、「申し込もう」という気持ちにはなりません。
  反対に、魅力が伝わって「いいな」と思った瞬間にボタンが目の前にあれば、その気持ちのまま行動できます。
• 目に入るかどうか
  ページは、すべての人が最後まで読むとは限りません。
  ボタンがページの一番下にしかなければ、途中で読むのをやめた人は、ボタンを一度も見ないまま帰ってしまいます。

つまりCTAの配置は、「行動したくなった人が、その場ですぐ押せる」状態を、ページのあちこちに作っておくことだと言えます。

CTAの配置場所と使い分け

ここからは、CTAを置く代表的な4つの場所と、それぞれがどんな人のための置き場所なのかを見ていきます。

1つの場所だけで全員を受け止めることはできないので、役割の違う場所を組み合わせるのが基本です。

代表的な4つの置き場所

CTAのよくある置き場所は、次の4つです。

置き場所	誰のための置き場所か	気をつけること
ファーストビュー	すでに申し込むつもりで来た人	キャッチコピーの近くに置き、説明より先に目立たせすぎない
各セクションの後(魅力を伝えた直後)	読んでいる途中で「いいな」と思った人	関心が高まるセクションの直後に置き、話の途中に割り込ませない
ページの最後	ページを読み終えて納得した人	よくある質問のあとなど、不安が解消された位置に置く
追従ボタン(固定表示)	いつ行動したくなるか分からない人	本文や操作を隠さない大きさにする

ファーストビューとは、ページを開いてスクロールせずに最初に見える範囲のことです。

追従ボタンとは、ページをスクロールしても画面の決まった位置(スマホなら画面の下など)に表示され続けるボタンのことです。

CTAをページの最後にだけ置いたページと、役割の違う場所に置いたページを、箱だけで描いた図で比べてみましょう。

NGの見本では、ボタンがページの最後に1つあるだけなので、特徴を読んだ時点で「申し込みたい」と思った人も、ページの一番下まで探しに行かなければなりません。

OKの見本では、ファーストビュー、特徴を伝えた直後、ページの最後の3か所に同じボタンを置いているので、どのタイミングで気持ちが固まった人も、その場で行動できます。

ここからは、それぞれの置き場所のコツを順に見ていきます。

ファーストビュー:すでに決めている人のために

ファーストビューのCTAは、ページを開いた時点で、すでに申し込むつもりの人のための置き場所です。

広告やほかのサイトの紹介を見て「これを申し込もう」と決めてから来た人にとって、ボタンを探してスクロールさせられるのは手間でしかないためです。

ファーストビューでは、キャッチコピーで「何のページか」を伝え、そのすぐ近くにボタンを置きます(ファーストビューの組み立て方はメインビジュアルとは?で解説しています)。

パッと全体を見渡す画面では、視線は左上から右下へZ字を描くように動きやすいといわれているので、キャッチコピーを読み終えた位置や右下など、視線の流れの終わりに置くと自然に目に入ります(視線の流れについては視線誘導とは?で解説しています)。

ただし、まだ何も知らない人にとっては、ボタンより先に「何のページか」が伝わることが大切です。

ボタンがキャッチコピーより目立って、主役を奪わないようにしましょう。

ボタンが大きすぎたり派手すぎたりすると、最初に目に入るのが「申し込む」になり、何のページか分からないまま売り込まれている印象を与えてしまいます。

キャッチコピーを一番大きく見せ、ボタンはそれを読み終えた位置に、押しやすい大きさで置く、という順番を目安にしましょう。

各セクションの後:関心が高まった瞬間に

ページの途中のCTAは、読み進めるうちに「いいな」と思った人のための置き場所です。

置く場所の目安は、商品の特徴やメリットを伝え終えた直後や、お客様の声で「本当に良さそうだ」と感じてもらえた直後など、関心が高まるセクションのすぐ後です。

言いかえると、読んでいる人の気持ちが「へえ、便利そう」「本当に効果があるんだ」と前向きに動いた直後が、ボタンを見せるのに一番よいタイミングです。

反対に、悩みに共感する文章の途中や、まだ商品の説明が始まる前に置いても、行動したい気持ちになっていないので押されにくく、話の流れを途切れさせてしまいます。

ブログ記事の場合も同じで、商品やサービスを紹介した段落の直後に、その紹介と対応するボタンやリンクを置くと、読み終えた勢いのまま行動してもらえます。

ページの途中のCTAは、セクションの区切りに置き、話の途中に割り込ませないことが大切です。

ページの最後:読み終えて納得した人のために

ページの最後のCTAは、ページ全体を読み終え、じっくり比べて納得した人のための置き場所です。

最後まで読んだ人は、関心の高い人であることが多いので、ここにボタンがなければ、せっかく高まった気持ちの行き場がなくなってしまいます。

ページの最後に置くときは、料金や解約方法などに答える「よくある質問」のあとに置くと、最後の不安が解消された状態でボタンを見てもらえます(LP全体のセクションの並びはLPのセクション構成とは?で解説しています)。

追従ボタン:いつでも押せるように

追従ボタンは、スクロールしても画面の決まった位置に表示され続けるCTAで、特にスマートフォンでよく使われます。

スマホでは画面が小さく、ページが縦に長くなるため、ページの途中のボタンまで戻ったり探したりするのが手間になるからです。

画面の下に細長いボタンを固定しておけば、どこまで読み進めていても、指を少し動かすだけで押せます。

一方で、追従ボタンは常に画面の一部を覆うため、大きすぎると本文やほかのボタンを隠してしまいます。

スマホの画面で、大きすぎる追従ボタンと、細くまとめた追従ボタンを比べてみましょう。

黒い枠がスマホの画面、下の帯が追従ボタンです。本文をスクロールしても、帯は画面の下のこの位置に貼り付いたまま残り続けます。

NGの見本は、キャンペーンの説明まで追従する枠に入れたため、画面の半分近くがふさがり、本文がほとんど読めません。

OKの見本は、「初月無料で申し込む」という1つのボタンだけを細い帯にまとめたので、本文を読みながらでも、必要なときにすぐ押せます。

追従ボタンを使うときは、次の点にも気をつけましょう。

• ページの最後の内容を隠さない
  追従ボタンは本文の上に重なって表示され続けるので、そのままでは、ページの一番下までスクロールしても、最後の文章やリンクがボタンの裏に隠れて見えません。
  ページの末尾にボタンの高さ分の余白を足しておくと、最後の内容をボタンの上まで持ち上げて読めるようになります。
• キーボードで操作する人のじゃまをしない
  マウスを使わず、キーボードでリンクやボタンを順番に選んで操作する人もいます。
  Webのアクセシビリティ(障害の有無などにかかわらず使いやすくすること)の国際的なガイドラインWCAG 2.2では、キーボードで選んでいる部品が、ページ上のほかの要素ですっかり隠れてしまわないことを求めており、追従ボタンのような固定表示の要素はその原因になりやすいものです(WCAG 2.2 達成基準2.4.11 隠されないフォーカス(最低限)・WAIC日本語訳)。
  つまり、Tabキーで順番に選んでいるリンクやボタンが追従ボタンの裏に隠れて、今どこを選んでいるのか分からなくならないようにしよう、ということです。
• ファーストビューと二重にしない
  ページを開いた直後は、ファーストビューのボタンと追従ボタンが同時に見えて、同じボタンが2つ並ぶことがあります。
  少しスクロールしてから追従ボタンを表示する、という方法もよく使われます。

コーディングで追従ボタンを作る

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、「画面の下に固定する」「ページの最後にボタンの高さ分の余白を足す」の2点を、デザインの指示として伝えておけば十分なので、この節は読み飛ばしても構いません。

CSS(Webページの見た目を指定する言語)では、たとえば次のように、ボタンを画面の下に固定し、ページの最後に余白を足します。

.cta-fixed {
  position: fixed;   /* スクロールしても画面に固定する */
  left: 0;
  right: 0;
  bottom: 0;         /* 画面の一番下に置く */
  padding: 8px 16px;
}
body {
  padding-bottom: 72px;  /* 固定ボタンの高さ分、ページの最後に余白を足す */
}

position: fixedは、要素をページの流れから外し、画面(ビューポート)を基準に固定するための指定です(MDN: position)。

数値はあくまで一例なので、実際のボタンの高さに合わせて調整し、スマホの実機で最後の文章が隠れていないかを確かめましょう。

置く数は「場所は複数、種類は1つ」

CTAは、役割の違う場所に複数置いて構いませんが、一番押してほしいボタンの種類は1つにそろえるのが基本です。

「購入する」「資料請求」「メルマガ登録」のボタンが、どの場所でも同じくらい目立って並んでいると、見る人はどれを押せばいいか迷ってしまいます。

同じページの中では、メインのボタンの文言と見た目をそろえ、どこで見ても「これを押せばいい」とすぐ分かるようにしましょう。

資料請求のような、まだ迷っている人向けのボタンを並べる場合は、枠線だけのボタンにするなど、メインのボタンより控えめな見た目にします。

たとえば、メインのボタンは目立つ色で塗りつぶして大きめに、サブのボタンは白地に枠線だけ(「ゴーストボタン」とも呼ばれます)で少し小さめにすると、どちらを優先すればいいかがひと目で伝わります(色の差のつけ方はCTAを目立たせるカラーとは?で解説しています)。

実践のポイント

CTAの配置で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 押してもらいたい気持ちが強すぎて、すべてのセクションの後にCTAを置いてしまうことがあります。
  ボタンが多すぎると、売り込まれている印象が強くなり、話の流れも途切れます。
  関心が高まるセクションの後に絞って置きましょう。
• ページの最後にしかCTAを置かないことがあります。
  途中で気持ちが固まった人や、途中で読むのをやめた人を取りこぼすので、ファーストビューと途中にも置きましょう。
• 置き場所ごとに、ボタンの文言や色がばらばらになっていることがあります。
  同じ行動へのボタンなのに、別の行動のボタンに見えてしまうので、文言と見た目をそろえましょう。
• 追従ボタンを大きくしすぎたり、本文の上に重ねたりして、読むじゃまをしてしまうことがあります。
  追従ボタンはボタン1つ分の細さにまとめ、実際のスマホで本文やリンクが隠れていないかを確かめましょう。
• パソコンの画面だけで配置を確認し、スマホでどこにボタンが来るかを確かめていないことがあります。
  スマホではページが縦に長くなり、ファーストビューに入る範囲も変わるので、スマホでも必ず上から順に確認しましょう。

よくある質問

• Q. CTAは1ページにいくつ置けばいい?
  A. 決まった数はありません。
  短いページなら、ファーストビューとページの最後の2か所でも十分です。
  長いページなら、関心が高まるセクションの後にも足していきますが、1つの画面に同じボタンが2つ以上見える状態は避けましょう。
• Q. 追従ボタンはパソコンでも使ったほうがいい?
  A. 必ずしも必要ではありません。
  パソコンの画面は広く、ヘッダー(ページの一番上の帯)に「お問い合わせ」などのボタンを置き、ヘッダーごと画面の上に固定する方法もよく使われます(固定ヘッダーについてはWebサイトのヘッダーとは?で解説しています)。
  スマホとパソコンで、それぞれ本文のじゃまにならない方法を選びましょう。
• Q. 一番よい置き場所は、どうやって確かめればいい?
  A. 実際のデータで確かめるのが確実です。
  アクセス解析ツールで、どのボタンがどれくらい押されているかを比べたり、置き場所を変えた2つのパターンを用意して反応を比べる「A/Bテスト」をしたりする方法があります(A/BテストについてはCTAボタンとは?のよくある質問でも紹介しています)。
• Q. 視線の流れ(Z型・F型)とCTAの配置はどう関係する?
  A. 視線の流れは、主に1つの画面の中で「どこにボタンを置くか」を決めるときに使います。
  この記事で紹介した置き場所は、ページ全体の中で「どのタイミングで見せるか」の話です。
  ページのどこに置くかを決めたら、その画面の中では視線の流れの終わりにボタンを置く、と2段階で考えましょう(画面の中の位置の考え方は重要な情報はどこに置く?で解説しています)。

まとめ

CTAの配置とは、ページの中のどこにCTAを置くかを決めることで、見る人の気持ちが高まったタイミングに、すぐ押せる場所にボタンがある状態を作ることが目的です。

ファーストビューはすでに決めている人、各セクションの後は途中で関心が高まった人、ページの最後は読み終えて納得した人、追従ボタンはいつ行動したくなるか分からない人のための置き場所として、役割の違う場所を組み合わせましょう。

まずは自分のサイトのページを上から順にスクロールし、「いいな」と思えるセクションの直後に、すぐ押せるボタンがあるかを確かめてみてください。