CTAとは？効果的なデザインと成功事例3選を紹介！

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

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

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

じゃあその2つを解説するね。

それぞれ詳しく見ていこう！

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

こんな感じだよ。

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

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

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

じゃあ早速、CTAを効果的にするためのポイントを説明していくよ。

効果的なCTAにするためのポイントはこれだよ。

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

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

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

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

テキストもとっても重要だよ！

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

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

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

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

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

じゃあデザインを工夫するポイントを紹介するね。

この工夫をするかどうかで、クリックのしやすさが大きく変わってくるんだ。

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

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

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

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

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

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

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

さらにアニメーションを加えることで、ボタンを見逃しやすいスマホやタブレットでも、ボタンの存在をアピールできるんだ！

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

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

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

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

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

紹介する成功事例はこれだよ。

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

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

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

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

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

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

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

CTAのデザインをまとめるとこんな感じだよ。

またいつでも聞いてね！