QR コードのデザインのカスタマイズ: 図形、色、グラデーション、コーナー

はじめに

ポスターやイントラネットのページに配置する QR コードはデザインの一部であり、白黒の四角形がそのままなじむことはめったにありません。QR Code Generator では、コードのドットの形、色、コーナー マーカーを変更できます。設定はデータ タブの下にある折りたたみ可能なセクションにあり、変更はすぐにプレビューに反映されます。この記事では、図形、色、Corner Square (コーナーの四角形)、Corner Dots (コーナーのドット)、Error Correction (誤り訂正) の各セクションと、デザインしたコードを読み取りやすく保つためのルールについて説明します。

Web パーツを開いた時点では、すべてのセクションが折りたたまれています。セクションを展開するには、その名前をクリックします。

既定のデザイン

新しい Web パーツは、次のデザインで始まります。

図形

図形セクションでは、データを表す小さなドットのスタイルを設定します。6 種類のスタイルが画像で表示され、画像をクリックするとそのスタイルが選択されます。

• 独立した丸いドット。
• 丸みのあるスタイル — 隣り合うドットがつながり、端の丸い線になります。
• クラシー — 2 つの角を切り落としたドット。
• クラシー (丸み付き) — 同じ形で、角がより滑らかなもの。
• 四角形 — QR コードの標準的な外観。
• 強い丸み — 端が大きく丸められた線。

図形で変わるのは、コードの見た目だけです。エンコードされるデータとドットの数は変わりません。

色

色セクションには、2 つのカラー ピッカーがあります。

• 色 — ドットの色。
• 背景色 — コードの背後の領域の色。

各ピッカーには、色のフィールド、色相のスライダー、透過性のスライダーがあり、その下に正確な値を指定するための 16 進、赤、緑、青、透過性の各ボックスがあります。コーポレート カラーを使用するには、そのカラー コードを 16 進ボックスに貼り付けます。

背景色の透過性が 100 の場合、コードには背景がなく、ページのセクション、スライド、印刷用紙など、下にあるものの色がそのまま背景になります。

Gradient (グラデーション)

Gradient (グラデーション) チェック ボックスをオンにすると、ドットが単色ではなく、2 色の間で変化するグラデーションで塗りつぶされます。さらに 2 つの設定が表示されます。

• グラデーションの種類 — コードの左端から右端に向かう Linear (線形)、または中央から端に向かう Radial (放射状)。
• Second Color (2 番目の色) — グラデーションの終点の色。グラデーションは、色で設定した色から始まります。

グラデーションはドットにのみ適用されます。コーナーの四角形とコーナーのドットは、それぞれの色のままです。

Corner Square と Corner Dots

すべての QR コードの 3 つの角には位置検出マーカーがあり、スキャナーはこれを手がかりにコードを見つけ、向きを判断します。マーカーは外側の枠と内側のドットで構成され、それぞれに専用のセクションがあります。

Corner Square — 外側の枠:

• タイプ — 円、四角形、または角丸四角形。
• 色 — 枠の色。

Corner Dots — 内側のドット:

• タイプ — ドットまたは四角形。
• 色 — ドットの色。

Error Correction (誤り訂正)

QR コードには冗長データが含まれており、コードの一部が汚れたり、破損したり、隠れたりしていても、スキャナーで読み取ることができます。Error Correction セクションでは、追加する冗長性の量を設定します。

レベルを上げるとコードの耐久性は高まりますが、同じデータでも密度が高くなります。必要なドットの数が増え、ドット 1 つ 1 つが小さくなります。

コードを読み取りやすく保つ

スキャナーに必要なのは、美しさよりもコントラストと明確なマーカーです。次のルールを守ると、デザインしたコードが読み取れなくなることを防げます。

• 明るい背景に暗い色。 ドットは背景よりもはっきりと暗くする必要があります。暗い背景に明るいコードは、すべてのスキャナーで読み取れるわけではありません。
• 透明な背景に注意する。 背景が透明なコードは、使用する場所の背景がそのまま背景になります。白いページでは読み取れる青いコードも、暗いセクションや暗いスライドの上では見えなくなります。コードの使用場所がわからない場合は、不透明な明るい背景色を設定してください。
• ドットを透明にしない。 色の透過性スライダーは、淡い色と同じようにコントラストを下げます。
• グラデーションの両端を確認する。 色と Second Color の両方が、背景に対してコントラストを持つ必要があります。明るい色調へと薄れていくグラデーションでは、コードの一部が読み取れなくなります。
• マーカーをはっきりさせる。 コーナー マーカーは、少なくともドットと同程度に背景とのコントラストを持つ必要があります。
• 余白を残す。 コードをレイアウトに配置するときは、コードの周囲にドット約 4 個分の幅の空白領域を確保してください。

まとめ

QR Code Generator のデザイン セクションでは、ドットの図形、色、グラデーション、コーナー マーカーを変更でき、Error Correction のレベルで耐久性の余裕を設定します。デザインはデータとともにページと一緒に保存されるため、一度デザインしたコードは、すべての訪問者に対して同じ外観で表示されます。