良いコール・トゥ・アクション(CTA;ユーザのアクションを喚起するエレメント)は、Webサイト上のさまざまな要素の目的を統合する留め金のようなもので、サイトがユーザに何を求めているかを、ユーザに対して効果的に示すものです(例;「Buy this book」「download our free guide」「contact us for more information」など)。
しかしときに、どう考えてもそれではユーザに意図したアクションへと促すことができないというような、現実離れした安っぽいセールストークのようなCTAに出会うことがあるのも事実です。
何をみたせば、CTAは「良い」CTAとなるのでしょうか。
本記事では、それを考えるヒントになるような、巧くデザインされたコール・トゥ・アクションの例を10紹介します。
MailChimp
MailChimpのサイトを見ると魅力的なCTAがあちこちに見られますが、特に素敵なのはメールでのキャンペーンを受けつける送信画面です。
たとえテキストがなかったとしても、ボタンの上をうろうろするサルの手のアニメーションで、何をすべきかちゃんと分かります。実際に送信ボタンを押すと、妙な達成感を感じることができるシンプルで楽しい工夫です。
ManageWP
見出しと簡潔なテキストがサービス内容を端的に説明してくれていて、始めるにはメールアドレスを入力するだけというシンプルな作りです。
見た目も面白く、コンテンツも要点をきっちり抑えています。
Blue Apron
Blue ApronのサイトはCTAのオンパレード。
中でもこのセクションは私の気に入りで、何にいくらかかるのかを見やすいフォーマットで提示してくれます。
小さなボタンにまでこだわりが行き届いていて、何より背景が新鮮な食べ物の画像になっています。
見ていてなんだかおなかがすきませんか?
Spotify
上で紹介したBlue Apron同様、Spotifyも自分たちの売りをアピールする背景になっています。
少し違うのはそのシンプルさでしょうか。音楽のストリーミングサービスの説明は少ないものの、クリックやスクロールで詳細を見たり、申し込みをしたりしやすいような無駄のないデザインになっています。
Zillow
不動産関連のものなら何でも見つかるサイトです。
最初のページがCTAエリアになっていて、わざわざ検索しなくても全部ここにまとまっています。
これほど便利なCTAページはなかなかないではないでしょうか。
B&O Play
親であるBang and Olufsenのミニマリストデザインとブランディングを踏襲したヘッドホンブランドのサイトです。
CTAページでは美しいデザインをたっぷり楽しみながら、コレクションの詳細や買いたいものを探すことができます。
たしかにきれいだけど、だから何?と思ったそこのあなた。CTAはブランドの一部です。
自分たちが何をしていて、どんなブランドなのかを知ってもらう手段でもあるんですよ。
Mercy Corps
世界の難しい問題に立ち向かうのに、余裕なんてありません。Mercy CorpsのCTAの太字で書かれた見出しからは、そうした緊迫感が感じられます。
支援を必要とする相手と、自分たちにできることを提示してくれています。
Nest
アース・デイのメッセージと自社の省エネサーモスタットを結び付けています。
星がきらめく画像を背景に実物以上の大きさのサーモスタットが惑星のように浮かび上がっていて、インパクト抜群です。しっかり余白を確保して息苦しさを感じないデザインになっているのも良いですね。
Skagen
ミニマムなデザインの腕時計を販売するデンマークの会社です。色づかいが素晴らしく、ブランドイメージと一致するシンプルさが光るCTAになっています。
Patagonia
アウトドアでのエクスペリエンスに焦点を当てているブランドだけあって、ホームページも特徴的です。
画像やテキストは大きく太く、ターゲットオーディエンスの心をくすぐるような壮大な自然をイメージさせられます。
まとめ
良いCTAはユーザの立場に立ち、喚起したい行動へと促すことができるものでなくてはなりません。
色遣いにもイメージの使用にも、自分のブランドを映させ、メッセージを伝達する有効な手段として利用する必要があります。
不調和をもたらすような浮いたモーションは避け(調和したモーションは素晴らしい効果を加えてくれます)、シンプルで力強いテキストを心がけましょう。
上で紹介したCTAはすべて、とてもシンプルなやり方でユーザを導いているものばかりだという点にも注意です。
複雑すぎたり、飾りすぎたりする必要はないのです。
※本記事は、10 Outstanding Call-to-Action Examplesを翻訳・再構成したものです。