開発 へ戻る
QR コード生成 — テキスト / URL / ロゴ画像入り

QR コード生成 — テキスト / URL / ロゴ画像入り

テキストや URL を QR コード (PNG / SVG) に変換します。サイズ・誤り訂正レベル・前景色 / 背景色を細かく指定でき、中央にロゴ画像 (PNG / JPG / SVG) を重ねることも可能。ロゴを乗せる場合は誤り訂正レベル H 推奨。生成と画像合成はすべてブラウザ内で完結し、入力テキストもアップロードしたロゴも外部に送信されません。

開発生成画像

使い方

テキストや URL を入力すると、入力途中でも QR コードが自動で生成されます。出力形式 (PNG / SVG)、誤り訂正レベル (L / M / Q / H)、サイズ、余白、前景色、背景色を細かく指定できます。中央にロゴを乗せたい場合は「ロゴを選択」から PNG / JPG / SVG を読み込ませてください (FileReader でブラウザ内処理のみ)。誤り訂正レベル H を選び、ロゴ比率を 25% 以下にすると読み取り精度が安定します。完成した QR は PNG / SVG としてダウンロード、またはクリップボードに直接コピーできます。

よくある質問

入力テキストやロゴ画像はサーバーに送られますか?
送られません。テキストは qrcode (npm) パッケージで完全にブラウザ内エンコードされ、ロゴは FileReader で DataURL 化したものを Canvas 上で重ねるだけです。ネットワーク通信は一切発生しません。
誤り訂正レベルはどう選べばいいですか?
ロゴを乗せないなら M (約 15%) で十分です。ロゴを中央に重ねる場合、ロゴ部分の QR モジュールが読めなくなる分を補うために H (約 30%) を選んでください。誤り訂正レベルを上げると同じテキストでも QR が密になり (バージョンが上がり)、許容データ量は減ります。
ロゴはどの大きさまで重ねられますか?
QR コード全体の幅に対して 25% 以下を推奨します。本ツールではスライダ (5% 〜 30%) で調整可能です。それ以上にすると誤り訂正レベル H でも復元できず、読み取れなくなることがあります。
SVG にもロゴを埋め込めますか?
埋め込めます。QR の SVG に <image> 要素として、ロゴを DataURL のまま追記します (外部参照ではないので、SVG ファイル単体で完結します)。Illustrator / Inkscape などのベクター編集ソフトでもそのまま開けます。
PNG / SVG のメリットの違いは?
PNG は印刷や Web 画像として汎用性が高く、コピーや貼り付けも簡単です。SVG はベクター形式なので拡大しても劣化せず、名刺・ポスター・看板などサイズが大きく変わる用途に向きます。データ量も SVG の方が小さく済むことが多いです。
QR コードに入れられる文字数の上限は?
誤り訂正レベル L で最大 4296 文字 (英数字) / 2953 バイト (UTF-8 想定) 程度、H だと 1852 文字 / 1273 バイト程度です。長い URL は事前に短縮するか、誤り訂正レベルを下げて対応してください。

類似のツール

QR コード読み取り — 画像から URL / テキストを抽出

QR コード読み取り — 画像から URL / テキストを抽出

QR コードが写った画像 (PNG / JPG / WebP / GIF) をドロップすると、ブラウザ内で内容を読み取ってテキストや URL を抽出します。URL・メール (mailto)・電話 (tel)・SMS・Wi-Fi 接続情報・地理座標 (geo)・vCard / vEvent などの種類を自動判別し、結果をワンクリックでコピーできます。複数画像をまとめて読み取ることも可能。デコードはすべて端末内で完結し、画像も読み取り結果も外部サーバーには一切送信されません。

開発デコード画像
バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

数字や文字列を 1 次元バーコード (JAN-13 / EAN-13・JAN-8 / EAN-8・UPC-A・CODE128・CODE39・ITF・Codabar/NW-7・MSI) に変換し、PNG / SVG として保存できます。バーの太さ・高さ・色・余白や、下部の数字表示の有無を細かく調整可能。チェックディジットの検証も自動で行います。生成はすべてブラウザ内で完結し、入力した値が外部に送信されることはありません。

開発生成画像
URL パース — ホスト / パス / クエリ / fragment

URL パース — ホスト / パス / クエリ / fragment

URL をブラウザ標準の URL クラスで protocol / host / port / path / query / hash などに分解し、クエリパラメータも自動で表に展開します。値はパーセントデコード後で表示。各パーツのコピーや、結果全体の JSON ダウンロードに対応。すべてブラウザ内で処理し、URL は外部に送信されません。

開発URL
URL エンコード / デコード — クエリ文字列を安全に

URL エンコード / デコード — クエリ文字列を安全に

テキストと %XX 形式の URL エンコード文字列を相互変換します。encodeURIComponent / encodeURI (decode 側も同様) を切替可能。UTF-8 ベースでブラウザ内処理。

開発URLエンコードデコード