CTAボタンの文字デザインとは?読みやすく押したくなる文字の見せ方

ボタンの色や形は目立っているのに、なぜか押されない、スマホで見るとボタンの文字が読みにくい、と感じたことはないでしょうか。

CTAボタンの成果は、色や配置だけでなく、ボタンの中の文字の見せ方にも大きく左右されます。

この記事では、CTAボタンの文字デザインとは何か、そして文字のサイズ・太さ・書体・改行・コントラストで、読みやすく押したくなるボタンにする方法を初心者向けに解説します。

CTAボタンの文字デザインの基本

まずは、CTAボタンの文字デザインが何を指すのか、そしてなぜボタンの文字にこだわる必要があるのかを押さえましょう。

CTAボタンの文字デザインとは

CTAボタンの文字デザインとは、ボタンの中の文字を「確実に読める」「押せると分かる」ように整える、文字表現の観点からのボタン設計のことです。

CTAとは「Call To Action(行動喚起)」の略で、「今すぐ購入」「無料で試してみる」のように、見ている人に次の行動を促すボタンやリンクを指します。

CTAボタンを作るときは、文言・配置・色・大きさなど考えることがたくさんありますが、この記事ではその中でもボタンの中の文字そのものの見せ方に絞って解説します。

CTAの意味やボタンの文言・配置の考え方はCTAボタンとは?、ボタンの色選びはCTAを目立たせるカラーとは?で解説しています。
ボタンと組み合わせるキャッチコピーの見せ方はキャッチコピーのデザインとはで解説しています。

なぜボタンの文字の見せ方が大切なのか

ボタンの文字が大切なのは、色や形でボタンに気づいてもらえても、中の文字が読めなければ「何のボタンか」が伝わらないからです。

何が起きるか分からないボタンは、ユーザーに不安を与え、押すのをためらわせます。

同じ色・同じ文言のボタンでも、文字の見せ方だけでどれだけ印象が変わるかを比べてみましょう。

無料で試してみる

NG:細く小さい文字で字間も広く、パッと読めない

無料で試してみる

OK:太めのゴシック体で、離れていても読める

左の見本は、細い明朝体を小さく、字間を大きく開けて組んでいるため、おしゃれではあっても一瞬では読み取れません。

右の見本は、太めのゴシック体を十分な大きさで組んでいるので、ボタンを見た瞬間に「無料で試せる」と分かります。

CTAボタンの文字を読みやすく見せる方法

ボタンの文字は、サイズ・太さ・書体・字間と改行・コントラスト・補足文との強弱の6つを意識すると、読みやすく整います。

順番に見ていきましょう。

サイズ:本文と同じかそれ以上にする

ボタンの文字は、周りの本文と同じか、それより少し大きいサイズにするのが基本です。

ボタンはページの中でも特に「読んで、押してほしい」要素なので、本文より小さい文字にしてしまうと、重要度と見た目がちぐはぐになるためです。

デザインの見た目をすっきりさせようとして、ボタンの文字だけ本文より小さくしてしまうのはよくある失敗です。

特にスマホでは画面が小さいため、パソコンで「ちょうどいい」と感じた大きさが、スマホでは小さすぎることがあります(PCとスマホでの文字サイズの決め方はPC・スマホの文字サイズとはで解説しています)。

ボタン自体の押しやすい大きさ(タップする範囲の大きさ)についてはCTAボタンとは?で解説しています。

太さ:太めのウェイトで読みやすく

ボタンの文字は、本文より太めのウェイト(文字の太さ)にしましょう。

CTAボタンは色のついた背景の上に文字を乗せることが多く、細い文字は背景の色に負けて線がかすんで見えやすいからです。

太字(ボールド)か、それより一段細いセミボールド程度を選ぶと、文字がしっかり読めて、ボタンらしい力強さも出ます。

ウェイトの種類や使い分けはフォントの「太さ(ウェイト)」を変えるだけで、デザインは劇的に変わるで解説しています。

書体:クセの少ないゴシック体を選ぶ

ボタンの文字には、クセの少ないゴシック体(線の太さがほぼ均一な書体)が向いています。

ゴシック体は小さなサイズや色付きの背景の上でも形が崩れにくく、短い言葉を一瞬で読ませるのが得意だからです。

