優良CTA事例31選！クリックせずにはいられないバナーとは？

これまでの人生において、何かの申し込みをしたときのことをすべて思い出してみてください。Evernoteをダウンロードしたことはありませんか？Dropboxは？Spotifyは？General Assemblyのプログラミングコースにも参加したことがあるのでは？

そのとき、魅力的なCTAに誘われてクリックしてしまった経験も、おそらくあるはずです。

CTAを戦略的に使用して、ホームページの訪問者を購買行動につなげることは、非常に重要です。考えてみてください。

もしもこれまでに、バナーやボタンのデザイン、コピー文章に惹きつけられて、または雄弁な説明に乗って申し込みを行っていなかったら、今のように豊富な数のさまざまなアプリやウェブサイトを利用できていないはずです。

効果的なCTAと効果的でないCTAを見分けられるようになるために、感動的なバナーやボタン、デザインだけをここに31例集めて、3つのグループに分類してみました。グループは、シンプルで効果的なデザインを持つタイプ、クリックしたいと思わせるコピー文章を持つタイプ、そして複数のCTAをバランスよく1枚のページに配置しているタイプです。

種明かし：この記事で紹介しているCTAは、すべてが結果につながっているという科学的な根拠はありません。ですが、ここで紹介しているCTAは、私たちHubSpot（ハブスポット）が伝えている成功事例にすべて則っています。もしこれらのCTAを作成し直してご自身のサイトで使用してみようと思うのであれば、自分のオーディエンスに対して効果を発揮するかどうか、必ず確認してみてください。

コンバージョン率最適化 (CRO) の基礎完全ガイド

ウェブ分析の第一人者 小川卓氏によるコンバージョン率改善の資料と動画のセットです。運営側の主観だけでなく、ユーザー視点で取り組むCROについて学びませんか？

• ウェビナー動画と資料
• CROの実践に欠かせないDMAIC
• CROの実践手順
• CROを行う方へのアドバイス

今すぐ無料ダウンロードする 詳しく見る 今すぐ無料ダウンロードする

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

１）Evernote

「すべてを記憶する」。訪問者はページを開いた瞬間に、このメッセージの意味を理解します。Evernoteのウェブサイトはこの上なくシンプルで、ユーザーはこのアプリを利用するメリットや実際の登録方法を即座に見つけることができます。またメインCTAボタンとセカンダリCTAボタンに使用されている緑色は、ヘッドラインやEvernoteロゴの緑色と同じ色で、非常に目を引きます。

２）Dropbox

Dropboxのウェブサイトはいつも、ネガティブスペースを多く含むシンプルなデザインを採用しています。ページのグラフィックさえ、とても繊細でシンプルです。

シンプルなデザインとネガティブスペースを多く使用していることで、「Sign up for free （無料で登録する）」と書かれたCTAボタンが、ページ上でとても目立って見えます。CTAとDropboxのロゴには同じ青色が使用されているため、訪問者にもCTAが「Dropboxの登録」につながることがすぐにわかります。これは非常に効果的なCTAです。

３）OfficeVibe

OfficeVibeのページで目を惹くものは、スライドインCTAです。ブログ記事をスクロールしていくと、ページの下部からバナーが滑り込んできます。バナーにはもちろん、ブログの読者登録を促すCTAが表示されています。一番素晴らしい点は何か。OfficeVibeがスライドインCTAで読者に提案した内容は、読者が明らかに興味を持っている内容だったという点です。

つまりOfficeVibeは、素晴らしいマネージャーになる方法について記載されたブログを読んでいる読者に対し、素晴らしいマネージャーになるためのヒントが得られる、と記載されたスライドインCTAを表示したのです。

また、私はスライドインCTAの控えめな雰囲気が好きです。ただし私の同僚のRachel Sprungはその意見に反対で、「『全て中断してポップアップCTAをクリックしなさい』CTA」と呼んでいます。こういったCTAは憎めない演出だと思います。

ブログ記事をそのまま読み進めることもできる状態で追加の情報を表示してくれているからです（自分のブログ記事にスライドインCTAを追加する方法はこちらの記事からご覧ください）。
 

４）Netflix

