02-03_タイポグラフィ

出典: 制作部署マニュアル タイポグラフィ（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

タイポグラフィが読みやすさの90%を決める

色やレイアウトより、フォント選びと文字組みでサイトの印象は決まる。素人とプロの差が一番出るのがここ。

---

フォントの種類と用途

セリフ体（明朝・Serif）

• 文字の端に「ヒゲ」がある
• 印象：上品・伝統・知的・信頼
• 用途：高級ブランド、メディア、士業、フォーマル
• 代表：明朝体、Times New Roman、Playfair Display、Noto Serif JP

サンセリフ体（ゴシック・Sans-serif）

• ヒゲなし・直線的
• 印象：モダン・親しみやすさ・読みやすさ
• 用途：Webサイト全般（特にコーポレート・テック・SaaS）
• 代表：ゴシック体、Helvetica、Inter、Noto Sans JP

ハンドライティング・装飾系

• 印象：個性・親しみ・カジュアル
• 用途：ロゴ・見出しのみ（本文には絶対使わない）
• 代表：Pacifico、Permanent Marker

モノスペース（等幅）

• 全ての文字が同じ幅
• 印象：技術的・コード感
• 用途：コードブロック、技術記事
• 代表：JetBrains Mono、SF Mono、Source Code Pro

---

Webで使う日本語フォントの推奨

1. Noto Sans JP（無料・最強の汎用フォント）

• Googleが提供・全Webサイトで読み込み可
• ウェイト：100 / 300 / 400 / 500 / 700 / 900
• 用途：ほぼ全業種で使える万能選手
• TERASUの第一推奨

2. Noto Serif JP（無料・高級感）

• 明朝体の代表格
• 用途：士業・高級宿・ブランド・メディア

3. ヒラギノ角ゴ（macOS標準）

• Macで美しく表示される
• Web fontじゃないのでCSSで -apple-system 経由で指定

4. メイリオ / 游ゴシック（Windows標準）

• Windowsで安定
• CSSで system-ui フォールバック

5. M PLUS 1p / Zen Maru Gothic（無料・装飾系）

• 個性的な無料日本語フォント
• 飲食・カフェ・サロンに合う

---

Webフォント読み込み（Google Fonts）

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Meiryo", sans-serif;
}

→ 必ずシステムフォントのフォールバックを入れる（読み込み失敗時の保険）。

---

フォントサイズの階層（タイプスケール）

モダンWeb標準（1.250倍 / Major Third）

役割	サイズ	用途
h1 (ヒーロー)	48-64px	ページタイトル・キャッチコピー
h2 (セクション)	32-40px	大きい見出し
h3 (サブ)	24-28px	中見出し
h4	20-22px	小見出し
Body (本文)	16-18px	本文・段落
Small	14px	キャプション・補足
XS	12px	著作権・メタ情報

スマホ版（少し小さく）

• 本文は最低 14px 死守（小さくしすぎNG）
• ヒーロー h1 は 36-48px に縮小
• スマホでの可読性が最優先

---

行間（line-height）の黄金則

テキスト種類	推奨 line-height
本文（長文）	1.7 〜 1.9
短い段落	1.5 〜 1.6
見出し	1.2 〜 1.3
タイトル（巨大）	1.0 〜 1.1

body { line-height: 1.75; }
h1 { line-height: 1.2; }

→ 行間が狭いと「圧迫感」、広すぎると「散漫」。日本語は1.7〜が読みやすい。

---

文字間（letter-spacing）の調整

用途	letter-spacing
本文	0.02em（やや広め推奨）
見出し（大きい）	-0.01em 〜 0em（タイトに）
英字の小見出し（uppercase）	0.1em 〜 0.2em（広く）
ラベル・タグ	0.05em

英字 uppercase の鉄則

.label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
}

→ 「FEATURES」「ABOUT US」みたいなラベルは必ず字間を広げる。プロっぽさが激変。

---

1行の文字数

デバイス	推奨文字数
PC（本文）	35〜50文字 / 行
スマホ（本文）	20〜30文字 / 行
PC（見出し）	20文字以内

→ 1行が長すぎると目が泳ぐ。CSSで max-width: 32em; 等で制限する。

---

フォントウェイトの使い方

Weight	数値	使い方
Light	100-300	大きい見出し・装飾的（本文NG）
Regular	400	本文の基本
Medium	500	やや強調・サブ見出し
Bold	700	見出し・強調
Black	900	ヒーロー・大見出しのインパクト

注意点

• 日本語のLight（細字）は本文で使うと読みにくい → 400以上推奨
• 1ページ内で使うウェイトは 3〜4種類まで に絞る

---

モダンWebタイプの基本セット例

:root {
  --font-sans: "Noto Sans JP", -apple-system, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #1a1a1a;
}

h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.3;
}

p { font-size: 16px; line-height: 1.8; margin-bottom: 1.5em; }

.label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-size: 12px;
}

→ これコピペするだけでプロっぽい組み方になる。

---

タイポでやってはいけないNG

NG	何が悪い
1ページに5種類以上のフォント	カオス・統一感ゼロ
本文12px以下	読みにくい（特にスマホ）
中央揃えの長文	目が疲れる・読まれない
行間1.3以下の長文	圧迫感
全部太字 / 全部細字	メリハリゼロ
日本語Lightで本文	読めない（特に細い液晶で）
イタリック（斜体）の日本語	フォントが対応してないと崩れる
Webセーフでないフォントを直接指定	端末で表示されない

---

チェックリスト：タイポ完成度

• [ ] フォントは2-3種類以内に絞ってる
• [ ] 本文サイズは16-18px
• [ ] 行間は1.7-1.9（日本語本文）
• [ ] 見出しと本文の階層差（コントラスト）が明確
• [ ] 1行の文字数が35-50字以内
• [ ] スマホでも読みやすい
• [ ] ラベル系は字間広く設定
• [ ] フォントの読み込み速度OK（preconnect、display=swap）

---

参考：タイポが美しいサイト

サイト	学べる点
Medium	長文の本文タイポの教科書
Stripe	見出しと本文のリズム
The New York Times	明朝体の極み
Vercel	英文タイポの参考
Notion	UIのフォント階層