SVG・PNG・PDF・EPS：QRコードのファイルはどれをどこへ送るか

SVGかPNGか：どちらをダウンロードすべきか

コードを印刷する、デザインファイルに配置する、あるいは誰かがどこかの時点でサイズを変える——そのいずれかならSVGを選びます。すでに分かっているサイズで画面に表示するだけならPNGを選びます。ポスター、メニュー、ラベル、名刺に載るQRコードはSVGの仕事で、メール、スライド、ウェブページ、Instagramの投稿に入るQRコードはPNGの仕事です。

理由は、それぞれのファイルが何を保存しているかにあります。ベクターファイルとは、画像をピクセルではなく形と座標として保存したもので、どんなサイズにも輪郭の精度を失わずに描き直せます。ラスターファイルとは、画像をピクセルの固定された格子として保存したもので、書き出したサイズを超えて拡大するとすべての輪郭が甘くなります。QRコードを読むのは、暗いモジュールと明るいモジュールを見分けなければならないカメラであり、甘い輪郭は、デコーダーの誤差の余裕を狭めるまさにその欠陥です。

どちらとも決めかねるときは、両方ダウンロードしてください。2つのファイルは同じコードで、書き出しにかかるのはそれぞれ1秒です。そしてSVGが手元にあることが、1年後によく起きる失敗を防ぎます。ポスターがコードを30cmで必要としているのに、残っているファイルはメールのやり取りに紛れた600ピクセルのPNGだけ、という失敗です。

4つの形式を、一文ずつで

SVGは、プレーンなXMLのテキストとして書かれたベクター画像形式です。だからSVGのQRコードは、どのブラウザーでも開き、どのデザインツールでも編集でき、解像度の上限なく拡大できます。PNGは透明に対応した可逆のラスター形式で、だからQRコードのくっきりした輪郭を、書き出したサイズでそのまま正確に再現します。PDFはベクターとラスターのどちらの内容も持てるページの形式で、だからPDFのQRコードは、中身を決めつけずに確かめる必要があります。EPSは、PostScriptを土台にしたベクター形式で、PDFより古い印刷と制作の作業手順によって生き延びてきました。

3行目に注目してください。4つのうちPDFだけが、名前から中身が分かりません。PDFはきれいなベクターの図版も、画面を撮った写真も同じように持てて、ファイルの一覧ではどちらも見分けが付きません。この一つの曖昧さが、他の3つの形式を合わせたよりも多くの印刷トラブルを生んでいます。

どのファイルをどこへ送るか

この表の2つの行は、対にして読む価値があります。PDFを求める印刷所と、SVGを求める彫刻の業者が欲しがっているのは同じもの、つまり機械が描き直せる図形であり、違う形式を名指しするのは、使っているソフトの連なりが違うからにすぎません。取引先が自分では作れない形式を名指ししてきたら、SVGでよいか尋ねてみてください。いまどきの制作用ソフトは、たいてい受け付けます。

KoloQRの書き出しに実際に入っているもの

円形やカスタムの形のQRコードを作れる無料のQRコード作成ツールであるKoloQRは、同じダウンロードメニューからPNG、SVG、PDF、EPSを書き出し、Figma向けにはSVGのマークアップをそのままクリップボードにコピーします。4つのファイルは作られ方が違い、その違いが、仕事にどれが適しているかを決めます。

• SVG： 本物のベクター。コードの各部分は名前付きのレイヤーに分かれ、曲線に沿ったラベルの文字はアウトライン化されているので、この先どこでもフォントを入れる必要がありません。透かしもサイズの上限もありません。
• PNG： 1モジュールあたり40ピクセルでレンダリングされます。短縮URLの典型的なコードはクワイエットゾーンを含めて幅41モジュールなので、およそ1,640ピクセルになり、300DPIならおよそ14cmに足ります。背景はデザインで使っている色そのままで、正方形でないフレームの外側は透明です。
• PDF： ジオメトリ10単位につき1ポイントでコード自体の大きさに合わせた1ページに、1モジュールあたり80ピクセルの可逆画像としてコードを収めます。ページの原寸で576DPIにあたるので、およそ1.9倍の拡大までは300DPIを保ちます。15cmで開くコードなら、およそ28cmまでです。
• EPS： 本物のベクター変換で、RGBのPostScript Level 2のパスとして書き出されます。すべてのモジュール、フレーム、アウトライン化されたラベルが塗りのパスになるので、このファイルはPDFではなくSVGのように拡大縮小できます。
• Copy to Figma： 同じSVGのマークアップを、ダウンロードではなくクリップボードに載せます。貼り付けると編集可能なベクターレイヤーがキャンバスに届きます。詳しくはQRコードをFigmaにコピーするガイドをご覧ください。

