QRコード生成ツールをJavaScriptとHTMLで自作！初心者でも簡単にできる作り方ガイド

「QRコードを自分で作ってみたいけど、なんだか難しそう…」と感じていませんか？
本記事では、HTMLとJavaScriptだけで動く「QRコード生成ツール」の作り方を、初心者の方でもわかるようにステップごとに丁寧に解説します。

コピペで動くサンプル付きなので、プログラミングが初めてでも安心して取り組めます。
実際にツールを作りながら、Web制作の基本も自然と身につく構成になっています。

記事の最後には、完成したQRコード生成ツールと、活用方法を紹介した記事へのリンクもご用意していますので、実践的に使いたい方もぜひご活用ください！

QRコード生成ツールを自作するメリットとは？

QRコードは無料で作成できるサイトもたくさんあります。
しかし、「自作する」という選択には、次のような大きなメリットがあります。

自作するメリット

広告なし・完全カスタマイズ自由
→ 商用利用やブランディングで見た目を統一したいときに便利です。
オフラインでも使える
→ インターネットに接続していなくても、自作ツールなら動作可能です。
学習にも最適
→ JavaScriptやHTMLの基礎が自然と身につきます。

自分で作れるようになると、ツールに頼らず柔軟に対応できますね！

ほーく

QRコード生成に必要な知識と準備（HTML＆JavaScript）

QRコードをWeb上で生成するためには、最低限のHTMLとJavaScriptの知識があれば大丈夫です。
ここでは、準備しておきたいポイントを解説します。

必要な知識レベル

HTML：基本的なタグの構造（<div> や <input> など）がわかればOK
JavaScript：関数やイベント処理（ボタンクリックで動作）が理解できれば十分です

初心者の方でも、「コピペ＋少しの編集」で動くので心配いりません。

使用するライブラリ：qrcode.min.js（CDN利用）

QRコード生成には、シンプルで人気のある qrcode.min.js を使用します。
CDN（インターネット上の読み込みリンク）を使うことで、ファイルのダウンロードや設置は不要です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

このコードをHTMLに記載すれば、すぐにQRコード生成が可能になります。

CDNなら設定も簡単！初心者でもすぐに使えるのが嬉しいですね！

ほーく

HTML＋JavaScriptでQRコードを作る手順（サンプルコード付き）

それでは実際に、QRコードを生成するシンプルなツールをHTMLとJavaScriptで作ってみましょう。以下の手順に従えば、すぐに動作するツールが完成します。

ステップ1：HTMLの基本構造を作成

まずは、入力欄・ボタン・QRコードを表示するスペースをHTMLで準備します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>QRコード生成ツール</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
  <h2>QRコードを生成</h2>
  <input type="text" id="qrText" placeholder="テキストやURLを入力">
  <button onclick="generateQRCode()">生成する</button>
  <div id="qrCode"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>QRコード生成ツール</title>

</head>

<body>

<h2>QRコードを生成</h2>

</body>

</html>

ステップ2：JavaScriptでQRコード生成の処理を書く

次に、ボタンを押すとQRコードを生成する関数を追加します。

<script>
function generateQRCode() {
  const text = document.getElementById("qrText").value;
  const qrCodeDiv = document.getElementById("qrCode");

  // 既存のQRコードをクリア
  qrCodeDiv.innerHTML = "";

  // QRコードを生成
  new QRCode(qrCodeDiv, {
    text: text,
    width: 200,
    height: 200
  });
}
</script>

function generateQRCode() {

const text = document.getElementById("qrText").value;

const qrCodeDiv = document.getElementById("qrCode");

// 既存のQRコードをクリア

qrCodeDiv.innerHTML = "";

// QRコードを生成

new QRCode(qrCodeDiv, {

text: text,

width: 200,

height: 200

});

}

</script>

ステップ3：ブラウザで開いて動作確認

作成したHTMLファイルを保存してブラウザで開いてみましょう。
テキストを入力してボタンを押すと、QRコードが表示されるはずです。

ここまでたった数十行！手軽にQRコードツールが作れるのは良いですね！

ほーく

画像として保存できるように改良しよう（PNG出力対応）

