スマホLPのフォントサイズは何pxが最適?CVRが上がる文字サイズ・行間・CTA設計

スマホLPのフォントサイズは何pxが最適?CVRが上がる文字サイズ・行間・CTA設計

スマホLPの成果を左右する要素の一つが、フォントサイズです。文字が小さすぎると読みにくく離脱の原因になり、大きすぎるとスクロール量が増えて重要な情報が伝わりにくくなります。

しかし、「本文は何pxが最適?4」「CTAボタンやフォームの文字サイズは?」と悩む方も多いでしょう。

本記事では、スマホLPに適したフォントサイズの目安をはじめ、行間や余白、CTA設計、読みやすさを高めるポイントまで詳しく解説します。

CVR向上につながるスマホLPを作りたい方は、ぜひ参考にしてください。

スマホLPのフォントサイズが重要な理由

読みやすさが離脱率に影響する

スマホLPでは、フォントサイズが小さすぎると文字を読むのに負担がかかり、ユーザーが内容を理解する前に離脱してしまう可能性があります。

一方、大きすぎる文字はスクロール量が増え、重要な情報にたどり着く前にページを閉じられる原因になります。

特にスマートフォンは画面が小さいため、本文は16〜18px程度を目安に、適切な行間や余白を組み合わせることが重要です。

読みやすいレイアウトを意識することで、ユーザーがストレスなく情報を取得でき、滞在時間やスクロール率の向上、離脱率の改善につながります。

CVRにも大きく影響する

スマホLPの目的は、商品購入や資料請求、問い合わせなどのコンバージョンを獲得することです。

フォントサイズが適切でないと、商品の特徴やメリット、キャンペーン内容が十分に伝わらず、CTAボタンまで読み進めてもらえない可能性があります。

また、CTAボタンや価格表示、入力フォームの文字が小さいと、操作性が低下してコンバージョンの機会を逃してしまいます。

ユーザーが迷わず情報を理解し、スムーズに行動できる文字サイズを採用することで、信頼感や使いやすさが向上し、CVR改善にも大きく貢献します。

GoogleのモバイルUX評価にも関係する

Googleはモバイルユーザーの利便性を重視しており、スマホで見やすく操作しやすいページ作りを推奨しています。

文字が小さすぎて拡大表示が必要だったり、ボタンやリンクが押しにくかったりすると、ユーザー体験が低下し、検索評価にも悪影響を与える可能性があります。

また、フォントサイズだけでなく、行間や余白、タップ領域、表示速度などもモバイルUXを構成する重要な要素です。

スマホLPでは、読みやすい文字サイズと適切なレイアウトを意識することで、ユーザー満足度を高めるだけでなく、SEOや検索順位の維持・向上にもつながるでしょう。

スマホLPの推奨フォントサイズ一覧

スマホLPでは、読みやすさと情報量のバランスを考慮したフォントサイズの設定が重要です。

文字が小さすぎると読みにくく、大きすぎるとスクロール量が増えてユーザーの負担になります。

特に本文は16〜18pxを基準にし、CTAボタンやフォームは視認性や操作性を重視してやや大きめに設定するのがおすすめです。

また、見出しや注釈も役割に応じてサイズを調整することで、情報の優先順位が伝わりやすくなります。

以下の表を参考に、自社のターゲット層や商材に合わせて最適なサイズを選びましょう。

項目

推奨フォントサイズ

メイン見出し(H1相当)

28〜32px

大見出し(H2相当)

24〜28px

小見出し(H3相当)

18〜22px

本文

16〜18px

補足テキスト

14〜16px

注釈・注意事項

14〜16px

CTAボタン

18〜22px

価格表示

20〜28px

入力フォーム

16px以上

エラーメッセージ

14〜16px

スマホLPでは、フォントサイズだけでなく、行間を1.5〜1.8倍程度に設定し、適度な余白を確保することも重要です。

文字の読みやすさと操作性を両立させることで、ユーザーの離脱を防ぎ、CVR向上につながるLPを実現できます。

本文は16〜18pxがおすすめ

スマホLPの本文は、16〜18pxを目安に設定するのがおすすめです。

16px未満では文字が小さく感じやすく、ユーザーが拡大表示をしなければ読みにくい場合があります。

