🎯 UIデザインに向いているフォントの特徴
クセが少ない（可読性が高い）
太字・中太・通常など ウェイトの種類が多い
大きさや太さを変えても破綻しない
👍 よく使われる無料フォント
● Noto Sans / Noto Sans JP（Google）
→ 一番無難。日本語も英語も揃う。
● Inter
→ グローバルで最も使われるUIフォントの1つ。
→ Figma公式フォントにも入っている。
● Roboto / Roboto Condensed
→ Android系UIで多用される。
● SF Pro（Mac）
→ iOS / macOSで使用。
2. 階層（Typographic Hierarchy）
タイポの階層とは、ユーザーが画面を見た時に
どこが重要で、どこが補足なのかが一目で分かるようにする仕組み です。
典型的な階層構造（UI用）
役割 例 サイズ（px） 重さ（Weight）
H1（大見出し） 画面タイトル 24–32 Bold / SemiBold
H2（中見出し） セクションタイトル 20–24 Medium / SemiBold
Body（本文） 説明文 14–16 Regular / Medium
Caption（補足） ラベル/注釈 12–13 Regular
3. 行間（Line Height）
行間は文章の可読性に直結する
UIデザインでの基本値は：
● 本文（14–16px）
➡ Line height：120%〜160%（1.2〜1.6）
● 見出し（20px以上）
➡ Line height：110%〜130%
Figmaでの設定方法
テキストを選択 → 右の Line height に数値入力
例：
16px フォント → Line height 24px（=150%）
4. 文字間（Letter spacing）
文字間は、視認性や雰囲気を整えるために使います。
UIの一般指標
本文（14–16px）：0〜1%
字幕・小さい文字（12px前後）：1～3%
大きい見出し：0%以下でも良い（−1% など）
Figmaでは
Text → Letter spacing
で数値を入力（% か px）できます。
5. 日本語タイポの注意点
✓ 日本語は欧文より“詰まりやすい”ため
→ 行間は少し広め（150%前後）がおすすめ。
✓ フォントの種類によっては縦方向の見え方が違う
→ 見出しは Noto Sans JP Bold
→ 本文は Noto Sans JP Regular
など役割でフォントウェイトを分ける。
✓ UIでは明朝体が読みにくいので避ける（特別な用途を除く）
なるほど、全然意識していなかったけど、見やすくするのですね。納得です。