QRコードをWeb上で表示するだけでなく、画像としてダウンロードできるようにすると、印刷や配布資料への活用がぐっと便利になります。

ここでは、生成したQRコードをPNG形式で保存する機能を追加してみましょう。

ステップ1：ダウンロードボタンをHTMLに追加

以下のように、新たに「画像として保存」ボタンを追加します。
bodyタグの中に入れてください。

<button onclick="downloadQRCode()">画像として保存</button>

1	<button onclick="downloadQRCode()">画像として保存</button>

ステップ2：JavaScriptに保存処理を追加

QRCodeライブラリが生成するQRコードは、内部的に<img>タグまたは<canvas>タグとして表示されます。
そのうち、<img>タグが生成された場合には、src属性を使ってそのまま画像を保存できます。

<script>
function downloadQRCode() {
  const qrImg = document.querySelector("#qrCode img");
  if (!qrImg) {
    alert("QRコードがまだ生成されていません。");
    return;
  }

  const link = document.createElement("a");
  link.href = qrImg.src;
  link.download = "qrcode.png";
  link.click();
}
</script>

function downloadQRCode() {

const qrImg = document.querySelector("#qrCode img");

if (!qrImg) {

alert("QRコードがまだ生成されていません。");

return;

}

const link = document.createElement("a");

link.href = qrImg.src;

link.download = "qrcode.png";

link.click();

}

</script>

ステップ3：QRコードを一度生成してからダウンロード

QRコードが表示されていない状態ではダウンロードできません。
「生成する」→「画像として保存」の順に操作する必要があることをユーザーにも伝えておくと親切です。

ボタンひとつでPNG保存できるのは便利！名刺やポスターへの活用も簡単になりますね。

ほーく

サイズ変更や注意点など実用的なカスタマイズ方法

QRコード生成ツールをより実用的にするために、サイズ変更の機能追加や運用上の注意点を確認しておきましょう。

QRコードのサイズを変更する

QRCodeライブラリでは、widthとheightのオプションでサイズ指定が可能です。
生成関数に以下のようにオプションを追加しましょう。

new QRCode(document.getElementById("qrCode"), {
  text: input,
  width: 256,   // 幅
  height: 256,  // 高さ
});

new QRCode(document.getElementById("qrCode"), {

text: input,

width: 256, // 幅

height: 256, // 高さ

});

▼ HTMLにサイズ選択を追加する例

<label for="qrSize">サイズ：</label>
<select id="qrSize">
  <option value="128">128px</option>
  <option value="256" selected>256px</option>
  <option value="512">512px</option>
</select>

</select>

生成時には以下のように選択値を取得して使います。

const size = parseInt(document.getElementById("qrSize").value, 10);
new QRCode(document.getElementById("qrCode"), {
  text: input,
  width: size,
  height: size,
});

const size = parseInt(document.getElementById("qrSize").value, 10);

new QRCode(document.getElementById("qrCode"), {

text: input,

width: size,

height: size,

});

完成版のソースコード（コピー＆実行できます）

最後に、ここまで説明してきたQRコード生成ツールの完成形ソースコードを掲載します。
うまく動かない場合は、このコードと照らし合わせて確認してみてください。

HTML＋JavaScript 完成版（CDN使用）▼

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>QRコード生成ツール</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }
    label, select, input, button {
      margin: 5px 0;
      display: block;
    }
    #qrCode {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <h1>QRコード生成ツール</h1>

  <label for="textInput">QRコードに変換したいテキスト：</label>
  <input type="text" id="textInput" placeholder="https://example.com" />

  <label for="qrSize">サイズ：</label>
  <select id="qrSize">
    <option value="128">128px</option>
    <option value="256" selected>256px</option>
    <option value="512">512px</option>
  </select>

  <button onclick="generateQRCode()">QRコードを生成</button>
  <div id="qrCode"></div>

  <button onclick="downloadQRCode()">PNGでダウンロード</button>

  <script>
    let qr;

    function generateQRCode() {
      const input = document.getElementById("textInput").value;
      const size = parseInt(document.getElementById("qrSize").value, 10);
      const qrContainer = document.getElementById("qrCode");

      qrContainer.innerHTML = "";
      qr = new QRCode(qrContainer, {
        text: input,
        width: size,
        height: size
      });
    }

    function downloadQRCode() {
      const img = document.querySelector("#qrCode img");
      if (img) {
        const link = document.createElement("a");
        link.href = img.src;
        link.download = "qrcode.png";
        link.click();
      } else {
        alert("先にQRコードを生成してください。");
      }
    }
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>QRコード生成ツール</title>

