理想的なCTAボタンとは?配置/テキスト/デザインを改善してCVを増やそう

DESIGNER

Webサイトを作るときに重要な、「CTA(Call To Action)ボタン」。ユーザーの行動を促し、商品やサービスへのコンバージョンに繋げるための重要な要素です。

今回は、ユーザーをコンバージョンに導くCTAボタンの配置やテキスト、デザインをまとめました。Webサイトのコンバージョン率の改善をしたい方は、ぜひ参考にしてください。

CTAボタンとは

hotel koe

▲出典:hotel koe

CTAボタンとは、Webサイト上でユーザーのクリックを促し、アクションを完遂(コンバージョン)してもらうためのボタンです。

例えばホテルの予約サイトなら、ユーザーにホテルの予約をしてもらうための「予約する」ボタンがCTAボタンにあたります。

上の例ではCTAボタンをページの中央に配置し、目立つようにしていますね。

wework

▲出典:wework

CTAボタンの目的はさまざまですが、主に

  • 購入
  • 予約
  • 会員登録

などの目的で設置されることが多いです。

ユーザーにとってほしいアクションを考えて、CTAボタンの設置を検討しましょう。

CTAボタン作成の3つのポイント

ここからはCTAボタンを作成するときのポイントを、「配置」「テキスト」「デザイン」の3つに分けてご紹介します。

1. 配置

まずはCTAボタンの配置から見ていきましょう。一般的にCTAボタンがよく配置される場所として、以下の3つが挙げられます。

  • 【コンテンツの末尾】
    一般的な配置スタイル。商品やサービスについて紹介した後にユーザー行動を促す
  • 【コンテンツの中】
    コンテンツの随所に差し込むスタイル。LPのような縦に長いページなどでよく使われる
  • 【固定ヘッダー(フッター)】
    画面上部(下部)に常に配置しておくスタイル。LPやオウンドメディアなどでよく使われる

CTAボタンをユーザーが認識し、クリックに導くためには、ユーザーの視線や行動に沿った配置が重要です。
順に詳しくみていきましょう。

コンテンツの末尾に設置する

Slack

▲出典:slack

slackのWebサイトは、2か所に「無料で試してみる」ボタンを設置しています。ひとつは最初に目に入るコンテンツの末尾、もうひとつはランディングページの末尾です。

コンテンツに惹かれたユーザーをコンバージョンに繋げやすい、定番の配置です。

コンテンツの中に設置する

intacart

▲出典:instacart

食料品配達サービスのinstacartでは、コンテンツ中の随所にCTAボタンを設置しています。LPなどの縦に長いページの時に、タッチポイントを増やすためにこのような手法がよく用いられます。

ユーザーが「次のアクションを起こしたい!」と感じた瞬間を逃さないようにしているのです。

ただしCTAボタンを入れすぎるとクドくなるため、注意が必要です。

固定フッターとして設置する

Workship

▲出典:Workship

Workshipは、画面の右下にCTAボタンを固定しています。CTAボタンは複数ありますが、緑色で統一されているためまとまった印象ですね。

LPのように縦に長いページや、オウンドメディアのように広いコンテンツを扱っているサイトの場合は、ユーザーがCTAボタンに到達する前に離脱してしまう可能性があります。そのためCTAボタンを固定の位置に表示しておき、ユーザーの目に常に触れるようにしておくのが有効です。

issuehunt

▲出典:issuehunt

もちろんフッターではなく、ヘッダーに配置するのも有効です。issuehuntのLPを見てみましょう。

ページをスクロールするとヘッダーの色が変わり、CTAボタンに自然と視線が行くようになっています。

2. テキスト

CTAボタンの文言を考えるときには、以下の2つを意識しましょう

  • ボタンを押したら何が起きるのかを具体的に説明する
  • ボタンを押すメリットを具体的に説明する

ボタンを押したら何が起きるのかを具体的に説明する

「こちらをクリック」よりも、「日時を指定して予約する」「すぐに購入する」のように、ボタンを押したら何が起こるのかを具体的に説明しましょう。

ボタンを押すメリットを具体的に説明する

なぜいま、ボタンを押すべきなのかというメリットを書きましょう。「購入する」よりも「本日中なら10%off!」といった具体的なメリットを記述するのが大切です。

もし会員登録してもらうサービスで無料期間があるなら、「会員登録する」よりも「30日間無料で体験する」の方がユーザーの登録へのハードルが下がり、コンバージョンの改善に繋がるでしょう。

3. デザイン

CTAボタンのデザインでは、以下の4点を意識してみましょう。

  • サイズ
  • カラー
  • アイコン