この一覧からは、正直に言っておくべき制約が2つ出てきます。KoloQRのPDFは、ベクターの図形ではなくPDFのページに載った高解像度の画像なので、A4をはるかに超えて拡大する仕事には、代わりにSVGかEPSを送るべきです。そしてEPSへの変換が読むのは図形であって、埋め込まれた画像ではありません。自分の画像ファイルとしてアップロードしたロゴはEPSから落ちますが、内蔵のブランドロゴはベクターのパスなので残ります。アップロードしたロゴが入っているコードなら、送る前にEPSを確認してください。

コードのそれ以外の要素は、4つのファイルで同一です。ペイロード、シンボルバージョン、誤り訂正レベル、クワイエットゾーンは、書き出すときではなくコードを生成するときに決まるので、形式の選択そのものが、スキャンできないコードを読めるようにすることも、読めるコードを失敗させることもありません。

SVG：手元に残すファイルであり、たいていは送るファイル

SVGは、QRコードのマスターだと考えてください。解像度を持たないので、同じファイルから2cmでも2mでも印刷できます。プレーンなテキストなので容量が小さく、メールでのやり取りやバージョン管理にも耐えます。そしてどのデザインツールでも開くので、同僚は書き出し直しを頼まずにそのまま配置できます。

SVGは、正しい意味でコードを編集可能に保ちます。モジュールは個々の図形のままなので、デザイナーはモジュールの格子に触れずに、IllustratorやFigmaの中でコードの色や背景を変えられます。デザイナーがやってはいけないのは、その格子を少し動かす、比率を保たずに引き伸ばす、一部を削除することです。モジュールの並びこそがデータであり、並べ替えれば、コードの言っている内容が変わります。

SVGが受け付けてもらえない場所は、あらかじめ知っておく価値があります。

• メール： メールソフトはセキュリティ上の理由でSVGを取り除くか遮断するので、メール本文に入れるコードはPNGでなければなりません。
• SNS： Instagram、LinkedIn、X、TikTok、YouTubeは、ラスターのアップロードしか受け付けません。
• 一部のサイト作成サービスやテンプレートのツール： SVGのアップロードが有料プラン限定になっていたり、そもそも禁じられていたりします。最もよく行き当たるのはCanvaです。
• 古いオフィス文書： WordとPowerPointのSVG対応は、いまのバージョンでは問題ありませんが、かなり古いものでは当てになりません。相手が何を使っているか分からないときは、PNGのほうが安全な添付です。

どれも、SVGの書き出しを省く理由にはなりません。SVGを保管用のファイルとして持っておき、ベクターを受け付けないプラットフォームがあるたびに、そこからPNGを書き出す。そのための理由です。

PNG：画面には最適、印刷には上限あり

表示サイズが分かっていて動かないときは、いつでもPNGが正しい選択です。可逆なのですべてのモジュールの輪郭が書き出したとおりに再現され、どこでも受け付けてもらえます。KoloQRを含むほとんどのQRコード作成ツールで、いまもPNGが既定のダウンロードである実際上の理由がこれです。

その限界は、意見ではなく算数です。ラスターのQRコードがきれいに印刷できるのは、およそピクセル幅÷300×2.54センチメートルまでです。1,000ピクセルのPNGならおよそ8.5cm、1,640ピクセルのKoloQRの書き出しならおよそ14cmまで届き、それを超えるとモジュールの輪郭がにじみ始めます。150DPIで足りる大判の場合も含めた計算式の全体は、QRコードの解像度のガイドにあります。

画面向けには、1モジュールあたり少なくとも4CSSピクセルを目安にし、高精細なディスプレイでも鮮明なままにするために、表示サイズの2倍で書き出します。41モジュールの短縮URLの典型的なコードなら、表示におよそ165ピクセル、書き出しに330ピクセルが必要です。これを下回るサイズにすると、画面上のコードは、スマホを斜めに構えてスキャンされたときに失敗し始めます。