<style>

body {

font-family: sans-serif;

margin: 20px;

}

label, select, input, button {

margin: 5px 0;

display: block;

}

#qrCode {

margin-top: 20px;

}

</style>

</head>

<body>

<h1>QRコード生成ツール</h1>

<label for="textInput">QRコードに変換したいテキスト：</label>

</select>

<button onclick="generateQRCode()">QRコードを生成</button>

<button onclick="downloadQRCode()">PNGでダウンロード</button>

let qr;

function generateQRCode() {

const input = document.getElementById("textInput").value;

const size = parseInt(document.getElementById("qrSize").value, 10);

const qrContainer = document.getElementById("qrCode");

qrContainer.innerHTML = "";

qr = new QRCode(qrContainer, {

text: input,

width: size,

height: size

});

}

function downloadQRCode() {

const img = document.querySelector("#qrCode img");

if (img) {

const link = document.createElement("a");

link.href = img.src;

link.download = "qrcode.png";

link.click();

} else {

alert("先にQRコードを生成してください。");

}

</script>

</body>

</html>

実用上の注意点

QRコードを使用する際は、以下のポイントにも注意しましょう。

十分なサイズで生成する（小さすぎると読み取れない可能性があります）
背景色と前景色のコントラストが明確な色合いを使う（白背景×黒QRコードが基本）
余白（マージン）がしっかりあるか確認する（読み取りエラー防止）
URLの長さが長すぎるとQRコードが複雑になり、読みにくくなるので短縮URLなどを使うのも手

学びを深めたい方におすすめの学習リソース

QRコードの仕組みやWeb開発の基本をもっとしっかり学びたい方へ向けて、初心者でも取り組みやすい書籍やオンライン講座を厳選してご紹介します。

書籍でじっくり学びたい方に

『QRコードの奇跡　モノづくり集団の発想転換が革新を生んだ』

QRコードがどのように生まれ、どんな技術・思考で世の中に広まっていったのか――開発秘話を交えながら、モノづくりや発想法のヒントも得られる一冊。
技術の背景を知りたい方や、モノづくりに携わる方に特におすすめです。

QRコードの奇跡モノづくり集団の発想転換が革新を生んだ

小川進

楽天

楽天Kobo

『確かな力が身につくJavaScript超入門』

QRコード生成ツールにも使ったJavaScriptの基礎を、やさしく・わかりやすく解説した入門書。
HTMLやCSSの基礎はわかるけれど、JavaScriptに自信がない方に最適です。

確かな力が身につくJavaScript「超」入門第2版

ＳＢクリエイティブ/狩野祐東

楽天

楽天Kobo

『スラスラわかるHTML&CSSのきほん』

もしHTML/CSSの基本がまだ不安なら、こちらの定番書籍もおすすめです。図解やサンプルも豊富で、初心者の「最初の一冊」に最適です。

スラスラわかるHTML&CSSのきほん第3版

ＳＢクリエイティブ/狩野祐東

楽天

楽天Kobo

オンライン講座で効率的に学びたい方に

Udemy｜世界最大級のオンライン学習プラットフォーム

世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。

まとめ：QRコード生成ツール作成は意外とカンタン！

今回は、HTMLとJavaScriptを使ってQRコードを自作する方法をご紹介しました。

「QRコードって難しそう」と思っていた方も、実際にコードを書いてみると、
意外とシンプルで楽しく学べたのではないでしょうか。

QRコードは、URL共有、名刺、イベント告知、SNS連携など活用の幅も広く、
自作できるようになると、あなたの制作物に“ひと工夫”を加える強力な武器になります。

自分なりにカスタマイズしてみたり、機能を追加してみることで、
JavaScriptやWeb開発のスキルアップにもつながります。

【実際にQRコード生成ツールを使ってみましょう】▼

: QRコード生成ツール【無料・オンライン対応】URL・テキスト・名刺など簡単作成
まずはQRコードを作成してみましょう ! QRコードを簡単に作成したい方におすすめ！この【QRコード生成ツール】では、URL・テキスト・名刺情報などを簡単にQRコードに変換できます。無料・オンライン ...

【QRコードの活用アイデアはこちらの記事で紹介しています】▼

: QRコード活用術5選｜URL・名刺・チラシでの便利な使い方を紹介！
QRコードは、スマホひとつで情報をすぐに読み取れる便利なツールです。URLの共有だけでなく、名刺やチラシ、SNSへの誘導など、さまざまな場面で活用されています。この記事では、無料・オンライン対応のQ ...

QRコード生成ツールをJavaScriptとHTMLで自作！初心者でも簡単にできる作り方ガイド

QRコード生成ツールを自作するメリットとは？

自作するメリット

QRコード生成に必要な知識と準備（HTML＆JavaScript）

必要な知識レベル

使用するライブラリ：qrcode.min.js（CDN利用）

HTML＋JavaScriptでQRコードを作る手順（サンプルコード付き）

ステップ1：HTMLの基本構造を作成

ステップ2：JavaScriptでQRコード生成の処理を書く

ステップ3：ブラウザで開いて動作確認

画像として保存できるように改良しよう（PNG出力対応）

ステップ1：ダウンロードボタンをHTMLに追加

ステップ2：JavaScriptに保存処理を追加

ステップ3：QRコードを一度生成してからダウンロード

サイズ変更や注意点など実用的なカスタマイズ方法

QRコードのサイズを変更する

完成版のソースコード（コピー＆実行できます）

実用上の注意点

学びを深めたい方におすすめの学習リソース

書籍でじっくり学びたい方に

『QRコードの奇跡　モノづくり集団の発想転換が革新を生んだ』

『確かな力が身につくJavaScript超入門』

『スラスラわかるHTML&CSSのきほん』

オンライン講座で効率的に学びたい方に

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ：QRコード生成ツール作成は意外とカンタン！

関連記事

【コピペで完成】記憶力テストゲームの作り方｜HTMLとJavaScriptで遊べる脳トレアプリを自作しよう！

【無料】記憶力テストゲーム｜6色パネルで脳トレ＆反射チェック！ベストスコア保存つき

【コピペで完成】タイピング練習ゲームの作り方｜HTML＆JavaScriptで初心者でもできる！

【無料】タイピング練習ゲーム｜制限時間60秒＆難易度3段階・ベストスコア保存つき

【コピペで完成】反射神経ゲームの作り方｜JavaScriptで簡単反応速度テストを実装！

QRコード生成ツールをJavaScriptとHTMLで自作！初心者でも簡単にできる作り方ガイド

QRコード生成ツールを自作するメリットとは？

自作するメリット

QRコード生成に必要な知識と準備（HTML＆JavaScript）

必要な知識レベル

使用するライブラリ：qrcode.min.js（CDN利用）

HTML＋JavaScriptでQRコードを作る手順（サンプルコード付き）

ステップ1：HTMLの基本構造を作成

ステップ2：JavaScriptでQRコード生成の処理を書く

ステップ3：ブラウザで開いて動作確認

画像として保存できるように改良しよう（PNG出力対応）

ステップ1：ダウンロードボタンをHTMLに追加

ステップ2：JavaScriptに保存処理を追加

ステップ3：QRコードを一度生成してからダウンロード

サイズ変更や注意点など実用的なカスタマイズ方法

QRコードのサイズを変更する

完成版のソースコード（コピー＆実行できます）

実用上の注意点

学びを深めたい方におすすめの学習リソース

書籍でじっくり学びたい方に

『QRコードの奇跡 モノづくり集団の発想転換が革新を生んだ』

『確かな力が身につくJavaScript超入門』

『スラスラわかるHTML&CSSのきほん』

オンライン講座で効率的に学びたい方に

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ：QRコード生成ツール作成は意外とカンタン！

関連記事

『QRコードの奇跡　モノづくり集団の発想転換が革新を生んだ』