ユーザーの行動を喚起するためのCTAを、サイト上のどの位置に表示するかどうかはひとつの論点です。
本日は、サイトにCTAを設置する場合の代表的な設置箇所について、その目的に合わせてご紹介します。
代表的なCTAの設置箇所
今回ご紹介するのは以下の９つの設置パターンです。CTAの訴求の強度に合わせて3タイプに分類しています。
強く惹きつける・アピールする
さりげなく訴求する
アクセスしやすい位置に用意する
順番に紹介していきます
強く惹きつける・アピールする
ユーザーに強くCTAの内容をアピールしたい場合は、特定のタイミングでアニメーションを伴って表示させることで、ユーザーの視線を惹きつけることが可能です。
モーダル表示
モーダル表示のイメージ
多くのサイトのCTAが、取り入れているのがモーダルウィンドウによるポップアップの表示です。
モーダル表示することで、ユーザーは一時的にバナーの誘導に従うか閉じるかの2択を迫られることになります。ユーザーの視線を確実に集めることができます。
ただし、ユーザーの行動を強制的に奪う事にもなりますので、使用する頻度は最低限にとどめておきたいところです。
フッター（またはヘッダー）ポップアップ
フッターポップアップの表示例
お次はフッターにのみポップアップを表示させる方法です。
表示領域をフッターに絞ることで、ユーザーの自由を奪うこと無くバナーをアピールすることができます。
アニメーションの方法も、フェードイン（浮かび上がらせる）、スライドイン（横や下から滑りこませる）などバリエーションを持たせることができるでしょう。
なお、フッターだけではなくヘッダーに同様のポップアップを表示する方法も考えられますが、ナビゲーション類へのアクセスを妨げることがないかフッター以上に注意が必要です。
ウィンドウ端のポップアップ
フッターポップアップと少し似ているものの、少し特徴の異なるのはウィンドウ端に表示させるタイプ。
多くのウェブサイトは左右に余白をもたせたデザインをとっており、そんなデザインの空きスペースを有効活用することが可能です。
弊社のサービスサイトでは、右下のスペースにチャットボックスを用意している
配置方法としてはユーザーの閲覧を妨げる可能性は低いものも、つねに表示させる場合には、ドラッグで移動可能にしたり、小さく折り畳めるようにする等の配慮があるとユーザーに優しいでしょう。
さりげなく訴求する
これまで紹介したのは、アピールの強いサイトの上に被せて表示するタイプのポップアップでした。
それらに比べるとさりげない訴求になる、サイト内にインラインに表示するタイプのCTAの設置場所をみていきましょう。
ヘッダーのインラインボックス
まずご紹介するのは、ウェブページの一番上にインラインで表示するバナー。下記のようなイメージです。
ヘッダー部に挿入するインライン型バナーの配置イメージ
インライン型で埋め込むことでユーザーを邪魔することもありませんし、ごくわずかな高さしか必要としませんのでファーストビュー領域を不当に侵食することもありません。さりげなく、それでいてしっかりと特典等をアピールすることができます。
サイドバー
サイドバーCTAの例。寄稿のお知らせやホワイトペーパーのダウンロードリンクなどが並ぶ
バナーの最もオーソドックスな配置方法かもしれません。
ただし、サイトに関係のない広告と間違われてユーザーに無視されることが無いように注意が必要です。
サイドバーでは、さりげなく、それでいてつねにユーザーの視界に入る箇所にCTAを配置することができます。
グローバルナビの中
グローバルナビゲーションの中にアクションポイントへのリンクを用意しているサイトは多いと思いますが、これも立派なCTAになり得ます。
他のメニューとしっかりと区別して強調しておきましょう。
グローバルナビゲーションへのCTA配置例
アクセスしやすい位置に用意する
最後に、ユーザーがページ内のどの位置にいてもスムーズにアクションを開始できることを目的に配置する場合です。
ページの上下につねに表示
ユーザーがどんなスクロール位置にいようとも、主要なアクションポイントにたどり着けるようにする方法です。
フッターやヘッダー、ページ端へのポップアップやグローバルナビゲーションを固定表示している場合などにはそのままこの用途として使用することができます。
コンテンツの直下
コンテンツの直下にCTAを配置することで、コンテンツを読み終わったタイミングで次のアクションを提示できます。
ソーシャルボタンCTAの表示例
ソーシャルボタンなどのアクションは必ずこの方法で配置されていますね。
コンテンツの途中で挟む
縦に長いコンテンツページでは、コンテンツの終わりだけでなく、途中にも何度かCTAを配置すると良いでしょう。
ユーザーがページの最後までたどり着かなかったとしても、CTAによる訴求を行うことができます。
ページの途中にCAを挟んでいる例
最後に
いかがだったでしょうか。本日はCTAの代表的な配置場所９種類についてご紹介しました。
訴求の内容や強度に合わせて、ぜひCTAの設置場所を使い分けてみてくださいね。
