見た目も読み取りやすさも両立する、QRの色・ドット・目の組み合わせの選び方

QRコードをデコレーションするとき、本当に難しいのはツールの不足ではなく、選択肢の多さです。色は無限、ドットの形は6種類、目の形は3種類、さらにフレームやキャプションまであります。この記事では、個々の仕組みよりも「何から決めて、どんな組み合わせで仕上げるか」という順序に重点を置いています。ここで説明するのは、デザインQRに実際にあるオプションとプリセットだけなので、読みながらそのまま試せます。ロゴの大きさや誤り訂正といった基本は、前の記事「デザインしたQRコードはちゃんと読み取れる？」で扱っているため、ここでは必要な範囲にとどめます。

1. 色を選ぶ：暗いドット、明るい背景、単色とグラデーション

組み合わせを選ぶとき、最初に決めるのはドットの形ではなく色です。カメラが見るのは色合いそのものではなく、ドットと背景の明るさの差だからです。そのため、暗いドットに明るい背景が基本であり、この枠の中で色合いを選ぶのがいちばん安全です。濃い紺、濃い茶、深い緑、紫がかった赤紫はいずれも「暗い色」なので、ブランドカラーを活かしながらしっかり読み取れます。

デザインQRは、ドットの色と背景色の明暗のコントラスト比を計算し、4:1未満になると low-contrast の警告（コントラスト低）を表示します。グラデーションの場合は両端の色だけでなく中間の色も検査するため、片方の端が明るいだけで警告が出ます。目の色を別に指定した場合も、その色が検査の対象に入ります。

特に注意したい状況が2つあります。

• 反転：ドットが背景より明るいと inverted の警告（反転）が出ます。暗い背景に明るいドットにすると格好よく見えますが、一部のスキャナーアプリは読み取れません。どうしても暗い雰囲気にしたい場合は、背景は明るいままにして、ドットをとても濃い色にするほうが無難です。
• 透明な背景：背景を透明にすると transparent-background の警告が出ます。コントラストの検査は白い背景を基準に行われるため、実際に置く場所が暗いと、検査結果が当てになりません。透明なQRは、明るい単色の背景の上にだけ置いてください。写真や模様の上に重ねる用途には向きません。

続いて、単色とグラデーションのどちらにするかを決めます。

デザインQRの前景スタイルは、単色、線形グラデーション、放射状グラデーションの3種類です。グラデーションは2色を混ぜ合わせます。線形は角度を指定でき、放射状は中心から外側へ広がります。

• 単色：もっとも読み取りやすい形です。名刺、レシート、小さなステッカーなど、サイズが小さかったり印刷品質にばらつきがあったりする用途に向いています。
• 線形グラデーション：色が一方向に移り変わり、洗練された印象になります。ポイントは両方の色を暗くすることです。たとえば濃い紫から濃いティールへ。片方の端が明るいと、その部分のドットが背景に溶け込んでしまいます。
• 放射状グラデーション：中心と外側で色が変わります。位置検出パターンは四隅にあるので、外側の色が明るくなりすぎないようにしてください。

グラデーションは画面で映えますが、印刷ではややリスクがあります。プリンターが明るい側の色を想像より薄く出すことがあるためです。印刷物には、2色の差を広げるより、同系色の暗い2色を選ぶのがおすすめです。

2. ドットの形と読み取りやすさ

ドットの形は、四角、角丸、円、連結、ひし形、ハートの6種類です。形がシンプルなほど、カメラが一つひとつのドットの位置を正確に捉えやすくなります。ただし、「この形は安全で、この形は危険」と断言できる数値はありません。同じ形でも、内容が長くてドットが小さくなると読み取りにくくなります。以下は傾向であり、保証ではないと考えてください。

• 四角：標準の形で、もっとも安定しています。色と目の形を変えるだけでも、十分に個性を出せます。
• 角丸：角だけを少し丸めたもので、読み取りの印象はほぼ四角と変わりません。やわらかい雰囲気を、低いリスクで出せる、いちばん頼れる装飾的な選択です。
• 円：ドットの間に隙間ができ、見た目が軽くなります。その隙間のせいで、印刷のにじみや極端に小さいサイズの影響を受けやすいため、小さく印刷するのは避けてください。
• 連結：隣り合うドットがつながって流れるような模様になります。個性的ですが、ドットの境界がわかりにくくなるので、コントラストは十分に確保してください。
• ひし形：角のあるドットで、宝石のような高級感のある雰囲気に合います。ドットが小さくなると、角がぼやけやすくなります。
• ハート：もっとも装飾的です。ドットが一つひとつ小さいため、ポスターなどの大きな印刷物や、画面で大きく表示する場合に限って使いましょう。

四角いドットと四角い目の組み合わせ以外のスタイルを使うと、アプリは誤り訂正を最低でもQに引き上げます。この安全網があっても、装飾は一度に一つずつ加えてください。ハートのドット、丸い目、グラデーションを一度に切り替えると、どの変更で読み取れなくなったのかわからなくなります。

