QR Code Generator はじめに
ポスターやイントラネットのページに配置する QR コードはデザインの一部であり、白黒の四角形がそのままなじむことはめったにありません。QR Code Generator では、コードのドットの形、色、コーナー マーカーを変更できます。設定はデータ タブの下にある折りたたみ可能なセクションにあり、変更はすぐにプレビューに反映されます。この記事では、図形、色、コーナーの四角、コーナーのドット、誤り訂正の各セクションと、デザインしたコードを読み取りやすく保つためのルールについて説明します。
Web パーツを開いた時点では、すべてのセクションが折りたたまれています。セクションを展開するには、その名前をクリックします。
既定のデザイン
新しい Web パーツは、次のデザインで始まります。
| 設定 | 既定値 |
|---|---|
| ドットの図形 | 四角形 |
| ドット、コーナーの四角形、コーナーのドットの色 | 青、#166aae |
| 背景色 | 完全に透明 |
| グラデーション | オフ |
| コーナーの四角形とコーナーのドットのタイプ | 四角形 |
| 誤り訂正 | 四分位 |
図形
図形セクションでは、データを表す小さなドットのスタイルを設定します。6 種類のスタイルが画像で表示され、画像をクリックするとそのスタイルが選択されます。
- 独立した丸いドット。
- 丸みのあるスタイル - 隣り合うドットがつながり、端の丸い線になります。
- クラシー - 2 つの角を切り落としたドット。
- クラシー (丸み付き) - 同じ形で、角がより滑らかなもの。
- 四角形 - QR コードの標準的な外観。
- 強い丸み - 端が大きく丸められた線。
図形で変わるのは、コードの見た目だけです。エンコードされるデータとドットの数は変わりません。
色
色セクションには、2 つのカラー ピッカーがあります。
- 色 - ドットの色。
- 背景色 - コードの背後の領域の色。
各ピッカーには、色のフィールド、色相のスライダー、透過性のスライダーがあり、その下に正確な値を指定するための 16 進、赤、緑、青、透過性の各ボックスがあります。コーポレート カラーを使用するには、そのカラー コードを 16 進ボックスに貼り付けます。
背景色の透過性が 100 の場合、コードには背景がなく、ページのセクション、スライド、印刷用紙など、下にあるものの色がそのまま背景になります。
グラデーション
グラデーションチェック ボックスをオンにすると、ドットが単色ではなく、2 色の間で変化するグラデーションで塗りつぶされます。さらに 2 つの設定が表示されます。
- グラデーションの種類 - コードの左端から右端に向かう線形、または中央から端に向かう放射状。
- 2番目の色 - グラデーションの終点の色。グラデーションは、色で設定した色から始まります。
グラデーションはドットにのみ適用されます。コーナーの四角形とコーナーのドットは、それぞれの色のままです。
コーナーの四角とコーナーのドット
すべての QR コードの 3 つの角には位置検出マーカーがあり、スキャナーはこれを手がかりにコードを見つけ、向きを判断します。マーカーは外側の枠と内側のドットで構成され、それぞれに専用のセクションがあります。
コーナーの四角 - 外側の枠:
- タイプ - 円、四角形、または角丸四角形。
- 色 - 枠の色。
コーナーのドット - 内側のドット:
- タイプ - ドットまたは四角形。
- 色 - ドットの色。
📝 注
色セクションのドットの色を変更しても、マーカーは変わりません。コード全体の色を変更するには、色 > 色、コーナーの四角 > 色、コーナーのドット > 色の 3 か所に同じ色を設定します。
誤り訂正
QR コードには冗長データが含まれており、コードの一部が汚れたり、破損したり、隠れたりしていても、スキャナーで読み取ることができます。誤り訂正セクションでは、追加する冗長性の量を設定します。
| レベル | 復元できるコード語の割合 | 用途 |
|---|---|---|
| 低 | 約 7% | きれいな画面に表示する長いデータで、コードをできるだけ低密度にする必要がある場合 |
| 中 | 約 15% | 画面に表示するコードや、品質の良い印刷物 |
| 四分位 | 約 25% | 既定値。小さなロゴ入りのコードを含め、ほとんどのコードに適しています |
| 高 | 約 30% | 大きなロゴ入りのコードや、摩耗する可能性のある印刷物 |
割合はコード語に対する値であり、安全に覆える画像の面積を示すものではありません。コーナー マーカーを隠さず、ロゴ入りのコードは必ずテストしてください。
レベルを上げるとコードの耐久性は高まりますが、同じデータでも密度が高くなります。必要なドットの数が増え、ドット 1 つ 1 つが小さくなります。
コードを読み取りやすく保つ
スキャナーに必要なのは、美しさよりもコントラストと明確なマーカーです。次のルールを守ると、デザインしたコードが読み取れなくなることを防げます。
- 明るい背景に暗い色。 ドットは背景よりもはっきりと暗くする必要があります。暗い背景に明るいコードは、すべてのスキャナーで読み取れるわけではありません。
- 透明な背景に注意する。 背景が透明なコードは、使用する場所の背景がそのまま背景になります。白いページでは読み取れる青いコードも、暗いセクションや暗いスライドの上では見えなくなります。コードの使用場所がわからない場合は、不透明な明るい背景色を設定してください。
- ドットを透明にしない。 色の透過性スライダーは、淡い色と同じようにコントラストを下げます。
- グラデーションの両端を確認する。 色と2番目の色の両方が、背景に対してコントラストを持つ必要があります。明るい色調へと薄れていくグラデーションでは、コードの一部が読み取れなくなります。
- マーカーをはっきりさせる。 コーナー マーカーは、少なくともドットと同程度に背景とのコントラストを持つ必要があります。
- 余白を残す。 コードをレイアウトに配置するときは、コードの周囲に少なくとも 4 モジュール (QR グリッドのセル) 分の幅の空白領域を確保してください。
❗ 重要
デザインしたコードは、印刷または公開する前に、必ず 2 台以上の異なるスマートフォンでテストしてください。Web パーツのプレビューの幅は 300 ピクセルです。実際に読み取られるサイズと距離でもコードをテストしてください。
まとめ
QR Code Generator のデザイン セクションでは、ドットの図形、色、グラデーション、コーナー マーカーを変更でき、誤り訂正のレベルで耐久性の余裕を設定します。デザインはデータとともにページと一緒に保存されるため、一度デザインしたコードは、すべての訪問者に対して同じ外観で表示されます。
💡 ヒント
コードの中央にロゴを配置するには、KB10266. QR コードに会社のロゴを追加する方法を参照してください。画像のサイズとファイル形式については、KB10268. QR コードのダウンロードとコピー: PNG、JPEG、SVG、WebPで説明しています。
