デザインQRコード

デザインQRコードを作ってみたい!これだけ読めばOK、作成に必要な基本知識をまとめました。(前編)

| 0件のコメント

Pocket
LINEで送る

 

 

みなさん、こんにちは!ソシャマノートの運営を担当してます川崎です。以前このブログで紹介した「クリエイター必見!!右脳が刺激されるクリエイティブなQRコード15個まとめ」を見た方々から「こういうデザインQRコードってどうやって作るの?」という質問が多数寄せられました。(ありがとうございます!)そこで今回は前編(基礎知識)と後編(実践編)に分けて、デザインQRコードを作るにはどうしたらよいかをまとめてみたいと思います。前編は「デザインQRコードを作るのに必要な基本的な知識まとめ」です。実際に使う機会はなくても、引き出しの一つとして役立つ時が来るかもしれません。みなさんのご参考になれば幸いです。




《本記事の内容》
1:デザインQRコードを作る前に、確認しておくべきQRコードのルール
2:絶対やっちゃだめ!デザインQRのNG集!
3:実践導入、まずQRコードに練習でイラストを挿入してみる

QRコードとは?

QRコードは”Quick Response”に由来しており、素早い読み取りを目指して化はつをされたコードなのでこのような名前がついたそうです。(QRコードが正式名称で”Quick Responseコード”ではありません)
利用シーンは様々!Webの世界で働いていると、サイトアクセスなどの導線として活用されるイメージが強いですが、実は生産・物流・販売などの様々なシステムで活用されています!

1:デザインQRコードを作る前に、確認しておくべきQRコードのルール

デザインQRコードとは白黒のそっけないコードに、イラストをおいて装飾したり配色を工夫したQRコードです。しかしいくらデザイン性の高いQRコードを作り上げても、読み込むことが出来なければ何の役にもたちません。そんなことにならないよう、まずは基本のルールを見ていきましょう。

セルの大きさは情報量で変化する

