QRコードの作成: QRコードアートの深掘り (2024)

QRコードの作成 QRコードアートの深掘り 2024年9月27日 - 2026年6月13日更新誰も自ら進んでQRコードをスキャンしようとはしません。しかし、URLを視覚的に共有する最も簡単な方法であるため、世界中に蔓延しています。看板、広告、あらゆる種類のパッケージに; 周囲を見回して注意を払おうとすれば、気づかないのは難しいでしょう。 このブログ記事を書いている私 オリジナル写真提供: Arnaud DG, CC BY 2.0 観測可能な宇宙 オリジナル写真提供: erikjohansson, CC BY 2.0 もちろん、通常の白黒QRコードは氷山の一角に過ぎません。多くの人は、パーソナライズされた、ブランドに合ったものを求めており、これはロゴを中央に配置するだけで簡単に実現できます。これは、QRコードがCDやDVDのように、Reed-Solomon誤り訂正を使用して破損した情報を復元するため可能です。これはセンス良く実行できますが、多くの場合、貧弱な効果のために怠惰に実行されます。QRコードは小さく表示され、判読不能なロゴが一般的です。さらに、より多くの誤り訂正は、より高密度なコードとより小さなピクセルを必要とします。注意しないと、醜いだけでなくスキャン不可能なものになってしまう可能性があります。美しくスキャン可能なQRコードを作成する方法はありますか？ はい、それがこのブログ記事全体です。 芸術的なQRコードの風景 まず、何が可能かを見てみましょう。多くの人がコード全体に写真を組み込んでいます。しかし、画質と有用性の間には実際のトレードオフがあります。 QArtコード ハルフトーンQRコード、2013年 QPicture バーガーキングVMAコマーシャル 最大限のスタイルポイントのために、アーティストは完全にカスタムメイドのQRコードを手でデザインできます。 QRcanvas 2012年 MTSカレンダー Am I Collective (出典) minor(Dribbble, Behance) QRコードの芸術 / Elkoy Artists Collective これにもAIがあります。作成者のブログ記事とStable Diffusion QR Code 101を読むことをお勧めします。例は省略し、代わりに詩を置きます。 私はあなたの疲れた目を悩ませることはありませんし、このバベルの絵の巻物からページをウェブ、ワールドワイドにさらに負担をかけることもありません。 ここは名誉の場所ではありません、彼女には13本の指があり、アニメの女の子の大きな胸、古代ローマ。 興味深い方向性は、単に白黒の四角形のレンダリング方法を変更することです。 QRBTFで作成 QRBTFで作成 私はとてもインスピレーションを受けたので、自分でコードを書きました。私が作ったデザインツールはqrframe.kylezhe.ngで利用できます。それは簡単なプリセットを備えており、JavaScriptを使用して簡単に変更したり、ゼロから作成したりできます。 これで、多くの技術を垣間見ることができました。その多くはユーザーを混乱させ、いくつかは最新のスマートフォンカメラアプリで機能しない可能性があります。創造的な自由をどこで、なぜ取ることができるかを真に理解するには、QRコードの構造とスキャン方法から始める必要があります。 QRコードの解剖学 ヘッダー データ 未使用容量 誤り訂正 ファインダーパターンは、3つの角にある大きな四角形の形状です。これらは、コードの向き、寸法、パースペクティブなどを決定するために使用されます。中央の白黒ピクセルの比率が重要です（約1:1:3:1:1）ので、角は必須ではありません。 完璧 OK 悪い 悪い2 検出を容易にするために、ファインダーパターンには周囲にセパレーターまたは「クワイエットゾーン」が必要ですが、これは特定のサイズである必要はありません。 アライメントパターンは、歪みを補正するために使用される小さな四角形です。通常、最後の角に1つありますが、最小のQRコードにはアライメントパターンがありませんが、非常に大きなコードには複数あります。 サイズ タイミングパターンは、白黒ピクセルが交互に並ぶ水平および垂直の帯です。これらは、デコード中に列と行を整列させるのに役立つとされています。 ファインダーパターンとは異なり、タイミングパターンとアライメントパターンは実際には必須ではありません。QRコードは、それらなしでもほとんど*スキャンできます。 *右下の配置パターンは、特に大きなサイズで役立ちますが、タイミングパターンは完全に無用なようです。 右下の配置パターンを有効にする フォーマット情報は、誤り訂正レベルとデータに適用されるマスクパターン（後述）を格納します。1つのコピーは左上にあり、もう1つのコピーは右上と左下に分割されています。 非常に大きなQRコードには、バージョン情報用のセクションがあります。バージョンとはサイズを意味し、1〜40の範囲です。1つのコピーは右上、もう1つのコピーは左下にあります。 バージョン2 小さいコードの場合、サイズはファインダーパターン間の距離だけで正確に計算できます。 残りのスペースはデータ用です。 驚くべきことに、右下から始まり、上から下へ、右から左へとジグザグに進みます。 ジグザグを表示 ビットは8ビットのブロック（バイトとも呼ばれる）に編成されているため、データピクセルの数が8で割り切れない場合、最後の数ピクセルは未使用になります。 バイト境界を表示 誤り訂正には4つのレベルがあり、それぞれ約7％、15％、25％、または30％のバイトを回復できます。誤り訂正を増やすとデータ容量が減少することを確認してください。 低 中 四分位 高 データをさらに分解すると、ヘッダーから始まり、未使用の容量を埋めるためにパディングされていることがわかります。誤り訂正レベル、バージョン（サイズ）、および入力テキストを調整して、スペースがどのように使用されるかを確認できます。 バージョン2 これは非常に奇妙に見えるかもしれません。特定のサイズの後、データバイトは連続して配置されるのではなく、スペース全体に分散するようにインターリーブされます。また、ヘッダーは8ビットの倍数ではないため、データはバイトアラインされていません。 データヘッダーは、エンコーディングモードと文字数を記述します。数字と英数字テキストには効率的なエンコーディングモードがありますが、URLで関連性のある唯一のモードはバイトモードです*。これは単にUTF-8を意味します。 *英数字モードはURLをエンコードできますが、大文字しかサポートしていないため、誰も使用しません。 最後に、マスクは、ファインダーパターン形状のような望ましくないピクセル配置を分解するために、データとXORされる8つのパターンのいずれかです。 01234567 雑多 QRコードは回転、ミラーリングでき、「ダーク」と「ライト」のピクセルを反転できます。 回転0° パースペクティブ ミラー 色反転 芸術的なQRコードを作成するために覚えておくべきことはすべてここにあります。ファインダーパターンは正しい形状である必要があり、QRコードの残りは正しい場所でダークまたはライトであれば十分です。それが80％ですが、残念ながら、カバーしなければならない1つの大きな落とし穴があります。 コストのかかる利便性 チョークで描いたこれらのQRコードで何が間違っていたかわかりますか？ 試行1（ひどい） 試行2（まだスキャン不可能） 最初のものはぎこちないですが、2回目の試行が失敗した理由を本当に混乱しました。マルチパーパススキャナー（デフォルトのスマートフォンカメラアプリなど）は、スキャンを試みる前にQRコードを検出する必要があります。常にアクティブなダムスキャナーと比較して、スマートフォンは受け入れるものについて非常にうるさいです。それは、オンデバイスのコンピュータービジョンモデルというブラックボックスに「QRコードのように見える」必要があります。経験則として、ソリッドでコントラストの高い色を使用し、ダークピクセルとライトピクセルのバランスを良く保つことが推奨されますが、実際のデバイスでのテストに代わるものはありません。それを念頭に置いて、人々がプログラムで芸術的なコードを作成してきた既存の方法を見てみましょう。 画像をQRスクエアに変換する データピクセルをオーバーレイする Amazing-QRで作成 最も簡単なケースでは、各ピクセルが配置される中央に単にドットを配置できます。ピクセル幅と高さの1/3以上のドットは、通常、正しくデコードするのに十分です。 Visualeadで作成 中央のドットに加えて、各ピクセルの全体を部分的に明るくしたり暗くしたりできます。 ハルフトーンQRコード、2013年で作成 画像を縮小したり、ピクセルアートを使用したりすると、中央のドットが目立たないように隠すことができます。ディザリングとカラーパレットの制限（量子化）は、ノイズを増加させ、カモフラージュをさらに提供します。 Micrography QR Codes、2019年の例 私がこれまでに見た中で最もユニークな技術は、ワードクラウドを生成することです。この場合、オーバーレイされたドットは、テキスト変形アルゴリズムを駆動するための中間ステップで使用されます。 Bad AppleですがQRコードで再生されています アニメーションへのジャンプは簡単です。同じドットオーバーレイを各フレームに描画できるためです。この例では、歌詞を表示するために時間とともに変化します。 Turni