Shopify Order Printer の日本語文字化けを解決する方法【2024年新版対応】

お断り: 筆者は本文で言及するスマート帳票（chouhyo）の開発者です。アプリ紹介ではなく、Shopifyマーチャントが実際に困る問題への解説として書いています。

Shopifyの注文管理でOrder Printerを使ってPDFを出力したとき、日本語部分が□（四角）で表示される。プレビュー画面では正常に見えるのに、ダウンロードして開くと化けている。

このパターンで困っているストア運営者は少なくなく、Shopifyコミュニティにも同様のスレッドがいくつか立っています。原因は共通していて、解決策も限られています。この記事では技術的な仕組みから具体的な対処法まで、順を追って説明します。

TL;DR

項目内容
症状PDFに出力すると日本語が□になる。プレビューは正常
原因テンプレートにフォント指定がなく、PDFにフォントが埋め込まれない
即効策CSSに @import でNotoSansJPを追加
恒久策フォント埋め込み済みの帳票アプリに切り替える
重要な前提2024年夏に旧版（Legacy）は廃止。新版での動作は要確認

なぜプレビューでは見えてPDFだけ化けるのか

ここが本質的な部分なので、少し丁寧に説明します。

Order PrinterはHTMLとCSSで書いたテンプレートを使い、ブラウザのレンダリングエンジンでPDFを生成します。

定義：フォントの埋め込み（Font Embedding） PDFはファイル単体で開ける自己完結型フォーマットです。そのため、テキストを正しく表示するにはフォントデータをPDFファイル内に「埋め込む」必要があります。フォントが埋め込まれていない場合、PDFビューワーは手持ちのフォントで代替しますが、日本語グリフ（文字の形）を持たない欧文フォントが選ばれると□になります。

プレビュー画面は、ブラウザがOSにインストールされているシステムフォントを使って描画します。WindowsならMS PゴシックやYu Gothic、macOSならヒラギノが自動的に使われるため、CSSにフォント指定がなくても日本語が正常に見えます。

PDF保存の時点では話が変わります。ブラウザはCSSで指定されたフォントをPDFに埋め込もうとしますが、指定がなければ埋め込みません。結果として、PDFを開いたAcrobat（やその他のビューワー）が日本語フォントを持っていなければ□になります。

つまり、「プレビューは正常、PDF化すると化ける」は必ずこの構造から来ています。

即効：CSSにNotoSansJPを追加する

Order Printerのテンプレートエディタを開き、CSS冒頭に以下を追加します。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

これでPDF生成時にNotoSansJPが読み込まれ、フォントが埋め込まれるようになります。

ただし、いくつか注意点があります。

  • Google Fontsのサーバーへのリクエストが通ることが前提です。Order Printerが内部でどのタイミングでCSSを処理するかによっては、フォントが間に合わない場合があります
  • テンプレート内のすべての要素に font-family が継承されるよう、個別要素で上書きしている箇所がないか確認が必要です
  • ネットワーク環境によっては読み込みが遅延することがあります

動作確認は実際にPDFをダウンロードして開いて行ってください。プレビューで確認しても意味がありません。

2024年5月の新版Order Printer：旧テンプレートが使えない問題

2024年5月にOrder Printerが大幅にリニューアルされ、同年夏に旧版（Order Printer Legacy）は廃止・強制移行されました。

旧版で作成したテンプレートは新版ではそのまま動きません。具体的には、旧版で使っていたLiquidのオブジェクト名や変数が変わっているため、出力が壊れます。

移行後にテンプレートが壊れた場合 旧テンプレートを新版に貼り付けて修正しようとするより、新版のサンプルテンプレートから作り直す方が早いことが多いです。Shopifyの公式ドキュメント（help.shopify.com）で新版のテンプレート変数一覧を確認してください。

Shopifyコミュニティには「Order Printer（2024年5月〜）カスタマイズについて」というスレッドが立ち、移行後の混乱についての投稿が続いています。旧版で動いていたコードが動かなくなっているケースは、フォント問題とは別の問題として切り分けて対処してください。

代替アプリの比較

「CSSのカスタマイズをやりたくない」「新版への移行作業が面倒」という場合は、専用の帳票アプリを使う選択肢があります。

