CTAの効果はタイミングで決まる!心地よいタイミングで行動を喚起するテクニック

実店舗でショッピングをするとき、まだ店に入ったばかりなのにもかかわらずセールストークばかり聞かされてしまうと、なんだか気分がげんなりとしてしまいますよね。
逆に、ゆっくり自分のペースで店内をまわりながら、商品をじっと眺めていたり、手にとったタイミングで声をかけてもらえると嬉しいですし、購買意欲も高まります。

WEBにおけるユーザー体験でも、同様のことが言えます。同じ内容のCTAでも、どのタイミングで目にするかにより、ユーザーに受け取ってもらえる深度が大きく変わってくるのではないでしょうか。

本日は、CTAを表示するのに最適なタイミングについてお伝えしたいと思います。

基本:コンテンツを読んだあと

店舗に訪れた顧客は、まずは店内をまわり商品を観察したあとで、買うのか、ほかの商品を見るるのか、店を出るのか、という行動を行うのが自然です。

ウェブサイトでも、訪れた瞬間に即アクションを起こそうとするユーザーは稀です。通常はサイト内のコンテンツを閲覧したうえで、次のアクションに移るという行動が自然です。

つまり、サイトコンテンツを読み見終えたタイミングでにCTAを目にすることができれば、喚起した行動を起こしてもらえる確率が高まります。

こういったユーザー体験の流れを意識すれば、必然的にCTAはページの下や、視線の流れた先となるページの右側に位置するはずです。

グーテンベルクライアグラム

上記は「グーテンベルクダイアグラム」という図で、均等に配置された同質の情報を見る際の一般的な視線の流れを表したパターンです。

視線の動きのクセから考える、フォームの送信ボタンを 右側におくべき理由
https://f-tra.jp/blog/column/4857

このことから、多くのウェブサイトでは、CTAをページ下部に配置していることがほとんどだと思います。すでに担当サイトで実践済みというかたも多いのではないでしょうか。

ただし、コンテンツの内容や用途によっては例外もある

チュートリアルやサイトの趣旨を紹介するようなコンテンツへの行動喚起は、サイトを訪問した直後に見せても問題ないと思われます。
このように、コンテンツの内容によっては最適なタイミングは変わるため、上記の基本が当てはまらない場合ももちろんあると思います。

※またエフトラチームでは、たとえCTAがコンテンツの内容をふまえたものであっても、サイトのファーストビュー領域内にはCTAボタンを配置しておくべきだと考えています。その理由については後日記事にしたいと思います。

ページ下のCTA=基本中の基本

少し話題が逸れてしまいましたが、CTAをコンテンツ閲覧後のタイミングで見せる、というのがまずは基本中の基本です。

応用編:ユーザーの動作に合わせて配置

コンテンツ下部にCTAを配置しておくだけではなく、ユーザーがサイト内で起こした動き(=以下「トリガー」とします)に応じてCTAを表示する、という方法も考えられます。

この方法では「コンテンツを読み終えた」以外の豊富なシチュエーションでのアプローチが可能となり、様々なタイミングでユーザーに行動喚起を行うことができます

また、トリガーの発生に伴ってアニメーションを使って表示させることで、ただ配置するよりもインパクトを与えることも可能と考えられます。

※アニメーションについては以前下記の記事で詳しくお伝えしました
さらにCTAに注目を集めるための、アニメーション付きUIのアイデア
https://f-tra.jp/blog/cta-column/8138

以下のトリガーが代表的なパターンです。

一定時間が経過したとき

3g_r1_c1

サイトまたはページに訪問後、ある一定の時間が経過したタイミングでCTAを表示する方法です。

トリガーとする秒数を決めるには、ページの平均滞在時間を参考にしてください。

滞在時間が平均よりも長いユーザーは、コンテンツをじっくり読みこんでいる傾向があると考えられます。
店舗でいえば、ユーザーは商品を手にとってじっと眺めている状態。
コンテンツをより深く知ることができるためのアクションや、購買を後押しするCTAが効果的に働くかもしれません。

一方、あまりにも長時間ページに滞在しているユーザーは、ページを開いたまま別のことをしているか、ほかのタブを操作している可能性が高いでしょう。
興味が別の事柄に移ってしまっていたユーザーには、セールやクーポンの情報を与えたり、その緊急性をアピールするなど、より強く関心を惹きつけるオファーが有効かもしれません。

ページを一定割合でスクロールしたとき

