エンコード

QR コード生成ツール

内容タイプを選び、必要なデータを入力したら、モジュール形状、位置検出パターン、色、背景、ロゴ、誤り訂正レベルを調整できます。プレビューはリアルタイムに更新され、表示サイズとは別に書き出しサイズを指定可能。PNG、SVG、WebP、JPEG をワンクリックでダウンロードできます。生成処理はすべてブラウザタブ内で完結するため、Wi‑Fi パスワード、連絡先情報、トラッキング付き URL が端末の外へ送信されることはありません。

  • 7 種類の内容タイプに対応し、それぞれ適切なエスケープを行います。URL / テキスト、Wi‑Fi（WIFI URI 仕様）、メール（RFC 6068 に沿った mailto のパーセントエンコード）、電話（tel）、SMS（sms）、vCard 3.0（RFC 6350 のフィールドエスケープ）を扱えます
  • データモジュール、角の位置検出パターン、位置検出パターンの中心点という 3 つの見た目のレイヤーを個別に調整できます。各レイヤーには 6 種類の形状があります
  • 各レイヤーは単色、2 色の線形グラデーション、放射状グラデーションに対応。背景も透明、単色、グラデーションを選べ、ブランドカラーのプリセットや HEX 直接入力も使えます
  • 中央にロゴを配置し、サイズと余白を調整できます。ロゴ下のドットを隠すを有効にすると、ロゴが重なる部分のモジュールをきれいに隠し、スキャンしやすさを保てます
  • 誤り訂正レベルは L、M、Q、H の 4 段階で、約 7% から 30% の冗長性を持ちます。中央にロゴを置く場合は Q または H がおすすめです
  • プレビューは固定サイズで表示されるため、デザインの比較が安定します。書き出し解像度は別項目として 50〜1000px の範囲で調整できます
  • アップロードもテレメトリもない完全ローカル生成。Wi‑Fi パスワード、vCard の連絡先、キャンペーン用トラッキング URL も扱いやすい設計です
工具/QR コード生成ツール
テキスト / URL

QR コードに埋め込まれるデータです。スキャンするとこの内容が読み取られます。

ダウンロードファイルにのみ反映されます。プレビューは固定サイズのままなので、スタイルを比較しやすくなっています。

モジュールの色
種類
回転角度（deg）
カラー 0
カラー 1
位置 0: 0.00
位置 1: 1.00
位置検出パターンの色
種類
回転角度（deg）
カラー 0
カラー 1
位置 0: 0.00
位置 1: 1.00
中心点の色
種類
回転角度（deg）
カラー 0
カラー 1
位置 0: 0.00
位置 1: 1.00

概要

