QRコードの中央にロゴや絵文字を入れる：それでも読み取れる理由

中央にブランドのロゴやかわいい絵文字が入ったQRコードを見たことがあるでしょう。ドットがもっとも密集する中心を絵で覆っているのに、スマートフォンが読み取れるのは不思議です。なぜ読み取れるのかが分かると、ロゴはどこまで大きくできるのか、どんな画像を選べばよいのかといった実用的な疑問にも答えが出ます。この記事では、仕組みを簡単に説明したあと、中央ロゴを追加する実践面を中心に解説します。装飾したQRコード全般のアドバイスは別のガイドにまとめているので、ここではロゴに絞ります。

一部が隠れていてもQRコードが読み取れる理由

QRコードには、誤り訂正という安全網があります。データを符号化するときに、復元用の余分な情報も一緒に保存されるため、コードの一部が汚れたり、傷ついたり、破れたりしても、カメラは残った部分から元の内容を再構築できます。ロゴを置くことは、コードの一部をあえて隠すことであり、隠した分はこの復元の余裕でまかなわれます。

レベルはL、M、Q、Hの4段階です。広く知られている規格の値では、それぞれコードのおよそ7%、15%、25%、30%を復元できます。レベルが高いほど多くの損傷に耐えられますが、同じメッセージでも必要なドットが増えるため、模様は細かくなります。

• L（約7%）：きれいな画面表示向けです。ロゴに回せる余裕はほとんどありません。
• M（約15%）：一般的な標準レベルです。
• Q（約25%）：軽い装飾や小さな損傷に耐えられます。
• H（約30%）：もっとも頑丈なレベルで、ロゴを入れる場合に最適です。

よくある誤解にも触れておきます。30%を復元できるからといって、コードの30%をロゴで覆えるわけではありません。隠す面積と復元できる割合は1対1には対応せず、手ブレやインクのにじみといった現実のノイズも同じ余裕を消費します。実際にロゴに割り当てる割合は、理論上の上限をかなり下回る値にしてください。

ロゴを追加すると誤り訂正が自動的に上がる

デザインQRでは、この設定を自分で管理する必要はありません。中央ロゴをオンにすると、誤り訂正が自動的にHに設定され、画面にもその旨の短いヒントが表示されます。ロゴがないときは状況によって低いレベルが使われることもありますが、ロゴを追加した時点で、もっとも頑丈なレベルに切り替わります。

代償もあります。レベルHでは同じアドレスでも必要なドットが増えるため、同じ大きさのページ上では1つ1つのドットが小さくなり、その影響はアドレスが長いほど大きくなります。ロゴを入れる予定なら、アドレスをできるだけ短くしてください。長いアドレスにロゴを加えると、非常に細かい模様になり、小さく印刷したときに読み取りにくくなることがあります。

ロゴのサイズ上限と警告：実際の数値

デザインQRでは、ロゴのサイズをQR本体の面積に対する割合で扱います。この面積には、ロゴの周りの余白も含まれます。アプリに組み込まれている値は次のとおりです。

• 初期値はQR本体の8%です。
• 10%を超えると、ロゴが大きく、スキャンが難しくなる可能性があるため、ダウンロード前に実機で確認するよう促す警告が表示されます。
• 上限は20%です。それ以上を指定すると、ロゴは20%以下に縮小され、縮小したことを知らせる通知が表示されます。

ロゴの領域はQRのドットのグリッドに合わせて配置され、常に中央に置かれます。横方向のドット数は奇数に調整されるため、見た目のサイズは、入力した割合とごくわずかにずれることがあります。また、その領域の中でも絵柄は端から少し内側に描かれるので、画像自体はロゴの領域よりやや小さく見えます。

これらの数値の読み方は簡単です。まず初期値の付近から始め、10%は「ここから先はご自身で確認してください」という合図と捉えましょう。警告が出ていなくても、すべての端末で読み取れる保証にはなりません。また20%の上限はアプリが許容する最大値であって、推奨値ではありません。

内蔵アイコンか、アップロードしたロゴか

中央ロゴには、アプリに内蔵されたアイコンと、アップロードした画像の2種類があります。どちらか一方を選び、同時には使えません。

• 内蔵アイコン：リンク、Wi-Fi、カメラ、チャット（吹き出し）があります。コード自身の色でシンプルに描かれるのでコントラストが安定しており、画像を用意する必要もありません。QRの用途がはっきりしているなら、もっとも安全な選択です。
• アップロードしたロゴ：15MBまでのPNG、JPG、WebPファイルを使えます。自分のブランドやキャラクターを見せたいときに使います。画像はブラウザーの中だけで処理され、サーバーには送信されません。

初めての場合は、まず内蔵アイコンでコードが読み取れることを確認してから、自分のロゴに差し替えましょう。内蔵アイコンなら同じサイズで読み取れるのに自分のロゴでは読み取れないなら、原因は画像にあるので、何を直せばよいかがぐっと分かりやすくなります。

絵文字メーカーからQRの中央に絵文字を送る

絵文字は、もっとも手軽なロゴです。絵文字メーカーで文字や画像からすでに絵文字を作ってあれば、そのままQRのロゴとして使えます。絵文字メーカーの絵文字プレビュー領域には、「この絵文字でQRコードを作る」というボタンがあります。