一方、18pxを大きく超えると表示できる文字数が減り、スクロール量が増えてしまいます。

特に商品説明やサービス内容など、長文を読む場面では、16〜18pxに設定し、行間を1.5〜1.8倍程度確保すると読みやすさが向上します。

ターゲットがシニア層の場合は18px程度を基準にするなど、利用者に合わせて調整することも大切です。

見出しは18〜32pxが目安

見出しは、ユーザーがページ全体の内容を素早く把握するための重要な要素です。

スマホLPでは、情報の優先順位に応じて18〜32pxを目安に設定すると見やすくなります。例えば、大見出しは24〜32px、小見出しは18〜22px程度が一般的です。

見出しが小さすぎると本文との差が分かりにくくなり、大きすぎると画面を占有して読みにくくなります。

また、サイズだけでなく、太字や色の使い分け、適切な余白を組み合わせることで、視線を自然に誘導し、重要な情報を効果的に伝えることができます。

注釈は14px未満を避ける

スマホLPでは、注意事項や補足説明を小さな文字で表示するケースがありますが、14px未満は避けるのがおすすめです。

文字が小さすぎると読みにくく、重要な情報が見落とされる原因になります。

特に、キャンペーンの条件や返品規定、料金に関する説明などは、ユーザーとのトラブル防止のためにも十分な視認性を確保することが重要です。

注釈は14〜16px程度を基準にし、背景色とのコントラストや行間も意識すると読みやすくなります。

「注釈だから小さくてよい」と考えるのではなく、必要な情報を誰でも無理なく読める設計を心がけましょう。

フォントサイズだけでなく行間も重要

行間は1.5〜1.8倍

スマホLPでは、フォントサイズだけでなく行間の設定も読みやすさを左右する重要なポイントです。

行間が狭すぎると文字が詰まって見え、長文を読む際に視線を追いにくくなります。一方、広すぎると文章のまとまりが失われ、かえって読みにくくなることがあります。

一般的には、本文フォントサイズの1.5〜1.8倍程度の行間がおすすめです。例えば、本文16pxなら24〜29px程度が目安になります。

適切な行間を確保することで、文章が読みやすくなり、ユーザーのストレス軽減や離脱率の改善、CVR向上にもつながります。

文字間隔の目安

文字間隔(letter-spacing)も、スマホLPの可読性を高めるために重要な要素です。

日本語の場合は標準設定でも問題ないケースが多いですが、少し余裕を持たせることで文字が認識しやすくなります。

目安としては、0〜0.05em程度の文字間隔がおすすめです。逆に、間隔を広げすぎると文章が途切れて見えたり、狭すぎると窮屈な印象を与えたりします。

特に見出しやCTAボタンは、適度な文字間隔を設定することで視認性が向上し、重要な情報を強調しやすくなります。

フォントサイズや行間とのバランスを見ながら調整しましょう。

1行の文字数の目安

スマホLPでは、1行に表示する文字数も読みやすさに大きく影響します。一般的には20〜30文字程度を目安にすると、視線移動が少なく快適に読むことができます。

1行が長すぎると、次の行への視線移動が難しくなり、読者が疲れやすくなります。反対に短すぎると改行が増え、文章の流れが途切れてしまいます。

特に商品説明やサービス紹介では、適切な文字数を意識することで内容を理解しやすくなり、最後まで読まれやすいLPにつながります。

スマホの実機で確認しながら調整することも大切です。

余白とのバランス

フォントサイズや行間を最適化しても、余白が不足していると読みやすいLPにはなりません。

文字や画像、見出し、CTAボタンの間に適度な余白を設けることで、情報のまとまりが分かりやすくなり、視線を自然に誘導できます。

余白が少ないと情報量が多く窮屈な印象を与え、逆に多すぎるとスクロール量が増えてしまいます。

スマホLPでは、セクションごとに十分な余白を確保しつつ、重要な情報を適度にグループ化することがポイントです。

フォントサイズ、行間、文字間隔、余白をバランスよく設計することで、読みやすく成果につながるLPを実現できます。

CTAボタンの文字サイズは何pxが最適?

CTAは18〜22pxが見やすい

スマホLPのCTAボタンは、ユーザーに行動を促す重要な要素です。文字サイズは18〜22pxを目安に設定すると、視認性とデザイン性のバランスを取りやすくなります。

