無料でQRコードの中に画像全体を入れることができる「NitroQR」

QRコードはスマートフォンのカメラで読み取るだけでサイトのURLにアクセスしたり、安全なログイン情報として使用したりできる便利なものですが、基本的には白黒のピクセル化された単純なもののため、美しいデザインの中で調和しないこともあります。「NitroQR」は無料でブラウザから使用できるQRコード作成サービスで、URLと画像を合わせてアップロードすることで、画像を含んだQRコードを作ることができます。

NitroQR - Free Embedded Image QR Generation | Branded QR Codes
https://nitroqr.com/

Beyond the Logo: How We're Weaving Full Images Inside QR Codes
https://blog.nitroqr.com/beyond-the-logo-how-were-weaving-full-images-inside-qr-codes

NitroQRにアクセスしたら、まずはQRコード化したいURLを入力。

「Image」を選択した上で「参照」をクリックします。

画像を選択して「開く」をクリック。

右側のプレビューに画像が追加されました。

「GENERATE_QR」をクリックすると、アップロードした画像とQRコードが一体になったコードが生成されました。

「Invert B＆W」のトグルスイッチをクリックすると、白黒が反転します。

「Retain Colors」のトグルスイッチをオンにして「GENERATE_QR」をクリックすると、QRコードがモノクロからカラーに変わります。

「DOWNLOAD_QR」をクリックしてQRコードを保存。

実際にスマートフォンでQRコードを読み取ってみたところ、問題なくURLにアクセスできました。

また、ロゴではなくキャラクターの画像でもQRコードを作成してみたところ、以下のような感じになりました。

作成したQRコードはNitroQRのサイトに共有されます。「Private」のトグルスイッチをオンにしておけば、共有しないように設定してQRコードを作成できます。

NitroQRを制作したアナント・バシン氏によると、QRコードのデータモジュールの構造そのものに画像を組み込むことで、単に画像がQRコードの背後にあるということではなく、QRコードの構造の不可欠な部分として画像が組み込まれたものになっているとのこと。QRコードをユニークなデザインにすることで、視覚的に広告やポートフォリオ全体のデザインを整えたり、マーケティングに合わせた画像を組み込むことで訴求力を上げたりといった効果が期待されています。

プログラマーのカイル・ジェン氏のブログによると、QRコードにデザインを追加する方法はいくつかあるそうです。最もよく目にするのは中央にロゴを配置するタイプで、これはQRコードに「一部欠けても読み取りができるエラー補正機能」があることを利用したものです。また、NitroQRのように、QRコードを画像と組み合わせて、画像そのものをQRコードのピクセルにしてしまう方式もあります。

なお、QRコードには4隅のうち3か所にある大きな正方形「ファインダーパターン」、残りの隅にあってゆがみを補正するために使用される「アライメントパターン」、白と黒のピクセルが交互に並ぶ帯状の「タイミングパターン」、QRコードが採用しているマスクパターンと誤り訂正率に関する情報が含まれている「フォーマット情報」などがあり、これらがどのような仕組みで動作しているのかは以下の記事にまとめてあります。

QRコードを人力で読み取る方法 - GIGAZINE

このようなQRコードの仕組みを使用することで、QRコードに画像を組み込む工夫のほか、一見するとQRコードには見えないものも作成することができます。