【第２９回】デザインQRコードを作ってみよう。

暑くなってきましたね。
東京の湿気に慣れない筆者にとっては、なかなか辛い季節です。

さて今回は、QRコードの紹介ではなく、
実際にデザインQRコードを作ってみよう、というお話です。

QRコード自体は簡単に作ることができますが、
デザインを施したQRコードというのは、
作るのに若干の試行錯誤が必要になります。

が、いくつかの基準がわかっていれば実は簡単に作ることができます。
今回使うサンプルはこちら。

今回のQRコードは、みなさんもよく利用されるでしょう
「QRのススメ」で作成しております。

読み取ると、ひたすら「aaaaaaaa......」と続きますが、
この文字数がQRのススメで入力できる最大容量（270byte）です。

さて、デザインを施すために、
そもそものQRコードの構造をおさらいする必要があります。
そこらへんについては、以下のサイトが非常に詳しく掲載しているので
ぜひ参考にしていただければと思います。

http://www.keyence.co.jp/barcode/2jigenbasic/chishiki4.html

ここでもっとも重要なのが、切り出しシンボルです。
ここを侵してしまうと読み取れなくなります。
また、QRコードの周りの空白も、
実はQRコードには必要だということがわかりますね。

具体的に今回のサンプルに当てはめると、

こうなります。
赤の部分が侵してはならない切り出しシンボルで、
黄色の部分は必要な空白マージンです。

青の部分も必要なものですが、デザインQRコードを制作する際には
ここにデザインがかぶっても、ある程度は問題ありません。
（完全につぶしてしまうとうまく読み取れなくなります）

さてもうひとつ。
緑色で「a」と書いてある部分がありますが、
これがデザインを施せる面積となります。

今回利用している「QRのススメ」で生成されるQRコードは、
誤り訂正レベルが「L」となっており、
QRコード全体の面積の7％までであれば読み取れなくなっても問題ありません。
つまりそれが、QRコード上にデザインを施せる面積となります。

ちなみに、多くの場合、正方形に近いかたちで
アイコンを乗せるような施し方をしていますが、あくまでも「7％」ですので、
それがQRコードを縦横断するようなものや渦巻きでも読み取ることは可能です。

次に、コントラストです。
QRコードはその性質上、高いコントラスト比がなければ読み取れませんが、
では実際にはどれくらいまでコントラスト比を低くしても読み取れるのでしょうか。
実験してみた結果はこちら。

Photoshop上で、QRコードの下に黒（#000000）の背景を敷き、
不透明度を下げていきます。

すると、50％のところで、ようやく読み取れるようになりました。
掲載場所や周りの条件によっても変わってくるでしょうが、
なんとかこの近辺までは、コントラスト比を落とせそうです。

この基準さえ知っておけば、デザインを施すのは意外と簡単。
それでは実際に何か作ってみましょう。

まだ時期ではありませんが、今から会社が準備しておきたいのは
「暑中見舞い」でしょうか。

ということで、ちょいちょいっとフリー素材と文例を組み合わせて
簡単な暑中見舞いを作ってみました。

実際に読み取ることもできますが、
これ以上スイカを大きくしても、これ以上背景を濃くしても
読み取りはかなり難しくなってくる、限界の図です。
ちなみに、「Q太郎」で読み取ると、一部読み取り不正も出ます、。

何と言いますか、実際に作ってみるとなかなかにエグイものですし、
実際にもらう立場としては、嬉しいかと言われれば微妙かもしれませんが、
あくまでサンプルですのでｗ

ということで、デザインQRコードを作成する基準
というテーマで書いてみましたが、何かの参考にしていただければ幸いです。