Shopifyの領収書PDFが日本語で崩れる原因と対処法【文字化け・□問題】
お断り: 筆者は本文で言及するスマート帳票（chouhyo）の開発者です。アプリ紹介ではなく、Shopifyマーチャントが実際に困る問題への解説として書いています。
顧客から「領収書をPDFで送ってもらえますか」と言われ、注文画面から印刷してPDFで保存して送ったら「□が並んでいて読めません」と返信が来た——このシナリオ、Shopifyを使い始めて日が浅いうちに一度は遭遇します。
プレビュー画面では正常に見えているのに、なぜPDFにすると崩れるのか。この記事では技術的な原因から、コードを触らずに解決する方法まで横断的にまとめます。
TL;DR
| 確認事項 | 内容 |
|---|---|
| 根本原因 | PDFにフォントが埋め込まれていない |
| なぜプレビューは見える？ | ブラウザがOSのシステムフォントで代替表示しているため |
| 注文確認メールは崩れる？ | 崩れない（HTMLメールはPDFと仕組みが異なる） |
| 手軽な解決策 | 日本語対応の帳票アプリを使う |
| コードで解決したい場合 | jsPDF + NotoSansJPでフォントを埋め込む |
なぜプレビューは正常で、PDFにすると□になるのか
これが多くの人を混乱させる部分なんですよね。
ブラウザで「印刷プレビュー」を表示する時、ブラウザはあなたのパソコンにインストールされているフォント（OSのシステムフォント）を使って画面上に描画しています。あなたのMacにヒラギノ角ゴがあれば、それで日本語を表示する。Windowsなら游ゴシック。だから画面では綺麗に見える。
問題は「PDFとして保存」する際に何が起きるかです。
フォント埋め込みとは
PDFはフォントデータをファイル内部に持てる形式です。フォントが埋め込まれていれば、どの端末で開いても同じように表示されます。埋め込まれていない場合、PDF閲覧ソフトは「このフォントがあなたの環境にも入っているはず」という前提で動作します。日本語フォントがない環境（英語設定のPCや一部のスマホ）では、対応するグリフが見つからず□になります。
ShopifyのOrder Printer（公式）のデフォルトテンプレートは、CSSのfont-familyに欧文フォントしか指定していません。日本語フォントの指定がないため、ブラウザがPDFを生成する際、日本語グリフのフォントデータがPDFの中に入りません。結果として、あなたの端末では見えても、顧客の端末では□になる。
「プレビューでは見えているから大丈夫だろう」と思って送った領収書が、顧客側では読めない——というのは、この仕組みを知らないと気づきにくい問題です。
Shopify標準の注文確認メールは崩れないのか
崩れません。これは仕組みが根本的に違います。
注文確認メールはHTMLメールです。メールの本文はテキストとHTMLタグで構成されていて、フォントの埋め込みが必要な形式ではありません。受信したメールクライアント（GmailやAppleメール）が日本語テキストをそのまま描画するため、文字化けは起きない。
PDFは「紙に印刷することを前提とした形式」です。どこで開いても同じ見た目を保証するためにフォントを埋め込む設計になっている。この設計ゆえに、埋め込みを怠ると環境依存の化けが起きます。
整理するとこうなります。
| 形式 | フォント埋め込みの必要性 | 日本語崩れのリスク |
|---|---|---|
| 注文確認メール（HTMLメール） | 不要 | 低い |
| ブラウザ印刷→PDFで保存 | テンプレートの設定次第 | 高い（デフォルト設定では） |
| jsPDF等でプログラム生成したPDF | 開発者がフォントを明示的に埋め込む | フォント埋め込み済みなら低い |
解決アプローチ
方法1：Order Printerのテンプレートに日本語フォントを追加する
Shopify公式のOrder Printer、またはOrder Printer ProのテンプレートCSSに日本語フォントを@importで読み込む方法です。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
body {
font-family: 'Noto Sans JP', sans-serif;
}ただし注意点があります。ブラウザの「PDFとして保存」は、CSSでフォントを指定しても、ブラウザの実装やセキュリティポリシーによってフォントデータをPDFに埋め込まない場合があります。「うちの環境では直った」「顧客環境ではまだ化ける」という報告が4年以上前から出続けているのは、この不確実性が原因です。
Order Printer Proはこの方法に関する日本語コミュニティの知見が比較的多く、CSSカスタマイズ前提で使うなら選択肢に入ります。Order Printer文字化けのCSS対応についてはOrder Printer の日本語文字化けを解決する方法で詳しくまとめています。
方法2：日本語対応の帳票アプリを使う
テンプレートを触らず、インストールするだけで日本語PDFが出力されるアプリを使う方法です。日本向けに設計されているアプリは、この問題を織り込んで作られています。
方法3：フォントを確実に埋め込む方式のアプリを使う
jsPDFなどのライブラリを使ってサーバー側でPDFを生成するアプローチです。ブラウザの印刷機能を使わないため、フォント埋め込みを開発者が制御できます。NotoSansJPのフォントデータをbase64でライブラリに渡してPDFに埋め込む、という実装が一般的です。
アプリ比較
実際にどのアプリを使うか検討する際の参考です。価格は2026年5月時点の公開情報をもとにしています。
| アプリ | 価格 | 日本語PDF | インボイス対応 | 顧客ダウンロード |
|---|---|---|---|---|
| Shopify Order Printer（公式） | 無料 | 要CSSカスタマイズ | なし | なし |
| Order Printer Pro | 無料〜$10/月 | 要CSSカスタマイズ | なし | なし |
| Mixlogue Quick Order Printer | $9/月 | 対応（日本製） | 確認要 | 確認要 |
| 領収書 by UnByte | $9.99/月 | 対応（日本特化） | 確認要 | 確認要 |
| スマート帳票（chouhyo） | 無料〜 | 対応（NotoSansJP埋め込み） | 対応 | 対応 |
「確認要」と書いているのは、筆者が実際の動作を確認できていないためです。導入前に各アプリのサポートに直接確認することをおすすめします。
Order Printer ProはApp Storeのレビューが1,600件超と実績が厚く、英語圏では定番の選択肢です。日本語対応のためのCSS知識が必要な点を承知の上で使うなら、信頼できる選択肢だと思います。
顧客が自分でダウンロードできるかどうか、という観点
ここはあまり語られない話なんですが、「PDFをマーチャント側が送る」のではなく「顧客が自分でダウンロードする」仕組みを作れるかどうかも、選択肢によって差があります。
注文確認メールにPDFを添付して送る方式は、一度送ったら終わりです。顧客が後で「やっぱり領収書が必要」となった時、マーチャント側が都度対応しなければなりません。ECでは領収書の再発行依頼は珍しくなく、これが積み重なると地味に時間を取られます。
ShopifyにはApp Proxyという機能があり、ストアのURL（例：{shop}/apps/chouhyo/download）でアプリのコンテンツを直接表示できます。この仕組みを使えば、顧客が注文番号やメールアドレスで認証したうえで、自分の領収書PDFをいつでも取得できるページをストア内に設けられます。
顧客ダウンロードへの需要があるかどうかは、ストアの規模や顧客層によるので一概には言えませんが、BtoB取引が多いストアや、経費精算で領収書を使う顧客が多いストアでは、この機能があるかどうかが地味に効いてきます。
FAQ
Q. ShopifyのPDF領収書をAcrobatで開くと□になる原因は？
PDFにフォントが埋め込まれていないためです。ブラウザのプレビューはOSのシステムフォントで日本語を表示できますが、PDF保存時にフォント情報が含まれないと、Adobe Acrobatなど別のビューワーが対応グリフを見つけられず□に化けます。
Q. プレビューでは正常に見えるのに、PDFで保存すると文字化けするのはなぜですか？
ブラウザのプレビュー（印刷プレビュー）はOSのシステムフォントを使って画面に描画しているため、日本語が正常に見えます。一方、「PDFとして保存」した場合、テンプレートにフォント指定がないとフォントデータがPDF内に埋め込まれません。別の端末や環境でそのPDFを開くと、フォントが存在しないため□になります。
Q. Order Printerのテンプレートに日本語フォントを追加する方法は？
テンプレートCSSにGoogle Fontsなどから日本語フォントを@importして指定します。ただしブラウザ印刷によるPDF保存であるため、フォントの埋め込みが保証されず、環境によっては文字化けが再発することがあります。Order Printer Proは@import対応の知見が比較的多いとされています。
Q. NotoSansJPをShopifyのPDFに埋め込むにはどうすればいいですか？
Order Printer系テンプレートのCSSでは埋め込みを確実に制御できません。jsPDFのようなPDF生成ライブラリ側でNotoSansJPのフォントデータをbase64で読み込み、ライブラリにフォントを登録した上でPDFを生成する方法が、フォント埋め込みを確実にできます。
Q. 文字化けしない日本語対応の領収書アプリはありますか？
Order Printer ProはCSSカスタマイズで対応できます。「領収書 by UnByte」や「スマート帳票（chouhyo）」は日本語を前提に設計されており、インストール後そのままで日本語PDFが出力されます。
Q. Shopify標準の注文確認メールは日本語で正常に届きますか？
はい。注文確認メールはHTMLメール形式で、フォントの埋め込みを必要としないため、日本語が崩れる問題は通常起きません。PDF帳票とは仕組みが根本的に異なります。
Q. 顧客が自分で領収書PDFをダウンロードできる仕組みを作れますか？
ShopifyのApp Proxy機能を使えば実現できます。顧客がストア内の特定URLにアクセスし、ログインまたはメール認証後にPDFをダウンロードできるページを設けることが可能です。
Q. この問題はいつごろから報告されていますか？
Shopifyコミュニティには2022年以前から同様の報告があります。Shopify標準テンプレートが日本語フォントに対応していないことが根本原因なので、標準機能の範囲では構造的に解消しにくい問題です。
まとめ
- PDF文字化けの原因はフォント未埋め込み。プレビューが正常でもPDFが化けるのはそのため
- 注文確認メールはHTMLメールなので崩れない（PDFとは別の仕組み）
- Order Printerでも日本語フォントのCSS指定で対応できるが、環境依存の不確実性が残る
- 確実に解決したい場合は、フォント埋め込みを保証する方式のアプリを使う
- BtoB取引が多いなら、顧客が自分でダウンロードできる仕組みも検討する価値がある
コードを触りたくない、インボイス対応や電帳法対応も一緒に済ませたいという場合は、スマート帳票に無料プラン（月5件）があります。向いていないケースも正直に書いておくと、テンプレートを自前でカスタマイズしたい・英語圏アプリで十分という方にはOrder Printer Proのほうが実績と情報量で勝ります。
よくある質問
- Q. ShopifyのPDF領収書をAcrobatで開くと□になる原因は何ですか？
- PDFファイルにフォントが埋め込まれていないためです。ブラウザのプレビューはOSのシステムフォントで日本語を表示できますが、PDF保存時にフォント情報が含まれないと、Adobe Acrobatなど別のビューワーが対応グリフを見つけられず□に化けます。
- Q. プレビューでは正常に見えるのに、PDFで保存すると文字化けするのはなぜですか？
- ブラウザのプレビュー（印刷プレビュー）はOSのシステムフォントを使って画面に描画しているため、日本語が正常に見えます。一方、「PDFとして保存」した場合、テンプレートにフォント指定がないとフォントデータがPDF内に埋め込まれません。別の端末や環境でそのPDFを開くと、そのフォントが存在しないため□になります。
- Q. Shopify Order Printerのテンプレートに日本語フォントを追加する方法は？
- Order Printer（公式）のテンプレートCSSに、Google Fontsなどから日本語フォントを@importして指定します。ただしブラウザ印刷によるPDF保存であるため、フォントの埋め込みが保証されず、環境によっては文字化けが再発することがあります。Order Printer Proは@import対応が比較的安定しているとされています。
- Q. NotoSansJPをShopifyのPDFに埋め込むにはどうすればいいですか？
- Order Printer系テンプレートのCSSでは埋め込みを確実に制御できません。jsPDFのようなPDF生成ライブラリ側でNotoSansJPのフォントデータをbase64で読み込み、ライブラリにフォントを登録した上でPDFを生成する方法が、フォント埋め込みを確実にできます。スマート帳票はこの方式を採用しています。
- Q. 文字化けしない日本語対応の領収書アプリはありますか？
- Order Printer Proはフォント指定のカスタマイズで対応可能です。「領収書 by UnByte」や「スマート帳票（chouhyo）」は日本語を前提に設計されており、インストール後そのままで日本語PDFが出力されます。
- Q. Order Printer Proは日本語領収書に対応していますか？
- CSSカスタマイズで対応できます。テンプレートに日本語フォントを@importして指定することで、日本語の印刷が可能になります。ただしテンプレート編集の知識が必要です。
- Q. Shopify標準の注文確認メールは日本語で正常に届きますか？
- はい。注文確認メールはHTMLメール形式で、フォントの埋め込みを必要としないため、日本語が崩れる問題は通常起きません。PDF帳票とは仕組みが根本的に異なります。
- Q. 顧客が自分で領収書PDFをダウンロードできる仕組みを作れますか？
- ShopifyのApp Proxy機能を使えば実現できます。顧客がストア内の特定URLにアクセスし、ログインまたはメール認証後にPDFをダウンロードできるページを設けることが可能です。スマート帳票はこの仕組みを標準搭載しています。