フォント・書体の選び方｜印象を決める基礎

結論：ゴシック体を軸に、印象で変化をつけ、書体は2〜3種類に絞る

これからホームページを作るとき、あるいは作り直すとき、「フォントは何を選べばいいのか」で手が止まる方は少なくありません。フォントの種類は無数にあり、専門用語も多く、どこから手をつければよいのか分かりにくい分野です。そこで、最初に結論をお伝えします。本文には読みやすいゴシック体を選び、与えたい印象に応じて見出しや一部に変化をつけ、サイト全体で使う書体は2〜3種類までに絞る。これだけで、多くの中小事業者のサイトは十分に整って見えます。

なぜこう言い切れるのか。フォント選びで本当に大切なのは「珍しい書体や凝った書体を使うこと」ではなく、「読み手がストレスなく内容を受け取れること」と「事業の雰囲気に合っていること」の2点だからです。この2点さえ外さなければ、奇をてらわない標準的な書体でも、サイトは清潔感があり信頼できる印象になります。逆に、個性的な書体を多用したり、読みにくい設定のまま公開したりすると、内容がよくても素人っぽく見えたり、そもそも読んでもらえなかったりします。

本記事では、まず「フォントが読み手に与える印象」という土台から始め、ゴシック体と明朝体の使い分け、本文サイズ・行間・字間という可読性の具体的な整え方、見出しと本文の関係、ブランドに合う書体の決め方、和文と欧文の組み合わせ、フォント数を絞る理由、そしてデバイスフォントとWebフォントの違いまでを順に解説します。特定の書体を「これが正解」と断定することはせず、あくまで自分で判断できるようになるための考え方をお渡しします。なお、フォントを含めたホームページ制作全体の費用感を先に把握したい方はホームページ制作費用の相場【2026年版】もあわせてご覧ください。

フォントが印象を決める：同じ文章でも伝わり方が変わる

フォント選びを軽視できない理由は、フォントが単なる文字の見た目にとどまらず、読み手の受け取る印象そのものを左右するからです。まったく同じ文章でも、選んだ書体によって「信頼できそう」「親しみやすそう」「古くさい」「読みにくい」といった印象が変わります。これは感覚的な話ではなく、文字の読みやすさが内容の評価にまで影響することが、認知心理学の研究でも示されています。たとえば、ある大学の研究では、読みにくい書体で提示された情報は、同じ内容でも難しく・面倒に感じられやすいと報告されています。フォントは、内容を伝える前の「第一印象」を決めていると言えます。

では、書体はどのような印象を生むのでしょうか。大きく整理すると、線の特徴や形が、次のような連想につながります。

• 線が細く、はらいやうろこ（装飾）がある…落ち着き、知性、誠実さ、格式。書籍や新聞で長く使われてきたため、信頼感と結びつきやすい。
• 線が太く均一で、装飾が少ない…現代的、力強い、シンプル、はっきりしていて分かりやすい。視認性が高く、瞬時に読ませたい場面に向く。
• 角に丸みがある…やわらかさ、親しみやすさ、安心感。子ども向けや、温かみを伝えたいサービスに合う。
• 線に強弱があり手書き風…個性、感情、特別感。ただし読みにくくなりやすく、使いどころを選ぶ。

ここで大切なのは、「自社の事業は、どの印象を持たれたいか」を先に考えることです。たとえば、士業や医療機関のように信頼性が何より重要な事業であれば、落ち着いた印象の書体が合います。一方、飲食店や子ども向けサービスのように親しみやすさを打ち出したい事業であれば、やわらかい印象の書体が向きます。フォントは「かっこいいかどうか」で選ぶのではなく、「与えたい印象に合っているか」で選ぶ。この視点を持つだけで、迷いはぐっと減ります。

ゴシック体と明朝体の違いを理解する

日本語の書体選びで最初に押さえるべきなのが、ゴシック体と明朝体という2つの大きな分類です。和文フォントの多くはこのどちらかに属しており、両者の性格を理解しておけば、書体選びの大半は判断できるようになります。

明朝体は、縦線が太く横線が細いという特徴を持ち、横線の端や曲がり角に「うろこ」と呼ばれる三角形の小さな飾りがつきます。筆で書いた文字の名残があり、線に強弱があるため、文章に抑揚と品が生まれます。長い文章を落ち着いて読ませたいときに力を発揮し、書籍・新聞・公式文書などで長年使われてきました。その歴史的背景から、知的・誠実・格式といった印象と結びつきやすい書体です。