アプリ料金日本語対応特徴
Shopify Order Printer（公式）無料テンプレートを自分でカスタマイズ要無料だがコードが必要
Order Printer Pro無料〜$10/月程度テンプレートありレビュー1,600件超、PDF自動メール送信あり
Mixlogue Quick Order Printer$9/月程度日本語サポート付き日本製、インボイス対応テンプレートあり
領収書 by UnByte$9.99/月日本語対応日本ストア向け
スマート帳票（chouhyo）月5件まで無料フォント問題が原理的に発生しない電帳法対応、jsPDF+NotoSansJP埋め込み方式

料金は記事執筆時点のものです。各アプリのストアページで最新情報を確認してください。

chouhyoを選ぶ条件・選ばない条件

chouhyoが合う場合

  • コードを書かずに済ませたい
  • 電帳法対応（SHA-256改ざん検知、監査ログ）も同時に必要
  • 顧客向けのPDFダウンロードページが欲しい
  • インボイス制度対応（T番号、税率別内訳）が必要

chouhyoが合わない場合

  • 注文確認メール内の帳票をカスタマイズしたい（現時点では非対応）
  • 既存のOrder Printerテンプレートデザインを保ちたい
  • 実績のあるアプリを使いたい（Order Printer Proはレビュー1,600件超、chouhyoは新規アプリ）

chouhyoがフォント問題に強い理由は、jsPDFというJavaScriptのPDFライブラリを使い、NotoSansJPフォントデータをPDFに直接埋め込む方式を採用しているからです。ブラウザのレンダリング結果をPDF化するOrder Printerとは、生成の仕組みが根本的に異なります。

ただし、アプリを切り替えるということはOrder Printerのテンプレートで作り込んだデザインは使えなくなることを意味します。移行コストも含めて判断してください。

FAQ

Q. Shopify Order Printerで日本語が□になるのはなぜ？

Order PrinterはHTMLテンプレートをブラウザでレンダリングしてPDF化しますが、デフォルトテンプレートに日本語フォントの指定がありません。PDFを生成する時点でフォントが埋め込まれないため、AdobeAcrobatなどのPDFビューワーが代替フォントに置換し、□になります。

Q. プレビューは正常なのにPDF保存後に文字化けするのはどういう仕組み？

ブラウザのプレビュー表示はOSにインストールされているシステムフォントを使って描画するため正常に見えます。しかしPDFとして保存する段階でフォントをファイルに埋め込む必要があり、CSSで明示的に指定していないWebフォントはこの時点で抜け落ちます。

Q. Order Printer のCSSに日本語フォントを@importで埋め込む書き方は？

テンプレートのCSS冒頭に @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); を追加し、body { font-family: 'Noto Sans JP', sans-serif; } を指定します。ただし2024年5月の新版Order Printerでも有効かどうかは各自で動作確認が必要です（Google Fontsのサーバー応答状況に依存する）。

Q. 2024年5月の新版Order Printerで旧テンプレが使えなくなった。どうする？

2024年夏に旧「Order Printer Legacy」は廃止され、新版「Shopify Order Printer」へ強制移行されました。旧テンプレのLiquid構文は新版では動作しません。新版のテンプレート変数仕様はShopify公式ドキュメントで確認し、テンプレートを作り直す必要があります。

Q. Order Printer Pro と Shopify Order Printer の違いは？

Shopify Order Printerは公式提供の無料アプリで、HTMLテンプレートを自分でカスタマイズする必要があります。Order Printer Proはサードパーティ製で日本語対応テンプレートやPDF自動メール送信機能を備えています。レビュー数は1,600件を超えており実績があります。

Q. 文字化けしない日本語対応の代替アプリは？

Order Printer Pro（サードパーティ・日本語テンプレートあり）、Mixlogue Quick Order Printer（日本製・日本語サポート・インボイス対応）、スマート帳票（jsPDF+NotoSansJP埋め込み方式・電帳法対応）などがあります。コードを書きたくない場合は代替アプリが現実的な選択肢です。

Q. Shopify標準の注文確認メールは日本語で正常に届くのに、なぜPDFだけ化ける？

