海外事例から学ぶ、ユーザーの行動を導く優れたCTA10選

Eric Karkovack

Eric Karkovack氏は20年以上の経験を持つWebデザイナーです。”Your Guide to Becoming a Freelance Web Designer“の著者。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

10 Outstanding Call-to-Action Examples

古き良きコールトゥアクション(CTA)はWebにおいて必須な要素です。CTAはユーザーに対してとって欲しい行動を正確に伝えるためにあります。たとえばこの本を買ってください、無料ガイドブックをダウンロードしてください、もっと情報が欲しい場合はご連絡ください、などがそうです。

しかし、時折これらは陳腐なマーケティング文句にしか聞こえない場合があります。ひどいときなどは、意図と正反対のアクションに繋がっていることすらあるかもしれません。

では、優れたCTAとはどんなものでしょうか? ここではデザインがすぐれている、コピーが巧みに書かれている、とにかくユニーク、といった優れたCTAを10点紹介します。

MailChimp

MailChimpはCTAの扱いでは誰にも引けをとりません。MailChimpのサイトにはいくつもの良いCTAがありましたが、私のお気に入りのCTAはメルマガ配信のための「配信準備」ダイアログです。

仮にダイアログボックスにテキストがなくても、赤いボタンの上にチンパンジーの手が浮いているアニメ画像を見るだけで何をすべきかがわかります。シンプルで楽しく、不思議なことに「送信」ボタンをクリックすると達成感さえ抱きます。

ManageWP

ManagerWPはサイトトップのほとんどをCTAとして使っています。見出しと短い説明文でサービス内容を正確に伝えつつ、サービス開始に必要なメールアドレスの入力を求めています。動画や画像がおもしろく、コンテンツは簡潔にまとめられています。

Blue Apron

食材宅配サービス会社Blue Apronのサイトを見てみると、トップページはまさにCTAのオンパレードです。入手可能なものと価格が、読みやすいフォーマットで伝えられている点が、私はとても気に入っています。

小さな無料配送アイコンでさえ気が利いています。なんといっても、食材の画像を背景として使っているのでサービス内容の本質がしっかり伝わります。サイトを見ているとお腹がすいて、サービスを利用したくなりませんか?

Spotify

ひとつ上のBlue Apron同様、音楽ストリーミングサービスSpotifyも会社のセールスポイントをCTAの背景にしています。一方、それ以外ではシンプルなアプローチをとっています。

スライダー部分はストリーミングサービスについての重要なことを何点かハイライトしています。そのほかの大部分は、詳しい情報を知るためのクリックやスクロールを促しています

Zillow

不動産検索サイトのZillowは不動産に関するあらゆることを調べるための場所です。Webサイトを開くとすぐにCTAエリアが迎えてくれます。このCTAエリアでは自分で探してまわらなくても、Webサイトが提供しているすべてのことができます。電話で問い合わせて情報を探すのと同じくらい便利です。

B&O Play

Bang and Olufsenの派生ブランドB&O Playは本家のミニマリストデザインとブランディングを引き継いでいます。このCTAはその例です。特集コレクションを見たり、洗練されたヘッドフォンの購入手続きを進めたりしながら、美しいインダストリアルデザインをたっぷり満喫できます。

これを見て「とてもいい感じだけど、だから何?」というのは簡単かもしれませんが、ポイントは、ブランド全体の重要な一部としてCTAを扱わなくてはいけないということです。企業の理念や活動がCTAに反映されていなければならないのです。

Mercy Corps

世界のもっとも困難な問題に立ち向かう場合、一刻も無駄にはできません。Mercy Corpsは切迫感のあるCTAをを作り出しています。真剣な顔をした2人の写真や、シリアスなヘッドラインはは訪問者に事の重大さを伝えます。

Mercy Corpsは私たちに困難な状況にある人々の姿を見せて、そこから生まれる感情を行動に移す方法を提供しています。

Nest

ホームオートメーションの達人Nestは地球の日のメッセージと、自社の省エネサーモスタットを結び付けています。

背景に輝く星と製品写真の組み合わせはインパクトがあり、宇宙に浮かぶ惑星を思い起こさせます。さらによい点は、背景にゆったりと余裕を持たせていることです。

Skagen

Skagenはミニマリストデザインの腕時計やアクセサリーを販売しているデンマークの企業です。このCTAの特徴は見事な色使いとブランドにふさわしいシンプルさです。ここで学べることは、製品がユニークであれば製品自身に語らせるということです。

Patagonia

Patagoniaはアウトドア体験にまつわるメーカー会社です。同社のトップページのスライダーは、環境映画の美しい一場面のように、製品と会社の主張が混ざっています。

画像は大きく大胆で、訪問者のパソコン画面に大自然の一片を届けます。これはPatagoniaのターゲットにとってはまさにぴったりなものです。

優れたCTAとは

優れたCTAは、訪問者のインタラクションの先にある結果をよく考えたものでなければなりません。サイト上で使用する色や画像は会社のブランドを反映し、メッセージを伝えるのを助けなければいけません。おかしなものでない限り、動きをつけるのはいいことです。テキストは短く的を射たものにしてください。

この記事で紹介したCTAは、いずれも簡単な方法でうまくユーザーを導いています。ユーザーにアクションを起こしてもらうために、多くの言葉を並べたり、複雑なことをする必要はないのです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集