3. 目の形：外側と内側は別々に選ぶ

目とは、四隅にある3つの大きな四角のことです。カメラはこれを手がかりにQRの位置と向きを把握するため、ほかのどの部分よりも重要です。デザインQRでは、目を外側の枠と内側の芯に分け、それぞれ四角、角丸、円から選べます。目の色も単独で指定でき、前景色をそのまま使うオプションをオンにすることもできます。

• 外側が四角・内側が四角：標準です。初めて作るときや、印刷が心配なときに使ってください。
• 外側が角丸・内側が角丸：ソフトプリセットの構成です。やわらかさがありつつ、目の輪郭ははっきり残ります。
• 外側が角丸・内側が円：パステル、ココア、ラブのプリセットが使う組み合わせです。かわいい印象になりますが、外側の枠が四角に近いため、安定しています。
• 外側が円・内側が円：海プリセットのように、もっとも丸い目です。印象は大きく変わりますが、そのぶん「目は目として見分けられなければならない」という原則がもっとも試されます。

目だけをドットより濃い色にするのも良い方法です。ネオンプリセットは、ドットにはグラデーションを使いつつ、目は濃い藍色の単色に固定しているので、派手でも位置を探す基準点ははっきりしています。目のコントラストを高め、ドットは相対的に軽く飾るという考え方を覚えておいてください。

4. スタイルプリセット10種、それぞれの個性

スタイルプリセットは、色、ドット、目、フレーム、ときにはアイコンまで、ワンクリックで切り替えられる出発点です。10種類すべてが明るい背景に暗いドットという構成なので、選んだ時点でもう読み取りやすい状態から始められます。

• ミニマル：ほぼ黒に近い紺のドットに白い背景、四角いドットです。もっとも安全でどこにでも合います。出発点として最適です。
• ソフト：スレート系のドットに淡い背景、丸みのあるドットと目です。カフェや店舗の案内のような、落ち着いた場所に合います。
• パステル：赤紫のドットに淡いピンクの背景、円形のドットです。かわいいですが、ドットが軽いので、大きく印刷するときに向いています。
• ネオン：紫から青へのグラデーションに、連結したドットです。画面での表示やSNSの投稿によく合います。
• ココア：茶色のドットにクリーム色の背景で、チャットのアイコンと角丸カードのフレームが付きます。カフェやデザートの店の雰囲気です。
• 海：青緑から紺へ広がる放射状グラデーションに、円形のドットと目です。涼しげな印象が欲しいイベントに合います。
• 森：濃い緑の連結ドットに、Wi-Fiアイコンと「Wi-Fi」ラベルのフレームが付きます。名前のとおりWi-Fiの案内向けに作られた雰囲気なので、ほかの用途ならアイコンと文言を変えてください。
• 宝石：濃い紫から赤紫へのグラデーションに、ひし形のドットと「Scan me」ラベルです。華やかな招待状やショーケースに合います。
• ラブ：濃いバラ色のハート型ドットに、「Made with love」の吹き出しフレームです。記念日やギフトカードに使いやすい組み合わせです。
• スタジオ：ほぼ黒の四角いドット、丸い目、カメラのアイコンと「Scan me」のカードフレームです。ポートフォリオ、写真の仕事、クリエイターの名刺に合います。

アイコンやフレームが付いているプリセットは、そのまま使うよりも、キャプションとアイコンを自分の状況に合わせて変えることが肝心です。すでに自分のロゴを追加している場合は、プリセットを押してもロゴは消えません。

5. 形プリセットの組み合わせ、そしてフレームとキャプション

デザインQRには、スタイルとは別に、全体の形を変えるプリセットがあります。カフェメニュー（円）、ピンクハート、餃子、ウェディング（新郎・新婦）などです。この2種類は互いに独立して選べ、そのルールは仕様に明記されています。

• スタイルプリセットを押すと、色、ドット、目、フレームといったスタイルだけが変わります。選んでいる全体の形と輪郭線の設定はそのまま残ります。
• 形プリセットを押すと、形とその専用設定だけが変わり、現在のスタイルは維持されます。ドットと目の形、フレームもそのままです。
• 例外が一つあります。選択中のスタイルがミニマルのときだけ、形プリセットの配色が前景、背景、目の色に適用されます。そのため、ミニマルの状態でハートの形を選ぶと、形に合った色まで一緒に付いてきます。

そのため、順序は「形が先、スタイルは後」が楽です。形を選ぶと色が変わることがあるので、使いたいスタイルプリセットは形を選んだあとに押して確定させてください。逆に、スタイルを先に選んで形を変えた場合はスタイルが維持されるので、色を保てるという利点があります。どちらの場合も、2番目の選択が1番目の選択を上書きしない設計になっているので、気軽にいろいろな組み合わせを試してみてください。

