Web開発
ディザリングされたQRコード
Dithered QR Codes (andrewt.net)
要約
この記事は、QRコードのデータモジュールを画像で装飾する「ディザリングされたQRコード」について解説しています。QRコードの基本的な仕組みと、ブランドがQRコードをカスタマイズするためにデータモジュールを画像で置き換える手法を紹介します。特に、エラー拡散ディザリングという手法を用いることで、画像のノイズを目立たなくし、QRコードのスキャン精度を維持しながら、より洗練された見た目のQRコードを作成する方法を説明しています。
全文翻訳
あなた自身のディザリングされたQRコードを作成する
QRコードの基本
QRコードは、実際には数バイトのデータを、スマートフォンや類似のデバイスで写真から簡単に読み取れるようにエンコードする方法にすぎません。それらは、ピントが合っていなくても、印刷が悪くても、斜めから見ても、一部が欠けていても、非常に頑健であるように設計されています。
正確にどのように機能するかはそれほど重要ではありませんが、このページでは、QRコードはグリッド状の正方形に分割され、機能パターン(上記の例の太い形状)とデータモジュール(それ以外のすべて)の2つの部分に分かれるものとします。
機能モジュールは主にスキャナーがQRコードを簡単に見つけられるようにするために使用されるため、非常に明確で区別できる必要があります。
データモジュールは、実際のデータがヘッダーデータなどとともに格納される場所であり、スキャナーが機能モジュールを使用してQRコードの正確な位置を把握した後にのみ読み取られるため、ある程度変更することができます。
これは、ブランドが少し特徴的なQRコードを作成するためにしばしば使用されます。この種の変更はスキャン時の堅牢性を少し低下させますが、コードがスキャン不可能になる前にかなりの程度まで許容できます。
QRコードに画像を入れる
これは私がMastodonで見たQRコードです。
データモジュールに行える変更の1つは、それらを縮小することです。スキャナーは、ファインダーパターンがピクセルの中心がどこにあるべきかを示す場所を探すため、コードが歪んでいなければスキャンできます。
これは、残りのスペースがあなたのものになることを意味します。
Daveは各ピクセルを3x3のグリッドに分割し、中央のグリッドにデータを格納し、残りのグリッドを写真に使用します。
結果は、低解像度の1ビット写真にソルトアンドペッパーノイズが乗ったものになります。
ディザリング
明らかに、画像を低色深度に圧縮するとき、通常は単に閾値を設定するだけではありません。つまり、暗いピクセルを黒く、明るいピクセルを白くします。通常、ミッドトーンを作成するためにも、一種の市松模様の効果を使用します。
Bayerフィルターは、細部をあまり犠牲にすることなく、このアイデアを画像全体に適用するために使用できます。
エラー拡散
この方法を改善しようとする試みがFloyd-Steinbergディザリングです。
この方法では、左上から始めてピクセルを通常通り閾値処理します。明るさが50%を超えている場合は白にし、それ以外の場合は黒にします。
例えば、明るさが70%だったとしましょう。それを白(100%の明るさ)にするので、ピクセルあたり30%の明るさを追加したことになります。
それを相殺するために、その誤差を他のピクセルに「拡散」します。まだ閾値処理されていない近くのすべてのピクセルを数パーセント暗くし、合計でピクセルあたり30%にします。
それらのピクセルの閾値処理を行う際には、それを考慮に入れます。
このアイデアは、画像全体に閾値処理を施した後、画像のすべての部分が、より規則的なディザリングよりも平均して正しい明るさに近くなるということです。
不規則なパターンは、あまり気にならないという利点もあります。
エラー拡散ディザリングによるQRコード
この不規則なディザリングのもう1つの利点は、QRコードのデータモジュールによって引き起こされるソルトアンドペッパーノイズがはるかに見えにくいということです。
しかし、それはまだそこにあり、画像がノイズが多く見える理由です。
つまり、147x147ピクセルの1ビット画像なので、いずれにしてもかなりノイズが多く見えるでしょうが、そのノイズの一部は、ピクセルの9分の1が事実上ランダムな色であるためです。
しかし、より多くのエラー拡散を使用してこれを解決できます。
データモジュールをエラー拡散する
この場合、エラー拡散を2パスで行います。
2番目のパスは通常と同じですが、最初のパスはデータモジュールをマスクするために特別に行われます。
すべてのピクセルがどの色でなければならないかはすでにわかっているので、それらをその色にし、その誤差を周囲の8ピクセルに拡散できます。
誤差は大きくなる可能性があります。通常、色を選択できるため、誤差は50%を超えることはありませんが、ここでは暗い領域のピクセルを純粋な白にする必要があり、95%の誤差が発生する可能性があります。
それは悪く聞こえますが、それを単に受け入れるのではなく、この誤差を拡散することがなぜそれほど重要なのかということです。
これにより、画像がはるかにクリーンになることがわかります。
それを凝ったものにする
ジェネレーターツールを使用すると、追加のトリックを実行できます。
画像を追加する前にQRコードを回転させたり、QRコードの設定を調整して、代替エンコーディングのいずれかがより見栄えがするかどうかを確認したりできます。
また、ジェネレーターがそれらの95%誤差のデータモジュールのいくつかを変更することもできます。QRコードには十分なエラー訂正機能があるため、いくつかのピクセルを変更してもスキャンできるようになります。
(ロゴを中央に入れたQRコードが機能するのはこのためです。)
しかし、実際には、データモジュールから誤差を拡散する場合、画像品質にはあまり影響しません。そして、コードのスキャン性能には深刻な影響を与えます。
これらを実生活で使用する
あまりやりすぎず、コードが大きな画面やポスターなどに表示される場合は、これはすべてかなりうまく機能します。
例えば、紙のフライヤーに表示され、それがしわになる可能性がある場合、美しくするために諦めた冗長性、堅牢性、エラー訂正をさらに多く必要とします。
最終的には、美観とスキャン可能性のトレードオフです。そして、コードがラップトップ画面からあなたの電話でスキャンできたとしても、それがランダムな見知らぬ人のポテトフォンで、悪い照明の下の印刷物からスキャンできるとは限らないことを覚えておいてください。
また、ジェネレーターツールはマージンなしの小さな画像を作成することにも注意してください。QRコードが確実にスキャンされるためにはマージンが必要であり、ブラウザはCSSで無効にしない限り、画像を拡大するときに通常ぼかします。
マージンは、大きな3つの「ファインダー」パターン正方形の中央とは反対の色である必要があります。通常は白ですが、黒い背景を必要とする反転QRコードを生成することもできます。