文字が小さすぎるとボタンの存在に気付きにくく、大きすぎるとレイアウト全体が崩れる原因になります。

また、「無料で資料請求する」「今すぐ購入する」など、短く分かりやすい文言を採用することで、より視線を集めやすくなります。

フォントサイズだけでなく、太字や配色も工夫し、スマホ画面でも一目で認識できるCTAを設計することがCVR向上につながります。

ボタンサイズとのバランス

CTAボタンは文字サイズだけでなく、ボタン全体の大きさとのバランスも重要です。

文字が大きくてもボタンが小さいと窮屈に見え、反対にボタンだけ大きく文字が小さいと視認性が低下します。

一般的には、文字サイズ18〜22pxに対して上下15〜20px程度、左右20〜30px程度の余白を確保すると見やすくなります。

また、ボタン幅は画面幅に対して80〜100%程度を目安に設定すると、視線を集めやすく押しやすいデザインになります。

文字とボタンのバランスを整えることで、自然にユーザーの行動を促すことができます。

タップしやすい余白を確保する

スマホLPでは、CTAボタンの押しやすさも成果を左右する重要なポイントです。

ボタン周辺に十分な余白がないと、誤タップが発生したり、押しにくい印象を与えたりする可能性があります。

一般的には、ボタンの高さを44px以上確保し、周囲にも適度なスペースを設けることで、快適に操作しやすくなります。

また、複数のCTAボタンを並べる場合は、ボタン同士の間隔を十分に空けて誤操作を防ぐことも大切です。

文字サイズ、ボタンサイズ、余白をバランスよく設計することで、ユーザーのストレスを軽減し、クリック率やCVRの向上が期待できます。

入力フォームの文字サイズは16px以上がおすすめ

なぜ16px未満は避けるべきか

スマホLPの入力フォームは、文字サイズを16px以上に設定するのがおすすめです。

16px未満では文字が小さく読みづらくなるだけでなく、スマートフォンによっては入力欄をタップした際に画面が自動拡大され、レイアウトが崩れてしまうことがあります。

また、入力内容の確認がしにくく、ユーザーがストレスを感じてフォームを途中で離脱する原因にもなります。

資料請求や問い合わせ、会員登録などのコンバージョンを獲得するためには、誰でも快適に入力できる環境を整えることが重要です。

視認性と操作性を考慮し、入力フォームは16px以上を基準に設計しましょう。

入力しやすい設計

文字サイズだけでなく、入力フォーム全体の設計もコンバージョン率に大きく影響します。

入力欄は高さ44px以上を目安にし、タップしやすい十分な大きさを確保するのがおすすめです。

また、氏名や電話番号、メールアドレスなど、入力項目を必要最小限に絞ることで、ユーザーの負担を軽減できます。

ラベルやプレースホルダーも16px前後で表示し、入力内容が分かりやすいデザインを意識しましょう。

さらに、入力欄同士に適度な余白を設けることで誤操作を防ぎ、スマホでもスムーズに入力できるフォームを実現できます。

エラー表示の文字サイズ

入力ミスが発生した際のエラーメッセージも、スマホLPでは重要な要素です。

文字が小さすぎると修正箇所が分からず、ユーザーが離脱する原因になるため、14〜16px程度を目安に設定するのがおすすめです。

また、「入力内容が正しくありません」だけではなく、「メールアドレスの形式で入力してください」など、具体的な修正方法を表示するとユーザーの負担を減らせます。

エラーメッセージは目立つ色を使用しつつ、入力欄の近くに表示することで視認性を高めることができます。

分かりやすいエラー表示は入力完了率を向上させ、CVR改善にもつながります。

業界別におすすめのフォントサイズ

ECサイト

ECサイトのスマホLPでは、商品の魅力を短時間で伝え、購入につなげることが重要です。

本文は16〜18px、商品名や価格は20〜28px、CTAボタンは18〜22pxを目安に設定すると視認性が高まります。

特にセール価格や期間限定キャンペーンなどの重要情報は、通常の本文より大きく表示することで視線を集めやすくなります。

また、商品説明が長くなりがちなため、適度な行間や余白を確保し、読みやすさを意識することも大切です。

購入までスムーズに誘導できるデザインがCVR向上につながります。

