タイポグラフィとは何か？なぜ文字の「太さ」と「大きさ」が大事なのか

結論から言うと、タイポグラフィとは「文字の太さ・大きさ・余白で情報の優先順位を作る設計」です。読む人は、まず大きく太い文字に目を留め、次に標準の本文を読み、最後に小さい注釈を確認します。この自然な視線の流れを、文字のスタイルだけで設計できるのがタイポグラフィの力です。

新聞を思い浮かべてください。一面のいちばん上には特大の「大見出し」があり、その下に少し小さい「中見出し」、さらに細かい「本文」が続きます。読者は文字の大きさと太さを見ただけで、どれが重要でどれが詳細かを一瞬で判断しています。商品ページもまったく同じで、見出し・本文・注釈を文字のスタイルで区別すると、読み手は迷わず情報をたどれます。

フォントウェイト（文字の太さ）の基本：400・500・700の使い分け

フォントウェイトとは文字の太さのことで、数値で管理します。基本は3段階だけ覚えれば十分です。400（Regular）は本文、500（Medium）は小見出しや強調、700（Bold）は大見出しに使います。太さを2〜3種類に絞ることで、ページ全体に一貫した「強弱のルール」が生まれます。

サイズとウェイトで「情報の3段階」を作る図解

見出し・本文・注釈は、サイズとウェイトの両方を変えると一気に区別がつきます。下の図は、同じ内容を3段階の階層で並べたものです。大きさと太さの差（=ジャンプ率）が大きいほど、優先順位がはっきり伝わります。

行間（line-height）はどれくらいが読みやすい？

結論として、本文の行間（line-height）は1.6〜1.8が読みやすい目安です。行間とは文字の上下の余白のことで、狭すぎると窮屈で目が滑り、広すぎると行同士のつながりが切れて読みにくくなります。文章量の多い説明文ほど、ゆとりのある行間が効きます。

• 本文（長め）：line-height 1.7〜1.8。たっぷりの余白で読み疲れを防ぐ
• 小見出し・短い文：line-height 1.4〜1.5。まとまり感を出す
• 大見出し（1〜2行）：line-height 1.2〜1.3。詰めて塊として見せる
• 字間（文字同士の間隔）は日本語の本文では基本いじらず、見出しだけ気持ち詰めると締まる

ジャンプ率とは？見出しと本文の「大きさの差」で印象が決まる

ジャンプ率とは、見出しと本文の文字サイズの差のことです。差が大きい（高ジャンプ率）ほど元気でメリハリのある印象に、差が小さい（低ジャンプ率）ほど上品で落ち着いた印象になります。化粧品ブランドの世界観に合わせて、この差を意図的にコントロールします。

ゴシック体と明朝体、どちらを使う？

結論として、画面で読む商品ページの本文はゴシック体が基本、ブランドの世界観や上質さを出したい見出し・コピーには明朝体が効きます。線の太さが均一なゴシック体は小さい文字でもくっきり読め、はらいや強弱のある明朝体は大きな文字で美しさと品格を見せます。

• ゴシック体：本文・ボタン・注釈など「確実に読ませたい」場所。視認性が高い
• 明朝体：ブランド名・キャッチコピー・大きな見出しなど「世界観を見せたい」場所。上品で繊細
• 迷ったら本文はゴシック体で統一し、明朝体は見出しの差し色のように限定して使う

商品ページに落とし込む手順

1. 1

   役割を3つに分ける

   ページの文字を「見出し・本文・注釈」の3種類に仕分けます。まず役割を決めてからスタイルを当てます。

2. 2

   サイズの差をつける

   見出しを本文の1.5〜2倍に。ブランドの世界観に合わせてジャンプ率（差の大きさ）を調整します。

3. 3

   ウェイトを当てる

   見出し700・小見出し500・本文400と太さを割り当て、太字は最重要の1〜2か所だけに絞ります。

4. 4

   行間を整える

   本文は1.6〜1.8、大見出しは1.2〜1.3。文字が大きいほど詰め、小さいほど広げます。

5. 5

   全体を引いて確認

   画面から離れて見て、3秒で「どこが見出しか」がわかるかを確認。わからなければ差が足りていません。

Plottell は、こうした見出し・本文・注釈の階層づくりを Apple 的な設計思想で支援します。サイズ・ウェイト・行間のバランスをあらかじめ整えたうえで文章を流し込めるため、文字デザインの専門知識がなくても、優先順位が伝わる読みやすい化粧品の商品ページを作りやすくなります。