何かの申し込みをする前に、ユーザーが最も気にすることは何でしょうか？それは、申し込み後に気に入らなかった場合、解約方法が面倒ではないかということです。Netflixは「いつでもキャンセルOK」の言葉を「まずは1か月無料体験」CTAの真上に表示することで、そういった不安を早い段階で取り除いてくれています。

私の想像ですが、この配慮だけで、登録数がかなり増加しているのではないでしょうか。またページを見ると、プライマリCTAとセカンダリCTAで使用されている赤は、Netflixのロゴの色と同じであることがわかります。

５）Square

効果的なCTAデザインにしたいと思うなら、ボタンそのもの以外のことも考える必要があります。たとえば背景の色、周りの画像やテキストについて考えることは、非常に重要です。

そのようなボタン以外のデザインコンポーネントを考慮した結果、Squareのホームページに表示されているものはたった2つ、製品の使用がいかに簡単であるかが強調された画像と、クリックを誘う「今すぐ無料のアカウントを作成する」CTAボタンだけです。

ページをよく見ると、画像内のクレジットカードとCTAボタンの色が合っており、CTAをクリックするとどのようなことが期待できるのかが想像できるようになっています。

６）Prezi

Preziも、ミニマルなウェブサイトのデザインを選択しました。黒と白を基調としたデザインの中で使用されているのは、緑色の恐竜と茶色いコーヒー、そしてCTAの明るい青色だけです。この青色はPreziのメインロゴと同じ色で、戦略的にホームページ上で使用されています。

青色のメインCTA「Preziを試す」とセカンダリCTA「開始」は、どちらをクリックしても同じ価格ページが開きます。

７）Full Bundle

Full Bundleは、ネガティブスペースを上手に利用してプライマリCTAを目立たたせている例のひとつです。白を使用した「作品集」CTAボタンが濃い灰色の背景に際立って見えます。ここでも戦略的にCTAが使われています。

Full Bundleが行っているサービスはそもそも、オンライン世界でクライアントの存在感を表現することなので、Full Bundleにとって、自分の作品を見せることは非常に重要です。そして実際、Full Bundleのウェブサイトの訪問者は、ほとんどが作品を見ることを目的としています。

８）Panthera

Pantheraは世界の野生のネコ科動物のことを本当に気にかけ、同じように感じている人々と仲間になろうとしている人を求めています。限定的な人々を対象としている中で、Pantheraが使用している言葉が素晴らしいです。「誇りと共に、群れの一員へ」。

野生のネコ科動物を心から愛している人々の心に届くと思いませんか？ページ自体は非常にシンプルです。ページに表示されたフォームと、2つの簡単なフィールド、そこに「参加する」ことを（再度）求めるボタンが表示されています。

９）Huemor

ウェブサイトを開いて「始動」と書かれたCTAの横に「クリック禁止」と表示されていたらどうしますか？正直に答えてください。どうしてもクリックしたいという衝動に駆られませんか？Huemorが利用している害のない反心理学は、とても楽しいものであるだけでなく、Huemorブランドが表現していることとよく合致しています。

１０）Aquaspresso

CTAの目的は、サイトの訪問者にとってもらいたいと期待している一連の行動を実際にとってもらうことです。優れたCTAであれば、訪問者の役に立つことと、期待の行動をとるよう促すことの両方を同時に実行することができます。コーヒー会社のAquaspressoは、メイン ブログ ページのポップアップCTAを利用し、その絶妙なバランスを完璧に実現しました。

ここで言う期待の行動とは、読者にAquaspressoが実際に販売している物は何なのかを確認してもらうことです（そして願わくは購入してもらうことです）。この行動を促すための方法はたくさんあり、例えば、「最も人気のある製品を見てみてください」といった非常に直接的なCTAを利用することなどが含まれます。

ですがAquaspressoは、その代わりに素晴らしい方法を取りました。読者を喜ばせることができるさりげない提案をしたのです。それは読者のEメールアドレスを教えてもらう代わりに、「本日のスペシャル」をプレゼントする、というものでした。

プレゼントの有効期限が今日だけという点も、希少性と呼ばれる心理作戦の素晴らしい例です。これは、通常人は希少性のあるものにより大きな価値を感じる、という心理を利用したものです。明日より今日のスペシャルのほうが良いものかもしれないという想像をすると、人は可能なうちにそのプレゼントを手に入れてしまおうと思うのです。