明朝体(縦線が太く横線が細い、筆で書いたような書体)や手書き風の書体は、雰囲気づくりには役立ちますが、ボタンでは細い線がかすれたり、文字の形が読み取りにくくなったりしがちです。

上品なサイトで明朝体を使いたい場合も、ボタンだけはゴシック体にするか、明朝体なら太めのウェイトを選んでサイズを大きくするなど、読みやすさを優先しましょう(書体の種類はフォントと書体の種類の知識で解説しています)。

字間と改行:ボタンの文字は1行に収める

ボタンの文字は、できるだけ1行に収まるようにしましょう。

文字が2行に折り返されると、ボタンの形がいびつになるうえ、言葉の途中で改行されて読みにくくなるからです。

導入事例集をダウ
ンロードする

NG:長い文言が言葉の途中で折り返され、読みにくい

事例集をダウンロード

OK:短い文言で1行に収まり、ひと目で読める

左の見本は文言が長く、ボタンの幅に収まらずに「ダウ/ンロード」と言葉の途中で折り返されています。

右の見本は意味を変えずに文言を短くしたことで、1行にすっきり収まっています。

スマホではボタンの幅が狭くなりやすいので、パソコンで1行に収まっていても、スマホの画面で折り返されていないかを必ず確認しましょう。

折り返してしまうときは、本文より小さくならない範囲で文字を少し小さくする、上の見本のように意味を変えずに文言を短くする、ボタンの幅をスマホの画面いっぱいまで広げる、といった方法で1行に収めましょう。

字間(文字と文字の間隔)は、本文と同じか、ほんの少し広げる程度にとどめます。

短い言葉のボタンでは、わずかに字間を広げるとゆったり読みやすくなりますが、広げすぎると文字がばらばらに見え、一つの言葉として読み取りにくくなります(字間の調整はカーニングとトラッキングの教科書で解説しています)。

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

デザインツールでボタンを作るだけなら、読み飛ばしてもかまいません。

CSS(Webページの見た目を指定する言語)でボタンの文字を整える場合は、たとえば次のように指定します。

.cta-button {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1rem;         /* 本文と同じかそれ以上 */
  font-weight: bold;       /* 太めで読みやすく */
  letter-spacing: 0.05em;  /* 字間はほんの少しだけ広げる */
  line-height: 1.4;
}

font-sizeで文字の大きさ、font-weightで太さ、letter-spacingで字間を指定しています。

remはページ全体の基準の文字サイズを1とした単位で、ブラウザの初期設定(16px)のままなら1rem=16pxです。
emはその文字自身のサイズを1とした単位で、0.05emは文字サイズの5%ぶん字間を広げるという意味です(単位の詳しい説明は文字サイズとはで解説しています)。

コントラスト:文字と背景の明るさの差を確保する

ボタンの文字色と背景色には、十分な明るさの差(コントラスト)をつけましょう。

どれだけ太く大きな文字でも、背景との明るさの差が小さいと、文字が背景に溶け込んで読みにくくなるからです。

Webアクセシビリティ(誰にとっても使いやすいWebにするための考え方)の国際的なガイドラインWCAGでは、通常の文字は背景とのコントラスト比を4.5:1以上、大きな文字(18ポイント以上、または14ポイント以上の太字)は3:1以上にすることを求めています(WCAG 2.1 達成基準1.4.3 コントラスト(最低限)・WAIC日本語訳)。

コントラスト比とは、2つの色の明るさの差を「◯:1」という数値で表したもので、数字が大きいほど差が大きく読みやすいことを示します。

今すぐ申し込む

NG:明るいオレンジ×白(コントラスト比約2.3:1)

今すぐ申し込む

OK:濃いオレンジ×白(コントラスト比約5.2:1)

左の見本は明るいオレンジの上に白い文字を乗せており、色としては目立っていても、文字は背景に溶け込みがちです。

右の見本はオレンジを濃くしたことで、同じ白い文字でもくっきり読めるようになっています。

明るい色のボタンを使いたい場合は、文字色を白ではなく濃い色にするのも一つの方法です。

コントラスト比は、目で見て判断するよりも、ツールで測るほうが確実です。

