大阪のホームページ制作ならGreen Hill

WEBマーケティングマガジン

WEB Marketing Journal

LP

2026.4.17

知らないと損!離脱率を下げるランディングページ フォントサイズの決め方と5つのコツ

ランディングページ(LP)のコンバージョンが上がらない、なぜか直帰率が高い…その原因、実は「フォントサイズ」かもしれません。なんとなく決めたフォントサイズは、ユーザーに無意識のストレスを与え、内容が読まれる前に離脱を引き起こします。この記事では、データに基づいたPC・スマホそれぞれの最適なフォントサイズを具体的に解説。さらに、ターゲットユーザーに合わせて離脱率を下げ、コンバージョン率(CVR)を高めるためのフォントの決め方5つのコツ、行間やジャンプ率の調整、よくある失敗例まで網羅的にご紹介します。最後まで読めば、ユーザーがスラスラと読み進めてしまう、成果に繋がるランディングページの文字設定がわかります。

ランディングページのフォントサイズが離脱率を左右する理由

ランディングページ(LP)の目的は、訪問したユーザーに商品購入や資料請求といった特定のアクション(コンバージョン)を促すことです。しかし、どれだけ魅力的なキャッチコピーやデザインを用意しても、その内容がユーザーに読まれなければ意味がありません。実は、その「読まれるかどうか」を大きく左右するのが「フォントサイズ」なのです。

不適切なフォントサイズは、ユーザーにストレスを与え、内容を理解する前にページを閉じさせてしまう「離脱」の大きな原因となります。逆に、読みやすいフォントサイズはユーザー体験(UX)を向上させ、LPの成果を最大化する上で欠かせない要素と言えるでしょう。ここでは、なぜフォントサイズが離脱率やコンバージョンにまで影響を与えるのか、その理由を詳しく解説します。

フォントサイズが小さいとユーザーは読まずに離脱する

スマートフォンでLPを開いたとき、文字が小さすぎて読む気をなくした経験はありませんか?多くのユーザーは、わざわざ指で拡大(ピンチアウト)してまで情報を得ようとはしません。文字が読みにくいと感じた瞬間に「面倒だ」というストレスを感じ、無意識のうちにブラウザの戻るボタンを押してしまうのです。

特に、移動中や休憩中などの「すきま時間」にスマートフォンで閲覧するユーザーにとって、読みにくさは致命的です。彼らは効率的に情報を探しており、少しでもストレスを感じるサイトは「価値がない」と判断し、すぐに他のページへ移動してしまいます。これが、LPの直帰率や離脱率を高める直接的な原因となります。

ユーザーの行動心理・感情LPへの影響
ページを開いてすぐに閉じる「読みにくい」「見るのが面倒」直帰率・離脱率の上昇
拡大しようとするが、途中でやめる「ストレスを感じる」「後でいいや」コンバージョン機会の損失
内容を読み飛ばす・誤読する「分かりにくい」「不親切だ」商品・サービスへの魅力が伝わらない

読みやすいフォントサイズは信頼性とコンバージョンに繋がる

一方で、ユーザーにとって読みやすいフォントサイズは、ページの滞在時間を延ばし、内容をじっくりと読んでもらうための第一歩です。文章がスムーズに読めることで、ユーザーはストレスなく商品やサービスの魅力を理解できます。この「読みやすさ」という基本的な配慮が、LPの成果に大きな好影響をもたらします。

まず、適切なフォントサイズで丁寧に作られたページは、ユーザーに「細部まで配慮が行き届いている」という誠実な印象を与え、企業やサービスへの信頼感を醸成します。読みやすさは、おもてなしの心です。ユーザーのことを考えて作られていると感じることで、安心感が生まれ、ポジティブな気持ちでコンテンツを読み進めてもらえるようになります。

そして、信頼感が土台にあることで、LPが本来持つメッセージの説得力は格段に高まります。ユーザーが内容を正確に、かつ深く理解することで、商品の価値や必要性を自分ごととして捉えやすくなり、最終的に「購入する」「問い合わせる」といったコンバージョンへと繋がるのです。

