キャッチコピーのデザインとは?文字を強く見せるサイズ・改行・強弱のコツ

キャッチコピーのデザインの基本

まずは、キャッチコピーの「見せ方」とは何を指すのか、そしてなぜ意識して工夫する必要があるのかを押さえましょう。

キャッチコピーの見せ方とは

キャッチコピーの見せ方とは、バナーや広告の中で一番伝えたいメッセージを、文字の大きさ・太さ・配置によって、限られたスペースの中で最も効果的に見せる工夫のことです。

キャッチコピーとは、広告やWebサイトで見る人の目を最初に引きつけるための短い言葉のことです。

「夏の旅行、今年は海へ。」「はじめてでも、3日で作れる。」のように、一言で興味を持たせる役割を持っています。

この記事で扱うのは、言葉をどう書くかではなく、書いた言葉を文字としてどう見せるかというデザイン側の工夫です。
文字の大きさ・太さ・配置などで情報を伝わりやすくする工夫全体は「タイポグラフィ」と呼ばれ、基本はタイポグラフィとはで解説しています。

なぜ見せ方の工夫が必要なのか

キャッチコピーの見せ方を工夫する必要があるのは、バナーや広告はほんの一瞬しか見てもらえないことが多いからです。

SNSのタイムラインを流し見しているときや、街中の看板の前を通り過ぎるとき、人は書かれている文字をすべて読んではくれません。

その一瞬で「キャッチコピー→詳しい説明→ボタン」という順番で目に入るようにしておかないと、一番伝えたい言葉がほかの文字に埋もれてしまいます。

同じ言葉でも、見せ方によって伝わり方がどれだけ変わるかを比べてみましょう。

左の見本では、4行がすべて同じ大きさなので、どれが一番伝えたい言葉なのか分かりません。

右の見本では、キャッチコピーだけを大きく太くしたことで、パッと見ただけでメッセージが伝わり、そのあと説明とボタンへ自然に目が移ります。

ボタンの中の文字を読みやすく見せる方法はCTAボタンの文字デザインとはで解説しています。

キャッチコピーを文字で強く見せるデザインの方法

キャッチコピーを強く見せるには、サイズ・太さ・改行位置・言葉の中の強弱・字間と行間・配置と余白の6つを意識します。

ひとつずつ順番に見ていきましょう。

サイズ:ほかの文字との差をはっきりつける

キャッチコピーは、画面の中で一番大きな文字にするのが基本です。

人は大きいものから先に目に入るため、サイズの差がそのまま「読む順番」になるからです。

このとき大切なのが「ジャンプ率」です。

ジャンプ率とは、一番大きな文字と本文などの小さな文字との大きさの比率のことで、差が大きいほど「ジャンプ率が高い」といいます。

本文から一番大きな文字へ、文字の大きさがどれだけ大きく跳ね上がる(ジャンプする)か、というイメージで捉えると分かりやすいでしょう。

キャッチコピーと説明文のサイズがほとんど同じだと、ジャンプ率が低くなり、キャッチコピーが目立ちません。

「少し大きい」ではなく「明らかに大きい」と感じる差をつけることを意識しましょう(詳しくはジャンプ率で変わるメッセージの伝わり方で解説しています)。

太さ:ウェイトで言葉に重みを持たせる

サイズと合わせて、文字の太さ(ウェイト)でもキャッチコピーを強調します。

太い文字は面積が大きく見えるため、同じサイズでも存在感が増します。

キャッチコピーは太め、説明文は標準の太さ、というように役割ごとに太さを分けると、優先順位がよりはっきり伝わります。

ただし、上品さや落ち着きを出したい高級ブランドの広告などでは、あえて細めの文字を大きく使い、余白で目立たせる見せ方もあります。

ただし細い文字は、写真の上や色の多い背景に置くと紛れやすく、きれいに見せるには余白や背景の扱いに慣れが必要です。

慣れないうちは、しっかり太さのある文字で組むところから始めるのがおすすめです。

「太くすれば正解」ではなく、伝えたい雰囲気に合わせて選びましょう(ウェイトの使い分けはフォントの「太さ(ウェイト)」を変えるだけで、デザインは劇的に変わるで解説しています)。

改行位置:意味の切れ目で改行する

キャッチコピーが2行以上になるときは、言葉の意味の切れ目で改行することが大切です。

単語や文節の途中で改行されると、読む人の頭の中で言葉がいったん途切れ、メッセージがすっと入ってこなくなるためです。