実際に配布する QR コードでは、見た目だけでなく、内容タイプごとの正しいエスケープ、QR の重要な構造を崩さないデザイン調整、安定したプレビューと書き出しが必要です。このページはそのための作業台です。

  1. 01

    7 種類の内容タイプを適切にエスケープ

    URL / テキスト、WIFI URI 仕様に沿った Wi‑Fi、件名と本文をパーセントエンコードする mailto メール、tel 電話、本文をエンコードする sms、RFC 6350 に沿ってフィールドをエスケープする vCard 3.0 に対応します。セミコロンやバックスラッシュを含む Wi‑Fi パスワードでも、正しくスキャンできる内容を生成します。

  2. 02

    3 つのスタイルレイヤーを個別に調整

    実際のデータを持つモジュール、角にある 3 つの位置検出パターン、その内側にある中心点をそれぞれ別々にスタイリングできます。各レイヤーで、四角、角丸、ドット、大きめの角丸、クラッシー、角丸クラッシーから選べます。

  3. 03

    各レイヤーで単色または 2 色グラデーションを使用可能

    レイヤーごとに、HEX の単色、2 色の線形グラデーション、放射状グラデーションを切り替えられます。回転角度や色の位置も調整できます。3 レイヤーを同じブランドグラデーションで統一することも、位置検出パターンだけを強調することもできます。

  4. 04

    透明、単色、グラデーション背景

    初期状態は透明なので、Figma、Canva、ポスター、スライドへそのまま置けます。不透明背景が必要な場合は単色へ、イベント告知や SNS 画像では 2 色グラデーション背景へ切り替えられます。

  5. 05

    形状と色のプリセット

    9 種類の形状プリセットと 31 種類のカラープリセットを用意しています。19 種類のブランド向け単色と 12 種類の名前付きグラデーションを、3 レイヤーへまとめて適用し、その後必要に応じて微調整できます。

  6. 06

    中央ロゴと安全な重なり処理

    PNG、JPG、SVG などのロゴを QR コード中央に配置できます。ロゴサイズは QR 幅の 0〜50% で調整でき、ロゴ余白も設定可能です。ロゴ下のドットを隠すをオンにすると、ロゴ下のモジュールをきれいにマスクし、スキャンしやすさを保ちます。

  7. 07

    L、M、Q、H の誤り訂正レベル

    目安として、L は約 7%、M は 15%、Q は 25%、H は 30% の冗長性があります。ロゴを入れる場合は、視覚的な遮りに耐えられるよう Q または H を使うのがおすすめです。

  8. 08

    安定したプレビューと独立した書き出し解像度

    プレビューは固定表示サイズで描画されるため、スタイル変更を比較しやすくなっています。書き出し解像度は 50〜1000px の別項目として設定でき、同じ見た目を確認しながら用途に合うサイズで出力できます。

  9. 09

    PNG、SVG、WebP、JPEG で書き出し

    PNG は一般的な用途に、SVG は印刷やベクター編集に、WebP は軽量な Web 配信に向いています。JPEG は透明背景を失うため、システム上 JPG が必須の場合だけ使うのがおすすめです。

  10. 10

    完全にローカルで生成

    ブラウザタブ内で動く qr-code-styling を使って生成します。Wi‑Fi パスワード、連絡先情報、社内 URL、キャンペーン用トラッキングリンクがサーバーに送信されることはありません。

使い方

手順は 6 つです。どの項目を変えても、プレビューはすぐに再生成されます。

  1. 01

    内容タイプ（URL、テキスト、Wi‑Fi、メール、電話、SMS、vCard）を選び、必要な項目を入力します。ページ側で WIFI、mailto、tel、sms、vCard の payload を組み立て、適切にエスケープします。

  2. 02

    基本設定で、書き出しサイズ、静かな余白、誤り訂正レベルを設定します。ロゴを追加する予定がある場合は Q または H を選びます。

  3. 03

    まず形状プリセットとカラープリセットを適用し、自然な見た目を作ってから、データモジュール、位置検出パターン、中心点を個別に微調整します。

  4. 04

    不透明な面に載せる場合は背景を単色またはグラデーションへ切り替えます。デザインファイルへ渡す場合は透明背景のままで問題ありません。

  5. 05

    中央ロゴをアップロードします。PNG または SVG が扱いやすく、サイズは QR 幅の 25〜35% 程度に抑えるのがおすすめです。ロゴ下のドットを隠すはオンのままにして、ロゴ下のモジュールをきれいにマスクします。

  6. 06

    実際のスマートフォンでプレビューをスキャンして確認し、必要なファイル名で PNG、SVG、WebP、JPEG のいずれかをダウンロードします。

詳細

3 つのスタイルレイヤー、背景、ロゴが QR コードの主な見た目を決めます。どの項目がどの部分に効くかを知っておくと、調整が速くなります。

  • データモジュールは、実際にデータを持つ小さな点の集合です。ユーザーが QR コードの雰囲気として最も認識しやすい部分です。角丸や角丸クラッシーは現代的に、四角は伝統的に見えます。
  • 位置検出パターンは、左上、右上、左下にある大きなマーカーです。スキャナーはこれを使って向きを判定するため、ドットやクラッシーのような特殊形状は見た目が良い一方で、読み取りやすさを少し下げることがあります。
  • 位置検出中心点は、それぞれの位置検出パターンの内側にある小さな部分です。外側と違うスタイルにすると、読み取りへの影響を抑えながら個性を出しやすくなります。
  • 背景は、デザインファイルへ渡すなら透明、ステッカー・ラベル・名刺なら単色、ポスターやイベントサインならグラデーションが向いています。
  • 誤り訂正は、Q（25%）を安定した初期値として使えます。小さなロゴや中程度のダメージに耐えられます。ロゴが大きい、または印刷環境が厳しい場合は H（30%）へ上げます。
  • ロゴは QR 幅の 20〜35% 程度に抑え、ロゴ下のドットを隠すをオンにします。それ以上大きくすると、誤り訂正の余裕を大きく消費します。
  • 静かな余白は、少なくとも 4 モジュール分は確保してください。スキャナーは周囲の明るい余白で QR コードを見つけます。印刷物で読み取れない原因として、余白の切り詰めはかなり多いです。

