QRコードジェネレーター

入力文字列をそのままQRコードへ変換し,サイズ,余白,L/M/Q/Hの誤り訂正レベル,暗部・背景色,中央ロゴを調整できます.PNGまたはSVGで保存でき,生成後は実際に使う端末で読み取りを確認してください.

読み込み中...

このツールが向いている用途

操作欄に戻る ↑

URLや短いテキストをQRコードにします.

まず試せること

https://example.com を入力し,表示されたQRコードを読み取って同じURLになることを確認します.

利用条件

色,余白,ロゴの設定は読み取りやすさに影響します.配布前に実際に読み取って確認してください.

処理前・処理後の状態比較イメージ

処理前 (Before)

任意の長いURL文字列 (https://usezerotools.com/...)

処理後 (After)

スマートフォンカメラで瞬時に読み取れる高精細なQRコード画像

サポートフォーマット

読み込み形式 (Input)
任意のテキストWEBサイトURLWi-Fi接続設定メールアドレス情報
出力保存形式 (Output)
PNGSVG (ベクター画像形式)

主な利用シーン・活用例

  • ✓チラシやポスター,名刺などの印刷物に自社ホームページやキャンペーンURLのQRコードを掲載.
  • ✓オフィスや店舗で,Wi-FiのSSIDやパスワードを手入力させずに接続させるための案内ボード作成.
  • ✓サービスへのログインや会員登録を即座に誘導するためのコード生成.

関連する技術解説・ブログ記事

ZeroToolsのブラウザ内処理と,外部通信を利用する機能の違いやデータの取り扱いについて.

記事を読む

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
第1章

入力データの符号化プロセスとローカル処理機構

本ツールにおけるQRコードの生成基盤は,入力された任意の文字列データをISO/IEC 18004規格に基づく二次元配列へ変換する処理から始まります.UI上のテキストエリアに入力された値は,状態管理フックを介して即座に評価され,初期値である「https://usezerotools.com」からの変更を検知します.

値が空欄となった場合は,単一の半角スペース「 」としてフォールバックする処理を実装し,無入力状態でのライブラリエラーを回避しています.符号化のコア処理にはJavaScriptのqrcodeパッケージを採用しており,入力値のパースから誤り訂正コード語の算出,最終的なマトリクスの生成までの一連の計算は,すべて利用者のブラウザ上のローカル環境で実行されます.

本ツールは入力された文字列を一切の改変なくそのままペイロードとして解釈するという制約を持っています.そのため,Wi-Fi接続用プロファイルの構文自動整形機能や,URLのマルウェア判定などの検査機能は実装していません.生成結果としてのQRコードは,入力されたバイト列そのものを視覚的なモジュールとして表現したシンボルとなります.

実務上の使い方としては,自社サイトのURLや,製品の識別番号,キャンペーン用のトラッキングパラメータを含む長いURLなどをそのままテキストエリアに入力して使用します.QR生成処理はブラウザ上で行われ,このコンポーネントには入力文字列を生成用サーバーへ送る処理はありません.

ただし,ページ配信等の通信や入力情報そのものの取扱方針は別途確認が必要です.

第2章

サイズ,余白,およびカラーデザインの設定体系

生成されるQRコードの視覚的特性は,用途に応じた柔軟なパラメータ調整を可能としています.出力画像は,HTML5のCanvas要素に対する直接描画によって生成され,値として解像度(サイズ)を150px(小),300px(中),500px(大),1000px(特大)の4段階から選択できます.

周囲のクワイエットゾーンを定義する余白(マージン)は,0,2,4,8の数値(モジュール単位)で指定可能です.配色は,HTMLのカラーピッカーを利用して,暗部(コード部分)と明部(背景部分)のカラーコード(例:#000000と#ffffff)を個別に指定する機構を備えています.

これらの処理は,設定値が変更されるたびに副作用フックが検知してCanvas上の既存描画をクリアし,指定されたプロパティで即座に再描画を実行します.システム上の制約として,暗部と明部のカラーコード間の明度差(コントラスト比)に対するバリデーションは実装していません.

そのため,同系色の組み合わせや反転配色は,読み取りデバイス側でデコード不能となるリスクを伴います.また,余白を「0」に設定した場合,QRコード規格で要求される境界空間が消失し,配置先の背景と同化する懸念があります.この結果の読み方として,生成画像は指定されたピクセル幅の正方形となり,色は指定した16進数コードが厳密に適用されます.

実務上の使い方としては,印刷所への入稿用には1000pxを指定して劣化を防ぎ,自社ブランドのコーポレートカラーを暗部に適用しつつ,明部には白を残し,標準の余白「4」を維持する設定が推奨されます.

第3章

誤り訂正レベル(L・M・Q・H)の役割と冗長化の限界

QRコードのデータ構造には,シンボルの一部が汚損や欠損によって読み取れなくなった場合に備え,リード・ソロモン符号を用いた誤り訂正アルゴリズムが組み込まれています.本ツールの処理では,UI上の専用トグルボタンを通じて,4段階の誤り訂正レベルをqrcodeライブラリのオプションとして渡します.

設定可能な値は,レベルL(約7%復元),レベルM(約15%復元),レベルQ(約25%復元),レベルH(約30%復元)の4種類であり,後述する中央ロゴの挿入を見据えてデフォルト値はHに設定されています.これらの値は,データコード語全体の容量に対して,復元に割り当てられる冗長データの割合を決定します.

ここでの重大な制約は,画面に表示されるパーセンテージがあくまで「データコード語の復元可能量の目安」であり,QRコードの物理的な面積に対する欠損許容率ではないという事実です.特定の箇所にダメージが集中した場合や,位置検出パターンが破損した場合は,記載された数値以下の欠損であってもデコードは失敗します.

設定変更による結果の読み方として,同じテキストを入力していても,レベルを高く設定するほどQRコードのモジュール(ドット)が細かく分割され,全体として高密度なパターンへ変化することが視覚的に確認できます.実務上の使い方としては,傷や汚れのリスクが少ない屋内用資料にはデザインのシンプルさを優先してレベルLやMを採用し,屋外ポスターやロゴを大きく配置するデザインにおいては,パターンの複雑化を許容したうえでレベルQやHを採用するといった使い分けを行います.

第4章

中央へのカスタムロゴ画像の重ね合わせ機構

ブランド認知の向上を目的として,生成されるQRコードの中央領域に任意の画像をロゴとして合成する処理を提供しています.利用者がファイル入力を通じて画像を選択すると,ファイルリーダーによってBase64形式のData URIとしてメモリ上に読み込まれます.ロゴのサイズは,値としてQRコード全体の幅に対するパーセンテージ(10%から30%の範囲)をスライダーで指定可能です.

合成処理は,ライブラリがCanvas上にQRコード本体を描画した直後に,同Canvasの描画コンテキストを利用して画像オブジェクトを中央座標に上書きすることで実行されます.オプションの「背景パディング」を有効にした値(true)の場合,ロゴ幅の15%分の余白を計算し,QRコードの明部と同じ色で矩形を塗りつぶした上に画像を配置します.

この機能の最大の制約は,QRコードの生成アルゴリズム自体はロゴの存在を認識しておらず,完成した二次元コードのピクセル情報を後から物理的に塗りつぶしているだけである点です.ロゴサイズを上限の30%に設定したり,誤り訂正レベルが低い状態で配置したりすると,隠蔽されたモジュールが復元限界を超過し,QRコードとして成立しなくなります.

結果の読み方として,指定した比率でロゴが中央に配置され,パディング有効時はロゴの周囲に無地の境界線が形成されます.実務上の使い方としては,背景を透過処理したPNG形式の正方形ロゴを用意し,サイズを15%から20%程度の控えめな値に留め,パディングを有効にしてロゴと暗部モジュールの混同を防ぐ手法が有効です.

第5章

PNG・SVG形式での出力とクリップボード連携

生成された成果物は,用途に合わせてラスター形式(PNG)およびベクター形式(SVG)で出力,またはシステムクリップボードへ直接転送する処理が可能です.PNG保存の処理は,Canvasのメソッドを呼び出し,生成されたData URIを動的にダウンロードリンクへ割り当てます.

SVG保存の処理は,ライブラリのSVG出力モードを利用してXML文字列を生成し,ロゴが含まれる場合はDOMパーサーを用いてSVG座標系に基づいて中央位置を計算したうえで,背景パディング用の矩形要素とロゴ画像要素をDOMツリーに追加し,再文字列化してBlobとして出力します.

クリップボード連携の処理は,画像バイナリを生成し,非同期のクリップボードAPIを利用してOSのクリップボードへ直接書き込みます.出力される値(ファイル名)は現在時刻を含む「qrcode_[タイムスタンプ].png」または「.svg」として自動生成されます.機能上の制約として,クリップボードAPIの実行にはブラウザのセキュアコンテキスト(HTTPS接続)とユーザーの権限付与が必須となります.

また,ロゴを含むSVGはBase64形式で画像データを内包するため,純粋なベクターデータよりもファイルサイズが肥大化します.結果の読み方として,PNGはピクセルベースの汎用画像,SVGは拡縮しても劣化しないXMLベースの画像ドキュメントとして保存され,コピー機能からは直接ペースト可能なバイナリが得られます.

実務上の使い方としては,印刷所へ入稿するデザインデータに組み込む場合はSVG形式を選択し,社内の資料やチャットツールへ即座に共有する場合は,クリップボードコピーを利用して作業フローを短縮します.

第6章

読み取り確認の実践と運用環境における制約

本ツールは,設定値の変更に対して即座にブラウザ上のプレビュー画面を更新するリアクティブなインターフェースを備えています.しかし,システムアーキテクチャ上の制約として,入力された設定値(テキスト,色,ロゴデータ等)をブラウザのローカルストレージや外部データベースに保存する永続化機能は備えていません.

そのため,ブラウザのタブを閉じたりページをリロードしたりすると,すべてのパラメータは初期状態(デフォルトURL,サイズ300px,レベルH等)にリセットされる値の揮発性を持ちます.また,UI上の警告メッセージにも明記されている通り,ロゴの追加によるモジュールの遮蔽やユーザーが指定した配色設定は,最終的なデコードの成否に直結します.

プレビュー結果の読み方として,開発環境の画面上で表示されているQRコードの整列状態は,実際の物理環境での読み取り成功を意味するものではありません.カメラの性能,照明環境,ディスプレイの反射,読み取りアプリのアルゴリズムなど,現実世界でのスキャン成否は複合的な要因に依存します.

実務上の使い方としては,本ツールで生成した画像をWebページ,名刺,ポスターなどの最終的な媒体レイアウトに配置した段階で,複数の異なる読み取りエンジン(iOS標準カメラや各種QRコードリーダーアプリ等)を搭載した実機端末を用い,想定される物理的距離から事前のスキャンテストを実施することが不可欠です.

特にコントラストを下げた配色やロゴを採用した場合は,この実機検証工程を省いての実運用は避けるべきです.

よくある質問(FAQ)

A.
QR画像自体に利用期限は設定されません.ただし,埋め込んだURLのページや外部サービスが終了・変更された場合は,読み取れても目的の情報へ到達できなくなります.
A.
はい.保存した画像を QRコードリーダー に読み込ませて確認できます.ロゴや配色を変更した場合は,最終的に使う印刷サイズと複数の実機でも読み取りテストをしてください.
A.
コード色と背景色,余白0・2・4・8,画像サイズ150・300・500・1000pxを選べます.背景よりコードを十分に暗くし,周囲の余白を確保すると読み取りやすくなります.
A.
必ず読めるとは限りません.L・M・Q・Hは復元能力の設定ですが,ロゴの位置や面積,データ量,印刷状態,読み取り機器にも左右されます.ロゴは10〜30%の範囲で調整し,保存前後に必ず試してください.