Figma の CJK フォント運用ガイド — 中国語・日本語・韓国語を扱うときの注意点

「中国語のテキストの字形がなんとなくおかしい」「韓国語が空の四角になる」「ブラウザ版だと選んだ日本語ウェイトが使えない」— 中国語・日本語・韓国語のデザインを Figma で扱っていると、こうしたトラブルに一度は遭遇します。そして、これらの問題は Latin フォントではほとんど起きません。

CJK フォント（中国語・日本語・韓国語）は、別カテゴリの書体と考えるのが賢明です。数万字のグリフを抱え、字形の好みが異なる 3 言語で Unicode のコードポイントを共有し、ファイルサイズが大きいため読み込みやフォールバックの挙動も Latin フォントとは違います。「ただのフォントの 1 つ」として扱うことが、トラブルの入り口になります。

本記事では、CJK フォントが Latin フォントと何が違うのか → Figma での使い方 → 漢字統合（Han Unification）の罠 → フォールバックと豆腐（□）→ パフォーマンス → XD 移行時の注意点 を、実務でそのまま使える順序で整理しました。Pixel Fine Converter の開発で CJK テキスト（日本語・中国語・韓国語）の変換精度を検証してきた立場から、移行時に役立つ実用的な観点も合わせてまとめます。日本語に特化した深掘り（追加方法・症状別トラブルシューティング・XD 移行の注意点）は、下記の姉妹記事を参照してください。

日本語特化のガイドをお探しの方へ

本記事は CJK 横断の視点です。作業が日本語だけなら、Figma の日本語フォント完全ガイド のほうが追加方法・「反映されない」問題・日本語フォントの選び方を深く扱っています。横断の全体像は本記事、日本語の深掘りはあちら、という使い分けがおすすめです。

この記事で得られること

  • CJK フォントが Latin フォントと根本的に違う理由（グリフ数・コードポイント共有・ファイルの重さ）
  • 漢字統合による「同じ文字が言語ごとに別字形」の罠と、その直し方
  • Noto Sans CJK サブファミリ（SC / TC / JP / KR）の正しい使い分け
  • 豆腐（□）が出る 3 つの原因と切り分け方
  • XD から CJK デザインを移行するときのフォント・ベースラインの注意点

🌏 CJK フォントが Latin フォントと違う点

一般的な Latin フォントは、アルファベット・数字・記号・アクセント付き文字を合わせても数百グリフあれば足ります。CJK フォントは、まったく別のスケールの存在です。

  • グリフ数。 中国語・日本語・韓国語を完全にカバーするフォントは、数万グリフのオーダーになります。Google と Adobe による汎 CJK ファミリ（Noto Sans CJK、Adobe 側の名称は Source Han Sans）は、3 言語を 1 つのスーパーファミリで賄うよう設計されています。
  • コードポイントの共有。 漢字統合（Han Unification） という Unicode の設計判断により、中国語・日本語・韓国語で使われる多くの漢字が、地域ごとに好まれる字形が違っていても 1 つのコードポイントに割り当てられています。どの字形で見えるかを決めるのは、文字ではなくフォントです。
  • ウェイトとファイルサイズ。 各ウェイトが数千字を描く必要があるため、CJK の 1 ウェイトはしばしば数メガバイトになります。これがフォント解決中のフォールバックの見え方を左右します。
  • レイアウトの前提。 CJK テキストには独自の慣習があります — 全角約物、禁則処理、そして（印刷・editorial 文脈では）縦書き。これらはツールによって対応度が異なり、Figma も例外ではありません。

CJK では「フォント選び」が「言語選び」になる

Latin フォントなら「フォントを選ぶ」だけでほぼ足りますが、CJK では同時に言語を選んでいることになります。そしてそれを間違えると、ネイティブの読者にとって微妙に（あるいは決定的に）おかしいテキストになります。CJK では「どのフォントか」と同じ重さで「どの言語のフォントか」を意識するのが出発点です。

📥 Figma で CJK フォントを使う

パターンは Figma の他のフォントと同じ 3 つですが、各パターンの中での選択が CJK ではより重要になります。