（上記のCTAは、ハブスポットの無料のコンバージョンツール、Marketing Freeを使用して簡単にCTAを作成する方法を知りたい方は、こちらをクリックしてください。無料で活用することができます）。
 

１１）QuickSprout

間違えることは誰でも嫌いです。QuickSproutのブログに表示されるスライドインバナーにクリックする価値が十分にあると感じさせるのはそのためです。CTAは読者に質問を投げかけています。「SEOの方法、間違っていませんか？」と。

さて、どうでしょう？事実を知るために行わなければならないことは、自分のページのURLを入力するだけです。この上なく簡単でしょう。訪問者に本心からクリックしたいと思わせるような言葉は、こういった言葉なのです。

また、ブログ記事の途中でバナーをスライドインさせることは、非常に優れた戦略です。これにより読者がページから離脱する前に読者の情報を手に入れることができます。従来多くのブログは、記事の最後にバナーを配置してきました。

しかし研究によると、読者の多くが記事の60％程度まで読み進めたところで、離脱することがわかったのです（ブログ記事へのスライドインCTAの挿入方法は、こちらからどうぞ）。

１２）Grey Goose

Gooseのページでは、楽しくて独特なCTAを使用しており、このCTAを見るとついクリックしたくなります。訪問者は、大抵の場合、ホームページから製品ページやプレスリリースに誘導されると思っています。ところがそこに、「あなた好みの味のカクテルはこちらです」と書かれたCTAが表示されると、楽しいサプライズを感じます。

人はパーソナライゼーションが好きです。そしてこのCTAは楽しいゲームのような雰囲気もあります。コピー文章の横に再生ボタンが表示されていることで、クリックすると動画の再生が始まることがわかります。つまりクリック後にどうなるのかを読者が想像しやすいようにしてあります。

１３）Treehouse

多くの企業のウェブサイトに、無料トライアル開始のチャンスが用意されています。その中でもTreehouseのCTAは、「無料トライアルを開始する」という単純な表現ではなく、「無料トライアルを掴みとれ」といった表現をしています。

言葉の選択が生み出す違いは微妙なものかもしれません。ですが、単に無料トライアルを開始するのではなく、ユーザーが無料トライアルを積極的に掴み取るという印象が、すでにパーソナライゼーションにつながっています。

また、「掴み取る」という言葉は、いつまでもそこにあるものではなく、可能なうちに早く手に入れたほうが良いという印象をユーザーに与えます。

１４）OKCupid

OKCupidのCTAは、第一印象ではそれほど印象的ではありません。ですがこのページには、とても細かいところに光る点がたくさん隠れているのです。青字に明るい緑色でとても目を惹くCTAボタンには「続く」と表示されています。

この言葉を見た人は、登録プロセスは短くてすぐに済ませられるというイメージを持ちます。私はこのCTAを見た時に、つまらない登録フォームを埋めているのではなく、何か面白いゲームに参加しているような気分になりました。すべてボタンのコピー文章のおかげです。

１５）Blogging.org

タイマーのカウントダウン以上に、人にすぐに行動したいと感じさせるものがあるでしょうか。新規の訪問者がblogging.orgのホームページを開きしばらくすると、「時間制限付きの」ポップアップCTAが表示されます。

CTAには2分間に設定されたタイマーがあり、カウントダウンが始まります。これは10番目のAquaspressoの例でもお伝えしたように、希少性の心理作戦を利用した典型的な例です。

希少性の心理では、人は希少なものにより大きな価値を感じます。フォームを埋めオファーを手に入れることに時間制限が設けられている場合、人は早くフォームを埋めて、手に入れられるうちにオファーを手に入れたいと思うのです。

制限時間を超えてしまったら何が起こるのか、気になりませんか？どうなるのか試しにやってみたところ、おかしなくらい何も起こらず、タイマーがゼロになった後も、ポップアップCTAは表示されたままでした。

１６）IMPACT Branding & Design

言葉の使い方を誤ると、CTAは非常に押し付けがましく、セールス色が濃くなります。IMPACTのページは教育的なアプローチを取っており、訪問者に何か行動を起こすよう促すのではなく、まずはIMPACTがどのような会社なのかを学習してもらう形になっています。