要素具体的な効果LPの成果への貢献
可読性の向上ユーザーの視覚的ストレスを軽減し、内容の理解を促進する。滞在時間と熟読率の向上
信頼性の向上丁寧で誠実な印象を与え、企業やブランドへの安心感に繋がる。ブランドイメージの向上、再訪問の促進
説得力の向上メッセージが正確に伝わり、訴求ポイントへの共感を生み出す。コンバージョン率(CVR)の向上

PCとスマホ別 ランディングページの最適なフォントサイズ

ランディングページ(LP)の成果を最大化するためには、ユーザーが使用するデバイスに合わせてフォントサイズを最適化することが極めて重要です。PCとスマートフォンでは画面の大きさやユーザーとの距離が全く異なるため、同じフォントサイズでは快適な閲覧体験を提供できません。レスポンシブデザインを前提とし、デバイスごとに最適なフォントサイズを設定することが、ユーザーの離脱を防ぎコンバージョンへと繋げる第一歩です。

ここでは、PCサイトとスマホサイト、それぞれにおける推奨フォントサイズを具体的な数値とともに解説します。フォントサイズの単位にはいくつか種類がありますが、ここでは最も直感的に理解しやすい「px(ピクセル)」を基準にご紹介します。

PCサイトの推奨フォントサイズ

PCは大きな画面で閲覧されるため、情報の階層構造を明確にし、視線をスムーズに誘導するデザインが求められます。フォントサイズにメリハリをつけることで、ユーザーはどこが重要なのかを瞬時に理解し、ストレスなくコンテンツを読み進めることができます。

見出しのフォントサイズ目安

見出しは、セクションの内容を端的に伝え、ユーザーの興味を引くための重要な要素です。本文とのジャンプ率(サイズの比率)を意識し、視覚的に役割がわかるように設定しましょう。

要素フォントサイズの目安(px)役割
h1(メインキャッチコピー)32px 〜 48pxページの主題を伝え、ユーザーの心を掴む最も重要な見出し。
h2(大見出し)24px 〜 32pxコンテンツの大きな区切りを示し、セクションのテーマを明確にする。
h3(中見出し)20px 〜 24pxh2の内容をさらに細分化し、具体的なトピックを示す。

これらの数値はあくまで目安です。LP全体のデザインや余白のバランスを見ながら、最適なサイズを調整してください。

本文のフォントサイズ目安

本文は、商品やサービスの詳細を伝え、ユーザーの理解を深めるための核となる部分です。小さすぎると読む気を失わせ、大きすぎると一度に表示される情報量が減り、スクロールが増える原因になります。

現在のWebデザインの標準として、PCサイトの本文は、16pxを基本とすることが最も推奨されています。これはGoogleが推奨するフォントサイズでもあり、多くのユーザーにとって読みやすく、 SEOの観点からも有利とされています。ターゲットユーザーの年齢層が高い場合は、少し大きめの17pxや18pxに設定すると、より親切なデザインになります。

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

スマートフォンは画面が小さく、縦にスクロールして読むのが基本です。PCサイトのフォントサイズをそのまま適用すると、文字が小さすぎて読めなかったり、逆に見出しが画面を埋め尽くしてしまったりと、ユーザビリティを著しく損ないます。スマホに最適化されたフォントサイズを別途設定することが必須です。

見出しのフォントサイズ目安

スマホでは、画面の横幅が限られているため、PCほど大きなジャンプ率は必要ありません。しかし、情報の区切りを明確にするためのメリハリは同様に重要です。改行が多くなりすぎないよう、バランスの取れたサイズを選びましょう。

要素フォントサイズの目安(px)役割と注意点
h1(メインキャッチコピー)24px 〜 32pxファーストビューで力強くメッセージを伝える。長文の場合は改行位置にも配慮。
h2(大見出し)20px 〜 26pxPC版よりも少し抑えめに設定し、圧迫感を減らす。
h3(中見出し)18px 〜 22px本文との差を明確にしつつ、コンテンツの流れを妨げないサイズにする。