パターン 1 — Google Fonts（追加作業なし）。 Figma には Google Fonts が同梱されており、横断的な出発点として最も確実なのが Noto CJK ファミリです。重要なのは、各言語がそれぞれ別名のフォントになっている点です。

  • Noto Sans SC / Noto Serif SC — 簡体字中国語
  • Noto Sans TC（および HK）— 繁体字中国語（香港向けは HK）
  • Noto Sans JP — 日本語
  • Noto Sans KR — 韓国語

これらが別ファミリに分かれているのは意図的です。正しい地域字形を得る手段が、この「正しいファミリを選ぶ」ことだからです（次節で詳述）。

パターン 2 — ローカルフォント。 マシンにインストール済みのフォント（システム CJK フォント、ファウンダリフォント、ライセンスフォント）は、デスクトップ版では直接、ブラウザ版ではローカルフォント連携を有効化すると表示されます。Hiragino（macOS 日本語）、PingFang（macOS 中国語）、Apple SD Gothic Neo（macOS 韓国語）、Windows の 游ゴシック / Microsoft YaHei / Malgun Gothic などにアクセスするパターンです。

パターン 3 — Adobe Fonts。 有効な Adobe プランがあれば、アクティベートした Adobe Fonts（Source Han Sans や多くの商用 CJK ファミリを含む）が、ローカルフォント連携の設定後に Figma から使えます。

まず Noto、必要に応じて専用フォントへ

多くのチームにとって現実的な基準線は、Google Fonts 経由の Noto Sans SC / TC / JP / KR です。追加設定が不要で、ファイルを開く全員に同じように描画され、3 言語をカバーします。ブランドフォントや特定ウェイトが必要なときだけ、ローカルや Adobe Fonts に進めば十分です。

⚠️ 漢字統合の罠 — 同じコードポイント・違う字形

これは CJK 特有のバグとして最も頻出するもので、しかも「どこかが壊れている」わけではまったくありません。

漢字統合により、直・骨・雪・麻・茶 などの文字は 1 つの Unicode コードポイントを占めつつ、中国語・日本語・韓国語で好まれる字形が異なります。画の形・部品の配置・プロポーションが分岐します。ネイティブの読者はすぐ気づき、CJK 以外の読者はまったく違いに気づけません — だからこそレビューをすり抜けます。

Figma は、同じフォント設定を共有するテキスト範囲を単一のフォントで描画し、フォントは 1 つの地域字形セットを持ちます。CSS の lang 属性のような、文字ごとの言語タグはありません。つまり:

  • 日本語を入力していても、そのテキスト範囲が Noto Sans SC（簡体字中国語）に設定されていれば、一部の文字は中国語字形で描かれます。
  • 韓国語の漢字（Hanja）を日本語フォントが設定されたテキストに貼り付ければ、日本語字形になることがあります。

直し方はフォントの選択であって、テキストではありません。 日本語のテキストは Noto Sans JP、簡体字は SC、繁体字は TC、韓国語は KR に設定します。多言語が混在するデザイン（マルチロケールの UI キットなど）では、1 つの「CJK」フォントで全部を賄おうとせず、各言語をそれぞれ正しい名前のフォントに割り当てます。

多言語ファイルで単一「CJK」フォントが危ない理由

汎 CJK フォントは、デフォルト地域に設定されると、共有文字にその地域の字形を静かに使います。ファイルに複数ロケールが混在していれば、そのデフォルトは少なくとも 1 言語にとって誤りになります。各テキストレイヤーに、そのレイヤーが実際に書かれている言語の Noto サブファミリを割り当てましょう。

🔲 フォントフォールバックと豆腐（□）— グリフが欠けるとき

フォントにその文字のグリフが無いと、欠落グリフのボックス — しばしば豆腐（□）と呼ばれる形が出ます。これは Noto の名前の由来でもあります（“no more tofu”）。CJK では、見分けのつく数パターンで現れます。

  • フォントが本当にその文字を持っていない。 Latin 専用や部分的なフォントには CJK グリフが無く、すべての CJK 文字が豆腐になります。
  • 稀少文字・異体字。 人名漢字、稀な漢字、古い異体字は、大きなフォントでも欠けていることがあります。
  • フォントが読み込み中。 CJK ウェイトは大きいため、フォント解決前に一瞬フォールバックやボックスが見えることがあります — 特にブラウザ版で回線が遅いとき。