ゴシック体は、縦線も横線もほぼ同じ太さで、装飾がほとんどありません。文字の輪郭がはっきりしているため、遠くからでも小さくても形を認識しやすく、視認性に優れます。ぱっと見て内容をつかませたい見出しや、画面上のボタン・ナビゲーション、スマートフォン表示などに向いており、現代的で力強く、親しみやすい印象を与えます。

ここで覚えておきたいのが、可読性と視認性という2つの言葉です。可読性は「長い文章をどれだけ楽に読み続けられるか」、視認性は「ぱっと見てどれだけ早く認識できるか」を指します。明朝体は可読性、ゴシック体は視認性に強い、と整理しておくと、後の使い分けがすっきり理解できます。

Webサイトの本文はゴシック体が基本になる理由

前項を踏まえると、「では、ホームページの本文はどちらにすべきか」という疑問が出てきます。結論として、画面で読むWebサイトの本文は、ゴシック体を基本にするのが無難です。紙とデジタルでは、書体の見え方が変わるためです。

紙の印刷物は解像度が非常に高く、明朝体の細い横線やうろこといった繊細な部分まできれいに再現できます。だからこそ書籍や新聞では明朝体が美しく映え、長文も読みやすく組めます。一方、Webサイトはパソコンやスマートフォンの画面で表示されます。画面は紙に比べると細部の表現に限界があり、特に明朝体の細い横線は、画面サイズや表示条件によってかすれたり、つぶれたりして読みにくくなることがあります。とりわけ画面の小さいスマートフォンでは、線の太さが均一なゴシック体のほうが安定して読めます。

近年はスマートフォンからの閲覧が中心で、サイトによってはアクセスの大半をスマートフォンが占めます。つまり「小さな画面でも安定して読めるか」が、本文の書体選びでは最優先事項になります。この点でゴシック体は有利であり、本文の標準として広く使われているのには明確な理由があるわけです。スマートフォン表示そのものへの対応についてはスマホ対応（レスポンシブ）の重要性でも詳しく解説しています。

もちろん、これは「明朝体を使ってはいけない」という意味ではありません。落ち着きや格式を出したいページ、たとえば代表あいさつや企業理念、こだわりを語る読み物のようなコンテンツでは、明朝体を部分的に使うことで、ぐっと品のある印象に仕上がります。基本はゴシック体に置きつつ、意図を持って明朝体を差し込む。この使い分けが、実務では扱いやすい考え方です。

可読性を整える：本文サイズ・行間・字間・文字色

どんなに良い書体を選んでも、文字が小さすぎたり、行が詰まりすぎていたり、背景との色のコントラストが弱かったりすれば、読んでもらえません。書体そのものと同じくらい大切なのが、サイズ・行間・字間・色といった「組み方」の設定です。ここでは、可読性を整えるための具体的な目安を、本文サイズ・文字色、行間・字間、一行の文字数の順に見ていきます。これらは細かな数値の話に見えますが、考え方さえ理解しておけば、出来上がったサイトを「読みやすいかどうか」という視点でチェックできるようになります。

本文サイズと文字色

本文のフォントサイズは、一般的にパソコン表示で16px前後が標準とされています。主要なブラウザの初期値も16pxに設定されており、GoogleやAppleも本文に14〜16px程度を推奨しています。読みやすさを優先するなら、16〜18pxの範囲で調整するとよいでしょう。「少し大きいかな」と感じるくらいがちょうどよく、小さくしすぎると、内容がよくても読む前に離脱される原因になります。スマートフォンでは画面が小さい分、相対的に近い距離で見るため多少小さくても読めますが、それでも本文はおおむね15〜16px以上を確保したいところです。

見出しと本文では、サイズに明確な差をつけます。すべてが同じ大きさだと、どこが重要なのか分からず、のっぺりとした印象になります。一例として、次のような段階づけが分かりやすい構成です。

文字色も可読性を左右します。本文を真っ黒（#000000）にすると、白い背景とのコントラストが強すぎて目が疲れやすいと感じる人もいます。やや濃いめのグレー（たとえば#333333前後）にすると、視認性を保ちながら、落ち着いた読み心地になります。逆に、薄いグレーの文字を白に近い背景に置くなど、コントラストが弱すぎる配色は読みにくく、高齢の方や視力の弱い方には特に負担になります。背景と文字は、しっかり濃淡の差をつけることが基本です。

