WebサイトへのQRコード埋め込み
自己ホストSVG、クライアントサイド生成、動的QRパターン。1商品から100万商品まで対応します。
最終更新: 2026年
WebページにQRコードを追加するのは、これまでジェネレーターを開き、画像をダウンロードして再アップロードする作業でした。1回限りなら問題ありませんが、商品カタログ、チケットメール、各項目に固有のQRが必要なダッシュボードでは破綻します。本ガイドでは実践で使える3つのパターンを解説します — 静的ページ向けの自己ホストSVG、動的コンテンツ向けのJavaScriptライブラリでのクライアントサイド生成、そして印刷物のリンク先が変わる可能性がある場合の動的QR（リダイレクト）コードです。存在しないAPIではなく、今日使える手法だけを、ベンダーロックインなしで解説します。
手順
パターン1: 自己ホストSVG
qrmint.appでQRコードを生成し、SVGとしてダウンロード（無限にスケーラブル、テキストベース、約1KB）、/publicフォルダにコミットします。<img src="/qr-homepage.svg" alt="QRコード" width="200" /> で参照。どこでも動作、ランタイムコストゼロ、CSP対応。
パターン2: qrcode.jsでクライアントサイド生成
商品ごと・ユーザーごとのQRコードには、qrcode.js や qr-code-styling などのライブラリを<script>タグかnpmで導入します。ブラウザ内で各コードを描画: new QRCodeStyling({ data: productUrl, width: 256 }).append(el)。外部リクエストなし、トラッキングなし、API制限なし。
パターン3: 動的QRコード（Pro）
印刷物のURLは固定したまま飛び先を変えたい場合（レストランメニュー、期間限定キャンペーン等）は、qrmint.app Proで動的QRを生成します。qrmint.app/r/{code} の短縮URLが発行され、ダッシュボードから再印刷なしでリダイレクト先を更新できます。
EC：商品ごとのQR
商品テンプレートでビルド時（SSG/ISR）かクライアントサイドでQRコードを描画します。Shopifyなら {{ product.url }} を指すqrcode.jsスニペットを追加。Next.js / Astroなら getStaticProps でSVGを生成しインライン展開します。
メール：注文ごとのQR
取引メールは、ブロックされる可能性のある外部画像ホストに依存すべきではありません。サーバーサイドで生成したdata:URL（base64エンコードPNG）を埋め込むか、メールワーカーで node-qrcode を使ってインライン添付を生成します。
WordPress・CMS連携
qrmint.appでエクスポートしたSVGをメディアライブラリに追加し、画像ブロックとして挿入します。投稿ごとの動的QRには、既にJSスニペットローダーを使っていればクライアントサイドライブラリを呼ぶショートコードプラグインで対応可能（専用QRプラグイン不要）。
今すぐ試してみましょう
QRコードを作成 →ヒントとコツ
- ●印刷・Retinaディスプレイ向けにはPNGよりSVGを選びましょう — スケーラブルで小さく、約1KB対50KB以上です。
- ●レイアウトシフト（CLS）を防ぐため、<img>タグに明示的なwidth/heightを指定しましょう。
- ●大量の項目ごとQRには、qrcode.jsでクライアントサイド生成してサーバーコストと外部依存をゼロにしましょう。
- ●動的リダイレクトが必要な場合は qrmint.app Pro の動的QRを使えば、飛び先を更新しても短縮URLは変わりません。