公共性の高いサイト、テックブログ、代理店、小規模ビジネスのサイトには、すぐにQRコードを作りたい訪問者が必ず訪れます。しかし今のままでは、その訪問者はそれを別のサイトで作るためにあなたのサイトを離れてしまいます。離脱は、戻ってこない訪問です。

解決策はシンプルです。QRコード生成ツールを自分のサイトの中に、ウィジェットとして設置すること。訪問者はページを離れずにコードを作れます。あなたは再訪問を呼び込む便利なツールを手に入れ（時にはページを紹介してくれる人からのリンクも得られます）、しかもバックエンドのコードを一行も書く必要はありません。

このチュートリアルでは1分でできる方法を紹介します。埋め込みスニペットをコピーして、HTML、WordPress、Wix、Squarespaceに貼り付けるだけです。

QRコード生成ツールを自分のサイトに設置する理由

  • エンゲージメント: 訪問者は読んで離脱するだけでなく、ページと実際にやり取りします。
  • リテンション: 別サイトで新しいタブを開かなくても、QR作成というニーズをその場で解決できます。
  • 便利なツール＝リピートトラフィック: 一度使った人は次にQRが必要になったときに戻ってくる傾向があり、ページを他の人に勧めてくれることもあります。
  • オーガニックなリンク獲得: 埋め込みツールは、他のサイトが自然にリンクしたくなるコンテンツです。
  • メンテナンス不要: ウィジェットはCode2Scanのサーバー上で動作します。コードを貼るのは一度だけです。

1分でできる方法：埋め込みコードをコピー＆ペースト

インストール不要、アカウント不要、JavaScriptを書く必要もありません。生成ツールを表示したい場所に貼り付けるだけの、単一のHTMLブロック（<iframe>）です。

<iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>

各属性の役割は次のとおりです。

属性 役割
src ウィジェットのアドレス — 変更不要
width="100%" 貼り付けたコンテナの幅いっぱいに表示
height="400" 高さ（ピクセル） — レイアウトに合わせて調整
style="max-width:340px" 大画面でウィジェットが巨大になるのを防ぐ
loading="lazy" 訪問者がスクロールして到達したときだけ読み込む — ページを重くしない
title="..." アクセシビリティ：スクリーンリーダー向けにiframeを説明

どこに貼るか、何が得られるか

貼る場所 メリット
ブログのフッター コンテンツの横に便利なツール、滞在時間が伸びる
お問い合わせページ 訪問者がその場で住所やリンクのQRを作れる
デジタルマーケティングの記事 最適な文脈 — QRコードについて読んでいる人はすでに試したいと思っている
代理店のランディングページ 開発コストゼロで技術力を示せる
社内ダッシュボード／イントラネット 他のツールに頼らずチームがQRを作成できる

素のHTMLでの追加方法

サイトが静的HTML（またはカスタムテンプレート）の場合、ウィジェットを表示したい場所に<iframe>をそのまま貼り付けます。<div>やセクション、サイドバーの中でも構いません。

<section>
  <h2>QRコード生成ツール</h2>
  <iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>
</section>

ファイルを保存して公開すれば、ウィジェットはすでに動作しています。

WordPressでの追加方法

  1. ウィジェットを表示したいページまたは投稿を編集します。
  2. ブロックエディタで**「カスタムHTML」ブロックを追加するか、クラシックエディタのテーマなら「テキスト/HTML」**ウィジェットを使います。
  3. <iframe>のコードをブロック内に貼り付けます。
  4. 公開前にプレビューをクリックして確認します。
  5. ページを公開します。

プラグインは不要です。WordPress標準のHTMLブロックだけで十分です。

WixまたはSquarespaceでの追加方法

どちらも専用の要素からカスタムHTMLを挿入できます。

  • Wix: **「埋め込み」→「HTMLの埋め込み」**要素を追加し、iframeコードを貼り付けて画面上で要素のサイズを調整します。
  • Squarespace: **「コードブロック」**タイプのコンテンツブロックを追加し、スニペットを貼り付けて保存します。