形QRは、QR本体をシルエットの中に置き、その周囲を装飾ドットで埋める方式です。形の内側のスペースが小さすぎると、本体を形の外へ広げたことを知らせる shape-expanded の警告が出ます。位置を動かして本体が形の外に出た場合は、shape-placement-outside の警告が出ます。これらの警告が出たら、より中身の詰まった形を使うか、位置とサイズを調整してください。装飾ドットを60%の濃さにすると、本体との区別がつきやすくなります。

形とスタイルが決まったら、最後にフレームと下部のキャプションを選びます。

フレームは、なし、下部ラベル、吹き出し、角丸カードの4種類です。キャプションは自由に書け、フレームの色も別に選べます。初期のキャプションは「Scan me」です。

• 下部ラベル：QRの下に短い帯が付きます。もっとも簡潔で、どのスタイルにも合います。
• 吹き出し：しっぽの付いた吹き出しです。親しみやすい案内やギフトカードに向いています。
• 角丸カード：QR全体をカードのように包みます。ポスターや名刺のように単独で置かれるときにすっきり見えます。

キャプションは短いほど良いです。文字が長いと2行に分かれたり、小さくなったりします。「メニューを見る」「予約する」「写真を見る」のように、スキャンすると何が出るのかがわかる文言にする習慣は有効です。これは測定した数値ではなく、一般的な心得です。また、フレームの色をドットと同系色の暗い色に合わせると、全体に統一感が出ます。

6. 用途別のおすすめの組み合わせ

以下は、これまでの内容をもとにした提案であり、正解ではありません。それぞれの読み取り環境を見て、組み合わせをもう一段階シンプルにするかどうかを判断してください。

• カフェ・飲食店のメニュー：ココアまたはソフトのスタイル。角丸のドット、角丸の目、下部ラベルは「メニューを見る」。テーブルの上で近くから読み取るので、装飾を少し加えても大丈夫です。
• 結婚式の招待状・お礼のカード：ハートまたはウェディングの形プリセットに、ソフトかラブのスタイル。印刷サイズは十分に大きく取り、ドットは角丸程度にとどめます。
• 名刺：ミニマルまたはスタジオのスタイル。四角いドットで、濃い単色。小さく印刷されるので、装飾よりコントラストとサイズが優先です。
• ポスター・横断幕：ネオン、海、宝石のような華やかなスタイル。遠くから撮影するのでドットが大きくなるぶん、装飾の余裕が大きくなります。それでも目ははっきりさせておきましょう。
• Wi-Fiの案内：森のスタイル。アイコンとラベルが用途を伝えてくれます。パスワードが入るQRなので、公開の場所に貼るかどうかは慎重に判断してください。
• SNSの投稿・画面共有：ネオンまたはパステル。画面の中ではグラデーションがいちばん映えます。ただし、画面の明るさやモアレによって、見え方は機種ごとに異なります。
• ステッカー・製品パッケージ：ミニマルの単色。曲面やしわがある場合があるので、もっともシンプルな組み合わせが有利です。

7. 印刷と画面で気をつけるポイントの違い

同じデザインでも、紙に印刷する場合と画面に表示する場合とでは、起きる問題が違います。

• 印刷：モニターの色とプリンターの色は異なります。濃い色がより暗く出たり、淡い背景色が紙の色に埋もれたりすることがあります。できればSVGで保存して、拡大してもぼやけないようにし、実際の印刷サイズで1枚先に刷って読み取ってみてください。光沢紙は照明が反射して読み取りにくくなることがあります。
• 画面：明るさの低い画面や省電力モードでは、コントラストが下がります。淡い背景色が白に近ければ問題ありませんが、淡い色のドットは危険です。画面を別のスマートフォンで撮影するときに生じる縞模様のせいで、実際に読み取れない場合もあります。プレゼン資料に入れるときは、PNGを十分に大きく入れてください。
• 余白：フレームや背景の模様がQRのすぐ近くまで迫らないようにしてください。四角いQRの標準の余白は4モジュールで、この領域は空けておくのが安全です。

8. 1ページでまとめる手順

1. 用途と読み取り環境（距離、サイズ、画面か印刷か）を先に決めます。
2. 形プリセットが必要なら先に選び、そのあとでスタイルプリセットを押します。
3. スタイルプリセットのなかで、いちばん近いものを出発点にします。迷ったら、ミニマルから始めます。
4. 色を調整します。警告（コントラスト低、反転、透明な背景）が出ていないか確認します。
5. ドットの形と目の形は、一度に一つずつだけ変えます。
6. フレームと短いキャプションを入れます。
7. 保存したファイルで、実機のテストをします。

デコレーションは足していく作業ですが、読み取れるQRを作ることは、引いていく作業に近いものです。気に入ったデザインがあるなら、一つずつ元に戻しながら、いちばんシンプルでいちばんよく読み取れるところを探してください。デザインQRは登録なしでブラウザー内で動作し、入力した内容はサーバーに送信しません。

デザインQRを開く

注：「QRコード」はデンソーウェーブの登録商標です。