活用シーン

このページは、繰り返し発生する QR コード制作のために作られています。内容タイプを選び、デザインし、書き出す同じ流れで、多くの場面に対応できます。

  1. マーケティング用ランディングページ QR

    キャンペーン URL、できれば UTM 付きのトラッキング可能な短縮リンクを、ブランド感のある QR コードにして、ポスター、卓上 POP、パッケージ同梱物、イベントサインに使えます。

  2. カフェ、オフィス、イベント向け Wi‑Fi

    SSID、パスワード、暗号化方式を含む WIFI URI を生成します。スキャンするとパスワードを手入力せずにネットワークへ参加でき、記号や Unicode を含むパスワードも正しく扱えます。

  3. vCard 名刺 QR

    名前、電話番号、メール、組織、役職、URL を vCard 3.0 としてエンコードします。スキャンすると iOS や Android の連絡先に直接保存できます。

  4. メール送信用 CTA

    件名と本文が入った mailto QR は、ポスターの CTA、リード獲得、サポート窓口、RSVP、イベント受付に便利です。

  5. SMS 登録キャンペーン

    JOIN などの定型文を入れた sms QR を使うと、スキャン後に SMS 下書きが開きます。SMS マーケティング登録や受付デスクでよく使われます。

  6. 飲食店や小売店のワンタップ発信

    tel QR はスキャン後すぐ電話発信できます。サービス案内、タクシーカード、不動産看板、カスタマーサポート用ステッカーに向いています。

  7. ロゴ入りブランド QR

    ブランドマークをアップロードし、誤り訂正を Q または H に設定し、ロゴを QR 幅の約 25% に抑えると、ブランド感と読み取りやすさのバランスを取りやすくなります。

  8. Figma や Canva 用の透明 QR

    透明背景で生成し SVG としてダウンロードすれば、背景除去なしでそのままデザインファイルに配置できます。

  9. 複数チャネルのキャンペーン展開

    ポスター、Web、パッケージ、SNS 用に同じ配色と形状の QR コードを作り、用途ごとに必要な解像度と形式で書き出せます。

  10. 事前入力フォームへのディープリンク

    query パラメータ付き URL を QR コードにすれば、スキャン後にキャンペーン、流入元、場所などが入ったフォームを開けます。入力の手間が減り、完了率を上げやすくなります。

関連情報

QR コードに、非 ASCII 文字、UTM、OAuth コールバック、複雑な query パラメータを含む長い URL を入れる場合は、先に URL エンコーダー・デコーダー でリンクを整え、パーセントエンコードが正しいことを確認してから QR に埋め込むのがおすすめです。長文、SMS 本文、vCard データでは、まず テキストカウンター で文字数と UTF‑8 バイト数を確認してください。payload が長いほど高い誤り訂正が必要になり、読み取りやすさも下がりやすくなります。ロゴファイルが数 MB ある、または不要な透明チャンネルを含む場合は、アップロード前に 画像圧縮 で軽くしておくと扱いやすくなります。目的が URL や連絡アクションではなく、SKU、資産 ID、箱番号、チケット番号なら バーコードジェネレーター を使ってください。短い数字や英数字では、1D バーコードのほうが文字あたりの密度に優れることがあります。

使い方のヒント

