Font Preview
Font Previewの使い方｜フォント選びを「感覚」から「確認」に変える
2025-11-14
:::note ※Font Previewの操作方法と、目的別の「導線ハブ」記事です :::
このツールを作った理由
フォント選びで最もよくある失敗は「数値だけで決める」こと。
「line-height 1.8」「letter-spacing 0.05em」——数値は覚えられる。でも、実際に表示してみると「なんか違う」となる。
**フォントは目で見て決めるもの。**このツールは「数値を入れる前に試す」ためのもの。
🚀 今すぐ試す → Font Preview を開く
使い方
- 「フォントを変更」をクリックしてフォントを選ぶ
- プレビューテキストを入力（空欄ならサンプル表示）
- 文字サイズ・字間・行間・太さを調整
- サイズ比較で見出し〜キャプションの見え方を確認
- 「この設定を共有」でURLをコピー
私がこのツールで確認していること
確認1：長文での読みやすさ
16pxの本文を3〜4行表示して、「読み続けられるか」を見る。
line-heightが狭いと、2行目を読むときに目が迷う。letter-spacingが広すぎると、単語がバラバラに見える。
数値より「読み続けられるか」の感覚を信じる。
確認2：見出しと本文のバランス
サイズ比較プレビューで、32px見出しと16px本文を並べる。
見出しのウェイト700が「重すぎないか」、line-height 1.2が「詰まりすぎていないか」を目で確認する。
確認3：フォールバック時の見え方
Noto Sans JPを選んだ後、游ゴシックやメイリオに切り替えて「許容範囲か」を確認する。
Webフォントが読み込めなかったときに、デザインが崩壊しないことを担保する。
調整できるパラメータ
| パラメータ | 範囲 | 私の使い方 |
|---|---|---|
| 文字サイズ | 8〜200px | 本文は16px固定で確認 |
| 字間 | -0.1〜0.3em | 基本0、見出しで0.02〜0.05 |
| 行間 | 1.0〜2.5 | 日本語は1.7〜1.8から開始 |
| 太さ | 100〜900 | 本文400、見出し700が基本 |
フォント選択
フィルター
- 環境：すべて / Web / Mac / Windows / iOS / Android
- 検索：フォント名・カテゴリで絞り込み
私がよく使うフォント
| フォント | 使う場面 | 理由 |
|---|---|---|
| Noto Sans JP | 企業サイト全般 | 視認性が高く、ウェイトが豊富 |
| 游ゴシック | コーポレート、上品な印象 | 繊細だが読みやすい |
| BIZ UDゴシック | アクセシビリティ重視 | 可読性に特化した設計 |
| ヒラギノ角ゴ | Mac向けサイト | Mac標準で表示が安定 |
サイズ比較プレビュー
4段階のサイズを同時に確認できる。
| 用途 | サイズ | ウェイト | 確認ポイント |
|---|---|---|---|
| 見出し | 32px | 700 | 重すぎないか |
| 小見出し | 24px | 600 | 本文との差が適切か |
| 本文 | 16px | 400 | 長文で読みやすいか |
| キャプション | 12px | 400 | 小さくても潰れないか |
設定の共有
「この設定を共有」ボタンでURLをコピー。
私はこれを使ってクライアントに「この設定でどうですか？」と確認を取る。口頭で「游ゴシック、16px、行間1.8」と伝えるより、実際に見せた方が早い。
この記事で解決しない場合
- 行間の理論を知りたい → line-heightの最適値を探る
- 字間を調整すべきか迷っている → letter-spacingの調整ガイド
- フォント設計の判断基準を知りたい → Webフォント設計の判断基準
このツールは、迷わないためのものではなく、迷う回数を減らすために作りました。