QRコードが誕生したきっかけ

ロゴ入りのQRコードを作り始める前に、せっかくなので日頃お世話になっているQRコードのことを、もう少し詳しく調べてみましょう。

QRコードは、1994年に自動車部品メーカーであるデンソーの開発部門（現：デンソーウェーブ）によって発明された２次元コードで、名前の「QR」は「 Quick Response（素早い対応）」に由来しています。

なぜ自動車部品メーカーでQRコード？と思われた方もいらっしゃるかと思いますが、QRコードの当初の開発目的は、自動車部品工場や配送センターでの部品や商品管理のためだったそうです。当時は部品や商品管理のために、複数のバーコードを並べて読み込む必要があり、現場の方はとても苦労されていたそうです。「効率よく仕事を進めるために、バーコードより多くの情報を盛り込め、速く読み込めるコードを作ってほしい」そんな現場の声から生まれたのがQRコードです。

しかもQRコードの形のヒントは、お昼休みに遊びでやっていた囲碁だったそうです。現場の声を吸い上げ改善しようとする企業の姿勢も、身近なものからヒントを得て開発に活かす開発者の想像力の豊かさも、素晴らしいですよね。

なおQRコードの開発ストーリーが、デンソーウェーブの公式サイトに詳しく掲載されています。興味のある方は、ぜひぜひ読んでみてください。

【参照】'デンソーウェーブ'.https://www.denso-wave.com/ja/technology/vol1.html

ロゴ入りQRコードの作り方

それでは、ロゴ入りのQRコードをIllustratorで作成していきましょう。

1.Illustratorに「QR Code Maker」をインストールしましょう

まずはベースとなるQRコード作成するために、Illustratorの無料エクステンション「QR Code Maker」をインストールしましょう。インストールの手順は下記の通りです。

手順1	下記のインストール先URLを開きます。 インストール先：QR Code Maker
手順2	右上の「Sign In」からAdobeアカウントにログインします。
手順3	青色の「Freee」ボタンをクリックしてエクステンションをインストールします。
手順4	インストールが完了。画面が切り替わったことを確認します。
手順5	Illustratorを起動します。 既に起動されている方は、作業中のデータを保存して、再起動をしましょう。
手順6	Illustratorを開いたら、「ツールバー▶ウィンドウ▶エクステンション 」と進みます。エクステンションの中に「QR Code Maker」があれば、インストールは完了しています。

手順1	下記のインストール先URLを開きます。 インストール先：QR Code Maker
手順2	右上の「Sign In」からAdobeアカウントにログインします。
手順3	青色の「Freee」ボタンをクリックしてエクステンションをインストールします。
手順4	インストールが完了。画面が切り替わったことを確認します。
手順5	Illustratorを起動します。 既に起動されている方は、作業中のデータを保存して、再起動をしましょう。
手順6	Illustratorを開いたら、「ツールバー▶ウィンドウ▶エクステンション 」と進みます。エクステンションの中に「QR Code Maker」があれば、インストールは完了しています。

2.「QR Code Maker」を使ってQRコードを作ってみましょう

インストールが完了したら、ベースとなるQRコードを作成していきましょう。

手順1	目的にあわせた設定で、新規アートボードを作成しましょう。 この時にアートボードを2つ作り、1つを作業用、1つを保存用にしておくと、作業の途中でつまづいてしまった場合にでも、元のデータを確認できるので便利です。
手順2	「ツールバー▶ウィンドウ▶エクステンション ▶ QR Code Maker」の手順で、「QR Code Maker」を開きましょう。 そして、「Type or Paste here.」と書かれた部分に、QRコードにしたい情報を書き込みます。今回は、例として弊社サイトのURLを入れています。 次に「ECLevel」を設定します。これはどこまでQRコードが破損しても復元を可能にするかの設定なので、とても重要です。各レベルの欠損率は下記のとおりになります。用途に応じて選択をして下さい。 Lレベル：コードの約7%が欠損しても復元が可能 Mレベル：コードの約15%が欠損しても復元が可能 Qレベル：コードの約25%が欠損しても復元が可能 Hレベル：コードの約30%が欠損しても復元が可能 今回はデザイン性の高いQRコードを作成したいので、復元率の高いHレベルを選択しています。 ここまで設定できたら、「Create」ボタンを押しましょう。ボタンが隠れている方は、小窓内でスクロールすると左下にボタンがでてきます。
手順3	別タブでQRコードが出てきます。 ここで一度、スマートフォン等で実際にQRコードが開けるかテストしておきましょう。
手順4	問題がなければ、手順1で作成していた2つのアートボードに、コピペして整列しましょう。 この時に保存用のデータはレイヤーを分け、ロックをかけておきましょう。