1. 絵文字メーカーで絵文字を作ります。
2. ボタンを押すと、デザインQRのページが新しいタブで開きます。タブが開かない場合は、ブラウザーがポップアップをブロックした可能性があるので、ポップアップを許可してからもう一度お試しください。
3. 新しいタブの準備ができると、絵文字が中央ロゴとして適用され、ページがデザインモードに切り替わり、絵文字をロゴに追加したことを知らせる通知が3秒間表示されます。
4. QRに入れるリンクを入力し、ロゴの面積を調整して保存します。

受け渡しは、2つのブラウザータブの間だけで行われます。絵文字の画像がサーバーを経由することはなく、開いているタブ同士がブラウザーの中で受け渡します。受け取る側のページは、絵文字メーカーのサイトから届いたPNG画像だけを受け付け、ほかの形式、外部のアドレス、サイズが範囲外の画像は無視します。画像はページの準備ができてから10秒以内に届く必要があり、最初の絵文字を受け取ったあとは、追加のメッセージを無視します。リンクなど、すでに入力した内容には影響しません。

絵文字にも、ほかのロゴとまったく同じルールが適用されます。サイズの上限と警告は同じで、誤り訂正もHに固定されます。絵文字はカラフルで輪郭が丸いため、ロゴによく合いますが、サイズを欲張ると、ほかの画像と同様に読み取れなくなることがあります。同じ方法で確認してください。

絵文字メーカーで絵文字を作る

最近アップロードした画像を再利用する

複数のロゴ候補を比べていると、同じファイルを何度も選ぶことになります。デザインQRは、その手間を省くために、読み込みに成功したアップロード画像を「最近追加した画像」の一覧に保存します。

• 保存されるのは5MB以下の元画像のみで、最大8枚まで。新しい順に並び、古いものから削除されます。
• 5MBを超えるファイルも、アップロード上限の15MBまではロゴとして使えますが、一覧には表示されません。
• 一覧の画像をタップすると、ファイルを選び直さずにロゴとして読み込めます。同じ一覧は、画像の形や画像QRの機能とも共有されます。
• 項目は1つずつ削除することも、すべて削除ボタンで一覧を空にすることもできます。

この一覧は、お使いのブラウザーの中にだけ保存され、サーバーには送信されません。共有のパソコンで個人の画像を使った場合は、作業が終わったら一覧か、ブラウザーのサイトデータを削除してください。

ロゴ画像の準備のしかた

同じサイズでも、選ぶ画像によって読み取りの確実さは変わります。いくつかの習慣を身につけるだけで、失敗は目に見えて減ります。

• 背景が透明なPNGを使います。白い四角が残っていると不自然に見え、ロゴが必要以上に大きく見えてしまいます。透明なPNGなら、絵柄の輪郭だけがコードの上に載ります。
• 形をシンプルにします。小さいサイズでは、細い線や小さな文字が潰れてしまいます。太くて単純な形、1文字、1つの絵文字なら、見分けがつきます。
• コントラストを確保します。ロゴが薄すぎたり、QRのドットに近い暗い色だったりすると、周囲のドットに紛れてしまいます。ドットとはっきり区別できる色にしてください。
• できるだけ正方形に近くトリミングします。横に極端に長いロゴは、同じ領域の中ではずっと小さく見えてしまいます。
• 写真は避けます。縮小すると細部が消え、色が濁ります。どうしても使う場合は、コントラストが強く、被写体の大きな写真を選んでください。
• ご自身のものではない画像は、使用する権利があることを確認してください。

スキャン確認バッジと実機でのテスト

プレビュー領域にはスキャンの状態が表示されます。確認中は「スキャンを確認中…」、問題がなければスキャン確認済みと表示され、読み取りにくい可能性があるときは、色のコントラストを上げるかロゴを小さくするというアドバイスとともに注意が表示されます。ロゴを大きくしながらこの表示が切り替わる地点を見ておくと、どこまでが安全なのかの感覚がつかめます。

とはいえ、バッジはあくまで目安です。カメラのハードウェアやスキャンアプリは機種ごとに異なり、印刷された紙は画面とは違う挙動をします。確認済みのバッジは、すべての端末で読み取れることを約束するものではないので、最終的な判断は実機に委ねてください。

1. 画面上のプレビューではなく、ダウンロードしたファイルをスキャンします。
2. 実際に使うサイズで1枚印刷します。印刷が小さいほど、ロゴの裏でドットが失われる影響が大きくなります。
3. iPhoneとAndroidの両方で、標準のカメラアプリと別のスキャナーアプリを試します。できれば古い機種もテストしてください。
4. 人が実際に立ったり座ったりする距離、角度、照明の下でスキャンします。
5. 開いたページが意図したアドレスのものか確認します。読み取りに成功することと、正しい行き先に着くことは別です。

読み取りが悪い場合は、変更を1つずつ元に戻してください。もっとも効果的なのはロゴの面積を減らすことで、次にドットと背景のコントラストを上げる、もっと大きく印刷する、アドレスを短くする、の順です。この順番は目安であって規格ではないので、まずはご自身のテスト結果を信頼してください。

最後に、デザインQRは、登録不要でブラウザー上で動く無料のツールです。形のあるQR、画像QR、キャプション付きのフレームQR、Wi-FiのQRを作成し、PNGやSVGで保存できます。入力した内容がサーバーに送信されることはありません。内蔵アイコンか絵文字から気軽に始め、8%前後からロゴの面積を少しずつ広げ、そのたびに保存したファイルをスキャンして、限界をご自身で見つけてください。ロゴが気に入らなければ、内蔵アイコン、アップロード、絵文字を何度でも切り替えられます。

デザインQRを開く