本文のフォントサイズ目安

スマホの本文は、ユーザーが指で画面を操作しながら読むため、特に可読性が重要視されます。画面と目の距離がPCよりも近くなる傾向がありますが、文字が小さいと目を凝らす必要があり、大きなストレスを与えてしまいます。

スマホサイトの本文も、読みやすさとアクセシビリティの観点から16pxが現在の最適な基準と考えられています。かつては14pxが主流の時期もありましたが、スマートフォンの高解像度化に伴い、16pxでも十分に情報を表示できるようになりました。どのような環境でも判読できるよう、最低でも12px以上は確保するようにしてください。12px未満のフォントサイズは、多くのユーザーにとって判読が困難になり、離脱の直接的な原因となります。

離脱率を下げるランディングページ フォントサイズの決め方 5つのコツ

ランディングページの最適なフォントサイズは、PCやスマホといったデバイスごとの推奨値を設定するだけでは不十分です。コンバージョンを最大化するためには、ターゲットやデザインの目的に合わせて、より戦略的にフォントサイズを決める必要があります。ここでは、ユーザーの離脱を防ぎ、成果に繋げるための具体的な5つのコツを詳しく解説します。

コツ1 ターゲットユーザーの年齢層を考慮する

ランディングページで訴求する商品やサービスのターゲット層は誰でしょうか?フォントサイズを決める上で、ターゲットユーザーの年齢層を考慮することは最も重要な要素の一つです。年齢によって視力やWebサイトの閲覧環境は大きく異なるため、それに合わせた配慮が求められます。

例えば、10代〜20代の若年層がターゲットであれば、比較的小さなフォントサイズでも問題なく読めることが多いでしょう。しかし、40代以上、特にシニア層がターゲットの場合、小さな文字は非常に読みにくく、それだけでページを離脱する原因となります。

健康食品や資産運用、リフォームサービスなど、比較的高齢層をターゲットにするランディングページでは、本文のフォントサイズを18px以上にするなど、意図的に大きめのサイズを設定することがコンバージョン率の向上に直結します。自社のペルソナを明確にし、「その人にとって最も読みやすいサイズは何か?」という視点でフォントサイズを決定しましょう。

コツ2 行間と文字間を調整し可読性を高める

文章の読みやすさは、文字の大きさだけで決まるわけではありません。行と行の間隔(行間)や、文字と文字の間隔(文字間)も、ユーザーのストレスに大きく影響します。これらの余白を適切に調整することで、ランディングページ全体の可読性が劇的に向上します。

行間は、CSSのline-heightプロパティで調整します。一般的に、行間は文字サイズの1.5倍〜2.0倍(150%〜200%)に設定すると、最も読みやすいとされています。行間が狭すぎると文字が密集して圧迫感を与え、逆に広すぎると文章のまとまりがなくなり視線が散漫になってしまいます。

文字間は、CSSのletter-spacingプロパティで調整できます。本文については基本的にデフォルト設定のままでも問題ありませんが、見出しやキャッチコピーの文字間を少し広げることで、デザインに「抜け感」が生まれ、洗練された印象を与えることができます。ただし、文字間を詰めすぎると読みにくさの原因になるため注意が必要です。フォントサイズと合わせて余白を調整し、ユーザーがスムーズに読み進められるレイアウトを心がけましょう。

コツ3 ジャンプ率を意識して情報の優先順位を明確にする

ジャンプ率とは、本文のフォントサイズに対する見出しのフォントサイズの比率のことです。このジャンプ率をコントロールすることで、ページ内での情報の優先順位を視覚的に伝え、ユーザーを効果的に誘導することができます。

ジャンプ率が高い(見出しが本文よりかなり大きい)デザインは、ダイナミックで活気のある印象を与え、どこが重要なのか一目でわかります。キャンペーンや若者向け商材のLPに適しています。一方、ジャンプ率が低い(見出しと本文のサイズ差が小さい)デザインは、落ち着いていて上品、知的な印象を与えます。高価格帯の商品やBtoBサービスなど、信頼性を重視するLPに向いています。