どちらの場合も、ウィジェットは確保されたスペースに合わせて自動調整されるため、width="100%"を触る必要はありません。

無料・登録不要、どんなCMSでも動作

このウィジェットは公開されており無料です。ログインもAPIキーも利用制限もありません。HTMLを受け付けるあらゆるプラットフォーム — WordPress、Wix、Squarespace、Webflow、Shopify、Notion、手作りのサイトでも動作します。訪問者が自分のサイトに何もインストールせず一度きりのQRを必要としているだけなら、無料QRコード生成ツールを直接使うこともできます。ただし、ウィジェットを埋め込んでおけばその遠回りを省けます。

基本的なカスタマイズ：幅と高さ

よくある調整は2つです。

  • 幅を狭くする: ウィジェットが狭いサイドバーにある場合、width="100%"をwidth="340"のような固定値に置き換えます。
  • 高さを高く／低くする: height="400"はほとんどの場合うまく機能しますが、ウィジェットがコンテンツを切り取ってしまう場合は450や500に増やしてください。

小さすぎるサイズ（幅300px未満）は避けましょう。生成ツールが窮屈になり、モバイルで使いづらくなります。

完全なステップバイステップ

  1. QRコードウィジェットのページにアクセスし、用意された埋め込みコードをコピーします。
  2. <iframe>を自分のページのHTML、WordPressのHTMLブロック、またはWix/Squarespaceのコード要素に貼り付けます。
  3. レイアウトに合わせて必要ならwidthとheightを調整します。
  4. ページを保存して公開します。
  5. モバイルとデスクトップの両方でテストします。実際にQRを作成してスキャンし、動作を確認しましょう。

よくある間違い

❌ loading="lazy"を忘れる

この属性がないと、訪問者がスクロールして到達しなくても、ページを開いた瞬間にiframeが読み込まれてしまい、初期表示が無駄に遅くなります。

❌ max-widthなしでiframeを貼る

大画面では、最大幅の制限がないwidth="100%"はウィジェットを過度に引き伸ばしてしまいます。元のスニペットにあるstyle="max-width:340px"は残しておきましょう。

❌ アカウントやAPIキーが必要だと思い込む

このウィジェットは公開されており、認証手順は一切ありません。もし別の説明を見かけたら、それは古い情報か別のサービスについてのものです。

❌ モバイルでテストしない

ウィジェット自体はレスポンシブですが、貼り付けたコンテナ側がそうとは限りません。完了したと判断する前に、必ずモバイルでの表示を確認しましょう。

❌ ウィジェットを追跡可能なQRコードと混同する

このウィジェットは訪問者のブラウザ内で静的なQRを生成します。各QRを何人がスキャンしたかを知りたい場合、それは別の機能です。UTMで追跡可能なQRコードのガイドを参照してください。

まとめ

  1. QRコードウィジェットから<iframe>スニペットをコピーします — アカウントは不要です。
  2. 素のHTML、WordPressのHTMLブロック、またはWix/Squarespaceのコード要素に貼り付けます。
  3. loading="lazy"により、ウィジェットがページの読み込みを遅くすることを防ぎます。
  4. レイアウトの空きスペースに合わせてwidthとheightを調整します。
  5. 無料で、どんなCMSでも動作し、あなたのデータを外部にさらすこともありません。
  6. スキャンの追跡や送信先の変更が必要な場合は、すでに動的QRコードの出番です。ウィジェットはシンプルで無料な生成部分をカバーします。

サイトに貼り付ける前に試してみたいですか？QRコードウィジェットを実際に見て、埋め込みコードをコピーしてみましょう — 公開まで1分もかかりません。今すぐ一度きりのQRコードを作りたい場合は、QRコード生成ツールをご利用ください。