ツールさん

How to

QRコード生成の使い方

QRコード生成は、URL やテキストから QR コードを自動生成し、用途に合わせてサイズ、余白、誤り訂正、色、透明化、出力形式を調整できるツールです。右側でプレビューを確認し、コピーまたはダウンロードできます。

QRコード生成 のサムネイル画像QRコード生成 のサムネイル画像

Use Cases

こんな時に使います

  • 資料や印刷物にURLのQRコードを載せたい
  • イベントや店舗案内のQRコードを生成したい
  • フォームやSNSへのリンクをQRコードにしたい
  • Web掲載用にSVGのQRコードを保存したい
  • 背景透明のQRコードをデザインに重ねたい
  • 印刷前にマスクパターンや色を比較したい

Capabilities

このツールでできること

  • URLやテキストからQRコードを生成
  • PNGとSVGで保存
  • サイズ、余白、誤り訂正を調整
  • マスクパターンを自動または手動で選択
  • 前景色と背景色を指定
  • 背景の透明化を切り替え

Guide

画面ごとの使い方

設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。

01 HOWTO

URL / テキストと出力形式を設定する

左側の入力欄へ QR コードに入れる内容を入力し、保存用途に合わせて PNG、JPEG、SVG、WebP を選びます。

QR コード生成 の 内容入力エリア を示す画面QR コード生成 の 内容入力エリア を示す画面

この要素でできること

  • URL やテキストを入力できる
  • 入力内容をクリア・コピーできる
  • 出力形式を選べる
  • 入力内容がプレビューへ反映される

操作する場所

01
URL / テキスト入力

左側の入力欄に共有したい URL やテキストを入れます。

QR コード生成 の URL / テキスト入力 の操作位置を示す画面QR コード生成 の URL / テキスト入力 の操作位置を示す画面
02
プリセットと出力形式

上部プリセットと出力形式チップで、用途に合う基本設定を選びます。

QR コード生成 の 読み取り設定へ進む の操作位置を示す画面QR コード生成 の 読み取り設定へ進む の操作位置を示す画面
03
色設定

前景色、背景色、透明化を調整する場所を確認します。

QR コード生成 の 色設定へ進む の操作位置を示す画面QR コード生成 の 色設定へ進む の操作位置を示す画面
04
QR プレビュー

右側のプレビューで入力内容が QR コードに反映されているか確認します。

QR コード生成 の プレビュー確認 の操作位置を示す画面QR コード生成 の プレビュー確認 の操作位置を示す画面

02 HOWTO

サイズ・余白・読み取り設定を調整する

左側のサイズ、余白、誤り訂正、マスクパターンを調整し、印刷や画面表示で読み取りやすい QR コードにします。

QR コード生成 の サイズ・余白・読み取り設定エリア を示す画面QR コード生成 の サイズ・余白・読み取り設定エリア を示す画面

この要素でできること

  • 出力サイズを選べる
  • 余白を調整できる
  • 誤り訂正レベルを選べる
  • マスクパターンを指定できる

操作する場所

01
サイズ・余白・誤り訂正

サイズ、余白、誤り訂正、マスクパターンを同じ設定エリアで調整します。

QR コード生成 の サイズと余白 の操作位置を示す画面QR コード生成 の サイズと余白 の操作位置を示す画面
02
入力内容

内容が長すぎる場合は入力欄で短くします。

QR コード生成 の 入力内容の確認 の操作位置を示す画面QR コード生成 の 入力内容の確認 の操作位置を示す画面
03
QR プレビュー

設定変更後の密度や余白を右側で確認します。

QR コード生成 の プレビュー確認 の操作位置を示す画面QR コード生成 の プレビュー確認 の操作位置を示す画面
04
プレビュー情報

保存前に見た目と出力形式を確認します。

QR コード生成 の 出力情報 の操作位置を示す画面QR コード生成 の 出力情報 の操作位置を示す画面

03 HOWTO

色・透明化と見た目を確認する

前景色、背景色、透明背景を調整し、配置先でも読み取りやすいコントラストになっているか右側のプレビューで確認します。