透明の設定は、既定のまま流すのではなく、意識して決めるべき項目です。透明なPNGを暗い背景や模様のある背景に置くと、クワイエットゾーンが失われ、記号の境界を見つけられないスキャナーはデコードしません。コードが明るく平らな面に載ると分かっているのでなければ、白のべた塗りで書き出してください。

PDF：印刷所がPDFを求めるとき、それが意味していること

PDFを求める印刷所が求めているのは、自分たちの作業手順で配置し、校正し、面付けできるファイルであって、ベクターであることを主張しているわけではありません。PDFのページはベクターの図版もラスターの画像も持てるので、形式だけでは、コードをどこまで拡大できるかについて何も保証しません。

送る前に確かめてください。PDFを開いて1,600%まで拡大します。ベクターの図版はどこまで拡大しても輪郭が完全にくっきりしたままですが、PDFの中のラスター画像は目に見える四角に変わります。この30秒のテストで、そのファイルがバナー用に拡大できるのか、作られたときのサイズ付近に固定されているのかが分かります。

PDFの中で本当に解像度から自由でなければならないなら、PDFを書き出すのではなく、SVGからPDFを組み立てましょう。

1. SVGをダウンロードする. PNGやPDFではなくSVGでコードを書き出します。図形を持っているのはSVGだからです。
2. ベクター編集ソフトで開く. Illustrator、Inkscape、Affinity Designer、FigmaはいずれもSVGをそのまま開けます。Inkscapeは無料で、この作業には十分です。
3. ドキュメントのサイズを設定する. アートボードまたはドキュメントを最終的な印刷サイズにミリメートルで設定し、クワイエットゾーンを含めて、コードを比率を保ったまま拡大縮小して埋めます。
4. PDFとして保存または書き出す. IllustratorやInkscapeでは「PDFとして保存」を、FigmaやAffinityでは「PDFとして書き出し」を使います。ベクターのデータを保持するオプションはすべて残し、ラスタライズはしないでください。
5. 結果を確かめる. PDFを開き直して1,600%まで拡大します。モジュールの輪郭がまだくっきりしていれば、そのファイルはベクターです。
6. 印刷した校正をスキャンする. 最終サイズで1枚印刷し、そのファイルが本刷りに回る前に、iPhoneとAndroidの両方でスキャンします。

PDFにはもう一つ、印刷とはまったく関係のない使い道があります。請求書、チケット、イベントの資料といった、送る書類の中に入れるコードです。PDFの書類に置かれたQRコードは画面からでも問題なくスキャンできます。搭乗券がそうやって成り立っているのは、このためです。ただしページ上では2cm以上に保ってください。読み手は、腕を伸ばした距離のノートパソコンの画面からスキャンするからです。

EPS：いまも使い道が2つある旧来の形式

EPSを書き出すのは、取引先が名指しで求めてきたときだけにしましょう。AdobeはPDFとAIをEPSの後継として扱ってきましたし、いまのソフトはたいていSVGかPDFのほうをうまく扱います。それでも、シルクスクリーンの業者、刺繍の業者、サイン業者、古いプリプレスのシステムは、いまもEPSを必須の形式として挙げていて、その要求は現実のものです。

EPSには、使い方を変える性質が2つあります。EPSは生きた透明に対応しないので、透明な領域はファイルを書き出す時点で統合されます。紙の色が透けることを当てにせず、べた塗りの背景でコードを書き出すべき理由がこれです。そしてEPSは、KoloQRが書き出すものを含め、ほとんどの書き出しで色をRGBとして運ぶので、CMYKで刷る印刷所はそれを変換します。純粋な黒のコードなら、その変換は何ごとも起きません。ブランドカラーなら、変換に任せるのではなく、望むCMYKの掛け合わせを印刷所に指定してください。

QRコードに特有の落とし穴は、変換を生き延びないものにあります。EPSは図版の中の図形から書き出されるので、図形ではなく埋め込まれた画像であるもの——最もよくあるのは、自分のPNGとしてアップロードしたロゴ——は飛ばされます。コード自体は影響を受けず、変わらずスキャンできます。ロゴがただそこにないだけです。送る前に一度EPSを開けば、その違いはすぐに分かります。

QRコードを傷める形式：JPEG、WebP、スクリーンショット

QRコードをJPEGで保存したり送ったりしてはいけません。JPEGは高周波の細部を捨てることで圧縮しますが、QRコードはほとんど高周波の細部そのもの、つまり黒から白への急な切り替わりが何千とあるものです。結果として、すべてのモジュールの周りにかすかなリンギングが生まれ、それが印刷にも残って、デコーダーが測るまさにその場所でコントラストを下げます。

