概要 オートレイアウト コンポーネント プロトタイプ 日本語フォント 仕上げのひと工夫

日本語のテキストがズレない！主要フォントの実測データに基づくベースライン補正をご紹介！

XD で作った日本語デザインを Figma へ移すと、テキストの縦位置がほんの数ピクセルだけズレて見える — そんな経験はありませんか？ ピクセル単位のレイアウトを大切にする日本語デザインでは、この「数ピクセル」が無視できないノイズになります。

Pixel Fine Converter は、主要な日本語フォントについて XD と Figma のベースライン差を実測し、フォント別の補正係数を持っています。汎用的な数式補正ではカバーしきれない、各フォント固有の事情に対応するための仕組みです。

技術的な背景を深く知りたい方向けの解説記事もあります。 → ブログ: Adobe XD → Figma、日本語テキストはどこまで正確に変換できるか

ご注意: このページで紹介するベースライン補正（汎用補正・フォント別精密補正の両方）は、Free プランで対応 6 フォントすべてご利用いただけます。プラグイン本体は無料でインストールでき、追加課金なしで適用されます。

🤔 なぜ日本語特化の補正が必要なのか

XD と Figma は、内部のテキスト描画エンジンがまったく別物です。同じフォントファイルを読み込んでも、

  • ベースライン位置（文字の縦位置の基準点）
  • lineHeight の解釈
  • グリフのアンチエイリアス処理

これらが微妙に違うため、変換時に縦位置の食い違いが発生します。

英数字フォントでもこの差は出ますが、日本語フォント（CJK フォント）では特に目立ちます。理由は 2 つです。

  • CJK フォントは、フォント内部の baseline メトリクスが英数字フォントと異なる構造を持つ
  • 古典的な日本語フォント（MS Gothic など）は、Windows 時代のビットマップ描画を前提に設計されている

Pixel Fine Converter には汎用的なベースライン補正（数式ベース）が組み込まれていますが、主要な日本語フォントは個別事情が大きく、汎用補正だけでは < 1px に収束させきれないケースが残ります。そこで登場するのが、フォント別の精密補正です。

📐 アプローチ — 実測データに基づくレジストリ

Pixel Fine Converter は、主要な日本語フォントごとに XD と Figma のベースライン差を実測し、コード内の FONT_CORRECTIONS レジストリにフォント別の補正係数を保持しています。

新しいフォントが必要になったら、

  1. Regular / Bold × 7 サイズ × 3 lineHeight = 42 セルを XD と Figma それぞれで計測
  2. 差分を平均してフォント別の係数を算出
  3. レジストリに追加

このサイクルで対応フォントを段階的に拡張する設計です。「すべてのフォントに対応」を目指すのではなく、よく使われる主要フォントを精密に対応する方針を採っています。

✅ 対応フォント一覧と補正精度

2026 年 4 月時点で精密補正が組み込まれているフォントは以下の通りです。すべて 42 セル実測ベースで、補正後の平均ズレは 1px 未満に収束しています。

フォント補正タイプ主な用途
Noto Sans CJK JPCJK 補正の無効化Adobe / Google 製の CJK 統合フォント、多言語混在デザイン
Noto Sans JPbaselineOffsetGoogle Fonts 経由の日本語版、ウェブで広く使われる
ヒラギノ角ゴ ProN汎用補正（既存式が機能）macOS 標準、商用案件で広く採用
游ゴシック / Yu Gothic汎用補正（既存式が機能）macOS / Windows 共通、本文向きのバランス型
Meiryo汎用補正（既存式が機能）Windows 標準、ビジネス文書・ウェブ用途
MS GothicbaselineOffsetWindows 標準（古典的）、レガシー資産で使用

実測データのサマリ:

  • 📊 検証規模: 各フォントについて Regular / Bold × 7 サイズ × 3 lineHeight = 42 セル
  • 🎯 補正後の精度: 平均ベースラインズレ < 1px に収束
  • 🔬 計測方法: XD と Figma の双方で実測した値を直接比較（推測値ではなく実データ）

