本当に読み取ってもらえるチラシのQRコードの作り方

近所のカフェが、新しいオンライン注文ページを告知するチラシを500枚刷った。仕上がりは悪くない。写真もよく、見出しも明快で、ブランドカラーもきちんと効いている。ただ、右下の隅には切手ほどの大きさのQRコードが、ラテの写真の上に白黒を反転させた状態で刷り込まれていた。

最初の1週間のスキャン数は4回。うち2回は店主自身のテストだった。

問題はデザインではない。QRコードだ。しかも失敗した理由は3つあり、そのどれもが90秒ほどで直せる——入稿前にそれが何かを知ってさえいれば。チラシのQRコードは、読み取れるか読み取れないかのどちらかしかない要素だ。文字なら少し小さすぎても、目を細めれば読んでもらえる。コードは少し小さすぎるだけで、ただ失敗する。

印刷したコードが読み取れるかどうかを実際に決めているのは、次の点だ。

チラシのQRコードはどのくらいの大きさが必要か

覚えるべき数字はひとつだけ。読み取り距離を10で割る。

それがコード自体の最小幅になる。チラシを手に持って見る距離はおよそ30 cmだから、コードは最低でも幅3 cm（約1.2インチ）は必要だ。これは多くの人が感覚で置くサイズよりずっと大きい。A5のチラシに載る3 cm四方は、脚注ではなく、はっきり目に入るひとつの要素になる。

掲出する場所	想定される読み取り距離	QRコードの最小幅
手に持つチラシ・配布物	30 cm	3 cm
テーブルテント・カウンターPOP	60 cm	6 cm
窓ガラスのステッカー・A4ポスター	1.5 m	15 cm
通路に貼るA2ポスター	3 m	30 cm
ターポリン幕・イベントバナー	10 m	100 cm

「距離÷10」は下限であって、目標値ではない。スペースに余裕があるなら、出た数字より20〜30%大きくしておきたい。現実のスキャンは、薄暗い場所で、斜めから、通りすがりの人に行われる。机の上でテストしたときの条件ではない。

実効サイズを気づかないうちに削ってしまう要因が2つある。ひとつは、URLが長いほどコードが密になること。90文字のトラッキング付きリンクは、brewlane.co/order に比べて同じ正方形の中に何倍ものモジュールを詰め込む。結果としてモジュール1つが物理的に小さくなり、カメラが解像しづらくなる。コードを生成する前にリンクを短くしておこう。もうひとつは、印刷解像度が低いとモジュールの輪郭がにじむこと。生成ツールが対応しているならSVGで書き出す。難しければPNGで、最終的な印刷サイズに対して最低300 DPIを確保する。

周囲の白い余白は省略できない

QRコードには必ずクワイエットゾーンが要る。四辺すべてに、最低でもモジュール4つ分の余白を取ることだ。実務上は、コード幅のおよそ10%の白い縁を残せばいい。3 cmのコードなら、3.6 cm四方の何もない領域の中に収まる形になる。

読み取り側は、この余白を手がかりにコードの始まりを見つけている。見出しや写真の端、装飾の罫線でここを詰めてしまうと、認識に数秒かかるか、まったく読めなくなる。多くの生成ツールは書き出しファイルにクワイエットゾーンを含めてくれるが、「余計な白場」と判断したデザイナーがそこを切り落として壊す、というのがよくある経路だ。ここはトリミングしないこと。

冒頭のカフェのチラシが最初につまずいたのはここだった。コードは隅に押し込まれ、二辺は紙の端、残る一辺は写真に接していた。

明るい地に、暗いコード。例外なし。

反転させたほうが見栄えがいいという理由で、しょっちゅう破られるルールが2つある。

反転させない。 暗い背景に白いコードでも、最近のスマホカメラなら理屈のうえでは読める機種がある。机の上のiPhoneでは実際に読み取れてしまう——だからこそ、そのまま入稿されてしまう。だが読み取り側には、明るい地に暗いモジュールという前提のままのものがまだ多い。古いAndroidのカメラ、銀行アプリやポイントアプリの内蔵スキャナ、安価なPOS端末のリーダーなどだ。自分の客がどちら側なのかを、500枚刷った後に知ることになるのは避けたい。