このCTAは、人を不思議な気分にさせるCTAです。行動を促すような言葉さえ使用していないのに、人を惹きつけクリックにつなげてしまうのです。

１７）EPIC

EPICはホームページを、主に自分たちの作品を見せる場として利用しています。ページを開くと動画が始まり、EPICがクライアントのために作成した作品が、カルーセル表示されます。

サイト上にはクライアントのウェブサイトも含め、クリックできる箇所がたくさんあります。ですがその中でもメインCTAはとても目立ち、背景で流れている動画とのコントラストも確実に加えられています。EPICのサイトでは、イメージを浮かべやすい、親しみのこもった「一緒に」という言葉が使われています。

例えば、「一緒に新しいプロジェクトを始めましょう」というような言い方で、クリエイティブなパートナーを探しているユーザーは、EPICと組めば素晴らしい仕事ができる、というイメージを持つことになります。

１８）APPSTEMPLATES.com

 APPSTEMPLATES.comのCTAは、クリック後に手に入れられるものの本当の価値がコピー文章として表示されており、とても独特です。

CTAボタンは、無制限のアクセスを89ドル（実際の価値は149ドル）で手に入れられるということだけではなく、近くに添えられた「すぐにクラブに参加しよう」のコピー文章で、何かのチャンスを逃してしまっているのではないかという印象を訪問者に与えるのです。

また、ここで使用されている矢印が、CTAの評価をさらに高めています。矢印は方向を示すディレクショナルキューの完璧な例です。

１９）Humboldt County

Humboldt Countyのウェブサイトは、そもそもとても豪華です。ページを開くと衝撃的に美しいフィルム映像の動画が流れます。ですが、このページで私が本当に気に入っているのは、ページの中央下部に表示されている型破りなCTAボタンです。

ウサギの絵の描かれたこのボタンには、「魔法を追いかけて」の文字があります。この言葉は映像にファンタジー色を加えており、これからおとぎ話の国に一歩踏み出すような感覚を与えてくれます。

さらにはCTAを一度クリックすると、ウェブサイトがロールプレイの冒険ゲームのようになり、ユーザーにとっては楽しいCTAパスとなります。結果、当然ユーザーはより長い時間をこのページで過ごします。

２０）Uber

Uberは全く違う2種類の対象、乗客とドライバーを、ウェブサイトへの登録の対象者にしています。両方のペルソナは全く異なるものを求めていますが、Uberのウェブサイトは両者を非常に上手につなげています。

このウェブサイトではUberの乗客とドライバーが、世界の様々な場所で素晴らしい時間を過ごしている動画が流れます。また、ページ上部に現れるドライバーCTAのコピー文章も気に入っています。「車を運転してお金を稼ごう。」これ以上に直接的な言い方はありません。ここではページのユーザーが使用しそうな言葉を、わざと使用しているのです。

２１）Spotify

Spotifyのページを開くと、Spotifyが最も求めていることがすぐにわかります。それは、有料のプレミアムアカウントへの登録を希望しているカスタマーを惹きつけることです。無料アカウント登録のためのCTAボタンは、明らかにセカンダリボタンです。このことを明らかにしているのは、ヘッドラインだけではありません。CTAボタンの色を見てみてください。

「プレミアム登録」CTAはライムグリーンで、ページ上で浮かび上がって見えます。同時に表示されている「無料で再生」CTAボタンは白で、ページ上の他のテキストに溶け込んでいます。このコントラストにより、訪問者はプレミアムのCTAに注目します。

２２）Ugmonk

エグジットCTAはユーザーがページから離脱する時に表示されるポップアップバナーで、通常のポップアップバナーとは異なります。ユーザーの行動を検知し、ユーザーがサイトから離脱しようとする時にのみ表示されます。タイミングの良い介入により、エグジットCTAはとても効果的に読者の注意を引くことができ、同時に離脱しない方が良い理由を伝えることができます。

Ugmonkは優れたエグジットCTAを使用しており、ユーザーがサイトから離脱する前の最後のお願いとして、2つの選択肢が提示されます。一つ目は、15％の割引券をプレゼントするというものです。その下には「はい、割引券を送ってください」と「いいえ、興味がありません」の2つが表示されます。

