一歩先行く、デザインQRコード。

さて。
はじめましてこんにちは。

ゆめみの開発者によるブログ「ゆめ技」ですが、ゆめみにはもちろん開発者じゃないメンバーもいるんです。
そんな「じゃない」側のトップバッターとして、ケータイサイト外観構築からリニューアルのお手伝い、はたまたドット画像やケータイFlashコンテンツなどなどを幅広くを担当するゆめみ稀少職種、デザイナーのShoe’sが今回はお届けしてまいります。

挨拶もほどほどにして、ケータイから離れ気味の路線を少し戻し、
「ふーん」と言っていただけるくらいの、QRコードについて小ネタです。


バーコード読取機能はすでに現在利用されているほぼ全ての端末に搭載され、QRコードを利用するユーザも67%(ケータイ白書2009)。雑誌や商品パッケージにはもちろん、最近ではテレビのデータ放送でも見掛けるように、QRコードについての説明はもう不要ですよね。

ただし、QRコードの特性や作り方については、よく知らない人も多いのではないでしょうか。

と、言っても詳しく説明するつもりはありませんが、元々は工業用(部品とかダンボール)の管理用バーコードとして開発されたものなので、擦れたり欠けたりしても正確に読み取れるように「誤り訂正レベル」という補完機能がQRコードにはあります。この「誤り訂正レベル」を逆に利用することで、ロゴマークや文字などを入れたQRコードを作ることができるのです。

前置きが長くなりました。
今回は、画像や文字ではなく「コード自体をデザイン」してひと味違ったコードの作り方を紹介してみようと思います。

「つぶつぶQRコード」の作り方

1 QRコードを用意する

デザインQRコード

可能であれば、先述した「誤り訂正レベル」を設定できるものでQRコードを作成します。
QRコード作成ツールは、ブラウザ上で作成できるものや、高機能なアプリケーションなどいろいろありますので探してみてください。

2 セルを区切る

デザインQRコード

続いて「つぶつぶ化」への下準備です。
ドット単位で塗りつぶして「つぶつぶ」にしていきたいので、それぞれのセル(■や□)を区分けします。

デザインQRコード

上の説明ではわかりやすく赤色で示しましたが、このようにコードと同じ色で馴染ませます。
角3カ所の大きい四角は、位置検出用コードなので、極力手を加えないほうが良いです。

3 ドット処理で「つぶつぶ化」

デザインQRコード

「つぶつぶ化」スタートです。
それぞれのセルの四隅をドットで塗りつぶすと「つぶつぶ」っぽく見えるので、
左図の様にセル全体にドット処理を施します。
これもわかりやすいように赤色で示しています。

デザインQRコード

全体を見てみると…。
これだけで、いままでのQRコードとは全然違う印象になりました。

4 これだけで完成!

デザインQRコード

あとは、ロゴマークを入れたり、文字を追加してみたり、つぶつぶを利用してモザイク調にしてみたりとご自由に。
ただし、読み取れなければ無用の長物ですので、ちゃんと読み取れるコードかどうかを必ずチェックしましょう。

今回のサンプルファイルをダウンロード(PSD形式/54k)

それではまた今度…。



Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 16271409 bytes) in /home/yumeco/www/prod/wp-includes/wp-db.php on line 1171