さらにCTAに注目を集めるための、アニメーション付きUIのアイデア

CTAバナーにユーザーの注目を集めるためには、ただサイト内にバナーを配置するだけでなく、アニメーションを伴ったUIでバナーを表示することが効果的です。

今回は、多くのサイトで取り入れられているアニメーション付きのCTAバナー表示のパターンを集めてみました。
ぜひCTAの設計時にご参考にしていただければ幸いです。

浮き上がるモーダルポップアップ

まずは、ページ中心にモーダルウィンドウとして大きくバナーを表示するパターンです。
代表的なCTAのUIで、CTAといえばこの形をイメージする人もいらっしゃるかもしれません。

モーダルポップアップの表示例。弊社ツール「f-traCTA」でもこのモーダル型のバナー表示をサポートしています

モーダルウィンドウであるために、ユーザーはバナーが示すアクションを実施するか閉じるかの2択を迫られることになるため、必ずバナーの内容に注目を集めることができるというメリットがあります。

しかしいっぽうで、サイト上のコンテンツを閲覧していたユーザーに対し、半ば強制的にアクションの2択を迫る、というのはユーザー体験を損ねる可能性もあるため、注意が必要です。

サイト訪問直後や離脱時、ページに長時間滞在していた場合などに表示することが多いようです。

crazyegg.comでは、離脱しようとマウスカーソルを画面外に話すとモーダルバナーが現れる

また、モーダルウィンドウの上にバナーを載せるタイプのほかにも、モーダル領域全体を使ったパターンも海外サイトではよく見かけます。

ページ全体を使ったモーダルUIの例

フッターポップアップ

フッター領域だけに浮かび上がるポップアップ。この形であれば、ユーザーのサイト閲覧を遮ること無くCTAを表示できます。

当ブロクにも、50％の確率で下記のようにフッターポップアップが表示されるようになっています。

inVisionブログでスクロールすると現れるフッターポップアップには、ソーシャルボタン類とニュースレターの登録フォームが並ぶ。

左右下部にスライドインするポップアップ

フッターポップアップにも似ていますが、ページの片隅に横長ではないバナーを表示するというのもまた定番のCTAのひとつです。

とくに、下記のように左右からスライドインして現れるケースが多いように思います。

スライドインするバナー（Hubspotブログより）

追随するバナー

アニメーションとは厳密にはずれますが、ページスクロールに追随してつねに画面上に表示されるという類のバナーもよく見られます。
ソーシャルボタンのように、ユーザーがそうしたいと思ったタイミングでいつでも実施できるような気軽なアクションを設置すると良いでしょう。

追随するCTAの例。

ページ上部のインラインバナー

その他よく見かけるアニメーション系CTAとしては、ページ上部に表示するインライン形式のバナーが挙げられます。

ヘッダーにCTAを配置する場合、ポップアップではなくインライン（ページコンテンツ内に）に挿入することで、ページの閲覧を妨げないようにすることがポイントです。
ページロード後に少しタイミングを送らせてフェードインまたはスライドインさせると注目を集めることができます。

ページの一番上部という、ページに訪れるユーザーの誰もが目にする位置にCTAをアピールすることができます。

先日「徹底解剖」したWantedly様のブログにも、ヘッダーバナーが。

また下記のように、スクロールアニメーションと組み合わせ、ブラウザ領域全体の大きさを持つインラインバナーを表示させているケースもあります。

loop11.comの例

複数のCTAアニメーションを使用する

実際には、これまで紹介してきたようなアニメーションを伴うCTAを複数個組み合わせてサイトに取り入れることができます。
いくつか他のサイトの事例を見てみましょう。

スクロールにあわせてあらわれる複数のバナー

Postplannerのサイトでは、スクロールにあわせてCTAを含んだヘッダーナビゲーションと右サイドのバナーを表示しています。

ヘッダー、スライドインポップアップ

また、カーソルの動きに反応してモーダルのUIも表示させています。

ページ全体を使ったモーダルUI

ページロード後少し遅れて浮かび上がるバナー群

Beeketingのサイトでは、ページロード後少し遅れたタイミングで、ヘッダーのインラインバナー、左サイトのSNSボタン（スクロールに追随）、右下のポップアップバナーを表示させています。

beeking

ヘッダー、フッター、右下のバナー

inVisionブログでは、スクロールに合わせてページ上部のバナー、フッターバナー、右下のバナーを表示します。

invision

最後に

いかがだったでしょうか。本日はアニメーションを伴うCTAのよくあるUIパターンをご紹介しました。
やはり動きを伴って現れるCTAはよりユーザーの注意をひくことができますし、アニメーションのパターンと表示タイミングの組み合わせを検証することで、より良いユーザーエクスペリエンスを提供することができるでしょう。

ぜひ、あなたのサイトにも「動くCTA」を取り入れてみてはいかがでしょうか？