CTAボタンの形は大きく分けて「四角」「角丸」「円形」の3種類があります。以下でそれぞれの特徴や、実際にCTAボタンが使われているWebサイトをご紹介します。

Lime

▲出典:Lime

四角いCTAボタン】

日本に初上陸したことで話題の電動キックボード、Lime。

LimeのLPでは、四角いCTAボタンを採用しています。四角いことでビビッドなグリーンがよりシャープに目立ち、ボタンが認識しやすくなります。

スタイリッシュさを出したい時に、四角いCTAボタンは有効です。

forghetti

▲出典:forghetti

角丸のCTAボタン】

パスワード記録アプリのforgettiは、角丸のCTAボタンを採用しています。

角丸は日常的に触れている自然な形なため、ユーザーに親しみやすさを与えます。

またCTAボタンの角を丸くすることで、ページのグリッドから逸脱するため、ユーザーの視線を集めたり、CTAボタン内のテキストに目を向けさせたりできます。

sansama

▲出典:sansama

【円形のCTAボタン】

タスク管理サービスが有名なsunsamaのLPは、登録ボタンとチャットボットボタンの、2種類のCTAボタンが設置されています。

チャットボットのCTAボタンを円形にし、アクセントカラーのオレンジを用いていることでCTAボタンを目立たせ、コンバージョンに繋げています。

円形のCTAボタンは目立ちますが、子どもっぽさが出てしまう可能性もあるため、サービスの特徴に合わせて形を選びましょう。

サイズ

CTAボタン サイズ

スマートフォン上でも快適にCTAボタンを押してもらうためには、ボタンサイズも重要です。人の指に合わせた大きさにしましょう。

指の腹の大きさの平均は10〜14mm、指先は8〜10mm

(参考:3-D Finite-Element Models of Human and Monkey Fingertips to Investigate the Mechanics of Tactile Sense – MIT Touch Lab

平均的な指のサイズから考えて、CTAボタンのサイズは10mmが理想とされています。

カラー

CTAボタン事例

同じ形やテキストを使用しても、CTAボタンの色を変えるだけでこれだけ印象が変わります。

与えたい印象に合わせたカラーや、コーポレートカラーを用いて、CTAボタンを作成しましょう。

アイコン

CTAボタン アイコン

CTAボタンにアイコンを追加することも有効です。

人と+マークのアイコンを追加するだけで、ユーザーが「フォロー」のイメージを直感的にとらえやすくなります。

またアイコンの追加は、ボタンであることが分かりやすくなるというメリットもあります。

思わず押したくなる!CTAボタン事例4選

最後に、思わず押したくなるようなCTAボタンを4つご紹介します。

それぞれのWebサイトでどのような工夫がされているのか、チェックしていきましょう。

1. Amazon

Amazon

▲出典:Amazon

AmazonのCTAボタンは、アイコンとテキストが両立しているのが印象的です。アイコンによって、ユーザーがこれからとるアクションがぐっと分かりやすくなります。

「カートに入れる」「今すぐ買う」の2種類のCTAボタンを設置していますが、色分けとアイコンの活用で見分けやすくしているのもポイントです。

2. Airbnb

Airbnb

▲出典:Airbnb

Airbnbのランディングページに設置されているCTAボタンは、Airbnbのコーポレートカラーを使い、ページの中で最も目を引く場所に配置されています。

CTAボタンを角丸にすることでユーザーに親しみやすい印象を与えており、「探す」という文字にも視線が集まります。

個々のリスティングの予約ページでは、CTAボタンをリスティングの名前や金額とともにページ下に固定。

カラーはAirbnbのラグジュアリーラインであることが分かるように、Airbnb luxeのカラーである深い紫を使っています。

3. Netflix

Netflix

▲出典:Netflix

NetflixのCTAボタンは、ビビットな赤を採用しています。背景を黒一色にしてCTAボタンの色が際立つ工夫がされています。

また「30日間の無料体験を始める」とボタンに書くことで、無料で始められることを強調し、会員登録へのハードルを下げているのも特徴です。

4. Spotify

Spotify

▲出典:Spotify

SpotifyのWebサイトは、角の取れた丸いCTAボタンを使用しています。楽しそうでポップな印象をユーザーに与えていますね。

「プレイリストの作り方」「今すぐ登録する」という2つのCTAボタンがありますが、特に重要な会員登録のためのCTAボタンには色をつけて強調しています。

まとめ

今回はCTAボタンの作成ポイントを複数紹介しましたが、最も大切なのは目的に合ったCTAボタンを作成することです。

さまざまなWebサイトのCTAボタンを参考にしながら、ユーザーをコンバージョンに導くボタンデザインをぜひ考えてください。

 

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