この失敗は、目に見える形ではなく静かに起こります。JPEGに傷められたコードは、たいてい明るい画面ではまだスキャンでき、そのうえで、吸い込みやすい紙、薄暗い照明、斜めの角度では動かなくなります。それはまさに、本刷りが出会う条件です。ノイズはピクセルに焼き付いているので、そのファイルをあとからPNGとして保存し直しても、何も直りません。

印刷まで届いてしまうことが最も多いのは、スクリーンショットの行です。プレビューからスクリーンショットを撮り、書類に貼り付けて印刷所に送られたコードは、余白を切り取られたおよそ100DPIで到着し、印刷所には、もっと良いファイルが存在したことを知る手立てがありません。コードを作り直すのは、このスクリーンショットで大丈夫かと尋ねるメールを書くよりも短い時間で済みます。

送られてきたファイルがどちらの種類かを見分ける方法

拡張子は主張であって、保証ではありません。クライアント、代理店、古い保管庫からコードが届いたときは、4つの確認でおよそ1分で正体が分かります。

1. SVGをブラウザーで開いて1,000%まで拡大する。 本物のベクターは輪郭がくっきりしたままです。四角に変わるなら、そのSVGはSVGのタグで包まれたラスター画像であり、これは一部の変換ツールが実際に作り出すものです。
2. ファイルサイズを確かめる。 ベクターのQRコードは、たいてい数キロバイトから数十キロバイトです。数メガバイトのSVGやEPSは、ほぼ確実にビットマップを埋め込んでいます。
3. PDFを1,600%まで拡大する。 同じテスト、同じ見分け方です。ベクターは鮮明なまま、ラスターはピクセルが見えてきます。
4. クワイエットゾーンを探す。 形式が何であれ、四辺すべてに4モジュール分の空白の余白がなければなりません。ぎりぎりで切り抜かれたファイルは、どの形式でも取り戻せないものを、すでに失っています。

どれか一つでも通らなければ、ファイルを修復するのではなくコードを作り直してください。手元のコードをスマホでスキャンして遷移先を読み取り、その遷移先をQRコード作成ツールに貼り付けて、新しいファイルを書き出します。新しいコードは数学的にきれいで、しかも古いコードが実際にどこを指していたのかも確認できます。何かを刷り直す前に、知っておく価値のあることです。

コードを壊さずに形式を変換する

下りの変換は安全で、上りの変換はそうではありません。ベクターからラスターへ——SVGからPNGへ、EPSからPNGへ——は、どのサイズを選んでもきれいに済む操作です。ラスターからベクターへ——PNGからSVGへ——は、そもそもファイルになかった図形を取り戻せませんし、自動トレースは、わずかに角が丸く、わずかにずれたモジュールを作り出して、デコーダーの余裕を食いつぶします。

ラスターのコードをどうしても作り直せないとき——元のファイルが失われていて、クライアントはもっと大きくしてほしいと言っている——は、バイキュービックやAIによる拡大ではなく、最近傍補間で整数倍に拡大してください。最近傍補間はピクセルを複製して輪郭をくっきり保ちますが、なめらかにするアルゴリズムは、スキャナーが測るまさにその境界をぼかします。

どの道を選ぶにせよ、世に出す前に結果をスキャンしてください。本番の紙に最終サイズで印刷して、iPhoneでもAndroidでも読める変換済みのコードは、動く変換済みのコードです。それに満たないものは、ただの想定です。

ファイル形式のよくある間違いと、その現れ方

これらの行に共通するのは、形式の問題が自分から名乗り出ることはめったにない、ということです。コードは作られた画面の上では正しく見え、それが暮らす素材の上で失敗します。だからこそ、形式をめぐるどの判断も、最後の一歩は、そのコードが実際に読まれる照明の下でスキャンする、印刷した校正になります。

デザインを始める前に形式を決めておけば、この一覧のほとんどは避けられます。コードを印刷するなら、生成し、SVGを書き出し、そのファイルをレイアウトを組む人に渡してください。ジェネレーターは同じコードから4つの形式すべてを作るので、この判断にかかるのは注意だけです。形式が決まるのは9つのチェックの4つ目で、残りは印刷チェックリストが順番に見ていきます。