ランディングページ（LP）を制作するとき、商品画像や配色、CTAなどと同じくらい重要なのが「文字」のデザインです。
LPには、
キャッチコピー
見出し
本文
価格
商品の特徴
口コミ
注意事項
CTA
など、さまざまな文字情報が入ります。
しかし、すべての文字を同じ大きさ・太さで配置してしまうと、どこが重要なのか分かりにくくなります。
反対に、
「重要だから大きくしよう」
「目立たせたいから太くしよう」
「デザイン性を出すためにフォントを変えよう」
と考えて、文字サイズやフォントを増やしすぎても、まとまりのないLPになってしまいます。
LPの文字デザインで大切なのは、単純に「おしゃれなフォントを使うこと」ではありません。
ユーザーがページを見たときに、
「何の商品なのか」
「どんなメリットがあるのか」
「どこが重要なのか」
「次に何をすればいいのか」
をスムーズに理解できることが重要です。
この記事では、LP制作で押さえておきたいフォントや文字サイズの基本と、読みやすいデザインを作るための7つのポイントを解説します。
■ LPデザインでは「文字の読みやすさ」が重要
LPをデザインするときは、どうしても写真や装飾などのビジュアルに目が向きがちです。
しかし、商品の特徴やメリット、価格、購入条件などを伝えるのは基本的に文字です。
どれだけ商品写真がきれいでも、文章が読みにくければ商品の魅力を十分に伝えられません。
例えば、
文字が小さすぎる
背景と文字の色が近い
行間が狭い
1行が長すぎる
フォントの種類が多すぎる
といった状態では、ユーザーが文章を読むこと自体にストレスを感じてしまいます。
特にLPは縦に長くなることが多いため、最初から最後まですべての文章をじっくり読んでもらえるとは限りません。
多くのユーザーは、
見出しを見る
画像を見る
気になる部分だけ読む
次のセクションへ進む
というように、ページをスクロールしながら情報を確認します。
そのためLPでは、「読ませる」だけでなく「流し見しても内容が分かる」文字設計が重要になります。
■ LPで使うフォントは1〜2種類を基本にする
LPをおしゃれに見せようとして、さまざまなフォントを使用するケースがあります。
例えば、
キャッチコピーは明朝体
見出しはゴシック体
本文は別のゴシック体
価格は英字フォント
CTAは丸ゴシック
というようにフォントを増やしていくと、ページ全体の統一感が失われやすくなります。
基本的には、LP全体で使用するフォントを1〜2種類程度に絞るとデザインを整理しやすくなります。
例えば、
見出し・本文：Noto Sans JP
数字・英字：Montserrat
といった組み合わせです。
日本語フォントを1種類だけ使用し、太さによって変化をつける方法もあります。
Regular
Medium
Bold
などを使い分ければ、フォントを変えなくても十分に情報の強弱を作れます。
■ ゴシック体と明朝体はどう使い分ける？
WEBデザインでは、大きく分けてゴシック体と明朝体がよく使われます。
ゴシック体は線の太さが比較的均一で、スマートフォンなどの小さな画面でも読みやすいのが特徴です。
そのため、
ECサイト
サービス紹介
BtoB
健康食品
家電
スポーツ
など幅広いジャンルで使いやすいフォントです。
一方、明朝体は線に強弱があり、
高級感
上品さ
伝統
繊細さ
などを表現しやすい特徴があります。
化粧品や旅館、和の商品、高価格帯の商品などでは、キャッチコピーや見出しに明朝体を使用することで雰囲気を作れる場合があります。
ただし、LP全体の長い本文まで細い明朝体にすると、スマートフォンでは読みにくくなることがあります。
そのため、
キャッチコピー＝明朝体
本文＝ゴシック体
という組み合わせも有効です。
■ 読みやすいLPを作る7つのポイント
■ ① キャッチコピーは大きく見せる
LPのファーストビューで特に重要なのがキャッチコピーです。
ユーザーがページを開いた瞬間に、
「これは何の商品なのか」
「どんなメリットがあるのか」
を伝える必要があります。
そのため、キャッチコピーは周囲の文章より大きくして、視線が最初に向かうようにします。
例えば、
キャッチコピー：40〜60px
補足コピー：16〜20px
本文：14〜18px
というように差をつけます。
もちろん実際のサイズはデザインやデバイスによって変わりますが、重要なのは数字そのものではなく「明確な差をつけること」です。
キャッチコピーと本文がほぼ同じ大きさでは、ユーザーがどこから読めばいいのか分かりません。
■ ② 本文を小さくしすぎない
デザインをすっきり見せるために、本文を小さくするケースがあります。
PCの大きなモニターでは問題なく見えていても、スマートフォンでは非常に読みにくくなることがあります。
特にLPはスマートフォンから閲覧されるケースも多いため、PCだけを基準に文字サイズを決めるのはおすすめできません。
本文は実際のスマートフォンで確認し、
無理なく読めるか
文字が密集していないか
拡大しなくても読めるか
を確認しましょう。
また、注意事項などを必要以上に小さくするのも避けた方がよいでしょう。
重要な条件や説明が読めなければ、ユーザーに不信感を与える可能性があります。
■ ③ 行間を詰めすぎない
文字サイズと同じくらい重要なのが行間です。
文章の行間が狭すぎると、上下の文字が詰まって見えます。
特にスマートフォンでは横幅が狭いため、文章の折り返しが多くなります。
そこで行間まで狭いと、文章全体が大きな文字の塊に見えてしまいます。
反対に、行間を広げすぎても文章としてのまとまりが弱くなります。
例えば本文が16pxなら、line-heightを1.6〜1.8程度から調整する方法があります。
重要なのは、CSSの数値だけで決めるのではなく、実際の文章を入れた状態で確認することです。
■ ④ 1行を長くしすぎない
PC版のLPでは横幅を広く使えるため、文章を画面いっぱいまで配置したくなることがあります。
しかし、1行が長すぎる文章は視線を大きく左右に動かす必要があり、読みにくくなります。
特に説明文などは、コンテンツ幅を適度に制限すると読みやすくなります。
例えば横幅1920pxの画面だからといって、文章を1800px幅で表示する必要はありません。
文章部分だけ600〜800px程度に抑え、左右に余白を取る方法もあります。
LPでは「空いているスペースを全部埋める」のではなく、読みやすい幅を意識しましょう。
■ ⑤ 太字を使いすぎない
重要な文章を目立たせる方法として太字は便利です。
しかし、ほぼすべての文章を太字にしてしまうと、どこが重要なのか分からなくなります。
これは色と同じ考え方です。
すべてを目立たせると、結果的に何も目立たなくなります。
例えば文章の中で、
商品の最大のメリット
重要な数字
価格
保証内容
など、本当に伝えたい部分だけを太字にします。
本文はRegular、重要部分はBoldというように役割を決めておくと、ページ全体の文字設計も統一しやすくなります。
■ ⑥ 文字色を増やしすぎない
重要な情報を目立たせるために、
赤
青
黄色
緑
オレンジ
など複数の文字色を使うと、ページが散らかって見えることがあります。
文字色にもルールを持たせましょう。
例えば、
通常本文＝ダークグレー
見出し＝ネイビー
リンク＝ブルー
注意＝赤
と役割を決めます。
価格やキャンペーン情報を赤にするのであれば、関係のない文章まで赤くしない方が重要な情報を目立たせやすくなります。
配色の記事でも解説したように、色は増やすことより「役割を決めること」が重要です。
■ ⑦ スマートフォンでは文字サイズを再調整する
PCで大きく見せたキャッチコピーを、そのままスマートフォンでも同じサイズで表示すると、1文字ずつ何度も改行されて読みにくくなることがあります。
例えばPCで56pxのキャッチコピーを使用していても、スマートフォンでは32px程度に調整するなど、画面幅に合わせて変更します。
逆に本文は、小さくしすぎないことが重要です。
PC版をそのまま縮小するのではなく、
キャッチコピー
見出し
本文
CTA
補足情報
それぞれをスマートフォン用に調整しましょう。
また、スマートフォンでは実際に手に持った距離で確認することも大切です。
■ LPでおすすめの日本語WEBフォント
LPで使用しやすい代表的なフォントとして、Noto Sans JPがあります。
癖が少なく読みやすいため、
企業
EC
美容
健康
サービス
BtoB
など幅広いジャンルに合わせやすいフォントです。
少し柔らかい雰囲気にしたい場合は、丸みのあるゴシック体を検討してもよいでしょう。
高級感や和の雰囲気を出したい場合は、Noto Serif JPなどの明朝系フォントを見出しに使用する方法もあります。
重要なのは「人気のフォントだから使う」のではなく、商品やブランドの雰囲気に合っているかを考えることです。
■ 数字や価格はフォントを変える方法もある
LPでは価格や実績など、数字を大きく見せる場面が多くあります。
例えば、
98.7％
4,980円
累計10,000個
満足度No.1
などです。
このような数字だけ英字フォントを使用すると、デザインにメリハリをつけられる場合があります。
MontserratやRobotoなど、数字が見やすいフォントを日本語フォントと組み合わせる方法があります。
ただし、数字だけ極端に個性的なフォントにするとページ全体から浮いてしまうため、商品イメージとのバランスを確認しましょう。
■ CTAの文字は一瞬で読めるようにする
CTAではボタンの色やサイズだけでなく、文字の読みやすさも重要です。
例えば、
「こちら」
「送信」
だけでは、クリックした後に何が起こるのか分かりません。
「無料で相談する」
「商品を購入する」
「資料をダウンロードする」
など、行動が具体的に分かる文章にします。
さらに、CTAの背景と文字色のコントラストも確認しましょう。
オレンジのCTAなら白文字、濃いネイビーなら白文字など、ボタンを見た瞬間に内容を読めることが重要です。
■ LPの文字デザインでよくあるNG例
LPを制作したら、次のような状態になっていないか確認しましょう。
・フォントを使いすぎている
・本文が小さすぎる
・行間が狭い
・1行が長すぎる
・太字が多すぎる
・文字色が多すぎる
・背景と文字のコントラストが弱い
・PCとスマホで同じ文字サイズを使用している
・キャッチコピーと本文の差が少ない
・CTAの文字が小さい
これらは一つひとつを見ると小さな違いですが、LP全体では読みやすさに大きく影響します。
■ フォントサイズのルールを最初に決める
LPの制作途中で文字サイズを感覚的に決めていくと、
この見出しは32px
次は36px
別の場所では34px
というように、似た役割の文字サイズが少しずつ変わってしまうことがあります。
そこで制作前に、ある程度ルールを決めておくと便利です。
例えばPCなら、
メインコピー：48px
大見出し：36px
小見出し：24px
本文：16px
補足：14px
といった基準を作ります。
スマートフォンでは、
メインコピー：32px
大見出し：26px
小見出し：20px
本文：16px
補足：13〜14px
など、別のルールを用意します。
これはあくまで一例であり、すべてのLPに同じ数字が適しているわけではありません。
重要なのは、ページ内で一貫したルールを持つことです。
■ 公開前は実際のデバイスで確認する
LPが完成したら、デザインデータだけを見て判断せず、実際のブラウザで確認しましょう。
特に、
スマートフォン
PC
タブレット
など、画面サイズが変わったときの文字の見え方を確認します。
スマートフォンでは、
変な位置で改行されていないか
キャッチコピーが大きすぎないか
本文が小さくないか
行間が狭くないか
CTAの文字が読めるか
などをチェックします。
文字は数px変えるだけでも印象が大きく変わります。
デザインデータ上で完成と考えず、実際にユーザーが見る環境で最終調整しましょう。
■ まとめ｜LPの文字は「おしゃれ」より「読みやすさ」
LPのフォントや文字サイズを決めるときは、おしゃれなフォントを探すことから始める必要はありません。
まず考えたいのは、
「ユーザーが迷わず読めるか」
ということです。
そのためには、
フォントを1〜2種類に絞る
キャッチコピーを大きくする
本文を小さくしすぎない
適度な行間を確保する
1行を長くしすぎない
太字や文字色を使いすぎない
スマートフォン用に文字サイズを調整する
といった基本が重要です。
LPでは、すべての文章を同じ強さで見せる必要はありません。
重要な情報は大きく。
補足情報は控えめに。
CTAは一瞬で読めるように。
このように文字に優先順位をつけることで、ユーザーがスクロールしながらでも内容を理解しやすいLPになります。
文字は単なる情報ではなく、LPデザインを構成する重要な要素です。
「どのフォントがおしゃれか」だけではなく、「どうすればユーザーに伝わるか」を基準に文字を設計してみましょう。
関連記事
LPの商品画像の作り方｜売れるデザインに共通する7つのポイント
LPのファーストビューの作り方｜成果につながるデザイン7つのポイント
LPの構成の作り方｜成果につながるランディングページの基本構成を徹底解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】
最短1ヶ月で動画編集スキルが身につく！【クリエイターズジャパン】