本文サイズと文字色を整えたら、次は文字どうしの間隔です。読み心地を大きく左右するのが行間と字間で、ここが詰まりすぎていると、文字は適切なサイズでも「ぎゅうぎゅうで読みにくい」印象になります。逆に空けすぎると間延びするため、ほどよいゆとりを探るのがポイントです。

行間（行と行の間隔）

行間は、CSSでは行の高さ（line-height）として指定し、一般的に文字サイズの1.5〜2.0倍が読みやすいとされます。行間が文字サイズと同じ（1.0倍）だと行同士が接近しすぎて、目が次の行に移りにくくなります。情報を多く詰め込みたいページでは1.5倍ほど、ゆったり読ませたい読み物では1.8〜2.0倍ほど、というように、コンテンツの性質に合わせてルールを決めるのがおすすめです。迷ったら1.7倍前後を起点に調整するとよいでしょう。

字間（文字と文字の間隔）

字間は、CSSでは文字間隔（letter-spacing）として指定します。和文は初期状態でも比較的読みやすく組まれていますが、わずかに広げると（文字サイズの5〜10%程度、emでいえば0.05〜0.1em前後）、ゆとりが生まれて上品で読みやすい印象になります。説明文では0.06em程度がなじみやすいという目安もあります。広げすぎると逆に一文字ずつが間延びして読みにくくなるため、「ほんの少し空ける」くらいの感覚が適切です。

一行の文字数（行長）

見落とされがちですが、一行が長すぎると、行の終わりから次の行の頭へ視線を戻す際に迷子になりやすく、読みづらくなります。和文では、一行あたりおおむね35〜50文字程度が読みやすい範囲とされます。横幅の広いパソコン画面では、本文の表示領域に適度な最大幅を設けて、一行が長くなりすぎないようにする配慮が効きます。これらの設定は専門的に見えますが、実際の調整は制作会社が担う部分です。大切なのは「詰まりすぎず、ゆとりを持たせる」という方向性を理解しておくことです。

見出しと本文の使い分けでメリハリを出す

読みやすいページは、見出しと本文の役割がはっきり分かれています。見出しは「ぱっと目に留めて、何の話かを伝える」役割、本文は「落ち着いて内容を読ませる」役割です。この性格の違いを、書体やサイズ、太さで表現すると、ページに自然なリズムが生まれます。

定番の組み合わせのひとつが、「見出しはゴシック体、本文もゴシック体（ただし太さで差をつける）」という構成です。視認性の高いゴシック体で統一しつつ、見出しは太く大きく、本文は標準の太さで、という使い分けにすれば、シンプルでまとまりよく、どんな業種でも扱いやすく仕上がります。もうひとつの選択肢が、「見出しはゴシック体、本文は明朝体」という組み合わせです。視認性の高い見出しで目を引き、可読性の高い明朝体で本文をじっくり読ませる、という狙いがはまる構成で、落ち着きや上質感を出したいサイトに向きます。

逆に避けたいのが、見出しと本文の差がほとんどない状態です。すべてが同じ書体・同じサイズ・同じ太さだと、どこが重要なのか伝わらず、読み手は内容の構造をつかめません。メリハリをつける手段は、書体を変えることだけではありません。むしろ同じ書体のまま、太さ（ウェイト）と大きさを変えるだけでも、十分にメリハリは出せます。書体を増やさずに変化をつけられるこの方法は、後述する「フォント数を絞る」という考え方とも相性がよく、実務では最初に試したい手段です。

もうひとつ、見出しまわりで意識したいのが、見出しの前後にとる余白です。見出しは「ここから新しい話題が始まる」という合図でもあるため、直前の段落とのあいだに十分な間隔をとると、話の区切りが視覚的に伝わりやすくなります。文字を大きくすることと、周囲に余白をとること。この2つはセットで考えると、見出しが本来の役割を果たしやすくなります。フォントの選定だけでなく、その「置き方」まで含めて読みやすさを設計する、という意識を持っておくとよいでしょう。

和文フォントと欧文フォントの組み合わせ

日本語のサイトでも、英数字（アルファベットや数字）は必ず登場します。会社名、メールアドレス、電話番号、価格、英語のキャッチコピーなど、欧文が混じる場面は多くあります。ここで知っておきたいのが、和文フォントと欧文フォントは、本来それぞれ専用に設計されているという点です。