ユーザーにどこを一番に見てほしいのか、どの順番で情報を伝えたいのかを意識してジャンプ率を設計することで、伝えたいメッセージが的確に届き、離脱率の低下に繋がります。以下にジャンプ率による印象の違いをまとめました。

ジャンプ率与える印象適したLPの例
高いダイナミック、活気がある、メリハリが強いセール・キャンペーン、若者向けサービス、エンタメ系
低い落ち着いている、上品、高級感、信頼性士業・コンサル、BtoBサービス、高級ブランド、コーポレートサイト

コツ4 読みやすさを担保するフォントの種類を選ぶ

フォントの種類(書体)も、ランディングページの印象と可読性を大きく左右します。Webサイトでよく使われる日本語フォントは、主に「ゴシック体」と「明朝体」の2種類です。

ゴシック体は、線の太さが均一で、シンプルで力強い印象を与えます。画面の解像度に関わらず文字が潰れにくく、高い視認性を保てるため、Webサイトの本文フォントとして最も一般的に利用されています。代表的なフォントには「ヒラギノ角ゴシック」や「メイリオ」、「Noto Sans JP」などがあります。どのフォントを選べばよいか迷った場合は、まず可読性の高いゴシック体を選んでおけば間違いありません。

一方、明朝体は、縦線が太く横線が細いという特徴があり、上品で伝統的な、あるいは知的な印象を与えます。しかし、小さなサイズで表示すると、画面上では横線がかすれて読みにくくなることがあります。そのため、明朝体は本文ではなく、高級感や信頼性を演出したい見出しや、短いキャッチコピーに限定して使用するのが効果的です。LPのブランドイメージやターゲットに与えたい印象に合わせて、最適なフォントを選択しましょう。

コツ5 CTAボタンの文字は大きくしてクリックを促す

ランディングページの最終的なゴールは、ユーザーに「購入」や「問い合わせ」などの行動(コンバージョン)をしてもらうことです。そのための最も重要なパーツがCTA(Call To Action)ボタンです。

CTAボタン内の文字は、本文や周囲のテキストよりも明らかに大きく、目立たせる必要があります。ユーザーがページをスクロールしている際に、瞬時に「ここがゴールだ」「ここをクリックすればいい」と直感的に認識できるサイズ感が理想です。具体的には、本文フォントサイズの1.2倍〜1.5倍程度を目安にすると良いでしょう。

ただし、単に大きくすれば良いというわけではありません。ボタンのデザインや配色とのバランスを考慮し、悪目立ちしすぎない範囲で視認性を高めることが重要です。CTAボタンのフォントサイズとデザインを最適化することで、クリック率は大きく改善します。ランディングページの成果を最大化するために、CTAボタンの文字サイズには細心の注意を払いましょう。

ランディングページのフォントサイズでよくある失敗例

ランディングページ(LP)のコンバージョン率を高めるには、適切なフォントサイズ設定が欠かせません。しかし、良かれと思って行った設定が、実はユーザーの離脱を招いているケースは少なくありません。ここでは、多くの制作者が陥りがちなフォントサイズに関する典型的な失敗例を3つご紹介します。自社のLPが該当していないか、ぜひチェックしてみてください。

PC基準で作成しスマホで文字が小さすぎる

最も多く見られる失敗が、PCでの見栄えを基準にフォントサイズを決定し、スマートフォンでの表示を考慮していないケースです。PCの大きな画面では適切に見えても、同じピクセル数でスマートフォンに表示されると、文字が極端に小さくなり、ユーザーは内容を読み取ることができません。

この「読めない」というストレスは非常に大きく、ユーザーは指で拡大(ピンチアウト)する手間を嫌い、ページを開いた瞬間に離脱してしまいます。特に、Googleがモバイルでの閲覧体験を重視する「モバイルファーストインデックス」を採用している現在、この失敗は検索順位の低下にも直結する致命的な問題です。