BtoB

BtoB向けスマホLPでは、サービス内容や導入メリットを分かりやすく伝え、資料請求や問い合わせにつなげることが目的です。

本文は16〜18px、見出しは22〜28px、CTAボタンは18〜22px程度が適しています。

法人向けサービスは情報量が多くなる傾向があるため、文字を小さくして詰め込むのではなく、余白を活用して情報を整理することが重要です。

また、実績や導入事例、数字による根拠などを強調する部分は、フォントサイズや太字を活用して視認性を高めることで、信頼感の向上にもつながります。

美容・コスメ

美容・コスメ業界のスマホLPは、商品の世界観やブランドイメージを伝えながら、購入意欲を高めるデザインが求められます。

本文は16〜18px、見出しは24〜32px、CTAボタンは18〜22px程度がおすすめです。女性向け商材では、余白を多めに取り、写真やビジュアルを引き立てるレイアウトが効果的です。

また、成分や使用方法などの補足情報は14〜16px程度を維持し、読みやすさを損なわないようにしましょう。

高級感を演出しつつ、スマホでも快適に閲覧できる設計が重要です。

不動産

不動産のスマホLPでは、物件情報やサービス内容を正確に伝え、問い合わせや来場予約につなげることが重要です。

本文は16〜18px、見出しは24〜30px、価格や物件情報は20〜24px程度を目安に設定すると見やすくなります。

不動産は情報量が多いため、文字を小さくするのではなく、見出しや箇条書きを活用して整理することがポイントです。

また、電話相談や来場予約などのCTAボタンは18〜22px程度で目立たせることで、ユーザーが迷わず行動しやすいLPを作ることができます。

士業

税理士や弁護士、社会保険労務士などの士業向けスマホLPでは、信頼感や安心感を与えることが重要です。

本文は16〜18px、見出しは22〜28px、CTAボタンは18〜22px程度が適しています。

専門用語が多くなりやすいため、文字を詰め込みすぎず、行間や余白をしっかり確保して読みやすくすることが大切です。

また、料金体系や相談の流れ、実績などの重要情報は少し大きめの文字や太字を活用して目立たせると、ユーザーの理解を助けることができます。

落ち着いたデザインとの相性も考慮しましょう。

高齢者向けサービス

高齢者向けサービスのスマホLPでは、一般的なLPよりも大きめの文字サイズを採用することが推奨されます。

本文は18〜20px、見出しは28〜32px、CTAボタンは20〜24px程度を目安にすると、視認性が向上します。

また、注釈や補足情報も14pxではなく16px以上を確保し、小さな文字をできるだけ使用しないことが大切です。

文字サイズだけでなく、行間を広めに設定し、背景色とのコントラストを十分に確保することで、読みやすさがさらに向上します。

操作しやすく分かりやすい設計が、問い合わせや申し込みの増加につながります。

スマホLPの文字を見やすくするポイント

太字を効果的に使う

スマホLPでは、重要な情報を目立たせるために太字を効果的に活用しましょう。

商品やサービスの特徴、価格、キャンペーン情報、CTAにつながるキーワードなどを太字にすることで、ユーザーの視線を自然に誘導できます。

ただし、文章全体を太字にすると強調したい部分が分かりにくくなるため注意が必要です。

1つの文章で強調する箇所は1〜2か所程度に抑え、メリハリをつけることがポイントです。

フォントサイズだけでなく、太字を適切に使うことで読みやすさが向上し、重要な情報を効率よく伝えられます。

色数を増やしすぎない

文字の色を多用すると、どこが重要なのか分かりにくくなり、かえって読みにくいスマホLPになってしまいます。

基本的には本文は黒や濃いグレーを使用し、強調部分やCTAにアクセントカラーを取り入れる程度がおすすめです。

使用する色は3〜4色程度にまとめることで、統一感のあるデザインを作りやすくなります。

また、背景色とのコントラストを十分に確保し、薄いグレーの文字や視認性の低い配色は避けることが重要です。

シンプルな配色を意識することで、情報が整理され、ユーザーも内容を理解しやすくなります。

漢字ばかりにしない

スマホLPでは、漢字ばかりの文章は圧迫感を与え、読みにくく感じることがあります。