写真の上に置かない。 コントラストを落として上品にぼかした写真でも同じだ。読み取り側は明暗のはっきりした境目を必要としているのに、写真はその基準を絶えず動かしてしまう。チラシが全面写真なら、写真の上に角丸の白いパネルを敷き、その上にコードを置く。このパネルは、継ぎ当てではなく意図されたデザインとして読まれる。

コードもブランドの色味に寄せたいなら、代わりに暗いほうのモジュールをブランドカラーに置き換える。濃紺や強い青なら、白に対して十分に暗いままなので問題ない。白地に水色のモジュールは失敗する。同じコントラストの理屈は文字にも当てはまる。それについては写真の上に読める文字をのせる方法で書いた。

スキャンすると何が得られるのかを書く

説明のないQRコードは、相手に賭けを強いる。2026年に、何の但し書きもない四角にカメラを向ける人はいない。駐車メーターや怪しいステッカーで、みんなそう学習してきた。

コードのすぐ下に、スキャンすると何が起きるのかを一行で書く。「スキャンしてください」ではなく、具体的に。

• スキャンで事前注文
• スキャンでメニューを全部見る
• スキャンで初回20%オフ

その横に、URLそのものも小さな文字で添えておく。読み取れなかった人の逃げ道になるうえ、どこかの誰かが後から貼り付けたものではなく、きちんとしたものだという印象になる。

コードの中央にロゴを載せるなら、誤り訂正レベルHで生成する。このレベルは約30%の欠損に耐えられ、中央を覆うという行為はまさにその欠損にあたるからだ。レベルLやMのままだと、中央のロゴはコードを完全に壊す。

Ridvay Studio が本物のコードを生成するようになった

これは新しく入った機能で、作業の流れそのものを変える。プロンプトの中で Ridvay Studio にQRコードを頼めば、指定したリンクを指す、実際に読み取れるコードが生成される。別の生成サイトを開く必要も、PNGをダウンロードする必要も、URLが変わるたびに貼り直す必要もない。

ここははっきり書いておきたい。AIデザインツールの落とし穴がまさにここにあるからだ。このコードは画像モデルを通っていない。 一般的な画像生成に「QRコード付きのチラシ」と頼むと、返ってくるのはそれらしい模様だ。位置検出パターンらしき四角がだいたい正しい場所にあり、モジュールの並びもそれらしく、そしてデータは一切入っていない。写真映えはするが、決して読み取れない。Ridvay は本物のエンコーダーでURLからコードを生成し、それをベクター要素として配置する。ここから、実務上効いてくる違いが2つ生まれる。

• 正確であること。 コードには実際のリンクが入っていて、普通のスマホカメラでデコードでき、何かを印刷する前にエディタ上で確かめられる。
• ベクターなので、解像度が問題でなくなること。 A5でもA2でもターポリン幕のサイズでも、書き出したモジュールの輪郭は鋭いままだ。先ほどの300 DPIの心配は、よそから持ち込んで貼ったビットマップのコードに当てはまる話で、デザインの中で生成したコードは劣化しない。

リンク先のURLを変えれば、コードもその場で作り直される。これだけで、現実に最も多いQRの失敗が消える。その失敗はそもそもデザインの問題ですらない——移動してしまったリンクを指したままのチラシ、という問題だ。

チラシのどこに置くか

下3分の1の右下が定番なのには理由がある。見出しとオファーを読んだ視線が最後に落ち着く場所であり、配布物を手に持ったときに親指が自然に来ない場所でもあるからだ。

避けたい失敗が2つ。ひとつは、仕上がり線ぎりぎりまで寄せること。断裁は数ミリ単位でずれることがあり、クワイエットゾーンを削ってしまう。最低でも5 mmは余裕を取る。もうひとつは、見出しと張り合わせること。コードは行動であって、フックではない。フックが売り、そのあとコードが受け取る。優先順位の考え方はチラシの他の要素と同じで、レイアウト全体についてはAIでチラシを作る方法にまとめてある。