🔧 補正パターンの 3 タイプ

フォントによって必要な補正は異なります。Pixel Fine Converter は 3 つのパターンで対応しています。

タイプ A: 汎用補正（数式ベース）が機能するフォント

ヒラギノ角ゴ ProN / 游ゴシック / Meiryo はこのタイプです。XD と Figma のメトリクス比率（fontSize × ratio）が想定範囲内にあり、汎用的な数式補正で 1px 未満に揃います。

  • レジストリに個別エントリは不要
  • 新しいフォントでも、メトリクス比率が 1.40 前後なら自動的に補正対象になる

タイプ B: 個別 baselineOffset が必要なフォント

Noto Sans JP / MS Gothic はこのタイプです。汎用補正の閾値下に該当する、または比率パターンが特殊なため、フォント別の baselineOffset を新設して対応しています。

  • Noto Sans JP: baselineOffset = 0.86（42 セル実測で導出）
  • MS Gothic: baselineOffset = 2.25（汎用補正未発動の閾値下を補うため）

タイプ C: 補正方向が逆転するフォント

Noto Sans CJK JP はこのタイプです。汎用補正は通常 Figma 側を「下げる」方向ですが、このフォントだけは「上げる」方向の補正が必要でした。誤った補正を加えると逆にズレが拡大するため、専用フラグで補正をスキップしています。

⚠️ 補正対象外 — グリフ描画の差は揃わない

ベースライン位置は補正できますが、グリフそのものの見かけ（線の太さ・印象・アンチエイリアスのかかり方）は揃いません。これはフォント別補正の対象外です。

  • 同じ fontSize: 14 でも、XD のほうが文字が太く見える / Figma のほうが細く見える
  • 特に MS Gothic の小サイズ（12〜16px） で顕著
  • レンダリングエンジン（XD = OS 依存 / Figma = ブラウザベース独自）の差が根本原因

これは Pixel Fine Converter が意図的に補正しない領域です。fontSize を勝手に乗算すると「XD のオリジナルデータと違う値が Figma に書き込まれる」状態になり、データの正確性が損なわれるためです。

詳しい背景は以下の記事で解説しています。 → ブログ: Adobe XD → Figma、日本語テキストはどこまで正確に変換できるか

📝 未対応フォントはどうなる

FONT_CORRECTIONS レジストリに登録されていないフォント（モリサワ系、フォントワークス系、その他の和文フォント等）は、汎用的なベースライン補正（数式ベース）が適用されます。

  • メトリクス比率が想定範囲内であれば、汎用補正でおおむね揃う
  • 比率が大きく外れる場合は、個別補正を追加するまで完全には揃わない

「うちで使っているフォントが対応リストにない」という場合、まずは Free プランで変換結果を確認してみてください。多くの場合、汎用補正で実用上問題ない精度に収まります。

対応リストへの追加要望は GitHub Issue や お問い合わせメール からご連絡いただければ、実測データの収集と補正係数の追加を検討します。

❓ よくある質問 (FAQ)

Q1. 対応フォント表にないフォントを使っている場合の挙動は？

FONT_CORRECTIONS レジストリに登録されていないフォントには、汎用的なベースライン補正（数式ベース） が適用されます。CJK 文字を含むテキストで、XD と Figma のメトリクス比率が想定範囲内であれば、汎用補正でおおむね 1px 未満に揃います。比率が大きく外れる場合は完全には揃わないため、お問い合わせメール から実測データを共有いただければ、レジストリへの追加を検討します。

Q2. Adobe Fonts や Google Fonts のフォントは対応していますか？