特にスマートフォンは画面が小さいため、ひらがなやカタカナを適度に交えた自然な文章を心がけることが大切です。

例えば、「資料請求受付開始」よりも「資料請求の受付を開始しました」と表現した方が読みやすくなる場合があります。

また、長い文章は適度に改行を入れ、視線の移動を少なくする工夫も効果的です。

見た目の読みやすさを意識することで、最後までストレスなく読まれるLPにつながります。

箇条書きを活用する

商品の特徴やサービスのメリットを長文で説明すると、ユーザーが途中で読むのをやめてしまう可能性があります。

そのため、重要なポイントは箇条書きを活用して整理するのがおすすめです。

例えば、「送料無料」「最短翌日発送」「初回限定割引」などを箇条書きにすることで、一目で内容を理解できます。

また、箇条書きの前にチェックマークや矢印などを配置すると、さらに視認性が向上します。

文章を短く区切り、必要な情報を分かりやすく伝えることが、スマホLPの読みやすさやCVR向上につながります。

アイコンや画像を組み合わせる

スマホLPでは、文字だけで情報を伝えようとすると、内容が多くなり読みにくくなりがちです。

そこで、アイコンや画像を組み合わせることで、情報を直感的に理解しやすくすることができます。

例えば、配送ならトラック、電話相談なら受話器、実績ならグラフなどのアイコンを使うことで、短時間で内容を伝えられます。

また、商品の使用イメージやビフォーアフター写真などを適切に配置することで、文章だけでは伝わりにくい魅力を補うことが可能です。

文字とビジュアルをバランスよく組み合わせることで、読みやすく印象に残るスマホLPを作ることができます。

スマホLPのフォントサイズでよくある失敗

文字が小さすぎる

スマホLPで最も多い失敗の一つが、本文の文字サイズが小さすぎることです。

情報量を増やしたいあまり14px以下に設定すると、ユーザーは読みにくさを感じ、途中で離脱する可能性が高まります。

特にスマートフォンは画面が小さいため、拡大しなければ読めない文字サイズはストレスの原因になります。

本文は16〜18pxを基準に設定し、行間や余白も適切に確保することが重要です。

伝えたい情報を詰め込むのではなく、読みやすさを優先することで、ユーザーの理解を深め、CVR向上につながります。

見出しが大きすぎる

見出しを目立たせようとして大きくしすぎるのも、スマホLPでよくある失敗です。

見出しが画面の大部分を占めると、本文が下に追いやられ、スクロール量が増えてしまいます。

また、重要な見出しと通常の見出しの差が分かりにくくなり、ページ全体のメリハリが失われることもあります。

一般的には、大見出しは24〜32px、小見出しは18〜22px程度を目安にするとバランスよく表示できます。

フォントサイズだけでなく、余白や太字を活用して強弱をつけることが、見やすいLP作りのポイントです。

注釈が読めない

キャンペーン条件や注意事項などの注釈を極端に小さく表示してしまうケースも少なくありません。

12px以下の文字はスマホでは読みにくく、ユーザーが重要な情報を見落とす原因になります。

特に料金や返品条件、適用条件などは、後のトラブル防止のためにも十分な視認性が必要です。

注釈は14〜16px程度を目安に設定し、背景色とのコントラストや行間にも配慮しましょう。

注釈だから小さくするのではなく、必要な情報を誰でも無理なく読めるように設計することが信頼感の向上につながります。

ボタン文字が小さい

CTAボタンの文字が小さいと、ユーザーがボタンの存在に気付かなかったり、押すことをためらったりする可能性があります。

特に「無料相談はこちら」「今すぐ申し込む」などの重要なボタンは、18〜22px程度の文字サイズを目安に設定するのがおすすめです。

また、文字だけでなく、ボタン自体の大きさや周囲の余白も重要です。

ボタンが小さく窮屈なデザインでは、操作しにくくクリック率の低下につながります。

文字サイズとボタンサイズをバランスよく設計し、スマホでも押しやすいCTAを作ることが大切です。

情報量が多すぎる

スマホLPでは、伝えたい内容を詰め込みすぎて文字量が多くなり、結果として読みにくくなるケースがあります。

情報量が増えると文字を小さくしたくなりますが、それでは可読性が低下し、離脱率が高まる原因になります。

重要なのは、情報を減らすのではなく、優先順位を付けて整理することです。

