Illustrator

2022.09.21

解像度が低くボヤけて破損したQRコードをイラレでベクターデータとして復活させる方法

  • 解像度が低くボヤけて破損したQRコードをイラレでベクターデータとして復活させる方法

QRコードの解像度が低くてぼやけたり、欠けたりしていてデータが読み取れない、印刷物に使えないなんて経験一度はありませんか?
特に紙媒体を扱うデザイナーやオペレーターの方は経験あると思います。

そんな欠損してしまっているQRコードをベクターデータで綺麗にリデザインして書き出す方法を紹介します。

背景として、あるプロジェクトでQRコードを読み取らなければいけなくて、しかしいただいたQRコードがかなり解像度が低くて読めない、また印刷に適してない状態でした。
なかなか読み取れないと、せっかくQRコードの先に用意したコンテンツにアクセスされないことに繋がりますし、使えたとしても(QRは多少破損していても使用できます)デザイナーとして、荒い崩れたビジュアルを使いたくない気持ちもあります。
これらを解決するべく今回はAdobeの「illustrator」を使用して、QRコードを作成してみました。

 

そもそもQRコードはどういったデータなのか

「QRコード」は、Quick Responseの頭文字をとったもので、その名の通り「素早く読み取る、反応する」という意味となります。1994年にデンソーの開発部門が発明、開発したマトリックス型二次元コードで日本発の技術です。QRコードの利用は費用が不要で、仕様もオープンソースのため、さまざまなシーンで活用されています。

 

QRコードはドットの集合体

QRコードは「縦と横」に配置した点(ドット)から構成されています。バーコードよりQRコードの方が情報量を多く組み込むことができ、英数字だけでなく、URL・メールアドレス、画像やサウンドデータ等の情報を埋め込むことができます。
このドットパターンで構成されたドット自体を適した配置に整えてあげれば、綺麗なベクターデータとして書き出すことができますね。さっそく次ではやり方を紹介していきます。簡単に説明すると、ラスタライズした画像にIllustratorの「モザイクオブブジェクトを作成」機能でモザイク生成して整えていけば完成です。下作業としてPhotoshopで少し準備が必要ですが簡単にできますのでご安心ください。

 

Photoshopでの作業

今回はこの解像度の低い、破損したQRコードを使用します。ここから綺麗なベクターデータのQRにしていきます。

まず初めに、Photoshopで事前準備をして、Illustratorで綺麗なドットに整えていきます。

Photoshopで事前準備する

1.破損したQRコードを、ドットの外枠である余白ギリギリのところでトリミングし保存します。

2.グレーな箇所やゴミが入ってしまってる場合は【レベル補正】ツールなどのスポイトなどで白黒のみのデータに補正します。
※データによって消しゴムやペンツールなど使い分けていただいて結構です。

3.QRコードのドット一列(縦横どちらでもかまいません)が何個のドットで構成されているかを数えます。

このQRコードは一列が25個のドットで構成されていることがわかります。この作業はIllustratorで行なうことも可能です。やり易い方で数えてみてください。
※とてもアナログな作業ですがここがキーポイントでもあります。
以上でPhotoshopでの作業が終了となります。

 

Illustratorでドット画を整えます

1.ラスタライズする

先程作成したQRコードの画像をラスタライズします。メニューバーの【オブジェクト】から【ラスタライズ】を選択するだけです。
ラスタライズの設定は、カラーモードを「グレースケール」、解像度を「高解像度(300ppi)」、アンチエイリアスを「文字に最適(ヒント)」に設定します。

2.モザイクオブジェクトを作成する

ラスタライズができたら、再びメニューバーの【オブジェクト】から【モザイクオブジェクトを作成】を選択して適用します。
設定では、タイル数を先程数えた一列のドット数の25を入力します。オプションは「グレー」と「ラスタライズデータを削除」選択してOKとしてください。

これでぼやけて破損していた画像がベクターデータとして簡単に変換されます。

補足と修正

元となるデータによってはグレー部分がでてしまう可能性もあります。そう言った場合は共通選択で色を補正したり、削除する必要が出る場合もあるかもしれませんが、臨機応変に対応いただければと思います。

これでベクターデータのQRコードが完成となります。拡大縮小など自由自在のデータなのでWebや印刷物など幅広く活用することができますね。

 

まとめ

今回は破損した、または解像度が低くボケてしまったQRコードを、ベクターデータに変換しつつあらたに作成しなおすテクニックを紹介しました。ドットの数を数えること以外は簡単にできたのではないでしょうか。実はQRコードはある程度破損していても読み取ることができるのですが、読み取れない場合やビジュアルにこだわりたい、印刷やWeb上に綺麗に掲載したい場合はとても役立つので試してみてくださいね。

ではまた次回の記事でお会いできれば嬉しいです!! 新谷でした!