スクロールを減らす

ユーザーがページをある程度までスクロールしたタイミングでCTAを表示する方法です。

ユーザーがサイト下部までスクロールを行っているということは、ある程度コンテンツに興味を持っていることがうかがえます。
こちらも滞在時間の場合と同様に、CTAでは、ユーザーの背中を後押しすることが効果的と思われます。

また、読み終わりのタイミングを狙ってCTAを出現させることもできます。
サイト下部までスクロールしたユーザーは、いわば商品を観察し終えた状態。それをいったん棚に戻すのか、買い物カゴに入れるのか、パンフレットを手にするのかのアクションを決める瞬間でもあります。

さきほども述べましたが、ただページ下に配置するよりも、アニメーションを伴った表示にすることでユーザーの注目を集めることができ、より効果的な行動喚起となるのではないでしょうか。

以上ご紹介した2つは、原則ユーザーがコンテンツに興味を持っていると考えられるトリガーでした。
今度は反対に、ネガティブなトリガーを活用する方法です。

ページを閉じた時

直帰を減らす

ユーザーがブラウザやタブを閉じたタイミングでCTAを表示する方法です。

ユーザーはまさに店舗を去る状態。
しかし、まだ伝えきれていないサービスの魅力があるかもしれませんし、ユーザーがその訪問内では目的の情報に辿りつけなかっただけという可能性もあります。

去り際「実はこんな魅力もあります」「お探しの情報は●●ではないですか?」という投げかけにユーザーは足を止めてくれるかもしれません。

検索バーにマウスカーソルを動かした瞬間

厳密には、ブラウザ内の画面表示領域にカーソルが移動した瞬間。「戻る」ボタンやアドレスバーなどがあるメニュー部分に移動した瞬間をトリガーに持つケースもあります。

このトリガーはページを閉じたり戻ったり、別のページに移動する動作の前段階にあり、多くのユーザーは、サイトを去ろうとしたときにこの操作を行うと考えられます。
その場合はページを閉じた時と同様のオファーが有効でしょう。

ただし、ブックマークなど離脱以外のアクションを意図している可能性もありますし、そうでなくても表示頻度が多くなり過ぎないような配慮は必要です。

発展編:ユーザーのサイト内行動に応じて表示

アイキャッチ_r1_c1
さらなる発展編としては、上記のトリガーに加えて、ユーザーのサイト上での行動パターンを組み込むことで、最適なタイミングをさらに細かく意図することが可能です。

ページビュー数

例えば、ページをまだ1ページしか閲覧していないユーザーと、10ページ以上閲覧しているユーザーを比べれば、後者が圧倒的にサービスに深い興味を抱いているでしょうし、商材への理解度も高まっていることが予想されます。
また、特定のカテゴリに興味があるユーザーは、そのカテゴリ配下のページを多く閲覧する可能性が高いでしょう。

すでに閲覧しているページの数やそのページの属する情報の特性ににより、CTAを表示したときのユーザー体験は異なります。当然、最適なオファーの内容も異なるはずです。

未閲覧ページ、閲覧済みページ

訪問のなかで、どのページを閲覧したか/していないかによっても、ユーザー体験は異なるはずです。
この特性をCTAの表示パターンに組み込むことで、より効果的なタイミングで行動喚起できます。

例えば、
コンバージョン貢献率が高いページを訪問することなくサイトを去ろうとしたユーザーにそのコンテンツを訴求したり、
あるページを閲覧したことがあるユーザーに対してのみ、初見では刺さりにくい具体的なオファを表示する、
などといったターゲティングが可能です。

頻度について

74a6475e93908c50b3099bf2c01a45d4_ss

同じ内容のCTAを、訪問中に何度も目にするのはユーザーにとってはストレスです。
特にトリガーに応じて表示するCTAは、トリガーの種類によっては何度も表示されてしまう可能性も高まるでしょう。

ユーザーのストレスになりにくい表示頻度やクリエイティブ、UIの配慮があることが望ましいでしょう。

最後に

本日は最適なタイミングでCTAを表示することの必要性と、その方法についてご紹介しました。
ぜひご担当のサイトでもお試しになってはいかがでしょうか?

なお弊社のCTAツール「エフトラCTA」では、ご紹介したトリガーによるCTAの表示をかんたんに実施することができますので、ご興味をお持ちの方はお気軽にお問い合わせ下さい。
エフトラCTAサービスサイトはこちら

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です