CTA周りの余白とは?ボタンが押しやすく目立つ余白の取り方を初心者向けに解説

CTA周りの余白の基本

まずは、CTA周りの余白とは何を指すのか、そして余白がどんな効果を生むのかを押さえましょう。

CTA周りの余白とは

CTA周りの余白とは、CTAボタンの周囲に、ほかの文章やリンク、画像から離して確保する空間のことです。

CTAとは「Call To Action(コール・トゥ・アクション)」の略で、日本語では「行動喚起」と訳されます。

Webサイトでは、「カートに入れる」「無料で試してみる」「予約する」のように、見ている人に次の行動を促すボタンをCTAボタンと呼びます。

CTAボタンは、購入や申し込みといったページのゴールへの入り口なので、ページの中でも特に「見つけやすく、押しやすい」ことが求められます。

ボタンの文言・配置・色・大きさなどCTAボタン全体の作り方はCTAボタンとは?で解説しているので、この記事では「ボタンの外側の余白」に絞って見ていきます。

余白がCTAにもたらす2つの効果

CTAボタンの周りに余白を取ると、「見つけやすくなる」と「押し間違いが減る」という2つの効果があります。

• 見つけやすくなる
  周りが空いていると、ボタンがほかの要素から切り離され、「ここを押せばいい」と直感的に伝わります。
  文章やリンクが密集した中では、目立つ色のボタンでも埋もれてしまいます(周りを空けて主役を目立たせる考え方は要素を目立たせる余白とは?で解説しています)。
• 押し間違いが減る
  スマートフォンでは指でタップするため、ボタンのすぐ隣に別のリンクがあると、押すつもりのないほうを押してしまうことがあります。
  ボタンと周りの間に空きがあれば、指が多少ずれても別の要素に触れにくくなります。

同じ内容を、ボタン周りの余白だけ変えて比べてみましょう。

NGの見本では、ボタンのすぐ横に「料金表」「利用規約」のリンクが並び、上下の文章ともくっついているため、ボタンが文章の一部のように見えます。

OKの見本では、ボタンの上下に空きを取り、文字リンクをボタンから離した位置にまとめたことで、ボタンがひと目で見つかり、指で押すときも迷いません。

CTA周りの余白の取り方

ここからは、CTA周りの余白を実際にどう取ればよいかを見ていきます。

「ほかの要素から離す」「関係のある言葉は近くに置く」「押せるもの同士の間隔を空ける」の3つがポイントです。

ボタンの上下を、文章同士の間隔より広く空ける

CTAボタンの上下は、周りの文章の段落同士の間隔よりも、はっきり広めに空けるのが基本です。

文章と同じ間隔で並べると、ボタンも「文章の流れの中の1行」のように見え、特別な場所だと伝わりにくいためです。

ボタンの手前に空きがあると、文章を読み進めてきた視線がそこでいったん止まり、自然にボタンへ移ります。

余白で視線の流れを作る考え方や、ボタンを置く場所の決め方は視線誘導とは?で解説しています。

補足の一言はボタンのすぐ近くに置く

「クレジットカード登録不要」「1分で完了」のような、ボタンを押す前の不安を取り除く短い補足文は、ボタンのすぐ近くに置きます。

こうしたボタン周りの短い言葉は「マイクロコピー」と呼ばれ、ボタンと一緒に読まれてはじめて意味を持つためです。

人は、近くにあるもの同士を「ひとまとまり」として見る傾向があるため、補足文がボタンから離れると、別の情報のように見えてしまいます(この見え方の性質は「近接の原則」と呼ばれ、近接の原則とは?で解説しています)。

NGの見本では、補足文が下の見出し「導入企業の声」に近いため、見出しの説明文のように読めてしまいます。

OKの見本では、補足文をボタンに寄せ、その下を広く空けたことで、「ボタン+補足文」が1つのかたまりとして伝わります。

つまり、CTA周りの余白は「何でもボタンから離す」のではなく、ボタンと関係のある言葉は近くに、関係のないものは遠くに置くのが正解です。

反対に、「利用規約」「プライバシーポリシー」のような今すぐ読まなくてもよいリンクや、次のセクションの見出しは、ボタンのかたまりからいちばん遠くに置きます。

近づけるものと離すものをはっきり分けておくと、見る人が「どれとどれがセットなのか」で迷わず、視線がまっすぐボタンへ向かいます。

押せるもの同士の間隔を空ける

CTAボタンの隣に別のボタンやリンクを置く場合は、押せるもの同士の間に、指がずれても押し間違えない程度の間隔を取りましょう。

ボタン同士がくっついていると、スマートフォンでは押したいほうと違うボタンを押してしまう原因になります(ボタンや入力欄など部品同士の間隔の決め方はUIコンポーネントの間隔とは?で解説しています)。

この間隔には、公式の目安があります。

Googleが公開しているAndroidのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)のヘルプでは、タップする対象を48×48dp以上にし、対象同士の間に8dp以上の余白を設けることを勧めています(タップ ターゲットのサイズ – Android のユーザー補助機能 ヘルプ)。