左の見本は「今年は」と「海へ行こう」が意味のかたまりごとに分かれているので、ひと目で読めます。

右の見本は「海」と「へ」が別の行に分かれてしまい、読む人が一瞬つまずきます。

バナーのように画像として作るものは、デザインツール上で改行位置を自分で決められます。

一方、Webサイトの文字は画面の幅によって折り返し位置が変わるため、パソコンでは自然でも、スマホでは変な位置で改行されることがあります。

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

デザインツールでバナーを作るだけなら、「Webには折り返しを整える指定がある」とだけ知っておけば十分です。

CSS(Webページの見た目を指定する言語)には、こうした折り返しを整えるための指定があります。

.catchcopy {
  text-wrap: balance;      /* 各行の長さをなるべくそろえて折り返す */
  word-break: auto-phrase; /* 日本語を文節の切れ目で折り返す(対応ブラウザのみ) */
}

text-wrap: balanceは、見出しのような短い文章で、各行の文字数がなるべく均等になるように折り返す指定です(MDN: text-wrap)。

例えば2行に折り返したとき、1行目だけが長く、2行目に1〜2文字だけ残る、といった見た目を防げます。

word-break: auto-phraseは、文節の途中で改行しないように折り返す指定で、Chrome 119以降で、日本語(lang="ja"が指定された要素)に対して使えるようになりました(Chrome for Developers(英語)、MDN: word-break)。

上の見本の「海/へ」のように、言葉の途中で行が分かれるのを避けやすくなります。

ただしauto-phraseはまだ対応していないブラウザもあるため、効けばうれしい「おまけ」と考え、最後は必ず実際のスマホで改行位置を確認しましょう。

強弱:言葉の中にも大小をつける

キャッチコピーの中でも、特に伝えたい言葉を大きく、それ以外を少し小さくすると、メッセージの芯がよりはっきりします。

すべての文字が同じ大きさだと、「てにをは」のような助詞や「最大」のような前置きまで同じ重みで目に入り、肝心の言葉が埋もれやすいためです。

左の見本はすべて同じ大きさなので、「最大」も「50」も同じ重みで読まれます。

右の見本は「50」だけを大きくし、「最大」を小さくしたことで、一番伝えたい割引の大きさが一瞬で伝わります。

FigmaやIllustratorなどのデザインツールでは、1つのテキストの中で大きくしたい文字だけを選択して、サイズを変えられます。

「50」の位置を少し上下にずらしたいなど、細かく調整したいときは、「最大」「50」「%OFF」を別々のテキストに分けると扱いやすくなります。

ただし、小さくした部分も読めなくなっては意味がありません。

特に「最大」「〜から」のような条件を表す言葉は、小さくしすぎて読めないと誤解を招くため、読める大きさを保ちましょう。

字間と行間:大きな文字は少し詰める

キャッチコピーのように大きな文字は、本文と同じ字間・行間のままだと、間が空きすぎて間延びして見えます。

文字を大きくすると、文字と文字の間のすき間もそのぶん大きくなり、言葉がひとかたまりに見えにくくなるためです。

字間(文字と文字の間隔)は少し詰め、行間(行と行の間隔)も本文より狭めにすると、キャッチコピーが一つのかたまりとして引き締まって見えます。

左の見本は字間と行間が広く、2行が別々の言葉のように見えます。

右の見本は字間と行間を狭めたことで、2行で1つのメッセージとしてまとまって見えます。

行間の目安は、本文が文字サイズの1.5〜1.8倍なら、キャッチコピーは1.3〜1.4倍くらいです(右の見本は1.35倍)。

字間は、まず少しだけ(CSSならletter-spacing: -0.02em、Illustratorのトラッキングなら-20程度)詰め、力強く見せたいときは文字どうしが重ならない範囲で-0.05〜-0.08em(-50〜-80)くらいまで試してみましょう。

字間の調整には、文字列全体の字間をまとめて詰めたり広げたりする「トラッキング」と、特定の2文字の間だけを個別に整える「カーニング」の2つの方法があります。

字間の調整はカーニングとトラッキングの教科書、行間の考え方は読みやすさを劇的に変える「行間と行長」の黄金ルールで詳しく解説しています。

配置と余白:最初に目が向く場所に置き、周りを空ける

キャッチコピーは、画面の上部や中央など、最初に視線が向かいやすい位置に置きましょう。