画面、印刷物、暗い場所でも読み取りやすい QR コードにするための実用的なポイントです。

  • 誤り訂正は Q（25%）を初期値として考えると安定します。ロゴを入れる、粗い素材に印刷する、一部が隠れる可能性がある場合は H（30%）へ上げてください。
  • 静かな余白は 4 モジュール以上を確保します。スキャナーは周囲の明るい領域を使って QR コードを見つけるため、切り抜きがきついと印刷物では読めなくなりがちです。
  • 印刷前には必ず実際の環境で試し読みしてください。テストするスマートフォン、現場の明るさ、ユーザーが読み取る角度はすべて結果に影響します。できれば異なる機種 2 台で、実際の距離から確認します。
  • 前景色は背景よりはっきり暗くします。最近のスキャナーはある程度の淡い前景にも対応できますが、明るい背景に濃い前景の組み合わせが最も安定します。
  • 信頼性を最優先する場合は、位置検出パターンを過度に装飾しないでください。ドットやクラッシーな形は見た目が良い一方、古いスキャナーでは 5〜10% 程度読み取りやすさが落ちることがあります。
  • URL を入れる場合は、短縮リンクを使うのがおすすめです。UTM 付きやブランド短縮リンクなら、低めの解像度でも読み取りやすく、あとから遷移先を変更できます。
  • 用途に合わせて形式を選びます。印刷、パッケージ、ポスターは SVG、スライドやメールは PNG、現代的な Web サイトは WebP、JPG が必須のシステムだけ JPEG を使います。
  • 透明背景を使う場合、最終的な背景が明るく均一か確認してください。写真や模様の上に透明 QR を置くと読み取りにくくなります。必要なら QR の下に白いカード状の背景を敷きます。
  • 本番用 QR は元の SVG を保存してください。SVG から再書き出しすれば品質を保てますが、PNG のスクリーンショットから再生成すると品質が落ちます。
  • Wi‑Fi QR では、パスワードの文字を必ず確認してください。セミコロン、カンマ、コロン、引用符などはこのページがエスケープしますが、入力した 1 文字が間違っていれば、見た目は正常でも接続できない QR になります。

制限事項

このページは QR コード生成とデザイン調整のためのツールであり、キャンペーン管理プラットフォームではありません。境界を知っておくと、使いどころを間違えにくくなります。

  • 生成されるのは静的 QR コードです。データは QR パターンそのものに埋め込まれるため、遷移先を変更するには再生成が必要です。動的リダイレクトが必要な場合は、短縮リンクやリダイレクト URL を埋め込み、その遷移先を外部で更新してください。
  • 最大 payload は文字種と誤り訂正レベルによって変わります。目安として、最も低い誤り訂正では数字で約 7 KB、英数字で約 4.3 KB、UTF‑8 バイトモードで約 3 KB です。長い vCard や長文はすぐ上限に近づきます。
  • 位置検出パターンに強いグラデーションをかけると、古い端末で読み取りにくくなります。データモジュールにグラデーションを使う場合でも、位置検出パターンは高コントラストに保つのがおすすめです。
  • このページは QR コードのスキャンやデコードは行いません。生成結果を検証する場合は、実際のスマートフォンでスキャンするか、専用の QR デコーダーを使ってください。
  • ロゴは完成後の QR コードに重ねて配置されます。データとしてエンコードされるわけではありません。QR 幅に対して小さめに保ち、視覚的な遮りは誤り訂正で吸収します。
  • 書き出し解像度は PNG、WebP、JPEG などのラスター形式にだけ影響します。SVG は解像度非依存で、サイズ項目は SVG の viewBox を制御するものであり、ピクセル寸法ではありません。
  • JPEG は透明背景に対応していません。透明背景の状態で JPEG を書き出す場合、背景は自動的に白で塗られます。
  • グラデーションを使ってもコントラストは重要です。スキャン失敗は、背景とのコントラストが最も低い部分から起きやすいため、その箇所を確認してください。
  • すべての処理は qr-code-styling によってブラウザ内で行われます。サーバー、payload 解析、共有リンク、クラウドコピーはありません。

よくある質問

内容タイプ、読み取りやすさ、ロゴ配置、ファイル形式、誤り訂正、静的 QR と動的 QR の違いについて、実用的な回答をまとめました。

生成される QR コードは動的ですか、静的ですか？

静的です。データは QR コードのモジュールパターンに直接エンコードされるため、遷移先を変えるには新しい QR コードを生成する必要があります。動的な遷移先が必要な場合は、短縮リンクやリダイレクト URL を埋め込み、そのリンク先を QR コードの外側で更新してください。