フォントファイル名が FONT_CORRECTIONS レジストリのキー（例: Noto Sans JP、Noto Sans CJK JP）と一致する限り、個別補正が適用されます。一致しない場合は汎用補正で処理されます。Google Fonts の Noto Sans JP（静的 OTF）は既にレジストリ登録済みで、42 セル実測ベースで baselineOffset = 0.86 が組み込まれています。Adobe Fonts については、フォント名が一致すれば同じ仕組みで補正が適用されます。

Q3. 新しいフォントを対応リストに追加するにはどうしたらいいですか？

対応フォントの追加には、Regular / Bold × 7 サイズ × 3 lineHeight = 42 セル分の XD と Figma 実測データ が必要です。お問い合わせメール または GitHub Issue から「追加したいフォント名 + 実測データのご共有」をお寄せいただければ、補正係数の算出と次回リリースへの組み込みを検討します。

Q4. フォント別精密補正は有料機能ですか？

いいえ、ベースライン補正は対応 6 フォントすべて Free プランで利用可能です。汎用補正（数式ベース）も、フォント別の精密補正（baselineOffset / CJK 補正の無効化）も、追加課金なしで適用されます。Pro プランで提供されるのは別軸の機能で、XD のスタックを Figma の Auto Layout に変換する Auto Layout 変換、シンボルを Components / Variants として保持する Components 変換、ホバー / フォーカス等の状態を Variants に展開する状態 → バリアント変換などが該当します。日本語デザインの再現性をフォント補正の先まで高めたいときに検討してください。

Q5. 補正後もズレが残る場合の確認ポイントは？

以下を確認してください。

  • フォント名表記の正確性: 「Noto Sans JP」「Noto Sans CJK JP」「MS Gothic」等のスペース / ハイフン / 大文字小文字を厳密に一致させる必要があります（レジストリのキーマッチは完全一致）
  • lineHeight 構造: XD で AUTO の場合と数値指定の場合で補正係数の適用結果が変わります
  • fontSize / 言語混在: 同じテキストレイヤー内で CJK / Latin が混在している場合、CJK 文字検出ロジックが判定基準になります

これらを確認しても 1px 以上のズレが残る場合は、お問い合わせメール から実測データをお送りください。

Q6. Figma で別フォントに切り替えた場合、補正は再計算されますか？

いいえ、Pixel Fine Converter は 変換時のみベースライン補正を適用 します。変換後に Figma 上でフォントを切り替えても、補正は再計算されません。Pixel Fine Converter が設定した テキストレイヤーの y 座標 / lineHeight は維持されます が、新フォントは独自のベースラインメトリクスを持つため、補正の効果は新フォントに対しては保証されません。フォント差替を多用する場合は、XD 側でフォントを変更してから再変換するか、フォント単位でレイヤーを切り出して再変換することを推奨します。

Q7. ベースライン補正以外の日本語フォント問題はどう対処すればいいですか？

ベースライン位置以外にも、日本語フォントには「Figma で反映されない」「一括で差し替えたい」といった別軸の課題があります。それぞれ別記事で扱っていますので、合わせて参照してください。

🚀 まずは無料プランで、変換精度を確かめてください

Pixel Fine Converter は Figma Community から無料でインストールできます。Free プランでは、shape / text / style / group / mask / image / transform の基本変換に加え、主要 6 フォント（Noto Sans CJK JP / Noto Sans JP / ヒラギノ / 游ゴシック / Meiryo / MS Gothic）に対する実測ベースのベースライン補正もすべてご利用いただけます。

日本語デザインの移行で Pro プラン（買い切り $29、サブスクリプション無し） が活きるのは、フォント補正の先にある構造化変換です。XD のスタックを Figma の Auto Layout へ変換する Auto Layout 変換、シンボルを Components / Variants として保持する Components 変換、ホバー / フォーカス等の状態を Variants として展開する状態 → バリアント変換など、レイアウトと状態管理の再現性を高めたいときにご検討ください。

🚀 Figmaにプラグインをインストール（無料）

Figma Communityから1クリックで追加できます

関連ページ