2014.08.18
WEB

簡単作成！オリジナルのイラストなどのデザインQRコードを作ってみた。

こんにちは、ビビです。
今回はデザイン性の高いQRコードの作り方をご紹介します。

※記事内の全てのQRコードは弊社のブログURLで作成してます。

1 QRコードとは？
2 デザインQRコード
3 QRコードの注意点
4 実際に作ってみよう。
5 まとめ
6 おまけ

QRコードとは？

QRコードは、元々は自動車の部品工場や配送センターでの使用を想定して作られました。
※デンソーウェーブ社が1994年に発表した二次元バーコードの規格。

【QR】は「Quick Response」に由来し、高速読み取りを目的として開発されたコードです。
現在ではスマートフォンの普及により、WEBアクセスの導線に利用されることが増え、様々な情報システムで世界的に利用されています。
セルと呼ばれる黒いドットの集合体で構成されています。

デザインQRコード

皆さんはデザイン性のあるQRコードって見たことありますか？
一般的なモノクロなコードではなく、カラフルで画像や文字が入っていて、一見こんなん読み込めないだろ！ってツッコみを入れたくなるQRコードのことです。
QRコード例
例えばミスドのQRコードにはポンデライオンが描かれてたりします。
可愛いので、ドーナツを買う際はぜひチェックしてみてください！

ってことで、そんな可愛いQRを自分でも作れたら楽しいですよね。
実は、QRコード専門の制作会社に注文とかしなくても簡単に作れちゃうんです！
しかも無料で！

QRコードの注意点

まず作成前にQRコードを扱う上での注意点を押さえておきましょう。

情報量によってセルの大きさが変化する

QRコードの大きさは、コードが保有する情報量によって変化します。
情報量が増えれば増えるほど、セルが細かく全体サイズが大きくなっていきます。
QRコードの大きさの比較

セルと背景のカラーバランス

例えば、QRコードの白黒を反転させた場合、読み取りが不可能になります。
このように同じ形状を保っていても、色によって読み取れない場合があります。
QRコードを読み取れない配色例
経験上、以下の点を押さえておけば大丈夫かと。

セルと背景は明度と彩度がはっきり分かれるものを使用
セルは背景よりも薄くならないカラーを選択

隅に配置された四角い切り出しシンボル画像

これは読み取り機がQRの向き（縦横）を把握するためのものなので、欠損すると読み取りに支障が出ます。
※セルの外の余白部分も読み取りに必要な部分なので削除出来ません。
QR隅のシンボル

誤り訂正レベル

QRコードに汚れや欠け等があっても正確に読み取れるように設けられたマージン要素。
「誤り」がどのくらいの大きさまで読み取れるかの割合レベルです。種類は以下の4つがあります。

レベルL – コードの約7%が欠損しても復元が可能
レベルM – コードの約15%が欠損しても復元が可能
レベルQ – コードの約25%が欠損しても復元が可能
レベルH – コードの約30%が欠損しても復元が可能

ここがデザインQRコード作成には一番重要になる要素です。
誤り訂正率を上げて、欠損しても問題ない部分を広げ、そこに画像を埋め込むといった作業になります。

実際に作ってみよう。

QRコードを用意。

今回は「QRコード[二次元バーコード]作成【無料】」http://www.cman.jp/QRcode/で作成しました。
QRコード作成イメージ
URLを入力し、大きめの画像を入れたいので誤り訂正率はレベルHの30％に設定して作成します。

画像を入れて読み取り可能サイズの限界を把握する

上記サイトで作成したQRコードの誤り訂正率30%がどのくらいいけるものなのか実験してみました。
※隅に配置された四角い切り出しシンボル画像は触らない
※1辺198px（余白部分は除く）のコードに対しての計算です。
※複数機種で試験（弊社保有のスマホ達で検証）

全体面積の30%のサイズ【1辺が約108pxの正方形】
⇒結果：読み取り不可（単に面積の30%が可能になるわけではないらしい）
1辺を30%にした面積：【1辺が約59pxの正方形】
⇒結果：読み取り可能（まだまだ余裕がありそうな読み込み速度でした。）
【1辺が89pxの正方形】
⇒結果：読み取り可能（少し間は空きましたが読み取れます。）
【1辺が90pxの正方形】
⇒結果：読み取り不可（全ての機種で不可）

結果から、1辺が89pxを1px超えると読み取りが完全に出来なくなりました。
全体面積の20%くらいの領域が限界だということですかね。試しに領域自体をQRの真ん中から少しズラしたver.で読ませたら90pxでもギリ読み込める機種もありました。
うーん・・・もう少し検証が必要ですね。
とにかく今回の実験から安定した読み取りという面から考えると、60～80pxくらいのゆとりを持たせたサイズで使用するのが安全だと思います。