2022年08月17日LPやECサイト等のCTA/コンバージョンボタンの配置に関する諸説まとめ

サイトの売上・申し込み等を増やすにはボタンの配置も重要

サイト訪問者を購入・申し込み等に誘引する「コンバージョンボタン」「Call to Actionボタン」(以下、CTAボタン)は、サイトの目標到達(コンバージョン)にとっては非常に重要な要素です。ボタンのアクション促進効果は様々な要素によって変動しますが、ボタンの配置もそのうちの一つです。様々な業界のWebサイトで、ボタンの配置の改善が試みられています。

ポイント(1)：1画面目など目立つところに大きく配置

ボタン配置の定番といえば、1画面目(ファーストビュー)訪問者の目につきやすい場所が挙げられます。 メインビジュアル近辺など1画面目の分かりやすいところにボタンがあれば、初めから資料請求や問い合わせの意欲の高い訪問者が、迷うことなくコンバージョンに到達できます。

ポイント(2)：情報を一通り読み込んだ人向けに、本文末尾にもボタンを配置

CTAの位置は必ずしもファーストビュー内が絶対的にベストとは限りません。LPOの分野ではファーストビュー内ボタン配置への過度な信仰に対する批判もあり、意見が分かれがちです。

特に、即座に判断するのが難しいような内容の商品・サービスの場合は、十分な説明を一通り終えた後にボタンを配置して、訪問者を問い合わせ・予約等に誘導する方が効果的な場合もあります。

ページを一通り読んだ訪問者向けに、本文末尾にも大きくボタンを設置しておくと、コンバージョンの取りこぼしを防ぎやすくなります。

ポイント(3)：フローティングボタンでチャンスを逃さずものにする

CTAボタンを常時固定表示(フローティング)にすると、サイトの使いやすさ向上に加え、訪問者が購入・資料請求等の決断をしたときにチャンスを逃さずコンバージョンに繋げられます。
が、一方で以下のようなデメリットにも注意する必要があります。

• ブラウザの印刷機能やスクリーンショット作成ツールの仕様によっては、ボタンが何度も表示されて本文閲覧の妨げとなる場合がある(そのまま会議等で配布されると印象が悪くなる)
• スマートフォンでは、ボタンやヘッダー等常時固定表示の面積が増えるほど画面が狭くなり、ユーザビリティの悪化を招く

デメリットを軽減するには、以下のような対策がおすすめです。

• 常時表示ボタンを印刷時に非表示にする(CSSメディアクエリの@media print{…}内に非表示設定を入れる)
• スクロール(移動)中は非表示にし、スクロールが止まったら表示させる
• スクロール中も常時表示する場合、押しやすい範囲でボタンのサイズを抑えめにする

ポイント(4)：複数の目標を併存させる場合、一部を別カラムに分離

LPの種類によっては、[資料請求][問い合わせ]など複数種類のコンバージョンを目的とする場合もあります。訪問者の誘導は目的地を一点に絞り迷わせないことがベストですが、ビジネス上の要求としてそうできない場合もまま発生します。

このような場合、メインとサブのCTAを、訪問者のタイプによって配置し分けると、訪問者の動きを整理しやすい設計になります。例えば以下のような感じです。

• 自分で調べたいタイプの訪問者向け…情報収集者向けのCTA(資料請求等)を、メインカラムで説明を一式読み進めたあとに配置
• 人に聞いて説明を受けたいタイプの訪問者向け…問い合わせ等フォームをサイドカラム上部に直接埋め込み(PCのみ。スマホでは別ページ遷移)

ポイント(5)：ECサイトなら購入判断材料をボタン周りに集中

ECサイトの場合、訪問者は数十～数百ページを次々と渡り歩いて一瞬のうちに購入判断をすることになります。

このため、価格・評価・在庫状況等の購入判断材料については、1ヶ所にまとめて視線移動負荷を軽減した方が、購入判断がしやすくなります。

その他A/Bテスト用のおすすめチェックポイント

デザインリニューアルやA/Bテストの際には、上記のほか、以下のポイントを意識して挑戦してみるのがおすすめです。

ボタン周囲に十分な余白を確保する

ボタンと他の視覚要素との間に十分な余白を確保すると、ボタンが他の要素に埋もれず、目立ちやすくなります。

視線の流れを意識する

訪問者がページを読む際の視線の流れに、ボタンの配置が自然に合致すると、違和感が少なくなり、コンバージョン率向上に貢献する場合があります。

• Z型やF型など、想定される訪問者の視線の流れに沿った位置にボタンを配置する
• キャッチコピーや見出し等を中央揃えで揃えている場合、CTAボタンも中央揃えにする

まとめ

CTAボタンの配置を工夫することで、全く同じコンテンツでも、大きくコンバージョン率が変化する場合があります。パートナー企業等に協力を仰ぎつつ、A/Bテストを繰り返してベストな配置を見つけていくことが、問い合わせや売り上げの向上につながります。

関連記事

• LPやECサイト等のCTA/コンバージョンボタン色に関する諸説まとめ
• LPやECサイト等のCTA/コンバージョンボタンの文言に関する諸説まとめ
• LPやECサイト等のCTA/コンバージョンボタンの形状に関する諸説まとめ

マックスマウスからのお知らせ