使い方 — Font Pairing Preview

Section 01

概要

日本語テキストには英字フォントがそのまま使えないことがほとんどです。このツールでは、英字部分と日本語部分にそれぞれ別のフォントを指定し、混在テキストでの見た目を一覧・比較できます。

ページの構成

コントロールパネル — フォント・色・表示文字列を調整する操作エリア
ライブプレビューカード — 現在の設定を反映してリアルタイムで更新されるプレビュー
Keepした候補 — 気になった組み合わせをピン留めして比較するエリア
候補一覧 — フィルター条件に一致する全フォントのカード一覧

文字の塗り分けについて

表示文字列はひらがな・カタカナ・漢字・一部記号を「日本語」、それ以外を「英字」として1文字ずつ判定し、それぞれ別のフォントで描画します。「下線表示」をオンにすると、EN 英字部分（紫）と JA 日本語部分（オレンジ）の割り当てが色で確認できます。

Section 02

入力

表示文字列

プレビューと候補一覧に表示するテキストを自由に入力できます。日本語と英字が混在する文章にすると、フォントの組み合わせ具合が確認しやすくなります。空欄にすると「これはTestです。」にフォールバックします。

Section 03

色設定

文字色 / カード背景 / ページ背景

カラーピッカーで文字色・カード背景色・ページ背景色を個別に変更できます。ブランドカラーや実際の使用環境に合わせて調整することで、より実践的なフォント比較ができます。

デフォルト登録 / デフォルト読み込み

「デフォルト登録」を押すと、現在の3色をお気に入りとして記憶します。「デフォルト読み込み」で登録した色に戻せます。登録した色はスウォッチ（小さな色見本の丸）で確認できます。

Clear

文字色を黒、カード・ページ背景を白にリセットします。

Section 04

英語系フォント

英字部分（ラテン文字など）に適用するフォントを設定します。

文字対応

フォントリストを絞り込みます。
「All」— 全フォント表示
「英語オンリー」— 日本語グリフを持たないラテン系フォントのみ
「日本語+英語」— 日本語グリフも内包するフォントのみ（この場合フォールバックなしで使えます）

カテゴリ

「System Fonts」— macOS / Windows にプリインストールされているフォント
「Google Fonts Recommended」— Google Fontsから読み込む厳選フォント
「All」— 両方

表示フォント

現在のフィルター条件に一致するフォントの一覧です。選択するとライブプレビューとフォント候補一覧が更新されます。

太さ

選択中のフォントが持つウェイト（400・600・700 など）を選択します。フォントによって選択肢が変わります。

スタイル

「Normal」または「Italic」を選択します。フォントにItalicの実体がない場合は「Italic（擬似）」と表示され、ブラウザの変換で斜体になります（実体italicとは字形が異なります）。

英字サイズ%

英字部分のフォントサイズを親要素比のパーセントで指定します。日本語フォントとのスケール感を揃えるために調整します。初期値は 100%。

Section 05

フォールバック系フォント

日本語部分に適用するフォントを設定します。「フォールバック」と呼ぶのは、英字フォントが日本語グリフを持たない場合にここで指定したフォントが代わりに表示されるためです。

フォールバックフォント

日本語グリフに使うフォントを選択します。System Japanese Sans / Serif のほか、Shippori Mincho・Noto Serif JP などのGoogle Fontsも選択できます。

英字に合わせる（トグル）

オンにすると、選択中の英字フォントが日本語グリフも持つ場合（「日本語+英語」フォント）は英字と同じフォントを日本語にも使い、フォールバックフォントの指定を無視します。英字フォントが日本語非対応の場合は自動的にフォールバックフォントが使われます。ロールストリップの「JA」チップに状態が表示されます。

太さ / スタイル

日本語フォント側のウェイトとスタイルを英字から独立して設定できます。日本語フォントの多くはItalicの実体を持たないため「Italic（擬似）」と表示されます。

日本語サイズ%

日本語部分のフォントサイズを親要素比のパーセントで指定します。英字フォントのxハイトに合わせてスケールを調整します。初期値は 42%。

下線表示（トグル）

オンにすると、英字部分に紫の下線・日本語部分にオレンジの下線が表示され、文字ごとのフォント割り当てを視覚的に確認できます。

句読点は日本語（トグル）

オンにすると、全角句読点（。、！？など）を日本語文字として扱い、フォールバックフォントを適用します。オフにすると英字フォント側で描画されます。

Section 06

比較操作

戻る ← / 次へ →

現在のフィルター条件に一致するフォントリストを前後に移動します。「操作対象」で英字・日本語を切り替えることで、どちらのフォントを送るかを選べます。

Keep Space

現在のプレビューの状態（英字フォント・日本語フォント・色・サイズすべて）をスナップショットとして「Keepした候補」エリアに保存します。同一の組み合わせは重複して追加されません。

操作対象（英字 / 日本語）

「戻る/次へ」ボタンおよびキーボードの矢印キーが操作するフォントを選択します。
「英字」— 英字フォントのみを切り替え
「日本語」— 日本語フォールバックフォントのみを切り替え
どちらも未選択の状態では両方を同時に切り替えます。

Tip: 操作対象を「英字」に固定してフォントを送りながら、気になったところで日本語側を手動で変えると、ペアの組み合わせを効率的に探せます。

右Shift: 一括Italic

右Shiftキーを押すと、英字・日本語の両スタイルを Normal ↔ Italic で一括切り替えします。Italicの比較に便利です（フォールバックフォントはItalic非対応のものが多いため「擬似Italic」になります）。

Section 07

Keepした候補

Keepしたカードが横2列で並びます。カードをクリック（またはEnter/Space）すると、その設定をライブプレビューに呼び出せます。

CSSをコピー

英字・日本語フォントの font-family / font-weight / font-style / font-size と、色設定をまとめたCSSスニペットをクリップボードにコピーします。コピー後 1.6秒ほど「コピー済み」と表示されます。

削除ボタン（ゴミ箱アイコン）

カード右上のボタンでそのカードをKeptリストから削除します。

Section 08

候補一覧

現在のフィルター（文字対応・カテゴリ）に一致するすべてのフォントが2列グリッドで表示されます。カードをクリックするとそのフォントをライブプレビューに表示し、カード内の「Keep」ボタンでKeptリストに追加できます。表示文字列・色・サイズの変更はリアルタイムで全カードに反映されます。

Section 09

キーボードショートカット

テキスト入力・セレクト・ボタンにフォーカスがある間はショートカットは無効になります。

キー	動作
`←` ArrowLeft	操作対象のフォントを前へ
`→` ArrowRight	操作対象のフォントを次へ
`Space`	現在のプレビューをKeep
`Right Shift`	英字・日本語を一括でItalic切り替え