こんにちは、株式会社PentagonでUIデザイナー／Webデザイナーをしている小牧です。
前回の記事 では、CTAの役割や目的、マイクロコピーの改善点についてご紹介しました。
今回は、CTAの適切な設置場所について説明していきたいと思います！
【こんな人に読んで欲しい】
- サイトやページのCV（コンバージョン）を増やしたい人
- CTAについて詳しく知りたい人
- ボタンをどこに配置したらいいか迷っているデザイナー
【この記事を読むメリット】
CTAの適切な配置をするための考え方が学べます。
【結論】
CTAの設置場所には、
- ページ最上部
- ページ最下部
- 追従型
- コンテンツ内やその直下
というバリエーションがあります。
商品やサービスへのユーザーの興味関心・熟知度によってCTAにかかる時間が異なり、それによって適切な配置が変わります。
まずは対象ユーザーのことを把握し、それに沿った配置を検討しましょう。
CTAの役割と目的は？
前回の記事でも詳しく書きましたが、CTAについて再度簡単におさらいします。
CTAとは「Call To Action（コール トゥー アクション）」の略で、日本語でいうと「行動喚起」という意味です。
ボタン・バナー・テキストリンクといった、ユーザーにとってほしい行動を促すためのフックとなるもの、またはそれらが配置されたセクションのことを指します。
CTAは
- テキスト（マイクロコピー）
- デザイン
- 配置
の要素で構成されており、それぞれをユーザーのニーズに合ったものにすることでコンバージョンの改善に繋がります。
CTAの設置場所
CTAの設置場所には、下記のバリエーションがあります。
- ページ最上部
- ページ最下部
- 追従型
- コンテンツ内や直下
それぞれの配置によってどんな効果があるか説明していきます。
①ページ最上部
ページ最上部のCTAは、ヘッダーやファーストビューに配置されている形です。
最初にユーザーの目につくため、そのサイトの役割やどのようなアクションが起こせるかをユーザーに認知してもらいやすいです。
多くのサイトでヘッダーやファーストビュー内に１つ目のCTAが配置されています。
②ページ最下部
そのページのコンテンツを最後まで読んだユーザー、つまり関心度の高いユーザーの目に留まります。それまでのコンテンツでCTAに繋がるベネフィットを伝えられていれば、CVに繋がる可能性はかなり高くなります。
③追従型
画面上や画面下に固定で表示されるボタン・バナーです。
画面幅の広いPCの場合は、コンテンツを邪魔しない左端・右端に固定される場合もあります。
常にユーザーの視界に入りアクションを起こしやすいため、CTAにたどり着く前に離脱されてしまうといった機会損失を防げます。
④コンテンツ内やその直下
ページ内コンテンツの間や直下に配置する形です。関連するコンテンツからの導線が明確になり、コンテンツを読んだ直後にCVアクションを取ることができます。
扱っているコンテンツの種類が多かったり、目的の異なったCTAを設置する場合などに有効です。
ユーザー視点に合わせた配置
前述の配置はどれか１つを選ぶのではなく、CTAの目的に沿って組み合わせて使うのが効果的です。
それではどのような基準でCTA配置を選ぶと良いでしょうか？
CTAの配置には「絶対にこうした方が良い」という一律的な正解はありません。
まずは、そのページに訪れるユーザーの視点に合わせた「最善」を考える必要があります。
サイトの訪問者（ユーザー）がどんな人か、どんなことに関心をもつか、どんな目的を持っているかなどを分析しましょう。
カスタマージャーニーを使って想定ユーザーを分析する
ユーザーについて分析するには、マーケティングの手法であるカスタマージャーニーを使って考えることが効果的です。
カスタマージャーニーとは、ユーザーの行動（認識・検討・決定）を時系列で分け、それぞれのステージでの行動や心理について一覧にまとめたものとなります。
ユーザーがアクションを起こすまでの時間を考える
ユーザー像が明確になったら、次にその人がページに訪問してからボタンをクリックするまでの時間を考えます。
例えば対象のユーザーが既にその商品を熟知している場合、商品の詳細な説明が不要であればクリックするまでの時間が短いため、ページ上部に設置することが適切です。
一方、対象ユーザーがある程度の時間をかけて商品を吟味する場合、またはユーザーの目的から少しずれたCTAで誘導が必要なときは、コンテンツの下やページ最下部への設置が適切と考えられます。
前者のように商品やサービスへの興味・関心が高いユーザーを「ホットリード」、後者のように興味・関心が浅くCVに至るまで時間のかかる見込み客を「コールドリード」と呼びます。
そのページに訪れるユーザーはホットリードなのかコールドリードなのか、どんなタイミングで興味・関心が高まるかを考え、それにあったCTAを配置することが重要です。
追従型ボタンは慎重に！
最近のLPでは、追従型ボタンを設置することがかなり主流となってきています。
常にユーザーの目に留まる、アクションがしやすいといった点では有効性が高いと考えられます。
しかし、追従型には下記のようなデメリットもあります。
- コンテンツ範囲を狭めることによる可読性の低下
- 広告を避けたい心理の働き
①コンテンツ範囲を狭めることによる可読性の低下
追従型は画面の上下左右のどこかに固定で設置するため、その分コンテンツを表示する領域が狭くなってしまいます。
画面幅の広いPCではそこまで気にならないですが、スマホの場合には占有率が高くなるため読みにくくなるでしょう。
表示できる情報量が制限されたり、読みにくいといったユーザーの行動を阻害してしまうことは、離脱率の増加に繋がってしまうのです。
②広告を避けたい心理の働き
スマホアプリやWebサイトを普段から使う人なら、ブラウザの下に固定で設置してある広告はよく見た事があると思います。
そのような広告にどこか「胡散臭さ」や「邪魔に感じる」といった、マイナスの気持ちを感じたことはないでしょうか？
誤ってクリックした広告で全然読みたくないサイトに遷移してしまった...といった経験は、少なからずマイナスの印象をもたらします。
つまり、デジタル慣れした人にとってはブラウザ下の固定配置は「好感度が低い」場所と考えられるのです。
CTAに繋げるためには、「安心感」「信頼度」といったポジティブな感情が前提として必要です。
常に目に入るからといって必ずしもクリックされることはなく、追従型にすることでむしろCTAを大幅に下げてしまった事例もあります。
訪れるユーザー層によっては最初からマイナスな印象を抱かせてしまったり、無意識に画面下のものを視界から外してしまう可能性があります。
まとめ
以上、今回はCTAの配置についてご紹介しました。
マイクロコピーと同様に、配置を考える時はユーザー目線に立って、ユーザーの心理を把握しそれに沿った配置を考えましょう！