dpはAndroidの画面で使う大きさの単位で、画面の細かさに関係なくほぼ同じ見た目の大きさになるように調整されており、同じヘルプでは48dpが約9mmにあたると説明されています。

スマートフォンは片手で持って親指で押すことも多く、指は画面に点ではなく面で触れるため、狙った位置から少しずれて押されることがあります。

ボタンの外側の余白は、見た目を整えるだけでなく、こうした指のずれを受け止めるクッションの役割も持っていると考えましょう。

Webサイト向けの国際的なガイドラインWCAG 2.2でも、押す対象が24×24 CSSピクセルより小さい場合は、ほかの対象とのあいだに十分な間隔を取ることを求めています(WCAG 2.2 達成基準2.5.8 ターゲットのサイズ(最低限)・WAIC日本語訳)。

CSSピクセルはWebページの大きさを決める単位で、「画面上の見た目の大きさ」と考えて問題ありません。

これらは「最低でもこれくらいは」という基準なので、CTAボタンのように一番押してほしいボタンでは、さらにゆとりを持たせると安心です。

NGの見本は、2つのボタンの間が2pxしかなく、指で押すと隣のボタンに触れてしまいそうです。

OKの見本は、間を16px空けたことで、2つのボタンが別々の選択肢としてはっきり分かれて見えます。

メインのボタンと控えめなボタンの見た目の差のつけ方は、CTAを目立たせるカラーとは?やCTAボタンの文字デザインとはもあわせて参考にしてください。

コーディングで余白を指定する

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、「ボタンのかたまりの外側」と「ボタン同士の間」を別々に設定する、という考え方だけ押さえておけば十分です。

CSS(Webページの見た目を指定する言語)では、たとえば次のように、ボタンのかたまり全体の外側の余白と、ボタン同士の間隔を分けて指定します。

.cta-area {
  margin-block: 3em;   /* ボタンのかたまりの上下を、段落同士の間隔より広く空ける */
}
.cta-buttons {
  display: flex;
  gap: 16px;           /* ボタン同士の間隔 */
}
.cta-note {
  margin-top: 0.5em;   /* 補足文はボタンのすぐ近くに */
}

margin-blockは要素の上下(横書きの場合)の外側の余白、gapは並べた要素同士の間隔を指定するプロパティです(MDN: margin-block、MDN: gap)。

数値はあくまで一例なので、実際の画面で周りの文章との差が分かるかを見ながら調整しましょう。

実践のポイント

CTA周りの余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見出し・本文・ボタン・規約のリンクを、スペースがもったいないからとすべて同じ間隔で並べてしまうことがあります。
  どれとどれがセットなのか分からなくなり、ボタンも目立たなくなるので、ボタンと補足文は近くに、そのほかとの間は広く、と差をつけましょう。
• 「利用規約」「よくある質問」などのリンクを、ボタンのすぐ横に並べてしまうことがあります。
  押し間違いの原因になるうえ、ボタンの存在感も弱まるので、文字リンクはボタンから離してまとめましょう。
• 小さなバナーで、情報を詰め込むためにボタン周りの余白から削ってしまうことがあります。
  削るなら、まずボタンから遠い補足情報を減らし、ボタンの周りの空きは最後まで残しましょう(バナーの端に取る余白はバナーの外側の余白とは?で解説しています)。
• パソコンの画面だけで確認し、スマホでの押しやすさを確かめていないことがあります。
  実際のスマホで、親指で押したときに隣のリンクに触れないかを確認しましょう。

よくある質問

• Q. CTAボタンの周りは、何px空ければいい?
  A. 見た目の目立たせ方としての「正解の数値」はありません。
  周りの文章の段落同士の間隔より、ひと目で分かるくらい広く空けることを目安にしましょう。
  押し間違いを防ぐための間隔については、上で紹介したAndroidの目安(押せるもの同士の間に8dp以上)やWCAGの基準が参考になります。
• Q. ボタンの内側の余白(文字と枠の間)も関係ある?
  A. 関係あります。
  内側の余白はボタン自体の押しやすさや大きさ、外側の余白は周りとの区別や押し間違いの防止に効きます。
  この記事では外側を扱いましたが、両方そろってはじめて押しやすいボタンになります。
  内側の余白の決め方はボタンの内側の余白とは?、CSSで内側(padding)と外側(margin)をどう書き分けるかはCSSのmarginとpaddingの違いとは?で解説しています。
• Q. スマホで画面の下に固定表示するボタンにも余白は必要?
  A. 必要です。
  固定ボタンの上に本文がぴったり接していると、文章とボタンの境目が分かりにくくなります。
  また、固定ボタンがページの一番下の文章やリンクを隠してしまわないよう、ページの最後にボタンの高さ分の余白を足しておきましょう。

まとめ

CTA周りの余白とは、CTAボタンの周囲にほかの要素から離して確保する空間のことで、ボタンを見つけやすくし、押し間違いを防ぐ役割があります。

ボタンの上下を文章同士の間隔より広く空け、補足文はボタンの近くに、文字リンクや別のボタンとは十分な間隔を取ることがポイントです。

まずは自分のサイトを実際のスマホで開き、CTAボタンのすぐ隣に別のリンクやボタンがくっついていないかを確かめてみてください。