多くの和文フォントには英数字も含まれていますが、和文に付属する英数字は、ひらがなや漢字とのバランスを優先して設計されているため、欧文専用フォントに比べると見栄えが劣ることがあります。特に、英語のキャッチコピーやロゴ周りなど、アルファベットを目立たせたい箇所では、欧文専用のフォントを別に指定すると、ぐっと洗練された印象になります。一方、本文のように和文と英数字が細かく入り混じる箇所では、わざわざ分けず、和文フォント任せにしたほうが自然にまとまることも多くあります。

とはいえ、ここを細かく作り込むのは制作の領域です。中小事業者として押さえておきたいのは、次の2点で十分です。

• 英数字が混じると、和文だけのときと印象が変わることがあると知っておく。価格や英語コピーの見え方は、確認しておくとよい。
• 欧文にも、ゴシック体にあたるサンセリフ体と、明朝体にあたるセリフ体がある。和文がゴシック体なら欧文もサンセリフ体、というように雰囲気をそろえると統一感が出る。

和文と欧文の相性まで配慮できると、サイトの仕上がりは一段洗練されます。ただ、これは「分かっていると望ましい」レベルの話であり、まずは本文の読みやすさを優先して問題ありません。

フォント数を絞る：2〜3種類で統一感を出す

初心者が陥りやすい失敗のひとつが、いろいろな書体を使いたくなることです。しかし、サイト全体で使う書体は、2〜3種類までに絞るのが鉄則です。書体が増えるほど、ページは雑然と見え、ブランドとしての一貫性が失われていきます。プロのデザインほど、使う書体は驚くほど少ないものです。

具体的には、次のような構成で十分にまとまります。

1. 本文用のゴシック体を1つ決める。これがサイトの基本となり、最も多く使われる。
2. 必要なら、見出し用にもう1つ。本文と同じ書体の太字でまかなえるなら、増やさなくてよい。
3. 欧文を作り込みたいなら、英数字用に1つ。ロゴや英語コピーの見栄えを上げたいとき。

ここで誤解されがちなのが、太さ（ウェイト）の違いは「別の書体」には数えないという点です。同じゴシック体の中に、細字・標準・太字といった複数の太さが用意されていることが多く、これらを使い分けても「1種類」のままです。つまり、書体を増やさなくても、太さと大きさの組み合わせだけで、見出し・本文・補足といった役割の差は十分に表現できます。まずは1書体を太さで使い分ける、という発想で組み立てると、自然とまとまりのあるサイトになります。

「種類が少ないと地味にならないか」と心配する必要はありません。むしろ、限られた書体を、サイズ・太さ・色・余白で整然と使い分けたページのほうが、洗練されて見えます。フォントの数で個性を出すのではなく、選んだ書体を丁寧に使い切ることが、完成度を高める近道です。

デバイスフォントとWebフォントの関係

書体の種類を決めたら、次に関わってくるのが「その書体を、どうやって閲覧者の画面に表示するか」という仕組みの話です。大きく分けて、デバイスフォントとWebフォントの2つの方法があります。なお、Webフォントの導入や設定は専門的な領域のため、本記事では考え方の整理にとどめ、詳細には立ち入りません。

デバイスフォントは、閲覧者のパソコンやスマートフォンに、もともとインストールされている書体を使う方法です。游ゴシックやヒラギノ、メイリオといった標準的な書体がこれにあたります。端末にある書体をそのまま使うため、表示が速く、追加の費用もかからないのが大きな利点です。一方で、端末によって入っている書体が異なるため、人によって見え方が多少変わる可能性があります。

Webフォントは、サーバー側に置かれた書体データをブラウザが読み込んで表示する方法です。GoogleフォントのNoto Sans JPなどが代表例です。どの端末でもほぼ同じ見た目になり、選べる書体の幅が広いのが利点ですが、書体データを読み込む分だけ、表示が重くなりがちというデメリットがあります。

どちらを選ぶべきかは、何を優先するかによります。表示速度や手軽さを重視するならデバイスフォント、ブランドとして見た目を厳密にそろえたいならWebフォント、というのが基本的な考え方です。多くの中小事業者のサイトでは、読みやすい標準的なゴシック体を選べば、デバイスフォントでも十分にきれいで信頼感のある仕上がりになります。「凝った書体でブランドを表現したい」という明確な狙いがある場合に、Webフォントを検討する、という順番で問題ありません。