バナーにはそれぞれ、「はい」と「いいえ」が実際何を意味しているのかを明確にしてくれている点が非常に役立ちます。またその際に、ユーザーの罪悪感を刺激するような言葉を使用していないのも良い点です。罪悪感を刺激するような言葉とは、例えば実際に他のサイトで見かけたことがありますが、「いいえ、自然にはほんの少しも興味がありません」といったものです。

最後に、「はい、割引券を送ってください」のボタンのほうが、もう一方に比べてずっと明るく楽しげな色を使っていることに注目してください。

２３）Pinterest

Pinterestに登録したいですか？Pinterestには、Facebook経由での登録とEメールを利用した登録の、2つの登録オプションが用意されています。

Facebookのアカウントを持っている場合、PinterestはFacebookを通した登録を希望しています。なぜそれがわかるのか？見ただけでわかります。Facebookの青いCTAボタンのほうが明らかに目立っており、色鮮やかで、Facebookのブランドロゴと色から容易に認識が可能です。

また、論理的にも明らかです。ユーザーがFacebookを通じてログインすれば、PinterestはFacebookのAPIデータを使用することで、単にEメールでログインしたときよりも、大幅にたくさんのユーザー情報を得ることができるからです。

このホームページは新しいメンバーの登録に対し最適化されていますが、すでにPinterestのアカウントを持っているユーザーがログインするための、あまり目立たないCTAもページの右上に表示されています。

２４）Madewell

Madewell（J.Crewの姉妹ブランド）は、eコマースウェブサイトを次のレベルに進ませるためには、どのようなサイトを標準としたらよいのか、ということを常に提言しており、いつでも傑出したウェブサイトを公開してくれています。ホームページに表示させているCTAに関しても例外ではありません。

ページを開くと最初に、「私が探しているものは」というヘッドラインが表示されます。その下に、「旅行にぴったりな服」などのカテゴリーが並びます。そして下記のような2つのオプション、「はい、見てみます」と「うーん、他には何がありますか？」が表示されます。ユーザーはいずれかのCTAを選択することで、旅行用の服を見てみるか、別のタイプの服を見てみるかを決めます。

別のタイプの服を選ぶと、また同じような選択が求められます。ページのどこを見たいという特定の考えを持たずにウェブサイトを訪問したユーザーにとって、ゲーミフィケーションは効果的です。採用することでユーザーはウェブサイトをより楽しむことができます。

２５）Instagram

Instagramは主にモバイルアプリで使用するものなので、ページには同じ大きさの黒いCTAが2つ表示されます。ひとつはInstagramをAppleのApp Storeからダウンロードするためのボタン、もうひとつはGoogle Playからダウンロードするためのボタンです。

同じ大きさのCTAボタンを使用するのは、Instagramはユーザーがダウンロード時にApp Storeを利用してもGoogle Playを利用しても、どちらでもいいと思っていることを表しています。

ダウンロードはダウンロードであり、Instagramはその行為自体に対して最適化しているのです。すでにInstagramをダウンロードしている場合は、「ログイン」のCTAをクリックすることも可能です。

２６）Barkbox

Barkboxのホームページに表示される2つのCTAは、Barkboxが自分の顧客についてよくわかっていることを示しています。自分が登録することを目的にBarkboxのホームページを開く人は、もちろんたくさんいますが、誰かにBarkboxをプレゼントすることを目的にページを訪れる人も、たくさんいます。

そういった人々が簡単に製品を購入することができるように、Barkboxには同じ大きさのCTAが2つ用意されています。「始める」と「プレゼントする」です。

おまけのボーナスとして、画面の右端に小さな愛らしいポップアップCTAが表示されています。ユーザーにメッセージを残していくよう促しているのです。

クリックしてみてください。小さなダイアログボックスが現れ、「ワオン！申し訳ないワン！現在、俺たちの群れはオフラインだワン。メッセージを残してくれたらすぐに遠吠えでお返事させていただくワン！」というメッセージが現れます。思わず笑顔がこぼれるコピー文書とは、こういうことを言うのではないでしょうか。

２７）t.c. pharma

