一歩先行く、デザインQRコード。
さて。
はじめましてこんにちは。
ゆめみの開発者によるブログ「ゆめ技」ですが、ゆめみにはもちろん開発者じゃないメンバーもいるんです。
そんな「じゃない」側のトップバッターとして、ケータイサイト外観構築からリニューアルのお手伝い、はたまたドット画像やケータイFlashコンテンツなどなどを幅広くを担当するゆめみ稀少職種、デザイナーのShoe'sが今回はお届けしてまいります。
挨拶もほどほどにして、ケータイから離れ気味の路線を少し戻し、
「ふーん」と言っていただけるくらいの、QRコードについて小ネタです。
バーコード読取機能はすでに現在利用されているほぼ全ての端末に搭載され、QRコードを利用するユーザも67％（ケータイ白書2009）。雑誌や商品パッケージにはもちろん、最近ではテレビのデータ放送でも見掛けるように、QRコードについての説明はもう不要ですよね。
ただし、QRコードの特性や作り方については、よく知らない人も多いのではないでしょうか。
と、言っても詳しく説明するつもりはありませんが、元々は工業用（部品とかダンボール）の管理用バーコードとして開発されたものなので、擦れたり欠けたりしても正確に読み取れるように「誤り訂正レベル」という補完機能がQRコードにはあります。この「誤り訂正レベル」を逆に利用することで、ロゴマークや文字などを入れたQRコードを作ることができるのです。
前置きが長くなりました。
今回は、画像や文字ではなく「コード自体をデザイン」してひと味違ったコードの作り方を紹介してみようと思います。
可能であれば、先述した「誤り訂正レベル」を設定できるものでQRコードを作成します。
QRコード作成ツールは、ブラウザ上で作成できるものや、高機能なアプリケーションなどいろいろありますので探してみてください。
続いて「つぶつぶ化」への下準備です。
ドット単位で塗りつぶして「つぶつぶ」にしていきたいので、それぞれのセル（■や□）を区分けします。
上の説明ではわかりやすく赤色で示しましたが、このようにコードと同じ色で馴染ませます。
角3カ所の大きい四角は、位置検出用コードなので、極力手を加えないほうが良いです。
「つぶつぶ化」スタートです。
それぞれのセルの四隅をドットで塗りつぶすと「つぶつぶ」っぽく見えるので、
左図の様にセル全体にドット処理を施します。
これもわかりやすいように赤色で示しています。
全体を見てみると…。
これだけで、いままでのQRコードとは全然違う印象になりました。
あとは、ロゴマークを入れたり、文字を追加してみたり、つぶつぶを利用してモザイク調にしてみたりとご自由に。
ただし、読み取れなければ無用の長物ですので、ちゃんと読み取れるコードかどうかを必ずチェックしましょう。
■今回のサンプルファイルをダウンロード（PSD形式/54k）
それではまた今度…。
はじめましてこんにちは。
ゆめみの開発者によるブログ「ゆめ技」ですが、ゆめみにはもちろん開発者じゃないメンバーもいるんです。
そんな「じゃない」側のトップバッターとして、ケータイサイト外観構築からリニューアルのお手伝い、はたまたドット画像やケータイFlashコンテンツなどなどを幅広くを担当するゆめみ稀少職種、デザイナーのShoe'sが今回はお届けしてまいります。
挨拶もほどほどにして、ケータイから離れ気味の路線を少し戻し、
「ふーん」と言っていただけるくらいの、QRコードについて小ネタです。
バーコード読取機能はすでに現在利用されているほぼ全ての端末に搭載され、QRコードを利用するユーザも67％（ケータイ白書2009）。雑誌や商品パッケージにはもちろん、最近ではテレビのデータ放送でも見掛けるように、QRコードについての説明はもう不要ですよね。
ただし、QRコードの特性や作り方については、よく知らない人も多いのではないでしょうか。
と、言っても詳しく説明するつもりはありませんが、元々は工業用（部品とかダンボール）の管理用バーコードとして開発されたものなので、擦れたり欠けたりしても正確に読み取れるように「誤り訂正レベル」という補完機能がQRコードにはあります。この「誤り訂正レベル」を逆に利用することで、ロゴマークや文字などを入れたQRコードを作ることができるのです。
前置きが長くなりました。
今回は、画像や文字ではなく「コード自体をデザイン」してひと味違ったコードの作り方を紹介してみようと思います。
「つぶつぶQRコード」の作り方
１ QRコードを用意する
可能であれば、先述した「誤り訂正レベル」を設定できるものでQRコードを作成します。
QRコード作成ツールは、ブラウザ上で作成できるものや、高機能なアプリケーションなどいろいろありますので探してみてください。
２ セルを区切る
続いて「つぶつぶ化」への下準備です。
ドット単位で塗りつぶして「つぶつぶ」にしていきたいので、それぞれのセル（■や□）を区分けします。
上の説明ではわかりやすく赤色で示しましたが、このようにコードと同じ色で馴染ませます。
角3カ所の大きい四角は、位置検出用コードなので、極力手を加えないほうが良いです。
３ ドット処理で「つぶつぶ化」
「つぶつぶ化」スタートです。
それぞれのセルの四隅をドットで塗りつぶすと「つぶつぶ」っぽく見えるので、
左図の様にセル全体にドット処理を施します。
これもわかりやすいように赤色で示しています。
全体を見てみると…。
これだけで、いままでのQRコードとは全然違う印象になりました。
４ これだけで完成！
あとは、ロゴマークを入れたり、文字を追加してみたり、つぶつぶを利用してモザイク調にしてみたりとご自由に。
ただし、読み取れなければ無用の長物ですので、ちゃんと読み取れるコードかどうかを必ずチェックしましょう。
■今回のサンプルファイルをダウンロード（PSD形式/54k）
それではまた今度…。
日時: 2009年04月02日 10:00
トラックバック
トラックバックURL: http://recruit.yumemi.co.jp/cms/mt-tb.cgi/212コメント (2)
＞ ケンちゃん さん
コメントありがとうございます！
ゴメンナサイ！
本文にも書きましたが、通常は想定する範囲の端末でちゃんと読み取れるコードかどうかを必ずチェックして作成します（当然ですね…）。
ただし、ご指摘のとおり、確かに読み取りづらいです。
今回のサンプルは見た目を派手にしたあまり、読み取りができる端末は比較的絞られるかな〜と思います＾＾
ご自身で制作される場合は、サンプルの様なカラーやロゴ画像等を省いた状況から実機で確認しつつ制作されると、良いかもしれません。
投稿者:
Shoe's |
日時:2009年05月14日 19:45
このQR私用の携帯だと読み取りができないですよ・・・