服のTPOと同じように選ぶ：フォント6種類の特性と場面別使い分けガイド

フォントの種類と使い分けルールを習得することで、「なんとなくかっこ悪い」「読みにくい」というデザインの悩みを、根拠を持って解消できるようになります。

フォントとは何か

フォントとは、一言でいうと「文字の衣装」だ。同じ言葉でも、スーツ姿で話すのと、Tシャツ姿で話すのとでは伝わる印象がまったく異なる。フォントも同じで、書かれている内容が同一であっても、どのフォントを使うかによってメッセージのトーンや信頼感、可読性が大きく変わる。

「どのフォントでもいい」という選択は、服装で言えば「とりあえずパジャマで商談に行く」に等しい。意図的に選ばなければ、意図せず誰かを困惑させることになる。本記事ではフォントの主要6種類を解説し、それぞれがどんな場面に適しているかを整理する。

📌 6種類のフォントカテゴリー

フォントは大きく6つのカテゴリーに分けられる。西洋のフォント分類と日本語フォントの分類は対応関係があるため、並べて理解するのが近道だ。

セリフ体（明朝体）

文字の末端に「ウロコ」と呼ばれる小さな装飾が付いているフォントだ。和文での明朝体がこれに相当する。新聞や書籍のような長文印刷物でよく使われるのは、細い横線とウロコが視線を水平方向に引っ張り、行を追いやすくするためだ。歴史的な重みと格調高い雰囲気を持つため、法律事務所・金融機関・学術誌など、権威と信頼を伝えたい場面で好まれる。

代表例：Times New Roman、Georgia、Garamond（欧文）、源ノ明朝、游明朝（和文）

サンセリフ体（ゴシック体）

「サンセリフ（sans-serif）」の”sans”はフランス語で「〜なし」。つまりウロコのないフォントだ。和文ではゴシック体がこれにあたる。線の太さが均一でシンプルなため、画面での視認性が高い。スマートフォンのUIや案内板、プレゼンスライドで圧倒的に多く使われているのは理由がある——解像度の低いディスプレイや遠方からの視認では、明朝体の細い横線がつぶれてしまうのだ。

代表例：Helvetica、Arial、Noto Sans JP、游ゴシック（和文）

モノスペース体（等幅フォント）

すべての文字が同じ横幅を持つフォントだ。「i」も「W」も同じ幅を占める。コードエディタやターミナルで使われるフォントがこれで、コードのインデントや桁揃えが崩れないという実用上の理由から生まれた。タイプライターを模したレトロな雰囲気も特徴で、技術系の印象を演出したいデザインにも使われる。

代表例：JetBrains Mono、Fira Code、Source Code Pro、Courier New

スクリプト体（筆記体・手書き体）

人間の手書きや筆使いを模したフォントだ。和文では筆書体・毛筆体がこれにあたる。結婚式の招待状、ハイブランドのロゴ、手作り感を演出したいパッケージデザインで使われる。しかし小さいサイズでは読みにくくなる弱点があり、本文には絶対に使ってはいけないカテゴリーの筆頭でもある。

代表例：Pacifico、Brush Script MT（欧文）、HG行書体、AR丸ゴシック体（和文の近似）

ディスプレイ体（装飾体）

特定のテーマや雰囲気を演出するために設計された、個性の強いフォントだ。ホラー映画のタイトルや、ファンタジー作品のロゴに使われているような、見た瞬間に世界観が伝わるものがこのカテゴリに入る。大きなサイズでのみ機能するよう設計されているため、本文での使用は想定外だ。

代表例：Bebas Neue、Impact、Lobster（欧文）

スラブセリフ体（角形セリフ体）

セリフ体の一種だが、ウロコが細い線ではなく太いブロック状になっているフォントだ。力強さと存在感が特徴で、Western映画のポスターや新聞の見出し、ブランドロゴで使われる。セリフ体の格調とサンセリフ体の視認性を折衷したような個性を持つ。