人の視線は、横長の画面ではおおむね左上から右下へ流れやすいため、その起点に近い場所に置くと自然に最初に読まれます(視線の流れは視線誘導とは?で解説しています)。

1〜2行の短いキャッチコピーなら、中央揃えで左右対称に置くと整った印象になりますが、3行以上になる場合は左揃えのほうが読みやすくなります(揃え方の使い分けは文字の揃え方とはで解説しています)。

あわせて、キャッチコピーの周りには十分な余白を取ります。

周りに何もない空間があると、キャッチコピーがほかの要素から切り離され、大きくしなくても目立つようになります。

逆に、商品写真やロゴ、説明文がキャッチコピーのすぐそばまで詰まっていると、どれだけ大きくしても周りに埋もれてしまいます(余白の考え方は余白学習ロードマップにまとめています)。

実践のポイント

キャッチコピーのデザインで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 目立たせたい一心で、筆文字や手書き風などの癖が強い装飾書体を使い、雰囲気は出たものの読みにくくなってしまうことがあります。
  キャッチコピーは一瞬で読めることが最優先なので、装飾書体を使う場合も、パッと見て読めるかを必ず確認しましょう。
• キャッチコピーと同じくらい、商品名やロゴ、割引率なども目立たせようとして、結局どれも目立たなくなることがあります。
  一番大きく見せる要素は1つに決め、それ以外は一段階控えめにしましょう。
• 写真の上にキャッチコピーを重ねたとき、文字と背景の明るさが近くて読みにくくなることがあります。
  文字の後ろに暗い帯を敷く、写真の明るい部分を避けて置くなどして、文字と背景の差を確保しましょう(数値での確かめ方はコントラスト比とは?で解説しています)。
• Webサイトのキャッチコピーを、文字ごと画像にして貼り付けてしまうことがあります。
  画像の中の文字は、画面の読み上げ機能で読まれなかったり、拡大すると粗くなったりします。
  年齢や障害の有無にかかわらず、誰でもWebの情報を利用しやすくすること(Webアクセシビリティ)を目的とした国際的なガイドラインWCAGでも、ロゴなど見た目が欠かせない場合を除き、文字は画像ではなくテキストで表示することを求めています(WCAG 2.1 達成基準1.4.5 文字画像・WAIC日本語訳)。
  バナー画像のように画像にする場合は、代替テキスト(alt属性)にキャッチコピーの内容を書いておきましょう。

よくある質問

• Q. キャッチコピーは明朝体とゴシック体のどちらがいい?
  A. 伝えたい雰囲気で選びます。
  力強さや親しみやすさ、パッと読める分かりやすさを出したいならゴシック体、上品さや落ち着き、情緒を出したいなら明朝体が向いています。
  迷ったら、説明文と同じ系統の書体で、太さとサイズだけ変えると統一感を保ちやすくなります(書体の種類はフォントと書体の種類の知識、書体ごとの印象の違いは書体による印象の違いとはで解説しています)。
• Q. キャッチコピーが長くて、大きくすると入りきらない。
  A. まずは言葉を短くできないか見直しましょう。
  どうしても長くなる場合は、一番伝えたい部分だけを大きくして、残りを一段小さいサブコピーとして分けると、大きさの差を保ったまま収められます。
• Q. スマホで見たら改行がおかしな位置になった。
  A. Webサイトの文字は画面の幅で折り返し位置が変わるため、パソコンとスマホの両方で確認が必要です。
  スマホでは文字を少し小さくする、言葉を短くする、上で紹介したtext-wrap: balanceなどのCSSを使う、といった方法で調整しましょう。
  <br>タグ(HTMLで強制的に改行する指定)で改行を固定するのも注意が必要です。
  パソコンでちょうどよい位置に入れた改行が、画面の狭いスマホでは自動の折り返しと重なり、1〜2文字だけが次の行にぽつんと落ちるなど、かえって不自然になることがあるためです。

まとめ

キャッチコピーのデザインとは、一番伝えたい言葉を、文字の大きさ・太さ・配置によって一瞬で伝わるように見せる工夫のことです。

ほかの文字とのサイズ差をはっきりつけ、意味の切れ目で改行し、言葉の中にも強弱をつけたうえで、字間・行間を引き締め、周りに余白を取ることがポイントです。

まずは自分が作ったバナーやページを1秒だけ見て目をそらし、キャッチコピーが真っ先に読めたかどうかを確かめてみてください。