Figmaでデザインした資料をPDF形式で書き出したら、日本語が文字化けしたり、フォントや改行が崩れたりという経験はありませんか。編集途中では正しく表示されていたのに、PDF化するとなぜか読みづらくなってしまうこともあるでしょう。この記事では、FigmaでPDF書き出し時に起こる文字化けの「典型的な原因」と「原因別の具体的な対処法」を最新情報に基づいて整理します。PDFエクスポートで失敗したくない方は必見です。
目次
Figma PDF 書き出し 文字化けの主な原因
PDFで文字化けが発生するのは大きく分けてフォント・エンコーディング・レイヤー構造・描画方式などの問題が考えられます。Figmaの仕様や使っているフォントの種類、出力オプションなどが絡むため、どこに原因があるかをきちんと把握することが解決のための第一歩です。
フォントが埋め込まれていない
PDFではフォント情報が埋め込まれていないと、閲覧環境やOSで代替フォントに置き換えられ、デザイン崩れや文字化けが起きやすくなります。特に日本語フォントは字形や文字種が多いため、埋め込み不可やライセンス制限があるケースも存在します。書き出し前に使用フォントが埋め込み可能かを確認することが重要です。
テキストがアウトライン化されてしまう
FigmaでPDFに書き出す際、テキストがアウトライン（ベクターパス）化されてしまう設定があります。これによりフォント情報が消えるため、コピーや検索ができなくなりますし、特殊文字が正しく表示されず文字化けと感じられることがあります。アウトライン化をオフにするか、別の手段を取る必要があります。
特殊文字や拡張漢字の未対応フォント使用
フォントによっては、漢字の一部や記号、拡張文字を含まないものがあります。英数字や基本漢字は問題ないけれど、濁点・特殊記号・補助漢字で文字化けが出るのはこのためです。日本語仕様のオープンソースフォントなど、CJK文字セットに対応したフォントを使うことが解決策になります。
ソフトウェア／ビューアの問題
PDF表示ソフトやOS・アプリとの互換性の問題で正しく表示できず、文字化けに見えることがあります。PDF自体は正しく書き出されていても、プレビューアプリがフォントを代替表示したり、構造化テキストをサポートしていなかったりすることが原因です。別のアプリで確認してみることが有効です。
Figmaで書き出したPDFが文字化けしないための対策
ここでは、原因ごとに実際に行える対策を具体的に紹介します。状況に応じて組み合わせることで、文字化けの問題を根本から解消できます。
使用するフォントの確認と選択
まずは現在使っているフォントがPDFに埋め込めるか、CJK文字セットに対応しているかを確認します。特にGoogle FontsやNoto、さびしい漢字対応のオープンソースフォントは日本語・英語以外の文字も含めて安定しています。ライセンス表示も確認し、商用印刷や配布に問題がないフォントを選びましょう。
アウトライン化をオフにする
FigmaのPDF書き出し設定には「テキストをアウトライン化する（Outline text）」というオプションがあります。これをオフにすることで、テキスト層が保持され、フォントの埋め込みやコピーが可能になるケースがあります。最新情報では、設定によりこのオプションのオンオフが可能になっているとの報告があります。
SVGを経由してPDF化する方法
直接PDFに書き出すと文字化けやテキスト非選択の問題が解決しない場合、SVG形式でエクスポートしてからPDFに変換する方法が有効です。SVGでテキストをアウトライン化しない設定にしておき、その後PDF変換ツールを使えばテキスト情報を保持できる可能性が高まります。
PDFビューアでの確認と修正
書き出したPDFをAdobe Acrobatなどで開き、フォントプロパティやテキスト選択性を確認します。表示が崩れていないか、代替フォントが使われていないかをチェックし、必要ならビューアのバージョンを変えて確認します。また、構造化テキストに対応しているビューアを使うと問題が発見しやすくなります。
Figma書き出しと他のツール／プラグインとの比較
Figma純正のPDF書き出しだけでは解決できないこともあります。他のツールやプラグインを併用することで文字化けのリスクを減らすことができます。
プラグインを使ってテキスト情報を保持するエクスポート
Figmaコミュニティには、PDF書き出し時にテキストとベクターオブジェクトを保持するプラグインが存在します。これらを使えば、テキストがアウトライン化されず選択可能な形でPDF化できるものもあり、デザインと可読性の両立が可能です。
印刷業者や別ソフトでのPDF書き出しとの違い
IllustratorやInDesignなどの専用ソフトでは、フォント埋め込みやPDF/Xなど印刷用設定が強力です。こういった別ソフトにデザインデータを読み込んでPDFを書き出すと、Figma単体で起こる文字化けの問題を回避できるケースがあります。
画面用と印刷用のPDF品質の違い
画面で見るPDF（スクリーン向け）は軽量化重視の設定が多いため、フォントの埋め込みが省略されたりアウトライン化されたりしがちです。印刷用途では高解像度・印刷プロファイル・カラー設定なども関わるため、画面用とは別の設定で書き出すことをおすすめします。
具体的な手順：文字化けしないPDFを書き出す方法
ここからは、Figmaを使って「日本語が文字化けしないPDF」を作成するための具体的な手順をステップ形式で紹介します。手順に沿って進めれば、問題発生の可能性を大きく減らせます。
ステップ1：フォント選定と準備
まず日本語の拡張文字を含めて安定して動作するフォントを選びます。できればGoogle FontsやNotoなど、CJK対応のフォントを使用します。また、ローカル環境やチーム全員にそのフォントがインストールされているかを確認しておきます。使用しているフォントが埋め込めるライセンスかどうかもチェックします。
ステップ2：テキストレイヤーの整理
テキストレイヤーをグループ化しすぎていないか、コンポーネント内に入っていてもレイヤー階層が複雑すぎないかを確認します。必要なら背景にかぶる部分を分離するなどし、マスクやクリッピングパスを必要最小限にとどめます。これによりPDF書き出し時の崩れを防げます。
ステップ3：PDF書き出し設定を確認
書き出し時に、「Export Frames to PDF」機能を使うなど、一般的なエクスポートではなくフレーム単位でPDFを作成する方法を選びます。そして「テキストをアウトライン化する」設定がオフになっていることを確認します。必要ならオプションでフォント埋め込みが可能な設定があればそれを有効にします。
ステップ4：書き出したPDFの検証
PDFを開いたらテキストをコピーできるか、選択可能か、フォントが代替表示されていないか、改行や字間が崩れていないかをチェックします。問題があればステップ1～3に戻って設定を修正します。ビューアが原因の場合は別のアプリで確認すると良いです。
よくあるケース別のトラブルと対処例
ここでは実際に多く挙がっている「PDF書き出しで文字化けに見えるが原因が異なる」ケースを紹介し、ケースごとの対応方法をまとめます。自身の状況に近いものを探してみてください。
コピー＆ペーストで日本語が「？？？」になる
テキストをコピーしてWordや他アプリに貼り付けた際、文字が「????」や空白になることがあります。これは元のPDFでテキスト情報がアウトライン化されていたり、フォント埋め込みがされていないことによるためです。SVG経由で変換するか、テキストレイヤーをベクター変換させないよう出力設定を調整しましょう。
特殊漢字や機種依存文字だけ化ける
例えば絵文字、旧漢字、濁点付きかななど一部の文字だけが別の記号になるケースは、使っているフォントにその文字グリフが含まれていないからです。安定性のあるCJK対応フォントを使用する、あるいはその文字だけ別フォントに置き換えることで解決できます。
複数ページ・長文ドキュメントで一部ページだけ文字化け
1ページのみ文字化けがあったり、ページ全体が真っ白になることがあります。原因はフレームの高さが極端に大きい、内部にマスクやクリップ要素がある、またはエクスポート対象とレイヤー構造の問題であることが多いです。フレームを分割する、マスクを解除する、要素を整理すると改善することが多いです。
まとめ
FigmaからPDFを書き出す際の文字化けは、主にフォント埋め込み・アウトライン化・特殊文字の未対応という点が原因になります。最新仕様では、設定を調整することでこれらの問題を回避できるようになってきていますので、使用するフォントを見直し、書き出しオプションを確認し、可能であればSVG経由などの代替パスも検討してください。
正しい手順を踏めば、文字化けせず見た目・可読性ともに優れたPDFを作成できます。画面表示用か印刷用か用途に応じて設定を切り替え、ご自身の成果物が意図どおりに伝わるように仕上げましょう。
コメント