確認の順番はこうです。まずレイヤーのフォントが実際にその言語をサポートしているか確認する。稀少文字ならよりカバレッジの広いファミリ（Noto CJK が安全策）に切り替える。一瞬だけボックスが出るなら、それは欠落ではなく読み込み中の一時的な表示です。試したすべての CJK フォントで特定の文字が一貫して豆腐になるなら、その文字はフォントのカバレッジ外の可能性があり、より包括的な（あるいは専門的な）ファミリだけが解決策になります。

🖥️ ブラウザ版とデスクトップ版での CJK の違い

ブラウザ版とデスクトップ版の違いは、CJK ではより大きくなります。フォントが重く、ローカルライセンスであることも多いからです。

  • デスクトップアプリ。 OS にインストールされた CJK フォントを直接読みます。Hiragino、PingFang、游ゴシック、Microsoft YaHei、Malgun Gothic などのシステムフォントが追加手順なしで使えます。
  • ブラウザ版。 Google Fonts（Noto CJK ファミリを含む）はそのまま使えます。ローカルの CJK フォントをブラウザで使うにはローカルフォント連携の有効化が必要で、有効化しないとそれらのファミリは現れず、レイヤーはフォールバックします。

全員が見えるフォントを選ぶ

チームにブラウザ版とデスクトップ版のユーザーが混在するなら、共有ファイルには Google Fonts（Noto CJK）を優先しましょう。ローカル専用の CJK フォントで作ったファイルは、自分のデスクトップでは正しく描画されても、そのフォントを入れていないブラウザ版の同僚にはフォールバックします。

セットアップ手順や症状別の対処（CJK にも日本語にも当てはまります）は、フォントが反映されないときのガイドを参照してください。

⚡ パフォーマンス — CJK フォントは重い

CJK の 1 ウェイトは数千字を描くため、数メガバイトになり得ます。実務上の意味は次の通りです。

  • 初回読み込みが遅い。 ファイルで CJK フォントを初めて使うとき、テキストに適切にスタイルが反映されるまで体感できる遅延があり得ます（特にブラウザ版）。
  • ウェイトが積み重なる。 CJK ファミリの Regular・Medium・Bold を読み込むのは、同等の Latin ウェイトよりはるかに大きなデータ量です。実際に使うウェイトだけに絞りましょう。
  • サブセット化は配信の話で、Figma 編集の話ではありません。 CJK フォントの「サブセット化」（ページに必要なグリフだけを配信する）は、公開ウェブサイトでのフォント配信の話です。Figma 内ではフルファミリで作業します。デザイン作業での教訓は単純で、1 ファイルが依存する CJK ファミリ・ウェイトの数を意識的に絞ることです。

デザイン時の学びは「節度」です。4 つの Noto サブファミリ × 4 ウェイトを取り込むファイルは、かなりのフォントデータを抱えています。言語ごとに必要なファミリを決め、ウェイトセットをタイトに保ちましょう。

🔄 XD から CJK デザインを移行する

CJK デザインが Adobe XD で作成されたものである場合、移行に必要な作業は上記すべてに対してもう 1 手間必要になります。レイヤーが参照するフォントが、Figma 側で正しい CJK ファミリに、正しい地域字形とメトリクスで解決される必要があります。

シンプルな移行で起きやすいのは次の 2 つです。

  • フォント代替で言語が失われる。 元の XD フォントが Figma に無いと、汎用的な代替で誤った地域字形に落ちることがあり — 漢字統合の問題を別方向から再発させます。
  • ベースラインとメトリクスがズレる。 CJK グリフは Latin グリフと異なる垂直メトリクスに乗ります。これを考慮しない変換では、インポート後に CJK テキストが目に見えてズレることがあります。

ここが、専用設計の変換ツールが肩代わりしてくれるエリアになります。Pixel Fine Converter は XD ファイルを直接解読し、移行精度を担保することを重要視する設計となっています — CJK テキスト（日本語・中国語・韓国語）の専用処理を含み、ベースラインやグリフが手作業の修正なしに正しく収まるようにします。描画精度の検証方法は日本語テキストの変換精度ガイドが詳しく、移行全体の流れはXD→Figma 移行 実践ガイドを参照してください。

