背後の面の上でも確実にスキャンできる透明なQRコード

透明なQRコードとは、背景なしで書き出したQRコードで、描かれるのは暗いモジュールだけ、それ以外はすべて透けて見えます。そのため、コードの背後にある面がコードの一部になります。明るく均一な面ならスキャンでき、暗い面、模様のある面、動く面ではスキャンできません。このページでは、透明なQRコードが機能する場所、失敗する場所、そして見た目を損なわずに失敗を直す方法を扱います。

1 内容
https://
登録不要 QRコード無制限 ウォーターマークなし Free high-resolution downloads
2 デザイン
パターン
3 プレビュー
コピーしました

透明なQRコードとは?

透明なQRコードとは、背景が完全に透けていて、暗いモジュールだけが見えるQRコードの画像です。透明なQRコードの明るいモジュールは、そもそも描かれていません。それはすき間であり、スキャナーはそのすき間から透けて見える色を読み取ります。したがって、背景が透明なQRコードがスキャンできるかどうかは、置かれた面しだいです。自前の背景色を持つコードについてはカラーQRコードをご覧ください。面が理想的でない場合は、四角いモジュールが最も許容度の高いスタイルです - ピクセルのQRコードをご覧ください - また、QRコードのフレームは、コードに明るい台座を与える方法の1つです。

木製スタンドに立つ赤いテーブルカード「Oak & Leaf Cafe - スキャンしてメニューを見る」。赤地から白く抜かれた六角形のQRコードが入っている

透明にすると何が変わるか

背景を取り除いても、QRコードのデータも、スマホがデコードする方法も変わりません。変わるのは、通常のQRコードが自分で持ってくる3つのものに、誰が責任を持つかです。

  • 明るいモジュールは背後の面になる - スキャナーには、すべての明るいモジュールが、すべての暗いモジュールよりはっきり明るいことが必要です。ファイルに背景がない以上、そのコントラストは、コードの背後の面が明るく均一な場合にしか存在しません。
  • クワイエットゾーンも背後の面になる - クワイエットゾーンとは、シンボルがどこで始まりどこで終わるかをスキャナーが検出できるようにする、QRコード周囲の空白の余白です。ISO/IEC 18004はこれを四辺それぞれに4モジュールと定めており、透明なコードでは、その余白は近くのアートワークではなく、何もない面でなければなりません。
  • コントラストは書き出し時に確定しなくなる - 自前の背景を持つQRコードは、どこで使っても同じコントラストを持ちます。透明なQRコードは面ごとにコントラストが異なるので、配置するたびに確認し直さなければなりません。
  • 透明を保持できるファイル形式は限られる - PNG、SVG、PDF、EPSは透明を保存できます。JPGは保存できず、透明なQRコードをJPGとして保存すると、背景はプログラムによって白か黒で塗りつぶされます。

透明なQRコードは、別の種類のコードではなく、デザイン上の便利な手段です。背景色を手作業で合わせる手間を省き、1つのファイルを複数の明るい面に置けるようにします。通常のコードが失敗する面の上で、コードを機能させるものではありません。

市松模様はコードの一部ではない

デザインツールや作成ツールは、透明な部分をグレーと白の市松模様で表示します。市松模様はプレビュー上の約束事で、書き出されることも印刷されることもありません。ダウンロードしたQRコードを書類に配置したあとで市松模様が見える場合、そのファイルは透明の書き出しではなく、プレビューのスクリーンショットだったということです。

QRコードを作成
「Pulse Festival」と書かれた赤と黒のイベントポスターに、出演者一覧とチケット購入用にスキャンする三角形のQRコードが並んでいる様子

透明なQRコードが最も活きる場面

透明なQRコードは、周りに白い箱を見せずに、コードを明るい面の上にじかに置きたいレイアウトすべてに向いています。

レイアウトの中の明るい色のパネル