代表例：Rockwell、Clarendon、Courier（等幅との混在に注意）

💡 場面別使い分けガイド（活用事例）

「どのカテゴリかわかったとしても、実際どう選ぶか」という問いに答えるのが場面別ガイドだ。

ある中小企業のWebリニューアル案件で、担当者は「なんとなくフォーマルにしたい」という理由だけで本文に明朝体を選んだ。しかし完成したサイトをスマートフォンで確認すると、文字が細かすぎて読めない。原因はディスプレイ環境でのセリフ体の視認性問題だった。印刷物と画面では、同じフォントでもまったく異なる見え方をする——この事実を知っているかどうかだけで、結果が大きく変わる。

場面・媒体	推奨カテゴリ	具体的なフォント例	理由
書籍・雑誌の本文（印刷）	セリフ体 / 明朝体	游明朝、源ノ明朝、Georgia	ウロコが視線を水平誘導し、長文の可読性を高める
Webサイト・アプリの本文	サンセリフ体 / ゴシック体	Noto Sans JP、游ゴシック、Helvetica	画面の解像度問題でセリフの細線がつぶれるのを防ぐ
プレゼンスライドの見出し	太めのサンセリフ体	Noto Sans JP Bold、Meiryo Bold	遠距離でも瞬時に読み取れる視認性が必要
コードブロック・技術資料	モノスペース体	JetBrains Mono、Fira Code、Courier New	インデント・桁揃えの崩れ防止と技術的文脈の演出
結婚式・パーティー招待状	スクリプト体	Pacifico、Pinyon Script	手作り感・温かみ・特別感の演出
ブランドロゴ・大型看板	ディスプレイ体 / スラブセリフ体	Bebas Neue、Rockwell	大サイズ表示での存在感と個性の訴求
法律・金融・格調ある印刷物	セリフ体 / 明朝体	Times New Roman、游明朝	歴史的な格調と信頼感の演出
子ども向け教材・UDデザイン	サンセリフ体（UD系）	BIZ UDゴシック、UD新ゴ	似た字形（「ロ」と「口」など）の判別しやすさ

✅ フォントペアリングの基本ルール

1つのデザインで複数のフォントを使うとき——たとえばタイトルと本文で異なるフォントを使うケース——には「ペアリング」の考え方が必要だ。闇雲に組み合わせると、バラバラな印象になる。

原則は「コントラストと調和の両立」だ。似た系統のフォント同士を並べると単調に、かけ離れた系統を並べると雑然になる。セリフ体の見出し＋サンセリフ体の本文、あるいはその逆の組み合わせが長く使われ続けているのは、視覚的なコントラストが生まれつつも、どちらも「テキスト用途向け」という共通点で調和するからだ。

フォントの使用数は1デザインにつき原則2〜3種類まで。それ以上使うと「フォントコレクター」になってしまい、メッセージより素材が目立つという本末転倒が起きる。

組み合わせパターン	見出し	本文	向いているデザイン
クラシック対比	セリフ体（太）	サンセリフ体（細）	雑誌・ブログ・ランディングページ
モダン統一	サンセリフ体（太）	サンセリフ体（細）	テックスタートアップ・アプリUI
格式統一	セリフ体（大）	セリフ体（小）	法律事務所・金融レポート・学術誌
アクセント添加	ディスプレイ体	サンセリフ体（細）	イベントポスター・ロゴ周辺のコピー

🔥 ハマりポイント（落とし穴と回避策）

① 「明朝体＝上品」だと思って画面に使う

症状：Webサイトの本文を明朝体にしたら、スマートフォンで細すぎて読めない。

原因：印刷物ではきれいに見えた明朝体の細い横線が、液晶ディスプレイの解像度では「かすれ」として表示される。特にRetina非対応の環境で顕著だ。

