ネコタ 03
QRコードをどうにかしたい

ここ数年、もの凄い勢いで普及しつつある二次元バーコード。どこがバーなんだよってツッコミすら見飽きたくらい、普通に見ることができます。最近ではQRコードという名前の方が、二次元バーコートよりも見かけることが多くなってきました。
mame豆知識:「二次元バーコード」は水平垂直両方向に情報を持つバーコードの総称で、「QRコード」はその中の1方式です。
このQRコード、携帯電話にメールアドレスやURLを入力する手間が省けてとても便利なのですが、その一方で美観を損ねるという欠点もあります(利用者の心情を考慮して小さい文字にしてみました。逆効果だったかもしれません)。今回は、ささやかな抵抗ではありますが、このバーコードを少しでも綺麗に飾ることに挑戦しています。

(元町二十四軒)

イメージ
こんなサイトはない

Before After
携帯 Before After
最初は嫌いでした
最初に言ってしまいますが、このQRコードのことをあまり好きではありませんでした。理由は簡単です、つい最近までQRコードを読み取るための機器を持っていなかったのです。つまり「俺には使えない物が目立つ場所にあって、しかもなんだか見た目も良くない」ことが不満だったわけです。この「QRコード憎し!」というネガティブな思いから、当時は実に馬鹿馬鹿しい物も作ってしまったのですが、それについては後ほど。



今もそんなに…
ところが、最近2年振りに携帯電話を機種変更しまして、当然最近の機種ですから当たり前のようにQRコード読み取り機能が付いてる訳です。それ以来、Webや雑誌広告からQRコードを読み込ませては喜んでいました。とは言え、自分でも積極的に取り入れようという気にはなりません。便利さは解るんですけど、やはり見た目がどうも好きになれません。画面についたゴミみたいです。でも、便利だから使ってみたい。これはどうにかしないと!(無理に自分を鼓舞してる事には気付かないふりをしてください。)


いつものQRコード

作ってみよう
まずはベースとなるQRコードの作成です。といっても、「QRのススメ」というありがたいサイトが提供しているサービスを利用すれば、必要な情報をテキストで入力するだけで、QRコードができてしまいます。凄い時代になりました。私が子供の頃はこんなの無かったですよ(ここでツッこむ)。
前置きが長くなりました。この白黒の画像をQRコードとして使用可能なまま、見た目を良くしてみようと思います。


虹色、サザン風に言えば艶色
作り方

作例1:虹色
まずは、黒い部分を虹のようにカラフルに塗りつぶしてみました。それだけじゃ少し物足りないので、隅の "回" みたいなマークを赤くしてあります。こんなので読めるのか心配でしたが、なんなく読み取ることができました(携帯が)。作例では、読み込みエラーを減らすために、若干暗くしてありますがもう少し明るくても平気です(携帯が)。
どうでしょう、使ってみようと言う気になりませんか?いやいや、解ってます。「色がきつくてサイトに乗せにくい。白黒の方が良かった」こうおっしゃりたいのですね。それでは次のはどうでしょう?


ピース
作り方

作例2:ピース
だったらこれならどうでしょう?ページの色に合わせることができるし、絵も入ってますよ。これでもちゃんと読み込めるんです。作り方もそれほど難しくありません。シルエットとQRコードを合成して、「シルエットの前景 と QRの黒 が重なった所」 が 「シルエットの背景 と QRの白 が重なった所」より暗くなるようにするのがポイントです(解らない場合は気合いで乗り切ってください)。

ほら、使ってみたくなったんじゃないですか?いやいや、解ってます。「さっきのよりはましかもしれないけどピースは無いんじゃないか」こうおっしゃりたいのですね。それでは次のはどうでしょう?


何と言われようとiPod風
作り方

作例3:iPod風
お洒落と言えばiPodだそうです。iPod 本体も良いのですが、いろんなポーズのシルエットを使った広告も素敵です。そこで、作例3ではiPodの広告をまねて、歩いてる人のシルエットを入れて見ました。

どうです?使ってみようという気になったでしょう(なったことにしてください)。他にも下の例のように、イニシャルや記号を入れたりするのも良いでしょう。

いつか携帯向けのページを持つようになったら、絵入りのQRコードを試してみたいと思います。

doM
M の字をあしらってみました。
月
月またはバナナです。


最後におまけ。

下の絵は、昨年作った「偽QRコード出力スクリプト」が使われています。このスクリプトは「QRコード的なものをランダムに描く機能」のみを持ちます。Java Scriptを使ってるので、ブログなどでは使用できない場合もありますが、一般のページには貼り付けることができます。詳しくはこちらをどうぞ。

偽QRコード(→使い方)
ネコタバックナンバー