クリーム色、淡いグレー、パステルカラーのパネルの上に濃い色のコードを置けば、白い四角がデザインを壊すことはありません。それぞれが明るい色であるかぎり、1つの透明なファイルが、ブランドシステムのすべてのパネルの色に対応します。

プレゼンテーションのスライドと書類

透明なPNGやSVGは、明るいスライドの背景に箱なしで置けます。暗いスライドのテンプレートでは、先にコードの背後に明るい角丸のパネルを置いてください。

クラフト紙、クリーム色の紙、色付きの紙

暗いモジュールだけを印刷すれば、紙が背景になります。クラフト紙は見た目よりも暗いので、使える中でいちばん濃いインクを使い、校正刷りを出してください。

特色1色のパッケージ

1色刷りの仕事では、白い箱を印刷できません。透明なベクターのコードは、紙箱そのものの明るい面の上に、1つのインクとして印刷されます。

レーザー彫刻とカッティングシート

彫刻機やカッティングプロッターには、暗いモジュールだけをベクターの形として渡す必要があります。透明なSVGはまさにそれを提供し、削除すべき背景の長方形もありません。

明るい色の布地のグッズ

白や淡い色の衣類への単色のシルクスクリーン印刷です。布の質感は輪郭を甘くするので、コードは紙の場合よりも大きく印刷してください。

透明なQRコードはどんな面の上でスキャンできる?

透明なQRコードは、モジュールより明るく、色調が均一で、動かない面の上でスキャンできます。暗い面、模様のある面、動く面、透ける面では失敗します。どの失敗にも、縁のない見た目の大部分を保ったまま直す方法があります。

カフェの濃いグリーンの窓に貼られた「スキャンしてメニューを見る」のステッカー。店内では窓際の席に座る客と、奥のドリンクボード

透明なQRコードを機能させなくする面

透明なQRコードがスキャンできなくなる原因として最も多い5つの配置を、それぞれの理由とともに挙げます。

  • 暗い背景 - 暗い面の上の暗いモジュールにはコントラストがありません。モジュールを白に塗り替えると反転したQRコードになり、これは規格上は許容されていますが、スマホのスキャナーでは読み取りが安定しません。代わりに、コードの背後に明るいパネルを置いてください。
  • 写真 - 写真はモジュールごとに明るさが変わるので、明るいと読まれるすき間もあれば、暗いと読まれるすき間も出てきます。淡い写真であっても、たいていは影やディテールがコードを横切っています。
  • グラデーションと模様 - 片方の角が明るく、もう片方の角が中間調のグラデーションでは、コードの片側はコントラストが高く、反対側は低くなります。スキャナーは1つの領域全体に1つのしきい値を設定するので、コードの半分がしきい値の間違った側に落ちます。
  • 動画とライブ配信 - 動く映像の上に置いた透明なQRコードは、背景がフレームごとに変わります。明るい場面でスキャンできたコードが、暗い場面ではスキャンできなくなります。
  • ガラス、窓、透明ラベル - 透明フィルムに印刷したコードには、背景がまったくありません。スキャナーが見るのは、窓の向こうの通りや、ボトルの中の液体です。濃い色の飲み物に貼った透明ラベルは、暗い面の上の暗いコードです。

実用上の目安として、透明なQRコードの背後の面は、モジュールに対して、画面用なら4:1以上、印刷用なら7:1以上のコントラスト比を確保してください。これは、自前の背景を持つQRコードに適用されるのと同じ目標値です。

それぞれの直し方

