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

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

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

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

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

ご注意: ベースライン補正のうち、フォント別の精密補正は Pro プラン（買い切り $29） の機能です。プラグイン本体は無料でインストールでき、Free プランでも汎用的なベースライン補正（数式ベース）はご利用いただけます。

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

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 や お問い合わせフォーム からご連絡いただければ、実測データの収集と補正係数の追加を検討します 🛠️

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

Pixel Fine Converter は Figma Community から無料でインストールできます！ Free プランでは、shape / text / style / group / mask / image / transform の基本変換と、汎用的なベースライン補正がすべてご利用いただけます。

主要フォント（Noto Sans CJK JP / Noto Sans JP / ヒラギノ / 游ゴシック / Meiryo / MS Gothic）に対する実測ベースの精密補正を必要とされる場合は、Pro プラン（買い切り $29、サブスクリプション無し） へのアップグレードでご利用いただけます 🎁

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

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

関連ページ