対策としては、レスポンシブデザインを前提とし、画面幅に応じて文字サイズが可変する「rem」や「vw」といった相対的な単位を使用することが推奨されます。ピクセル(px)で指定する場合でも、メディアクエリを用いて画面サイズごとに適切なフォントサイズを再設定する手間を惜しまないようにしましょう。

フォントサイズにメリハリがなく単調に見える

次に多いのが、見出しと本文のフォントサイズにほとんど差がなく、ページ全体がのっぺりとして見える失敗例です。どこが重要で、どこが補足情報なのかが一目で判断できないため、ユーザーは情報を構造的に理解することができません。

人間は文章を読む際、まず見出しを拾い読みして全体像を把握しようとします。しかし、フォントサイズにメリハリがないと、この視線誘導がうまく機能せず、ユーザーは読む気を失い、ただスクロールするだけで内容を理解せずにページを閉じてしまいます。これでは、どんなに優れたキャッチコピーや訴求力のある文章を用意しても、その魅力は伝わりません。

この問題を解決するには、「ジャンプ率」を意識することが重要です。ジャンプ率とは、本文と見出しのフォントサイズの比率のことで、この差を大きくすることで情報の階層が明確になります。以下の表を参考に、自社のLPに適切なメリハリがあるか確認してみましょう。

要素失敗例(単調で読みにくい)改善例(メリハリがあり分かりやすい)
大見出し (h2)24px32px (本文の2倍)
中見出し (h3)20px24px (本文の1.5倍)
本文 (p)16px16px (基準)

このように、見出しを本文の1.5倍〜2倍程度に設定するだけで、情報の優先順位が明確になり、ユーザーはストレスなく内容を読み進められるようになります。

強調したいあまり文字を大きくしすぎる

伝えたいメッセージがあるあまり、特定の単語や一文だけを極端に大きくしてしまうのもよくある失敗です。制作者側は「ここが一番の強みだ!」という意図で目立たせようとしますが、過度なサイズの文字はデザイン全体の調和を乱し、ユーザーに圧迫感や胡散臭い印象を与えてしまいます。

特に、セールス色が強すぎると感じたユーザーは、その瞬間に警戒心を抱き、冷静な判断ができなくなります。結果として、信頼性を損ない、コンバージョンから遠ざかってしまうのです。また、大きすぎる文字はレイアウト崩れの原因にもなり、ユーザー体験(UX)を著しく低下させます。

強調したい箇所がある場合は、文字サイズを少し大きくする程度に留め、太字にしたり、背景色を変えたり、テキストの色をアクセントカラーにしたりと、複数のデザイン要素を組み合わせるのが効果的です。文字の大きさだけで無理に目立たせようとせず、あくまでLP全体のデザインバランスを保つことを最優先に考えましょう。

まとめ

本記事では、ランディングページの離脱率を下げ、コンバージョンを高めるためのフォントサイズの決め方と5つのコツについて解説しました。ランディングページにおいてフォントサイズは、ユーザー体験を決定づける極めて重要な要素です。文字が読みにくいというだけで、ユーザーは内容を理解する前にページを閉じてしまい、貴重な機会損失に繋がります。

PC・スマホサイトともに、本文のフォントサイズは16px前後を目安に、ターゲットユーザーの年齢層を考慮して調整しましょう。さらに、見出しと本文のジャンプ率(サイズ比)を意識して情報の優先順位を明確にし、行間や文字間を適切に設定することで、ユーザーはストレスなく情報を読み進められます。

ユーザーにとって「読みやすい」と感じるフォントサイズを追求することが、信頼性の向上とコンバージョンへの第一歩です。この記事で紹介したポイントを参考に、ご自身のランディングページがユーザーにとって最適なフォントサイズになっているか、今一度見直してみてください。

この記事を書いた人

Atsushi

・Contact
ホームページ制作の
お問い合わせ

オンラインでのご相談も随時承ります!

集客についておなやみの方、
ホームページ制作をお考えの方、
ご要件が定まっていない状態からでも、
お気軽にお問い合わせください!

お電話でのお問い合わせはこちら

06-6626-9511