CTAバナーにユーザーの注目を集めるためには、ただサイト内にバナーを配置するだけでなく、アニメーションを伴ったUIでバナーを表示することが効果的です。
今回は、多くのサイトで取り入れられているアニメーション付きのCTAバナー表示のパターンを集めてみました。
ぜひCTAの設計時にご参考にしていただければ幸いです。
浮き上がるモーダルポップアップ
まずは、ページ中心にモーダルウィンドウとして大きくバナーを表示するパターンです。
代表的なCTAのUIで、CTAといえばこの形をイメージする人もいらっしゃるかもしれません。
モーダルウィンドウであるために、ユーザーはバナーが示すアクションを実施するか閉じるかの2択を迫られることになるため、必ずバナーの内容に注目を集めることができるというメリットがあります。
しかしいっぽうで、サイト上のコンテンツを閲覧していたユーザーに対し、半ば強制的にアクションの2択を迫る、というのはユーザー体験を損ねる可能性もあるため、注意が必要です。
サイト訪問直後や離脱時、ページに長時間滞在していた場合などに表示することが多いようです。
また、モーダルウィンドウの上にバナーを載せるタイプのほかにも、モーダル領域全体を使ったパターンも海外サイトではよく見かけます。
フッターポップアップ
フッター領域だけに浮かび上がるポップアップ。この形であれば、ユーザーのサイト閲覧を遮ること無くCTAを表示できます。
当ブロクにも、50%の確率で下記のようにフッターポップアップが表示されるようになっています。
左右下部にスライドインするポップアップ
フッターポップアップにも似ていますが、ページの片隅に横長ではないバナーを表示するというのもまた定番のCTAのひとつです。
とくに、下記のように左右からスライドインして現れるケースが多いように思います。
追随するバナー
アニメーションとは厳密にはずれますが、ページスクロールに追随してつねに画面上に表示されるという類のバナーもよく見られます。
ソーシャルボタンのように、ユーザーがそうしたいと思ったタイミングでいつでも実施できるような気軽なアクションを設置すると良いでしょう。
ページ上部のインラインバナー
その他よく見かけるアニメーション系CTAとしては、ページ上部に表示するインライン形式のバナーが挙げられます。
ヘッダーにCTAを配置する場合、ポップアップではなくインライン(ページコンテンツ内に)に挿入することで、ページの閲覧を妨げないようにすることがポイントです。
ページロード後に少しタイミングを送らせてフェードインまたはスライドインさせると注目を集めることができます。
ページの一番上部という、ページに訪れるユーザーの誰もが目にする位置にCTAをアピールすることができます。
また下記のように、スクロールアニメーションと組み合わせ、ブラウザ領域全体の大きさを持つインラインバナーを表示させているケースもあります。
複数のCTAアニメーションを使用する
実際には、これまで紹介してきたようなアニメーションを伴うCTAを複数個組み合わせてサイトに取り入れることができます。
いくつか他のサイトの事例を見てみましょう。
スクロールにあわせてあらわれる複数のバナー
Postplannerのサイトでは、スクロールにあわせてCTAを含んだヘッダーナビゲーションと右サイドのバナーを表示しています。
また、カーソルの動きに反応してモーダルのUIも表示させています。
ページロード後少し遅れて浮かび上がるバナー群
Beeketingのサイトでは、ページロード後少し遅れたタイミングで、ヘッダーのインラインバナー、左サイトのSNSボタン(スクロールに追随)、右下のポップアップバナーを表示させています。
ヘッダー、フッター、右下のバナー
inVisionブログでは、スクロールに合わせてページ上部のバナー、フッターバナー、右下のバナーを表示します。
最後に
いかがだったでしょうか。本日はアニメーションを伴うCTAのよくあるUIパターンをご紹介しました。
やはり動きを伴って現れるCTAはよりユーザーの注意をひくことができますし、アニメーションのパターンと表示タイミングの組み合わせを検証することで、より良いユーザーエクスペリエンスを提供することができるでしょう。
ぜひ、あなたのサイトにも「動くCTA」を取り入れてみてはいかがでしょうか?