注文確認メールはHTMLメールとしてブラウザ/メールクライアントが描画するため、OSのフォントで表示できます。PDF生成はフォントをファイルに埋め込む別の処理であり、仕組みが根本的に異なります。

Q. Order Printer Legacy から新版に移行したらテンプレートが壊れた。どうする？

旧版と新版でテンプレートのLiquid変数が変わっています。Shopify公式の移行ガイドでサポートされているオブジェクト・プロパティを確認し、テンプレートを一から書き直すのが確実です。既存テンプレートを流用しようとすると変数名の違いで出力が壊れます。

まとめ

  • 文字化けの原因はほぼ必ず「PDFにフォントが埋め込まれていない」こと
  • プレビューが正常でもPDFで化けるのは、ブラウザ描画とPDF生成の仕組みが違うから
  • 解決策はCSSへの @import 追加、または帳票アプリへの切り替え
  • 2024年夏にLegacy版は廃止済み。旧テンプレートは新版で作り直しが必要
  • コードを書かずに解決したい、電帳法対応も必要という場合は専用アプリを検討する

スマート帳票は月5件まで無料で使えます。フォント設定なしで日本語PDFが出力できるかどうか、インストールして確認してみてください。

Shopify App Store でスマート帳票を見る

よくある質問

Q. Shopify Order Printerで日本語が□になるのはなぜ？
Order PrinterはHTMLテンプレートをブラウザでレンダリングしてPDF化しますが、デフォルトテンプレートに日本語フォントの指定がありません。PDFを生成する時点でフォントが埋め込まれないため、AdobeAcrobatなどのPDFビューワーが代替フォントに置換し、□になります。
Q. プレビューは正常なのにPDF保存後に文字化けするのはどういう仕組み？
ブラウザのプレビュー表示はOSにインストールされているシステムフォント（Windows/macOSの日本語フォント）を使って描画するため正常に見えます。しかしPDFとして保存する段階でフォントをファイルに埋め込む必要があり、CSSで明示的に指定していないWebフォントはこの時点で抜け落ちます。
Q. Order Printer のCSSに日本語フォントを@importで埋め込む書き方は？
テンプレートのCSS冒頭に @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); を追加し、body { font-family: 'Noto Sans JP', sans-serif; } を指定します。ただし2024年5月の新版Order Printerでも有効かどうかは各自で動作確認が必要です（Google Fontsのサーバー応答状況に依存する）。
Q. 2024年5月の新版Order Printerで旧テンプレが使えなくなった。どうする？
2024年夏に旧「Order Printer Legacy」は廃止され、新版「Shopify Order Printer」へ強制移行されました。旧テンプレのLiquid構文（legacy_order変数など）は新版では動作しません。新版のテンプレート変数仕様はShopify公式ドキュメントで確認し、テンプレートを作り直す必要があります。
Q. Order Printer Pro と Shopify Order Printer の違いは？
Shopify Order Printerは公式提供の無料アプリで、HTMLテンプレートを自分でカスタマイズする必要があります。Order Printer Proはサードパーティ製（無料〜月$10程度）で、日本語対応テンプレートやPDF自動メール送信機能を備えています。レビュー数は1,600件を超えており実績があります。
Q. 文字化けしない日本語対応の代替アプリは？
Order Printer Pro（サードパーティ・日本語テンプレートあり）、Mixlogue Quick Order Printer（日本製・日本語サポート・インボイス対応）、スマート帳票（jsPDF+NotoSansJP埋め込み方式・電帳法対応）などがあります。コードを書きたくない場合は代替アプリが現実的な選択肢です。
Q. Shopify標準の注文確認メールは日本語で正常に届くのに、なぜPDFだけ化ける？
注文確認メールはHTMLメールとしてブラウザ/メールクライアントが描画するため、OSのフォントで表示できます。PDF生成はフォントをファイルに埋め込む別の処理であり、仕組みが根本的に異なります。
Q. Order Printer Legacy から新版に移行したらテンプレートが壊れた。どうする？
旧版と新版でテンプレートのLiquid変数が変わっています。Shopify公式の移行ガイド（help.shopify.com）でサポートされているオブジェクト・プロパティを確認し、テンプレートを一から書き直すのが確実です。既存テンプレートを流用しようとすると変数名の違いで出力が壊れます。

関連記事