CTAボタンの理想的なデザインとは？サイズ/色/テキスト/配置のポイントまとめ

「CTA（Call To Action）ボタン」は、ユーザーの行動を促し、商品やサービスへのコンバージョンに繋げるための重要な要素です。

今回は、ユーザーをコンバージョンに導くCTAボタンの作り方、配置・テキスト・デザインのポイントをまとめました。

CTAボタンとは

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

たとえば、ホテルの予約サイトなら「予約する」ボタン、動画サービスなら「視聴する」「会員登録する」などがCTAボタンにあたります。

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

• 購入
• 予約
• 会員登録

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

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

CTAボタン作成のポイント（配置・テキスト・デザイン）

ここからはCTAボタンを作成するときのポイントを、

• 配置
• テキスト・マイクロコピー
• デザイン

の3つに分けてご紹介します。

ポイント1. CTAボタンの配置箇所

まずはCTAボタンの配置を考えていきます。

CTAボタンは、ユーザーに探させてはいけません。ユーザーの視線や行動に沿った位置に配置する必要があります。

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

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

順に詳しくみていきましょう。

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

▲出典：Slack

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

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

コンテンツ内に設置する

▲出典：instacart

食料品配達サービスの『instacart』ではサイトの随所にCTAボタンを設置しています。LPなどの縦に長いページの時にこのような手法がよく用いられます。

魅力的な情報を見たユーザーが「登録・購入したい！」と感じる、その瞬間を逃さないようにしているのです。

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

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

▲出典：Workship

フリーランス・副業向けマッチングサービス『Workship』は、画面の右下にCTAボタンを固定表示しています。サイト内にはCTAボタンが複数ありますが、緑色で統一されているため、まとまった印象です。

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

▲出典：issuehunt

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

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

ここまでCTAの配置について考えてきました。重要なのは、サイトやアプリ全体でCTAを配置する箇所に一貫性を保つこと。あるフォームでは、右側にCTAがあり、別のフォームでは左側にあると、ユーザーがストレスを感じ離脱する要因になります。

ポイント2. CTAボタンのテキスト・マイクロコピーは具体的に

CTAボタンのテキストやコピーを考えるときには、以下の2つを意識しましょう

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

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

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

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

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

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

テキストやコピーを考えるときには、ナッジ理論が参考になります。

ポイント3. CTAボタンのデザインでは4つのポイントを意識する

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

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

サイズ

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

MIT Touch Labの調査によると理想的なCTAボタンのサイズは、平均的な指の大きさから考えて10mm×10mmが理想とされています。

カラー

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

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

しかし、赤や緑など、特定の色には、固定化された意味があるので注意が必要です。

赤はエラーなどアクションの失敗を、緑は登録完了など成功を示します。

アイコン

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

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

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

形

CTAボタンの形は大きく分けて

• 四角
• 角丸
• 円形

の3種類があります。以下でそれぞれの特徴や、実際にCTAボタンが使われているWebサイトをご紹介します。

■四角いCTAボタン

▲出典：Lime

いま話題の電動キックボード『Lime』。

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

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

■角丸のCTAボタン

▲出典：forghetti

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

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

またCTAボタンの角を丸くすることで、ページのグリッドから逸脱するため、ユーザーの視線を集めたり、CTAボタン内のテキストに目を向けさせたりできます。また、角丸はユーザーの目にも優しく、CTA内のテキストが理解しやすくなるという調査もあります。

■円形のCTAボタン

▲出典：sansama

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

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

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

CTAボタンの参考事例

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

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

事例1. Amazon

▲出典：Amazon

AmazonのCTAボタンは、アイコンとテキストを並べているのが特徴です。アイコンによって、CTAボタンによるアクションがぐっと分かりやすくなります。

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

事例2. Airbnb

▲出典：Airbnb

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

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

事例3. Netflix

▲出典：Netflix

NetflixのCTAボタンは、ビビットな赤。背景を黒一色にすることでCTAボタンを際立たせる工夫がされています。

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

事例4. Spotify

▲出典：Spotify

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

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

おわりに

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

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

（執筆：mattun　編集：じきるう）