デザイン性のあるQRコードの作り方

 

 

 

今日はQRコードについて。

最近はもうかなり定着したために、目に触れる機会も多ければWEBで無料にて簡単に製作するサービスまである。しかし、デザイン性のあるQRコードはあまり見かけず、たまに見かけてこれどうやってるんだろう?と思ったことある人もいるはず。なので、その作り方を簡単に書いていこうと思う。

 

そもそもQRコードというものは、大枠は一緒だがサイズによって40種類ある。これは、入れることが可能な文字の量及び、誤り訂正能力というものによって変わってくる。

入れることが可能な文字の量は、増やせば増やすほどQRコードのサイズが大きく、かつピクセルが小さくなるのは、なんとなくイメージがつくと思う。

もう一つの誤り訂正能力が、デザイン性のあるQRコードを作りたい、という人にとっては大事なことになる。というのも、QRコードは、元々、プリントするコードであるが故に、汚れた時などのことを考えて、一部が可読できなくても情報が失われないように、誤り訂正能力というものが備わっている。これは、4段階あり、レベル別にL・M・Q・Hとなっている。それぞれ、約7・15・25・30%の範囲が読み取れなくなっていても、情報が失われることはない。
カラフルだったり中にマークが入ったりしているデザイン性のあるQRコードは、この誤り訂正能力を利用して、一部のコードをマークなどに変えることで実現しているのである。

 

ということで、デザイン性のあるQRコードを作る手順を示しておこうと思う。ただ、これができるのはIllustratorなどのベクター画像(点を結んだオブジェクトでできた画像)を触れるソフトを使える人に限られる。なので、もしこのページを見ていただいた方でオリジナルのQRコードを作ってほしい、という方はここのコメントでもツイッターででも連絡いただければ有償(3000円)にて作成します。

 

1、まずは無料のサイトにてQRコードを製作する

これはそのまま。私がおすすめなのは以下のサイト。

www.cman.jp

どうしてお勧めかというと、誤り訂正レベルを設定できるから。無料のQRコード作成サイトは多いものの、これを指定できるものは実は少なかったりする。
この使い方は読めば何となくわかると思うので頑張ろう。

ただ、QRコード中に何かロゴ等のデザインを入れたい場合は、基本的には誤り訂正率は30%にて製作しよう。

 

 2、PNGファイルのQRコードベクター画像にする

1で製作できるのはPNG形式のデータになるので、これをベクター画像を触れるソフト(イラストレーター等)で開く。そして、それをオートトレースしてオブジェクトにするなりして、ベクター画像にする

 

3、ベクター画像になったQRコードにデザインを加える

2でベクター画像にできたら、追加したいデザインを適当に配置する。

ただ、QRコードの左上・左下・右上にあるマークの上やQRコードの縁ぎりぎりに設置してしまうと認識しなくなるので、そこは避けよう。また、設置できるデザインは、誤り訂正率30%で製作したQRコードなら全体の面積の25%程度以内を目安にしよう。

あと、カラーは複数色などになっても問題はない(グラデーションでもできる)が、背景色と明度及び彩度ははっきりと対比のある色を選ばないと認識しにくくなる白黒反転も不可なので、元々黒の部分の方が色が濃くなるようにしましょう。

 

4、配置したデザインを整える

ここまで制作できたら、元あるQRコードと追加したデザイン等が被っているところがないかを確認する。被っているとうまく認識されなくなる。

確認を終えたら、実際になんらかのQRコードを読み取るアプリなどで実際に読み取ってみよう。一度きりではなく、10回程度試そう。運良く反応した、などがあるので、10回やって10回ともすぐに反応すればOK。もしも一度でも認識がやたら遅かったり反応しなかったりした場合は、デザインの部分が多すぎるか色の問題なので、3で書いた注意事項を踏まえて修正しよう。

 

 

これで、独自性のあるQRコードが製作できる。

ちなみに、以下はとある仕事で製作したもの。こんな感じのものを作ることができる。もっと変形させたものとかもできたりはする。(読み取りはできないように線を入れてあります)

f:id:ImaTaka:20180919150105j:plain

ということで、オリジナルなデザイン性のあるQRコードが欲しいかたは、ぜひ作ってみてくださいな。

もし面倒という方やできない、って方は、有償にて製作しますので以下のどちらかからご連絡をどうぞ

連絡先:ツイッターFaceBook

 

では、今日はここら辺で。