無料のWebツール「WebAIM Contrast Checker(英語)」に文字色と背景色のカラーコードを入れたり、Figmaなら「Stark」などのプラグインを使ったりすると、コントラスト比と基準を満たしているかがすぐに分かります(使い方はコントラスト比とは?で解説しています)。

補足文との強弱:ボタンの文字を一番強くする

ボタンの近くに「クレジットカード登録不要」「1分で完了」のような補足文を添えるときは、ボタンの文字が一番強く見えるように強弱をつけます。

こうしたボタン周りの短い補足文は「マイクロコピー」と呼ばれ、押す前の不安を取り除く役割があります。

ただし、補足文がボタンの文字と同じくらい大きく太いと、どちらを読めばよいか迷わせてしまいます。

クレジットカード登録不要・1分で完了

無料で試してみる

NG:補足文がボタンと同じ強さで、視線が分散する

無料で試してみる

クレジットカード登録不要・1分で完了

OK:ボタンが主役、補足文は小さく控えめな色で添える

左の見本は、補足文もボタンと同じ色・太さなので、視線が2か所に分かれてしまいます。

右の見本は、補足文を小さくグレーにしてボタンの下に添えたことで、ボタンが主役のまま不安も解消できています。

補足文は控えめにしつつも、読めないほど薄く小さくしないことが大切です。

また、右の見本のように文字の後ろに「›」などの矢印を添えると、「押すと次へ進む」ことが伝わりやすくなりますが、矢印やアイコンだけに頼らず、必ず文字で行動を書きましょう。

実践のポイント

CTAボタンの文字デザインで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

見た目のおしゃれさを優先して、細いウェイトや小さな文字をボタンに使い、読みにくくなってしまうことがあります。
ボタンの文字は、デザインの雰囲気よりも読みやすさを優先しましょう。
パソコンの画面だけで確認し、スマホで見たときに文字が小さすぎたり、2行に折り返されたりしていることに気づかないことがあります。
必ず実際のスマホを手に持ち、普段見るときと同じくらいの距離(目から30〜40cmほど)で、ボタンの文字がパッと読めるかを確認しましょう。
ボタンを文字ごと1枚の画像にして作ってしまうことがあります。
画像の中の文字は画面の読み上げ機能で読まれなかったり、拡大すると粗くなったりします。
WCAGでも、ロゴなど見た目が欠かせない場合を除き、文字は画像ではなくテキストで表示することを求めています(WCAG 2.1 達成基準1.4.5 文字画像・WAIC日本語訳)。
ボタンの文字は、できるだけHTMLのテキストで作りましょう。

よくある質問

Q. ボタンの文字は何pxにすればいい?
A. 決まった正解の数値はありません。
まずは「そのページの本文と同じか、それより少し大きく」を目安にし、実際のスマホで読みやすいかを確かめて調整しましょう。
サイト内のボタンは文字サイズをそろえておくと、統一感が出て「これは押せるボタンだ」と覚えてもらいやすくなります。
Q. 「BUY NOW」のように英語のボタンにしてもいい?
A. おしゃれな印象は出せますが、日本語のユーザーにとっては、日本語のほうが一瞬で意味を読み取れます。
英語だと頭の中で日本語に置き換える一手間がかかり、「SUBMIT(送信)」のような言葉では、押すと申し込みが確定するのか、確認画面に進むのかまでは読み取りにくくなります。
押した結果が分からないボタンは、押すのをためらわせる原因になります。
英語を使う場合も、すぐ近くに日本語を添えるなど、何が起きるボタンかが確実に伝わるようにしましょう。
Q. ボタンの文字はどこに揃えればいい?
A. ボタンの中の文字は、上下左右とも中央に揃えるのが一般的です(揃え方の使い分けは文字の揃え方とはで解説しています)。
文字がボタンの中で片寄っていると、ボタンが傾いて見えたり、雑な印象を与えたりします。
文字の周りの余白(パディング。ボタンの枠の内側の余白のこと)を上下・左右それぞれ均等に取ると、自然に中央に収まります。
デザインツールでは、ボタンの四角形と文字を両方選んで「水平方向の中央揃え」と「垂直方向の中央揃え」を使うと、真ん中に配置できます。
CSSでは、padding: 0.6em 1.5em;のように上下・左右の余白をそれぞれ同じ値で指定し、text-align: center;で文字を中央に揃えます。