Ridvay Studio で実際に作ってみる

先ほどのカフェのチラシを、コードを後付けではなく本来のデザイン要素として扱って作り直してみる。プロンプトの中でリンクを指定すれば、生きたコードが返ってくる。

Brew Lane Coffee のオンライン注文開始を告知するA5チラシ。濃紺の背景、上部には温かみのあるコーヒーの写真。大きく太い見出しは「事前注文で、行列をスキップ。」。本文コピーは短く一行。右下には brewlane.co/order にリンクするQRコードを白いパネルの上に置き、「スキャンで事前注文」というキャプションを添えて、その横に小さな文字でURLを入れる。

返ってくるのは編集できるデザインだ。見出し、パネル、キャプション、小さな注記、そしてコード自体が、それぞれ実際のフォント・色・位置の値を持つ別々のレイヤーになっている。一語直すたびに作り直さなければならない平らな画像ではない。

そのうえで、次の4か所を直す。どれもここまでのルールをそのまま当てはめただけのものだ。

1. コードをクリックしてドラッグで大きくする。 印刷サイズで少なくとも幅3 cmになるまで広げる。ベクターなので、どれだけ引き伸ばしても輪郭は鋭いままだ。手に持つチラシ以外に使うなら、先ほどの距離の表と照らし合わせて確認する。
2. 周囲の白い余白が残っているか確認する。 パネルをモジュールぎりぎりでトリミングしてしまっていたら、外側に引き戻す。目に見えるその白い縁こそがクワイエットゾーンであり、いちばん飛ばされやすい工程でもある。
3. パネルを仕上がり線の両端から5 mm内側に寄せる。 断裁のずれに対する、費用ゼロの保険になる。
4. Brand Kit を適用したうえで、パネルは純白、モジュールは暗いままにしておく。ほかの要素はすべてブランドカラーに寄せていいが、コードのコントラストだけは譲れない。それでも寄せたいなら、モジュールのほうをブランドで最も暗い色に変える。背景は絶対に変えない。

書き出す前に、エディタの画面に表示したまま自分のスマホで読み取ってみる。そこで読めないなら、紙の上でも読めない。

このチラシのプロンプトを Ridvay Studio で開く →

A5がうまくいったら、ワンクリックのリサイズで同じレイアウトをテーブルテントやストーリーズ用の縦長投稿にも展開できる。ただし、そのたびにコードのサイズを確認し直すこと。デザインは変わらなくても、読み取り距離が変わるからだ。手元で3 cmなら十分だったコードも、テーブルテントでは6 cm必要になる。

3台のスマホでテストする

入稿する前に、これだけはやっておきたい。2分で終わって、ほとんどの失敗を捕まえられる。

オフィスの普通のプリンターで、チラシを原寸で印刷する。スクリーンショットではなく、紙に出すこと。モニターはバックライトで光っていて、スマホのカメラにとっては紙のインクよりはるかに読み取りやすいからだ。刷ったものを、3台の違うスマホでスキャンする。最近のiPhoneが1台、新しくないAndroidが1台、そして専用アプリではなくカメラ内蔵の読み取り機能を使うものが1台。天井の照明だけの明るさで、紙は少し斜めに持つ。

3台のうち1台でも1秒以上もたつくようなら、コードを大きくする。その「もたつき」は、屋外で、急いでいて、夕暮れどきに試された瞬間に「読めない」に変わる。

冒頭のカフェは、白いパネルに載せた3.5 cmのコードを右下に置き、「スキャンで事前注文」というキャプションと短縮したリンクを添えて刷り直した。写真も見出しも紙も同じままだ。コードは飾りから、人が実際に使うものに変わった。

自分で試す： Ridvay Studio でこのチラシを生成する ——自分のリンクに差し替えれば、そのまま印刷に出せるレイアウトの上に、実際に読み取れるコードが載って返ってくる。無料で、どのレイヤーも後から自由に編集できる。