よくあるフォント選びの失敗例

最後に、中小事業者のホームページでありがちな、フォントまわりの失敗例を挙げておきます。いずれも、知識がないまま見た目の好みだけで進めてしまうと起こりがちなものですが、事前にパターンを知っておくだけで、多くは未然に避けられます。公開後に「なんとなく読みにくい」「素人っぽい」と感じたときの、点検リストとしても活用してください。

書体を使いすぎて、ちぐはぐになる

「目立たせたいから」と、見出しごとに違う書体を使ったり、装飾的な書体を多用したりすると、ページ全体に統一感がなくなり、かえって素人っぽく見えます。前述のとおり、書体は2〜3種類までに絞るのが基本です。

スマートフォンでの読みやすさを軽視する

パソコンの大きな画面で確認しただけで満足し、スマートフォンでの見え方を確認しないと、本文が小さすぎる・行間が詰まりすぎる・明朝体がかすれる、といった問題に気づけません。アクセスの多くがスマートフォンである以上、必ず実機で確認する必要があります。

装飾を優先して、読みにくくなる

個性的な手書き風の書体や、細すぎる書体を本文に使うと、雰囲気は出ても肝心の内容が読みにくくなります。装飾性の高い書体は、ロゴやごく短いキャッチコピーなど、ピンポイントで使うにとどめ、本文には読みやすさを最優先した書体を使うのが鉄則です。

フォントのライセンスを確認しない

Webフォントや配布フォントの中には、商用利用に条件があるものや、Webサイトでの使用が許可されていないものもあります。気に入った書体を見つけても、利用規約（ライセンス）を確認せずに使うと、後でトラブルになりかねません。制作会社に任せる場合は問題になりにくいですが、自分で書体を持ち込む際は注意が必要です。

本文の文字色のコントラストが弱い

おしゃれに見せたいと、薄いグレーの文字を明るい背景に置くと、読みにくくなります。特に高齢の方や視力の弱い方には大きな負担です。本文は背景としっかり濃淡の差をつけ、誰にとっても読める配色にすることが、結果的に成果にもつながります。

まとめ：迷ったら「読みやすさ」と「印象の一致」に立ち返る

ここまで、フォントが与える印象から、ゴシック体と明朝体の使い分け、可読性の整え方、ブランドに合う書体の選び方、フォント数を絞る考え方、デバイスフォントとWebフォントの違い、そして失敗例までを解説してきました。情報量は多くなりましたが、判断に迷ったときに立ち返るべき軸は、突き詰めれば2つだけです。「読み手がストレスなく読めるか」と「事業に与えたい印象と一致しているか」です。この2点を外さなければ、標準的な書体でも、サイトは十分に整い、信頼できる印象になります。

実務的な進め方を改めて整理すると、次のようになります。本文には読みやすいゴシック体を選び、本文サイズは16px前後、行間は1.5〜2.0倍、字間はわずかに広げる。見出しは太さと大きさで本文と差をつけ、書体は2〜3種類までに絞る。落ち着きを出したいページでは明朝体を部分的に使い、スマートフォンでの見え方を必ず確認する。これだけで、フォントまわりの基本は十分に押さえられます。

とはいえ、これらを自分ですべて設定する必要はありません。書体選びや組み方の調整は、制作会社が得意とする領域です。本記事の知識は、提案された書体やデザインを理解し、納得して判断するための土台としてお使いください。フォントを含めデザイン全般を相談できる制作会社の選び方はホームページ制作会社の選び方で、そもそもホームページを持つ意義については中小企業にホームページが必要な理由で詳しく解説しています。既存サイトの書体や印象を見直したい方はホームページリニューアルの進め方もあわせてご覧ください。

私たち格安HP屋（東京都千代田区神保町）は、2020年の創業以来、全国の中小事業者・個人事業主のホームページ制作をお手伝いしています。読みやすさとブランドに合った書体選びを含め、デザインから公開後の運用までを一貫してご相談いただけます。料金は税込・追加料金なし・修正無制限で、新規制作は25万円、リニューアルは30万円、ランディングページは8万円。サーバー・ドメインの実費（年1〜2万円程度）以外に追加費用はかかりません。最短2週間で公開可能です。「どんな書体が自社に合うのか分からない」という段階のご相談も歓迎します。ご連絡はメール（info@kakuyasuhp.com）にて承っております。