【イラスト付き】CTAとは？効果的なデザインと成功事例3選を紹介！

ねえねえ、イエローちゃん！

ホームページに資料請求のボタンを作ったんだけど、なかなかクリックされなくて困っているの。

どうやったらうまくできるか、教えて欲しいわ！

じゃあ、まずはCTA・CTAボタンが何を指すのか解説するね。

CTAとは「Call To Action」の略で、Webサイトやメール、広告などにおいてユーザーに特定の行動を起こさせることを指すよ。

たとえば、以下のような行動があるよ。

CTAボタンとは、さっき説明した「特定の行動」を起こすためのボタンのことだよ！

そう！たとえば「この会社の資料が気になるから、ダウンロードしてみよう」とユーザーにボタンをクリックさせる行動を起こさせたら、成功と言えるんだ。

ちなみに、CTAによって得た成果は「CV（コンバージョン）」と呼ぶよ。

じゃあ早速、ユーザーにクリックされるCTAを作るためのポイントを説明していくよ。

具体的には、以下のポイントを意識してみよう！

それぞれ解説していくね。

まずは、CTAを設置する位置が重要だよ！

主な設置場所はこれだよー！

ただし、ここに設置したからといって、必ずCVが向上するわけではないよ！

CTAボタンに入れるテキストも、とっても重要だよ！

そう！長いとユーザーがCTAを理解するのに時間がかかってしまうんだ。

あとは、ボタンの機能を表記するのではなく、ユーザーの行動を促すテキストにしよう！

うん！ユーザーの行動が明記されていていいね！

CTAにするために、デザインの工夫も欠かせないんだ！

あとは、ボタンの「形」でも見栄えが全く変わるんだ。

じゃあ、工夫すべきポイントを紹介するね。

上記の部分にこだわるかどうかで、クリックのしやすさが大きく変わってくるんだ。

簡単にできる方法は、ボタンの色を変更することだよ。

そうなんだ！たとえば、購買意欲を促す色は「赤」だから、商品購入に繋げたい場合は赤のCTAボタンにすると効果的だよ。

ボタンの形も、クリック率に大きく関わってくるんだ。

四角は真面目で信頼感のある印象を与え、丸角は柔らかさや温かさなどの印象を与えるよ。

たとえば、丸角のCTAボタンは子供向けのサイトにぴったりなんだ！

CTAボタンに視覚的な変化を取り入れることで、ユーザーがクリックしやすいボタンを作ることができるよ！

たとえば、マウスオーバーという、CTAボタンにカーソルを合わせると色やデザインが変化するエフェクトがあるよ。

それから、アニメーションを加えると、CTAボタンの存在をアピールできるんだ！

どれだけクリックしたくなるデザインでも、その先に「何があるのか」が伝わらなければ意味がないんだ。

その通り！そこで重要となるのが、マイクロコピーだよ！

マイクロコピーとは、CTAボタンの上部に表示されている、短いコメントのことなんだ。

そうそう！ボタンをクリックするハードルを下げることで、クリック率が格段に上がるんだ〜！

もう少しイメージをわかせるために、成功事例を紹介するね。

今回紹介する成功事例は、以下の3つだよ。

1つ目はCTAの位置が素晴らしい、「Airbnb」だよ。

そうなのー！だからこそ、コーポレートカラーである「ピンク」を使ったCTAボタンがとっても際立つんだ。

2つ目は、強力なコピーでユーザーを惹きつける「PROGRIT」だよ

これはコピーも素晴らしい上に、具体的な数字を入れることで信頼度を高めているんだ。

3つ目は、最大規模のECサイトである「Amazon」だよ！

ついクリックしちゃうよね。

色分けしていることで、見分けやすくなっていることもポイントだよ。

CTAのデザインについてまとめると、こんな感じだよ。

うん！またいつでも聞いてね！