どれくらいの内容まで入れられますか？

文字種と誤り訂正レベルによって変わります。おおよその上限は、最も低い誤り訂正で数字が約 7 KB、英数字が約 4.3 KB、UTF‑8 バイトモードが約 3 KB です。Q（25%）や H（30%）では容量が大きく減るため、長い vCard は M または L が必要になることがあります。

ロゴを入れると読み取れないことがあるのはなぜですか？

ロゴがデータモジュールを覆うためです。対策は 3 つあります。ロゴを QR 幅の 20〜35% に抑える、誤り訂正を Q または H に上げる、ロゴ下のドットを隠すをオンにしてロゴ下を中途半端に残さずきれいにマスクすることです。

どの誤り訂正レベルを使えばいいですか？

ロゴなしなら、多くの場合 M（15%）で十分です。ロゴありなら Q（25%）が安全な初期値です。ロゴが大きい場合や印刷環境が粗い場合は H（30%）を使います。L から H に上げると容量は大きく減りますが、破損や遮りへの耐性は高くなります。

データモジュール、位置検出パターン、位置検出中心点は何が違いますか？

データモジュールは QR コード全体に分布する小さな四角で、実際のデータを持ちます。位置検出パターンは左上、右上、左下にある大きなマーカーで、スキャナーが向きを判定するために使います。位置検出中心点は、それぞれの位置検出パターン内部にある小さな四角です。3 つは別々にスタイル設定できます。

WIFI URI は標準ですか？どのスマートフォンでも読み取れますか？

WIFI URI は iOS、Android、多くのカメラアプリで使われる事実上の標準です。このページは仕様に沿ってエスケープを行うため、バックスラッシュ、セミコロン、カンマ、コロン、ダブルクォートを含むパスワードでも正しく生成できます。

vCard は読めるのに文字化けするのはなぜですか？

古い vCard 生成ツールでは、カンマ、セミコロン、バックスラッシュ、改行が正しくエスケープされていないことがあります。このページでは RFC 6350 に沿ってフィールドをエスケープします。古い印刷物に壊れた QR がある場合は、このバージョンで作り直すのがおすすめです。

Size を変えてもプレビューサイズが変わらないのはなぜですか？

意図的な仕様です。プレビューは固定サイズにして、スタイル変更を安定して比較できるようにしています。Size は書き出し解像度、つまりダウンロードされる PNG、WebP、JPEG の実際のピクセル寸法を制御します。SVG は解像度非依存です。

透明背景は印刷に向いていますか？

印刷面が明るく均一で、前景とのコントラストが十分ある場合に限ります。模様や写真の上に透明 QR を置くと読み取りやすさが大きく落ちます。その場合は白い単色背景にするか、QR の下に無地の台紙を置いてください。

どのファイル形式でダウンロードすべきですか？

スライド、ドキュメント、メールなど一般的なデジタル用途には PNG。印刷、ベクター編集、無限拡大には SVG。現代的な Web サイトには軽量な WebP。JPEG はシステム上 JPG が必須のときだけ使い、透明背景には向きません。

どんな画像でもロゴとして使えますか？

使えます。PNG、JPG、SVG、WebP に対応しています。大きなサイズで書き出す場合は SVG ロゴが最もきれいです。透明 PNG も向いています。小さな QR サイズで読ませる必要がある文字入りロゴは避けるのがおすすめです。

データはブラウザの外へ送信されますか？

いいえ。QR コード生成、ロゴ埋め込み、すべてのダウンロードは現在のブラウザタブ内で完結します。Wi‑Fi パスワード、vCard の連絡先情報、トラッキング付きキャンペーン URL がサーバーへ送信されることはありません。

このツールで QR コードをスキャンまたはデコードできますか？

現時点ではできません。このページは生成専用です。生成された QR コードの内容を確認したい場合は、スマートフォンのカメラでスキャンするか、非テキストタイプでは生成された内容に表示される元の文字列を QR デコーダーに貼り付けて確認してください。

関連ツール

エンコード系ツールを続けて使えます。QR に入れる前に URL をパーセントエンコードしたり、商品ラベルや資産 ID ならバーコードへ切り替えたり、Base64 や JWT インスペクターで別形式を確認したりできます。