🚀 XD 移行時の CJK テキストを正確に — Pixel Fine Converter

Free プランに CJK ベースライン補正・ウェイト代替解決を含みます。自分のファイルで変換し、品質を確かめてから判断できます。

カバレッジ・入手性・チーム全員が同じ表示を確実に見られるかのバランスを取った、言語ごとの現実解です。

言語クロスプラットフォーム既定（Google Fonts）代表的なローカル / システムフォント
簡体字中国語Noto Sans SC / Noto Serif SCPingFang SC（macOS）/ Microsoft YaHei（Windows）
繁体字中国語Noto Sans TC（香港は Noto Sans HK）PingFang TC（macOS）/ Microsoft JhengHei（Windows）
日本語Noto Sans JPヒラギノ角ゴシック（macOS）/ 游ゴシック（Windows）
韓国語Noto Sans KRApple SD Gothic Neo（macOS）/ Malgun Gothic（Windows）

共有・多言語のファイルでは Noto の列が安全な選択です — インストール不要で、全員に同一に描画されます。プラットフォーム固有の見た目が明確な目的のときだけ、ローカル / システムの列に手を出しましょう。

💬 よくある質問

Q: 1 つのフォントで中国語・日本語・韓国語を同時にカバーできますか？ Noto Sans CJK / Source Han Sans のような汎 CJK ファミリは、技術的には 3 言語すべてのグリフを含みます。ただし共有文字についてはデフォルトで 1 地域の字形を描くため、言語ごとに正しい字形を得るには、テキストごとに言語別サブファミリ（SC / TC / JP / KR）を割り当てるべきです。

Q: 文字が「なんとなくおかしい」けれど壊れてはいません。何が起きていますか？ ほぼ確実に漢字統合の問題です — テキストが誤った言語のフォントに設定され、共有文字が別地域の字形で出ています。レイヤーを正しい地域フォント（日本語なら Noto Sans JP など）に切り替えてください。

Q: 空のボックス（□）が出るのはなぜ？ フォントがその文字のグリフを持っていない（Noto などフルな CJK ファミリを使う）、稀少 / 異体字である、あるいは（大きな）フォントが読み込み中、のいずれかです。まずフォントがその言語をサポートしているか確認しましょう。

Q: Figma は CJK の縦書き（tategaki）に対応していますか？ 縦書きは CJK でよくある editorial のニーズですが、本記事執筆時点では Figma のネイティブなテキスト機能ではありません。各チームは回避策で対応しています。真の縦書きが必須なら、トグルがある前提ではなく、この制約を織り込んで計画しましょう。

Q: XD の CJK フォントが Figma への移行で残りませんでした。なぜ？ そのフォントが Figma に無いと置き換えられ、誤った地域字形に代替されたりメトリクスがズレたりします。CJK 処理を備えた移行特化の変換ツールなら大半を回避できます — 上のセクションを参照してください。

🎯 まとめ

CJK フォントは、押さえるべきポイントさえ分かっていれば安定して扱えます。本記事の要点は次の 5 つです。

#ポイントやること
1フォントではなく言語を選ぶ各テキストの言語に合わせて Noto Sans SC / TC / JP / KR を割り当てる
2漢字統合に注意「なんとなくおかしい」文字 = 共有コードポイントに誤った言語フォント
3ボックス（□）の原因は 3 つグリフ無し / 稀少文字 / 読み込み中 — 「直す」前に切り分ける
4共有ファイルは Google Fonts 優先Noto CJK はブラウザ版・デスクトップ版の同僚に同一描画
5重さに気を配るCJK ファミリは大きい — 依存するファミリ・ウェイトをタイトに保つ

言語とフォントの対応を正しく選択できれば、「謎の」CJK 描画問題の大半は解消されます。CJK デザインが Adobe XD で作成されたものである場合、移行こそフォントとベースラインの精度が最も失われやすく、そして専用設計の変換ツールを利用することが、最も手戻りを減らせる選択になります。

🚀 Pixel Fine Converter を Figma Community からインストール

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

関連ページ