QRコード作成

QR Code Generator

入力したテキストからすぐにQRコードを作成し、PNG・JPG・SVGの3つの形式でダウンロードできるシンプルなQRコードジェネレーターです。テキストを入力して「生成」ボタンを押すだけですぐにプレビューが表示され、色を自由に選べるのでデザインにもこだわることができます。生成したQRコードはワンクリックでダウンロードできます。チラシやポスターにリンクを載せたいときや、イベントで大量のQRコードを用意したいときなど、さまざまな場面で便利に使えるツールです。

コラム・豆知識
ツールの仕組み解説

URLを入力

カラー

QRコード作成

コラム・豆知識

QRコードの基本とWebでの活用

QRコードはスマートフォンなどで簡単に情報を読み取れる2次元バーコードの一種です。
Webサイトへのリンクや連絡先、テキスト情報を手軽に共有する手段として広く使われています。
Web制作ではユーザーの利便性向上やプロモーションに役立つため、適切な設置が重要です。

QRコード画像の生成方法と注意点

QRコードは外部ライブラリやAPIを利用して動的に生成する方法が一般的です。
生成した画像は<img>タグで表示し、必ずalt属性を設定して内容を簡潔に説明することでアクセシビリティを確保しましょう。
また、loading="lazy"属性を使って遅延読み込みを設定し、ページパフォーマンスを向上できます。

サイズと解像度の最適化

QRコードの読み取り精度はサイズと解像度に大きく依存します。
小さすぎるQRコードは読み取りに失敗しやすいため、最低でも150×150ピクセル以上の表示が推奨されます。
高解像度ディスプレイ対応には、SVG形式での生成や高解像度PNGの利用が効果的です。

アクセシビリティとユーザー体験の工夫

QRコードは視覚的な情報なので、視覚障害者には利用が難しい場合があります。
そのため、QRコードの近くにURLのテキストリンクを設置したり、読み取り方の簡単な説明を付け加えるとユーザーフレンドリーです。
また、スマホでのスキャンに最適な余白（「クワイエットゾーン」）の確保も重要です。

セキュリティと実務上の注意点

QRコードは容易にリンク先を隠せるため、悪意あるサイトへ誘導されるリスクもあります。
信頼できる情報のみをコード化し、ユーザーにも正しい利用法を案内しましょう。
また、生成時にはURLの短縮サービス利用時の安全性や期限切れに注意し、メンテナンスを怠らないことが重要です。

ツールの仕組み解説

function sanitize(str) {
	return ( str .trim() .replace(/[^\w.-]+/g, "_") .slice(0, 60) || "qrcode" );
}

ファイル保存時の名前に使う文字列として不適切な文字を「_」に置換し、長すぎないよう切り詰めています。こうすることで、OSやブラウザでエラーになりにくいファイル名を作成できます。

function makeMatrix(text) {
	const tmp = document.createElement("div");
	const qr = new QRCode(tmp, {
		text, width: 1, height: 1, correctLevel: QRCode.CorrectLevel.M,
	});
	return qr._oQRCode;
}

ここではQRコードライブラリにテキストを渡し、内部のマトリクス情報（黒白パターン）だけを取得しています。このマトリクスがQRコードの設計図のようなものです。

function drawMatrix(canvas, matrix, color, size) {
	const n = matrix.getModuleCount();
	const totalModules = n + QUIET_MODULES * 2;
	// 周囲の余白（クワイエットゾーン）を含む
	const pxPerModule = size / totalModules;
	// １マスあたりのピクセル数
	canvas.width = canvas.height = size;
	const ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, size, size);
	ctx.fillStyle = color;
	ctx.beginPath();
	for (let r = 0; r < n; r++) {
		for (let c = 0; c < n; c++) {
			if (matrix.isDark(r, c)) {
				const x = (c + QUIET_MODULES) * pxPerModule;
				const y = (r + QUIET_MODULES) * pxPerModule;
				ctx.rect(x, y, pxPerModule, pxPerModule);
			}
		}
	}
	ctx.fill();
}

QRコードには周囲に「クワイエットゾーン」と呼ばれる空白が必要なので、マトリクスの枠より余白を加えてピッタリ描画します。`ctx.rect()`で黒の正方形をまとめて描き、最後に一気に塗りつぶすのは処理の効率化のためです。

function triggerDownload(blob, name) {
	const u = URL.createObjectURL(blob);
	const a = document.createElement("a");
	a.href = u;
	a.download = name;
	document.body.append(a);
	a.click();
	a.remove();
	setTimeout(() => URL.revokeObjectURL(u), 1000);
}

JavaScriptで生成した画像ファイル（Blob）をユーザーにダウンロードさせるため、一時的なURLを作ってリンクを自動クリックし、すぐ後でURLを解放しています。こうすると「名前を付けて保存」ダイアログが表示されます。

// QRコードの黒パターンの輪郭を抽出し、
// 複数のパスで囲んだSVGを作成しています。
// 余白も含め、ピクセル単位で精密に表現。
function buildSVG(matrix, color) {
	/* 省略 */
}

SVG版は黒のパターンの外周をパスで囲み、ピクセルがギザギザにならないようシャープな見た目を実現しています。ここまで細かい処理を書くのは見栄え重視のためです。
「生成」ボタン押下でテキストを取得し、マトリクスを作成、Canvasに描画
「PNG」「JPG」「SVG」ボタンで画像を作りダウンロード処理を実行

document.getElementById("generate").onclick = generate;
document.getElementById("png").onclick = () => exportRaster("png");
document.getElementById("jpg").onclick = () => exportRaster("jpg");
document.getElementById("svg").onclick = exportSVG;