これらの対処はどれも、コードのすぐ背後に明るく均一な領域を加えるものです。その領域の形や色はデザインに合わせてかまいません。必要なのは、そこにあることだけです。

  • コードの背後に明るい台座を加える - 白または淡いブランドカラーの角丸の長方形か円を、四辺それぞれでコードから4モジュール以上はみ出すように置きます。写真や暗いレイアウトの上では、これだけで対処は完了です。
  • 動画の上には半透明の台座を使う - 不透明度85〜100%の白い台座は、背景を安定させつつ、オーバーレイを軽やかに見せます。約85%を下回ると、映像が明るいモジュールから透けて見え始めます。
  • 透明な素材には白の層を印刷する - 窓用ステッカーや透明ラベルでは、コードの領域の背後に白インクの下地(白引き)を入れるよう印刷所に依頼してください。白の層が先に印刷され、その上に暗いモジュールが印刷されるので、コードはガラスの上でも自前の背景を持てます。
  • レイアウトの中で最も明るい部分を選ぶ - 台座を置きたくない場合は、すでに明るく平坦な領域にコードを移し、クワイエットゾーンに文字や縁がかかっていないことを確認してください。
  • 実際の面でコントラストを確認する - 面の色とモジュールの色を採取し、QRコントラストチェッカーで比較してください。白に対して測ったコントラストの測定値は、ベージュの上に置いたコードについては何も教えてくれません。
美容液のボトルの横に立つ、Lumièreの濃いピンクのカウンターサイン「Clean. Bright. Conscious. - スキャンして製品を見る」と、白いプレート上の暗いQRコード

透明なQRコードのアイデア

背景を取り除くことでデザインが良くなる4つの配置を、それぞれをスキャンできる状態に保つポイントとともに紹介します。

色付きの紙のメニューカード

クリーム色のカードに、白い箱なしで濃い緑のコードをじかに印刷します。クリーム色は十分に明るいので強いコントラストが得られ、コードは貼り付けたシールではなく、メニューの一部として見えます。

ショーウィンドウのステッカー

カッティングシート、またはコードの背後に白の下地を入れて印刷した透明フィルムです。店内で何が起きていても、外から見たコードには、しっかりした明るい背景があります。

配信のオーバーレイ

配信画面の隅の、角丸の白い台座の上に置いた透明なPNGです。台座は場面がどう切り替わってもコードをスキャンできる状態に保ち、ファイルが透明なので、台座の中に色の合わない白い箱が出ることもありません。

1色刷りのクラフト箱

クラフトボードに黒1色のインクで、モジュールだけを印刷します。クラフトはコントラストを下げるので、コードは3 cm以上の大きさにし、実際のボードで校正刷りを出します。

透明なQRコードの作り方

透明なQRコードは1分ほどで作れます。気を配るべきことの大半は、そのあとでどこに配置するかです。

QRコードを作成
  1. 1

    コンテンツを入力する

    リンクを貼り付けるか、Wi-Fiやメールなど別のタイプを選んで、コードを生成します。

  2. 2

    「背景を透明に」をオンにする

    「色」タブを開き、「背景を透明に」にチェックを入れます。プレビューではコードの背後に市松模様が表示されます。これは透ける領域を示すもので、書き出されることはありません。

  3. 3

    濃いモジュールの色を選ぶ

    コードを置く面に対して暗い色を選びます。黒、ネイビー、濃い緑、深い茶色は、どれも明るい面の上で機能します。

  4. 4

    PNGかSVGを書き出し、置いた状態でテストする

    画面にはPNGを、印刷にはSVGをダウンロードし、コードを実際の背景の上に配置して、公開や印刷の前に、その状態で2台のスマホでスキャンしてください。

カウンターの案内サインに付いたQRコード

周りに箱のないコード

円形やカスタム形状のQRコードを作れる無料のQRコード作成ツールであるKoloQRは、「色」タブに「背景を透明に」のオプションを備えています。チェックを入れると、作成ツールはモジュール、ファインダーパターン、そしてロゴがあればロゴだけを、四角、円形、三角形、六角形の輪郭で描きます。

KoloQRのコントラストの測定値は、透明なコードを白の上に置かれているものとして扱います。作成ツールには最終的な面を知る方法がないからです。印刷の前に、実際の面の色をご自身で確認してください。KoloQRは、透明なPNG、SVG、PDF、EPSを、アカウントも透かしもなしで書き出し、作るのは静的QRコードだけです。

QRコードを作成

透明なQRコードの書き出し形式

透明は、それを保存できる形式でしか保たれず、しかもファイルを開くプログラムが透明を尊重する場合に限られます。