手順1	目的にあわせた設定で、新規アートボードを作成しましょう。 この時にアートボードを2つ作り、1つを作業用、1つを保存用にしておくと、作業の途中でつまづいてしまった場合にでも、元のデータを確認できるので便利です。
手順2	「ツールバー▶ウィンドウ▶エクステンション ▶ QR Code Maker」の手順で、「QR Code Maker」を開きましょう。 そして、「Type or Paste here.」と書かれた部分に、QRコードにしたい情報を書き込みます。今回は、例として弊社サイトのURLを入れています。 次に「ECLevel」を設定します。これはどこまでQRコードが破損しても復元を可能にするかの設定なので、とても重要です。各レベルの欠損率は下記のとおりになります。用途に応じて選択をして下さい。 Lレベル：コードの約7%が欠損しても復元が可能 Mレベル：コードの約15%が欠損しても復元が可能 Qレベル：コードの約25%が欠損しても復元が可能 Hレベル：コードの約30%が欠損しても復元が可能 今回はデザイン性の高いQRコードを作成したいので、復元率の高いHレベルを選択しています。 ここまで設定できたら、「Create」ボタンを押しましょう。ボタンが隠れている方は、小窓内でスクロールすると左下にボタンがでてきます。
手順3	別タブでQRコードが出てきます。 ここで一度、スマートフォン等で実際にQRコードが開けるかテストしておきましょう。
手順4	問題がなければ、手順1で作成していた2つのアートボードに、コピペして整列しましょう。 この時に保存用のデータはレイヤーを分け、ロックをかけておきましょう。

3.QRコードにロゴを入れてみましょう

ベースのQRコードが出来上がったので、いよいよQRコードにロゴを入れてみましょう。例として、今回わたしは弊社のロゴを埋め込んだQRコードを作成してみたいと思います。

手順1	まずは前項で作ったQRコードを、後から編集しやすいような形に分けていきましょう。QRコードの構成をみてみると、白色の背景に、コードの中身として黒い正方形のパスが、集合体となって散りばめられていることがわかります。 まずはこれを、背景とコードの中身にそれぞれレイヤー分けします。そして背景のレイヤーはロックを、コードの中身は編集しやすいようにまとめて複合パスにしておきましょう。 今回わたしは、位置検出用のファインダパターン （QRコードの3コーナーに配置されてい目のような部分）と、その他のパスをそれぞれ複合パスにしてレイヤー分けをしました。 ※レイヤー名は構成がわかりやすいようにしています。コードの中身の分け方は、一例です。ご自身の編集しやすいよう分けてみて下さい。
手順2	次に、色の調整を行います。 背景レイヤーがロックされていることを確認し、複合パスにしたコードの中身をすべて選択。ご自身の好きな色に変更して下さい。 わたしは、弊社のロゴカラーにあわせて色を変更しました。
手順3	色の変更が完了したら、ロゴを配置する背景を作成します。 今回わたしは「コードの約30%が欠損しても復元が可能なHレベル」でQRコードを作成したので、QRコードに対して30%以内におさまるサイズで背景を作成しています。 ※ロゴの配置以外にもデザイン編集を行う場合は、そのあたりも加味してサイズを決めましょう。
手順4	手順3で作成した背景の上に、ロゴを載せたら完成です。 最後に問題なくQRコードが読み込めるか確認を忘れずに！

手順1	まずは前項で作ったQRコードを、後から編集しやすいような形に分けていきましょう。QRコードの構成をみてみると、白色の背景に、コードの中身として黒い正方形のパスが、集合体となって散りばめられていることがわかります。 まずはこれを、背景とコードの中身にそれぞれレイヤー分けします。そして背景のレイヤーはロックを、コードの中身は編集しやすいようにまとめて複合パスにしておきましょう。 今回わたしは、位置検出用のファインダパターン （QRコードの3コーナーに配置されてい目のような部分）と、その他のパスをそれぞれ複合パスにしてレイヤー分けをしました。 ※レイヤー名は構成がわかりやすいようにしています。コードの中身の分け方は、一例です。ご自身の編集しやすいよう分けてみて下さい。
手順2	次に、色の調整を行います。 背景レイヤーがロックされていることを確認し、複合パスにしたコードの中身をすべて選択。ご自身の好きな色に変更して下さい。 わたしは、弊社のロゴカラーにあわせて色を変更しました。
手順3	色の変更が完了したら、ロゴを配置する背景を作成します。 今回わたしは「コードの約30%が欠損しても復元が可能なHレベル」でQRコードを作成したので、QRコードに対して30%以内におさまるサイズで背景を作成しています。 ※ロゴの配置以外にもデザイン編集を行う場合は、そのあたりも加味してサイズを決めましょう。
手順4	手順3で作成した背景の上に、ロゴを載せたら完成です。 最後に問題なくQRコードが読み込めるか確認を忘れずに！

まとめ

複合パスにしたパーツを、丸などの違う形に変形してみるのも面白いですし、色をグラデーションにするのも素敵です。

自分の工夫次第で、様々なオリジナルのQRコードを作ることが可能ですので、ぜひお試しいただけると嬉しいです。

それでは、今回はこのあたりで。