対処法：画面用途にはサンセリフ体（ゴシック体）を選ぶ。格調を出したいなら、見出しにのみセリフ体を使いつつ、本文はサンセリフ体に切り替えるハイブリッド構成にする。

② 日本語フォントで英文を書く

症状：MS ゴシックやメイリオで英字を書くと、文字間隔が不自然に広く見える。

原因：日本語フォントに含まれる英字グリフは「全角幅」または「半角幅の均一設定」で作られており、欧文専用フォントが持つカーニング（字間調整）情報が存在しない。

対処法：英文には必ず欧文フォントを使う。日英混在コンテンツでは、欧文部分と和文部分でフォントを分けて指定する（CSSの font-family スタックが有効）。

③ スクリプト体・ディスプレイ体を本文に使う

症状：「個性的で面白い」と思ってスクリプト体で本文を書いたら、読者が読むのをやめた。

原因：スクリプト体とディスプレイ体は「大きく、少ない量を見せる」ために設計されており、小サイズの連続テキストには対応していない。

対処法：これらのカテゴリは見出し・ロゴ・1〜2行のキャッチコピーにのみ使う。「使いたいから使う」ではなく「この場面に必要か」を先に問う。

④ 等幅フォントを本文文章に使う

症状：「コード感があってかっこいい」とモノスペースで本文を書いたら、読むのにエネルギーが要る文章になった。

原因：等幅フォントはすべての文字が同じ幅を取るため、文字間のリズムが生まれない。長文では単調さと疲労感が積み重なる。

対処法：モノスペースはコードブロック・ターミナル出力・数値の桁揃えに限定する。

🚀 取り込み方（導入ステップ）

フォント選びの感覚を身につけるには「見て→使って→比べる」サイクルを回すのが最も効率的だ。知識として知っているだけでは、いざ選ぶときに手が止まる。

今日（5分でできること）
Google Fonts（fonts.google.com）にアクセスし、「Noto Sans JP」と「Noto Serif JP」を並べて表示し、テキストを自分のコンテンツに置き換えて見比べてみる。たったこれだけで「画面でのセリフ体とサンセリフ体の違い」が体感できる。

今週
手元のデザイン・資料・スライドを1つ選び、フォントを「今回学んだカテゴリの正しい選択」に置き換えてみる。変更前後を並べてスクリーンショットを撮ると、判断力が具体的に上がる。

今月
制作物に対して「このフォントを選んだ理由」を言語化する習慣をつける。「なんとなくかっこいい」ではなく、「長文印刷物なのでセリフ体を選んだ」「画面用途のためサンセリフ体にした」と説明できるようになると、他者へのフィードバックにも使える知識になる。

Web開発者であれば、font-family スタックの設定に取り組むのもよい。日本語フォントのフォールバックを適切に設定することで、環境依存のフォント崩れを防げる。

/* 推奨：日英混在Webサイトのフォントスタック例 */
body {
  font-family:
    'Noto Sans JP',     /* Google Fonts: 日本語 */
    'Helvetica Neue',   /* macOS向け欧文 */
    Arial,              /* Windows向け欧文 */
    sans-serif;         /* 最終フォールバック */
}

code, pre {
  font-family:
    'JetBrains Mono',
    'Fira Code',
    'Courier New',
    monospace;
}

まとめ

フォントは「どれでも同じ」ではなく、カテゴリごとに設計思想と得意な場面が異なる。この記事を読んだあなたは、以下の判断を根拠をもって下せるようになったはずだ。

印刷の長文 → セリフ体 / 明朝体
画面の本文 → サンセリフ体 / ゴシック体
コード・技術 → モノスペース体
招待状・手作り感 → スクリプト体（本文には使わない）
ロゴ・大型ビジュアル → ディスプレイ体 / スラブセリフ体

服のTPOと同じように、フォントにも「場に合った選択」がある。選ぶ根拠を持てるようになれば、デザインは「感性の産物」ではなく「判断の積み重ね」に変わる。

Rui Software

黙り虫、壁を破る