PNG

透明を保存でき、スライド、書類、ウェブサイト、動画編集ソフト、配信ソフトで使えます。PNGは拡大するとぼやけるので、必要になる最大のサイズで書き出してください。

SVG

もともと透明な形式です。ファイルに含まれるのはモジュールの形だけで、ほかには何もありません。印刷、カッティング、彫刻のための形式で、どんなサイズでも鮮明です。

PDFまたはEPS

印刷所のためのベクター形式です。どちらも背景を空のまま保つので、印刷所はコードの背後に白の下地や特色を、別の層として加えられます。

Questions? Answered

はい、明るく均一な面の上であればスキャンできます。透明なQRコードは自前の背景を持たないので、背後の面が明るいモジュールの役割を果たします。白、クリーム色、淡い色の上なら、コードはほかのコードと同じようにスキャンできます。暗い背景、模様のある背景、動く背景の上では失敗し、背後に明るい台座が必要になります。

じかには置けません。写真はコードの領域の中で明るさが変わるので、一部の明るいモジュールが暗いと読まれてしまいます。コードの背後に、四辺それぞれでコードから4モジュール以上はみ出す、白または淡い色の台座を置いてください。台座は、写真に合わせて角を丸めたり色を付けたりしてかまいません。

ファイルがJPGとして保存されたか、透明に対応していないプログラムで開かれたからです。JPGには透明がなく、多くのプログラムは空の領域を黒で塗りつぶします。黒の上の暗いコードは見えません。コードをPNGかSVGでもう一度ダウンロードし、クリップボードから貼り付けるのではなく、ファイルとして挿入してください。

可能なら、透明な背景でコードを作り直してください。編集するよりもきれいに仕上がります。画像編集ソフトでPNGから白を取り除くと、すべてのモジュールの周りに半透明のピクセルの淡いにじみが残り、色付きの面の上では縁取りとして見えてしまいます。元のデータが分からない場合は、先にコードをデコードしてから、もう一度生成してください。

背後に白の層がある場合だけです。透明フィルムでは、コードの背景はガラスの向こうにあるものになり、それは光によって変わり、暗いことも多くあります。コードの領域の下に白インクの下地を入れるよう印刷所に依頼するか、白いシートにコードを印刷したものを使ってください。

できるかぎり避けてください。暗い面の上の白いモジュールは反転したQRコードになり、QRコードの規格上は許容されていますが、スマホのスキャナーでは読み取りが安定しません。暗い背景の上に明るい台座を置き、その上に暗いコードを載せたもののほうが、はるかに多くの端末でスキャンできます。

はい。四辺それぞれに4モジュールのクワイエットゾーンは、透明なコードにもそのまま当てはまります。ファイルに描かれていないだけです。文字、画像、レイアウトの端をその余白に入れないようにし、余白の中の面が、コードの背後の面と同じ明るい色調であることを確かめてください。

はい。ロゴは通常どおり中央に置かれ、ロゴが判読できるように、その周りの領域は空けられます。透明なコードでは、その空けた領域も透けて見えるので、ロゴがモジュールに対してだけでなく、最終的な面に対しても十分なコントラストを持っているかを確認してください。

はい。KoloQRなら、PNG、SVG、PDF、EPSのダウンロードも含めて、透明なQRコードを無料で作れ、アカウントも透かしもありません。コードは静的なので、スキャン回数の上限も有効期限もありません。

関連ページ

このページの続きになるページ - 同じ場面、同じ種類のコード、あるいは次に決めることについて。

KoloQRを選ぶ理由

  • ウェブサイト、メニュー、Wi-Fi、PDF、名刺用のQRコードを作成
  • 色・ロゴ・オリジナルの形をカスタマイズ
  • 高品質なPNG・SVGファイルをダウンロード
  • 印刷にもデジタルにも対応
QRコードを作成
シンプルな黒いQRコードと、同じコードをブランドカラーの円形にデザインし直したもの