QR コード生成 の 色・透明化とプレビューエリア を示す画面QR コード生成 の 色・透明化とプレビューエリア を示す画面

この要素でできること

  • 前景色と背景色を変更できる
  • 背景透明化を切り替えられる
  • 透明時の見え方を確認できる
  • 保存前にプレビューを確認できる

操作する場所

01
色と透明化

前景色、背景色、背景透明化の設定を調整します。

QR コード生成 の 色と透明化 の操作位置を示す画面QR コード生成 の 色と透明化 の操作位置を示す画面
02
QR プレビュー

現在の色と余白で読み取りやすい見た目か確認します。

QR コード生成 の QR プレビュー の操作位置を示す画面QR コード生成 の QR プレビュー の操作位置を示す画面
03
プレビュー確認

保存前に QR コードの表示状態を見直します。

QR コード生成 の 出力情報 の操作位置を示す画面QR コード生成 の 出力情報 の操作位置を示す画面
04
コピー・保存

右側のコピーまたはダウンロードボタンで結果を持ち出します。

QR コード生成 の 保存へ進む の操作位置を示す画面QR コード生成 の 保存へ進む の操作位置を示す画面

04 HOWTO

QR コードをコピー・保存する

右側の結果ペインで QR コードを確認し、選択した出力形式でコピーまたはダウンロードします。

QR コード生成 の 出力情報と保存エリア を示す画面QR コード生成 の 出力情報と保存エリア を示す画面

この要素でできること

  • QR コードの見た目を確認できる
  • 結果をコピーできる
  • 選択形式で保存できる
  • 入力や設定へ戻って調整できる

操作する場所

01
QR プレビュー

保存前に QR コードの見た目、余白、色を確認します。

QR コード生成 の QR プレビュー の操作位置を示す画面QR コード生成 の QR プレビュー の操作位置を示す画面
02
プレビュー確認

右側の結果ペインで現在の生成結果を確認します。

QR コード生成 の 出力情報 の操作位置を示す画面QR コード生成 の 出力情報 の操作位置を示す画面
03
コピー・保存

右上のコピーとダウンロードを使って結果を持ち出します。

QR コード生成 の 保存とコピー の操作位置を示す画面QR コード生成 の 保存とコピー の操作位置を示す画面
04
入力の見直し

読み取りにくい場合は左側の入力や設定を調整します。

QR コード生成 の 入力の見直し の操作位置を示す画面QR コード生成 の 入力の見直し の操作位置を示す画面

Notes

使う時の注意

使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。

確認すること

読み取りやすい色の組み合わせにする

前景色と背景色のコントラストが弱いと読み取りにくくなります。濃い前景色と明るい背景色の組み合わせを基本にしてください。

確認すること

印刷や掲示では余白を残す

QR コードの周囲に十分な余白があると、紙面や画面に置いたときも読み取りやすくなります。

確認すること

透明化する場合は配置先の背景を確認する

背景を透明にした QR コードは、貼り付け先の背景色によって見え方が変わります。保存前にプレビューで確認してください。

FAQ

QRコード生成 に関する質問

使う前に判断しやすい質問を先に整理します。

入力した内容は外部へ送信されますか?

いいえ。QRコードの生成はブラウザ内で行い、入力内容は外部へ送信しません。

URL以外のテキストもQRコードにできますか?

はい。短い文章や案内文など、URL以外のテキストもQRコードにできます。

PNGとSVGのどちらで保存できますか?

PNGとSVGの両方で保存できます。資料や画像編集にはPNG、Web掲載や拡大利用にはSVGが向いています。

透明背景のQRコードを作れますか?

はい。透明化をオンにすると、背景を透明にしたQRコードを保存できます。

マスクパターンは変更した方がよいですか?

通常は自動のままで問題ありません。印刷やデザイン上の見え方を比較したい場合だけ変更してください。

色付きのQRコードも読み取れますか?

前景色と背景色の明暗差が十分であれば読み取りやすくなります。保存前に実機での読み取り確認をおすすめします。

次に見る使い方

関連する使い方

関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。