Red Bullはもともと、Red Bull社で作られていた飲み物ではなく、タイを拠点とするt.c. pharmaが製造していたものでした。t.c. pharmaは有名なエナジードリンク、電解質飲料、機能性飲料やスナックを製造している会社で、t.c. pharmaのホームページには、同じサイズのCTAが2つ表示されています。「もっと詳しく知る」と「製品を見る」の2つです。

2つのボタンのうち1つ目のボタンには明るい黄色が使用されており、t.c. pharmaが「もっと詳しく知る」という最初のCTAボタンを押してもらいたいと思っていることがはっきりと表れています。

２８）General Assembly

General Assemblyのホームページをスクロールしていくと、興味のあるコースや興味のないコースなど、さまざまなコースの申し込みを行うバナーが表示されています。スクロールをしていくとページ下部からバナーがスライドインします。このバナーに注目してみてください。これはメール配信を申し込むためのバナーです。

このバナーは、位置や出現の仕方によりセカンダリCTAのように見えますが、General AssemblyはこのバナーをプライマリCTAとして読者の関心を引こうとしているのではないかと思います。その理由は、個別のコースに申し込みを行うためのバナーに比べ、このバナーのほうがカラフルで目立つからです。

自分のページにバナーを作成するときは、目立つ色を使用しましょう。通常のスタイルと相反するような色でも構いません。そして個性的なバナーが読者の目を惹きつける効果を発揮するかどうかを、確認してみましょう（ブログ記事へのスライドインCTAの挿入方法は、こちらからどうぞ）。

２９）charity: water

Charity: waterの主な目的は、きれいな水のための寄付を募ることです。ただし、誰もが同じ支払い方法を選択するかどうかはわかりません。このホームページのCTAは非常に独特なアプローチをしています。一行のフォームに最初から60ドルを入力した形で表示し、同じように重要性を持たせた2つのCTAで、支払方法を選択させるというものです。

2つのCTAはそれぞれ、クレジットカードでの支払いとPayPalでの支払いを表しています。両方のCTAが、同じサイズで同じデザインになっていることに注目してください。これは、charity: waterが、寄付をしてもらえるのであれば、その方法はどちらを選択してもらっても大歓迎だということをよく示しています。

３０）Hipmunk

Hipmunkのサイトを開く主な目的は、フライトを探すことです。ですが、フライト、ホテル、車、パッケージの4つのタブを選択できることに注目してください。タブのうちどれか一つを選択すると、それに合わせてフォームが変化し、必要な情報を入力することができるようになります。

自分が何を探しているのかをユーザー自身に確実に把握してもらうために、Hipmunkは明るいオレンジ色のCTAをフォームの右端に配置しました。このCTAには、「検索」の文字の横に小さな飛行機の形のアイコンが表示されます。

これによりユーザーは、自分がホテルではなくフライトの検索を行っているのだということがわかります。ホテルのタブを開いているときは、アイコンも飛行機からホテルの形に変わります。また、車やパッケージについても同様です。

３１）MakeMyPersona

これは、複数のCTAを含む素晴らしいポップアップバナーのもう1つの例です。ただしこの例では、ユーザーに示された2つの選択肢のサイズ、色、デザインには大幅に差があります。MakeMyPersonaは「テンプレートを掴み取れ！」CTAボタンを、より魅力的でクリックしやすいように表示しています。

もう1つの「いいえ、今は結構です」CTAは非常に地味で、クリック可能なボタンかどうかも分かりづらいほどです。ポップアップバナーでは、色やデザインで選択肢に明確な差をつけることも大切です。

また、断りの選択肢に対しても丁寧な言葉を使用している点が素晴らしいです。断ることを選択したユーザーに対し、罪悪感を持たせるような言葉遣いをしないブランドが、非常に評価できるブランドだと思います。

デザインや配置、コピー文章によってコンバージョン率は変わります。どんなにPVが増えても、効果的なCTAがなければクリック率は増えません。

大切なのは訪問者に興味をもってもらうことです。今回ご紹介したCTAを参考にすれば、わかりやすくて魅力的なバナーやボタンの作成に役立つでしょう。

編集メモ：この記事は、2016年3月に投稿した内容に加筆・訂正したものです。Brittany Leaningによる元の記事はこちらからご覧いただけます。