見出しや箇条書き、アイコン、画像などを活用し、必要な情報を分かりやすく配置しましょう。

読みやすさを重視したレイアウトにすることで、ユーザーの負担を軽減し、最後まで読まれやすいスマホLPを実現できます。

スマホLPのフォントサイズに関するよくある質問

スマホLPの本文は何pxが最適ですか?

スマホLPの本文は、16〜18pxを目安に設定するのがおすすめです。

16px未満では文字が小さく感じやすく、読みにくさから離脱につながる可能性があります。

一方、18pxを大きく超えると表示できる情報量が減り、スクロール量が増えてしまいます。

ターゲットがシニア層の場合は18px前後を採用するなど、利用者に合わせて調整すると、より読みやすいLPを作ることができます。

14pxでも問題ありませんか?

14pxでも表示は可能ですが、本文として使用するには小さく感じるケースが多いため、あまりおすすめできません。

特に長文を読むスマホLPでは、16〜18px程度の方が可読性が高く、ユーザーの負担を軽減できます。

14pxは補足説明や注釈など、本文以外の用途で使用するのが一般的です。重要な情報は十分な文字サイズを確保し、読みやすさを優先しましょう。

CTAボタンの文字サイズは?

スマホLPのCTAボタンは、18〜22px程度が見やすく押しやすいサイズとされています。

「無料で資料請求する」「今すぐ申し込む」などの文言が一目で分かり、ユーザーが迷わず行動できることが重要です。

また、文字サイズだけでなく、ボタンの高さや余白を十分に確保し、スマホでもタップしやすいデザインにすることで、クリック率やCVRの向上が期待できます。

フォームは16px以上必要ですか?

入力フォームの文字サイズは、16px以上を目安に設定するのがおすすめです。

文字が小さいと入力内容を確認しにくく、スマートフォンでは入力時に画面が拡大表示される場合もあります。

その結果、操作性が低下してフォーム離脱の原因になることがあります。入力欄だけでなく、ラベルやプレースホルダーも16px前後を基準にし、誰でも快適に入力できるフォーム設計を心がけることが大切です。

高齢者向けLPは何pxがおすすめですか?

高齢者向けLPでは、一般的なスマホLPよりも大きめの文字サイズを採用するのがおすすめです。

本文は18〜20px、見出しは28〜32px、CTAボタンは20〜24px程度を目安にすると、視認性が向上し、読みやすくなります。

また、文字サイズだけでなく、行間を1.6〜1.8倍程度に広めに設定し、背景色とのコントラストをしっかり確保することも重要です。

小さな注釈や複雑なレイアウトは避け、シンプルで分かりやすいデザインを心がけることで、ストレスなく情報を理解でき、問い合わせや申し込みにつながりやすくなります。

スマホLPのフォントサイズまとめ

スマホLPのフォントサイズまとめ

スマホLPのフォントサイズは、読みやすさや操作性だけでなく、離脱率やCVRにも大きく影響する重要な要素です。

本文は16〜18px、見出しは18〜32px、CTAボタンは18〜22px、入力フォームは16px以上を目安に設定すると、快適な閲覧環境を作りやすくなります。

また、フォントサイズだけでなく、行間は1.5〜1.8倍、適度な余白や文字間隔を確保し、視認性を高めることも大切です。

特に高齢者向けLPでは、全体的に1〜2px大きめに設定すると効果的です。

まずは基本的な推奨サイズを取り入れ、自社のターゲットや商材に合わせてA/Bテストを行いながら最適化することで、読みやすく成果につながるスマホLPを実現できるでしょう。

記事を書いた人

井上寛生

井上寛生

LandingHub 執行役員 / 事業責任者 / 技術責任者

大学院では情報工学を専攻し、修了後に株式会社TeNへ新卒入社。当時は社内唯一のエンジニアながら、開発部門をゼロから立ち上げ、採用・育成を一手に担い、全員が未経験からスタートした精鋭エンジニアチームを組成。2021 年にはWEBサイト高速化プラットフォーム「LandingHub」を立ち上げ、プロダクトオーナー兼事業責任者として企画・開発・グロースを牽引。現在は執行役員として、会社の技術戦略と事業成長の双方をリードしている。
コラム一覧に戻る