まずQRコードに表示されているセル(黒いマス部分)の大きさは、そのコードが持つ情報量によって決まります。情報量が少なければ、全体の大きさに比べセルは大きくなり、情報量が増えればセルの大きさは小さくなるとうことです。
下に載せたQRコードは、左の方が情報が少なく、右の方が情報が多いということになります。
(左のQRコードには「http://whomor.com/illustnote/」右のQRコードには「http://whomor.com/illustnote/facebook/2012/07/_responsive/」という情報を持たせています。)
クリエイティブなQRコード作成のために必要な知識

デザインQRコードに必須の「誤り訂正レベル」設定!!

QRコードの複雑さを左右するのは情報量だけではありません。もう1つ関係してくるのは「誤り訂正レベル」というもの。
「誤り訂正レベル」とはQRコードに汚れや欠損があっても正確に読み取れるように、読み取り不能や読み取り間違いのモジュールを修正するために付けられる誤り訂正語のデータ語の割合のことです。
デザインQRコードを作る際はQRコードを生成する時に「誤り訂正レベル」の設定を行います。レベルは全部で4段階あります。

【誤り訂正レベル】

  1.  L (7%)
  2.  M (15%)
  3.  Q (25%)
  4.  H (30%)

レベルHの場合はQRコードの約30%が破損していても読み取る事が可能です。つまり訂正レベルが高まるほど、その分デザインに使える領域が増えるというわけです。多くのデザインQRコードはレベルQ・Hを使用して作っているようです。
下の画像は誤り訂正レベルL(7%)とレベルH(30%)を比較したもの。情報の内容はかわっていませんが、レベルHの方が複雑さが増しています。

デザインQRコードを作成したい場合は、通常であればもっとシンプルなQRコードができるところを、誤り訂正レベルによって「使っても良いスペース」をむりやり生みだしちゃってるんですね。
こういった訂正レベルを指定したQRコードを作成できるツールはいくつかあります。
今回私が使用したのはQRコード[2次元バーコード作成]です。

デザインをする前にまずは何を伝えるのかそぎ落とす

なんでもかんでもかっこいいQRコードを作ってくれ!という前に、まずQRコードに託す情報をどれだけのものにするかという事もよく検討する必要があることがわかりました。QRコードの複雑さはコードとしての可読性を悪くします。無理に可読性を良くするためにサイズそのものを大きくするという解決方法もありますが、そうなるとあらかじめQRコードの配置に用意していたスペースでは間に合わないという事態も起こります。これはデザイナーとして絶対避けたいですよね。デザインQRコードにする場合は特に誤り訂正レベルのことも意識して、コードで伝える情報をシンプルにまとめる注意が必要です。

2:絶対やっちゃだめ!デザインQRのNG集!

それではいよいよ作り方へ・・・!といきたいところですが、まずは”やってはいけない事”を押さえておきましょう!
一通り調べてみて、これらのNG集を確認しましたがどうやら端末によっては問題なく読みこめてしまうものもあるようです。しかし一般的にあまり良くないと言われているもので、このルールを知らないとちょっとお仕事を頼む気にはなれないかも・・・という事もありえます。
こんなルールがあるんだーというくらいで思ってもらえればと思います。

(その1)四隅に配置されている「回」のようなコードを消す


このマークはQRコードの4つの角の内、3か所に配置されています。この「回」はQRコードの向きを把握するためのものなので、欠損してしまうと読み取りが困難になります。

(その2)マージン(余白)をなくす

QRコードを見ていると必ず周りに余白がありますよね!QRコードはそのQRの4セル分のマージン(余白)がないと読み込むことが出来ないそうです。スペースがないからといって、余白をなくしてしまうようなことはしてはいけません。

左のQRコードにはきちんと4セル分の余白が確保されています。セルの大きさは、QRコードの持つ情報量によってその大小がきまるので、セルがより小さい情報量が多いQRコードの方が余白がせまくなるということになりますね。このように確保しなくてはいけない余白はQRコードのセル(1マス)の大きさに因りますのでご注意ください!

(その3)コード本体よりも背景色の色が濃い


これはどこまでがセーフでどこまでがアウトなのか、具体的な事は検証を重ねなければわかりませんが、コントラストが低い上に背景色が濃い場合だと読み取りが困難になる可能性があるようです。

3:実践導入、まずQRコードに練習でイラストを挿入してみる

最低限上の3つさえ守れば、QRコードの機能を保証することができます。実際に1枚簡単なものをつくってみましょう。

STEP1:デザインに使える領域を算出

まず、QRコードの誤り訂正レベルHの占める30%という領域がどれくらいのサイズに相当するのか調べてみます。(私は算数が弱いので間違いがあったらすみません。)

1:QRコードのサイズは333×333px
2:333×0.3=99.9px 小数点は四捨五入して、この場合はデザインに充てられる面積は計算上およそ100px×100px=10000pxということになります。QRコードに100px四方の塗りをおいてみました。このスペースでいろいろできるわけですね。
デザインQRコード作り方
余談ですが、試してみたところ実際には120px四方までは図形を置いても読み込むことができました。ただ規定されている30%を超えることは機能を保証することができないといえるので、ここは素直に計算に従っておきます。

STEP2:ロゴ・イラストの挿入

上で算出した領域(赤い部分)より多く使わないよう、ロゴやイラストをを挿入します。
デザインQRコード 作り方

あとがき

デザイン性の高いQRコードはとても目をひきますが、上述したようなイラストを挿入するような手法はずっと以前からあります。それでも使われない事が多いのは「デザインする必要性がなかった」ともいえます。QRコードはコンテンツに導くための重要なツールです。読み取れなければ意味あがりません。また読み取ることに苦痛を感じさせてもいけません。
機能が大切であることを踏まえたうえで、次回は実践編としてどんなデザインができるかを考えたいと思います。

《本記事の内容》
1:デザインQRコードを作る前に、確認しておくべきQRコードのルール
2:絶対やっちゃだめ!デザインQRのNG集!
3:実践導入、まずQRコードに練習でイラストを挿入してみる

Comments

comments

作成者: このみ

㈱マイネット デザイン業務の傍らソシャマノートブログとそのFacebookページを運営。楽しくワクワクするような事を追いかけたい!

コメントを残す

必須欄は * がついています



*

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

3DCG、Spine制作ならフーモア!

プロの漫画制作ならフーモア!