QRコードガイド

QRコードのSVGとPNG:どちらをダウンロードすべきか

結論から言うと、印刷するものにはSVG、画面上の固定サイズの用途にはPNGです。理由も重要です。QRコードはロゴ以上に、形式選びを誤ると影響が大きいからです。

図形とピクセルの違い

PNGはピクセルのグリッドを保存します。拡大すると、ソフトウェアがピクセルの間を補完するため、すべての輪郭がぼやけます。SVGは「ここにこのサイズ、この色で正方形を描く」という命令を保存します。2cmでも2mでも、指定すればそのまま鮮明に描画されます。

QRコードが写真よりシビアな理由

スキャナーはグリッドをサンプリングし、各セルが明るいか暗いかを判定してQRコードを読み取ります。輪郭がぼやけるとセルが中間のグレーに近づき、中間に近いセルほどデコードに失敗しやすくなります。少しぼやけた写真はそれでも写真に見えますが、少しぼやけたQRコードはQRコードとして機能しなくなります。

密度の高いシンボルではこの問題がさらに深刻になります。vCardのレコードやパラメーター付きのURLのような長いペイロードは、同じ物理サイズの正方形により多くのモジュールを必要とするため、各モジュールが小さくなり、ぼやけた輪郭がモジュールに占める割合も大きくなります。

用途で選ぶ

用途別に適した形式
コードの用途 形式 理由
名刺、チラシ、パッケージ SVG 印刷会社がレイアウトに合わせて拡大縮小しても劣化しません
ポスター、ウィンドウステッカー、看板 SVG 大きなサイズこそPNGが破綻する場面です
ベクター編集ソフトのデザインファイル SVG 図形を編集でき、色も変更でき、再サンプリングも不要です
メール署名 PNG メールソフトはラスター画像のほうがはるかに安定して扱えます
スライド資料やスクリーンショット PNG 表示サイズが固定されており、拡大縮小は発生しません
他社のCMSのアップロード欄 PNG システムによっては方針としてSVGのアップロードを拒否します

SVGを扱う

  1. 配置する。スクリーンショットを貼り付けない ファイルをレイアウトツールに読み込んでください。プレビュー画像をコピーするとベクターデータが失われ、結局ピクセルに戻ってしまいます。
  2. 慎重に色を変更する どのベクター編集ソフトでもモジュールの色を変更できます。明るい背景に暗いモジュールを配置してください。反転したコードやコントラストの低いパステルカラーの組み合わせは、実際の読み取り機で失敗します。
  3. 片方の軸だけ引き伸ばさない 縦横を同じ比率で拡大縮小してください。引き伸ばされたコードはグリッドが崩れており、誤り訂正機能でも形状のゆがみは直せません。
  4. クワイエットゾーンを確保する 余白はシンボルの一部です。モジュールぎりぎりまでトリミングすることが、見た目の良いレイアウトが読み取れなくなる最も多い原因です。

PNGを使わざるを得ない場合

最終的なレイアウトに必要なピクセルサイズ、またはそれ以上のサイズで書き出し、後から拡大しないでください。縮小はたいてい安全ですが、拡大するとぼやけの原因になります。

PNGを非可逆圧縮にかけないでください。JPEGのアーティファクトは白黒のはっきりした輪郭の周辺に集中しますが、QRコードはまさにそうした輪郭だらけです。ファイルを小さくしたい場合は、画像圧縮がPNGを可逆的に再エンコードし、実際に小さくならなければ結果を破棄します。

両方の形式に対して行われる検証

VaultaireはPNGとSVGを同じペイロードから生成し、完成した各ファイルを別のリーダーで再度デコードします。デコードしたテキストが確認した内容と一致した場合にのみ、ダウンロードが可能になります。これにより、破損したレンダリングが印刷に回る前に検出できます。ただし、最終レイアウトで余白(クワイエットゾーン)が保たれているかまでは分かりません。実際に印刷見本をスキャンして確認してください。

SVGとPNGに関するよくある質問

SVGかPNGか?

印刷するもの、サイズを変更する可能性があるもの(ポスター、パッケージ、カード、看板、デザインファイル)にはSVGを。メール署名やスライドのように画面上のサイズが固定された用途にはPNGを。

SVG形式のQRコードのほうが高品質ですか?

そもそも解像度という概念がありません。モジュールを図形として記述し、指定したサイズでそのまま描画されます。PNGは固定のピクセルグリッドを持ち、それを超えるとぼやけます。

色を変更できますか?

はい、どのベクター編集ソフトでも変更でき、ファイルの鮮明さは保たれます。明るい背景に暗いモジュールを配置してください。反転したコードやコントラストの低いコードは、形式にかかわらず一部の読み取り機で失敗します。

印刷したコードがぼやけて見えるのはなぜですか?

PNGがピクセルグリッドを超えて拡大され、プリンターがモジュールの端で細部を補完したためです。SVGを印刷するか、レイアウトに必要な正確なサイズでPNGを書き出してください。

印刷会社はSVGを受け付けますか?

ほとんどの印刷会社は受け付けており、どのレイアウトツールでも読み込めます。印刷会社がPDFやEPSを求める場合は、SVGをデザインツールに配置してそこから書き出してください。図形はそのまま保たれます。

後からPNGをSVGに変換できますか?

ラスターのコードをベクターにトレースし直しても、すでにぼやけた輪郭を推測することになります。代わりにペイロードからSVGを生成してください。数秒で済み、形状も正確です。