丸いモジュールでも確実にスキャンできるドットのQRコード

ドットのQRコードは、モジュールを四角ではなく円で描いた標準のQRコードです。データも、グリッドも、スマホが読み取る方法も変わりません。違うのは各モジュールの描き方だけです。まず下で作ってみて、そのあとでドットをどこまで大きく保つ必要があるのか、小さくしたときに私たちが何を測定したのかをご覧ください。

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

ドットのQRコードとは?

ドットのQRコードとは、暗いモジュールをすべて四角ではなく円で描いた標準のQRコードです。モジュールとはQRコードのグリッドの1つのセルで、暗いか明るいかのどちらかです。スキャナーは各モジュールをセルの中央から読み取ります。セルの中央に置いたドットが、セルいっぱいの四角と同じ情報を持つのはそのためです。ドットのQRコードは丸いQRコードと同じものではありません。ドットはモジュールのことで、丸型は輪郭のことであり、この2つは組み合わせることも別々に使うこともできます。ほかの輪郭の系統はQRコードの形にまとめています。 反対のスタイル、つまり読み取りの余裕が最も大きい、輪郭のはっきりした四角いモジュールについては、ピクセルのQRコードで解説しています。

イベント参加者のバッジに付いた、円形フレームの丸いQRコード

変わるものと変わらないもの

QRコードを四角からドットに切り替えると、コードの見た目と、コードが持つインクの量が変わります。コードが格納する内容と、デコードのされ方は変わりません。

  • データはまったく同じ - 同じリンクから作ったドットのQRコードと四角いモジュールのQRコードは、暗いモジュールと明るいモジュールの同じグリッドを、同じバージョンと同じ誤り訂正レベルで持ちます。標準的なスキャナーならどれでも両方を読み取れます。
  • ドット1つあたりのインクは少なくなる - セルの幅いっぱいに描いた円は、セルのpi/4、約78.5%を覆います。セルの幅の80%で描いたドットが覆うのは約50%です。モジュールあたりのインクが減ること、それがドット調の見た目の代償のすべてです。
  • モジュールどうしが接しなくなる - 四角いモジュールはつながって切れ目のない棒やブロックになりますが、ドットは明るいすき間を挟んで離れたままです。このすき間がコードに軽やかな質感を与える一方で、デコーダーが対処しなければならないものでもあります。
  • ファインダーパターンは塗りつぶしたままにする - 3つの大きな角の四角は、スマホがコードを見つけるための手がかりです。角を丸めたりリングとして描いたりはできますが、ばらばらのドットに分けてはいけません。QRコードのファインダーパターンが、何を残さなければならないかを説明しています。

円形やカスタム形状のQRコードを作れる無料のQRコード作成ツールであるKoloQRは、「ドット」パターンをセルの幅の80%で描き、ファインダーパターンを塗りつぶしたまま保ちます。「2サイズのドット」パターンは、80%のドットに、より小さい56%のドットを混ぜて、より装飾的な質感にします。

ドット、角丸の四角、ピルは別々のパターン

ドット調のスタイルにはモジュールパターンの一族が含まれ、その挙動は同じではありません。独立したドットは、すべてのモジュールの周りにすき間を残します。グループ化された角丸のモジュールは、隣り合うセルを角の柔らかいかたまりにつなげるので、四角いコードのインクの大半を保ちます。ピルやバーは、1つの軸の方向にだけモジュールをつなげます。パターンが素の四角のインクの被覆率に近いほど、印刷したコードは許容度が高くなります。したがって、ごく小さなコードにはグループ化された角丸のモジュールのほうが安全な選択で、ドットの質感そのものが目的のときには独立したドットを選びます。

QRコードを作成
サンダルウッドのボディクリームの黒いふたに貼られた「詳しくはこちらをスキャン」の丸いQRコードラベルと、その横のスカラップ状の丸いQRコードが付いた銀色の缶

ドットのQRコードが最も活きる場面

丸いモジュールは、硬い四角のグリッドよりも柔らかく、意図のあるものとして伝わります。そのためドットのQRコードは、コードが隅に置かれた実用のマークではなく、デザインの一部になる場所に向いています。

化粧品・スキンケアのパッケージ

丸いモジュールは、丸みのある書体や柔らかい製品の形の隣に自然になじみます。紙箱ではコードの幅を2.5 cm以上に保ってください。折りのある板紙と小さな印刷サイズは、ドットが余裕を失う場面だからです。

カフェのメニュー・テーブルカード

テーブルカードのドット調のコードは、バーコードらしさが薄れ、メニューのデザインの一部のように見えます。約30 cmの距離からスキャンされるので、幅3〜4 cmあれば余裕があります。

名刺

ドットのQRコードは、ミニマルな名刺のレイアウトとよく合います。モジュールが大きく保たれるように短いURLを使い、幅2.5 cmより小さくは印刷しないでください。

ポスター・イベントのグラフィック

ポスターの大きさになるとドットのインクの代償は問題にならず、パターンそのものが1つのグラフィック要素になります。コードの大きさは、スキャンされる距離のおよそ10分の1にしてください。

アプリ・画面・SNSの投稿

画面上では、すべてのドットが完璧に描画され、背後から照らされます。そのため、より装飾的な2サイズのパターンも含めて、ドット調のスタイルを使ううえで最も許容度の高い場所です。

子ども向け・教育向けの教材

ワークシート、博物館の順路案内、教室のポスターは、親しみやすい質感の恩恵を受けます。反射で小さな点が飛ばないように、できるだけマット紙に印刷してください。

ドットはどこまで小さくできる?私たちがテストしたこと

私たちは1つのQRコードを7通りのドットの大きさで描き、7通りの解像度でキャプチャして、すべての組み合わせをjsQRでデコードしました。jsQRは、ブラウザで動く多くのスキャナーに入っているオープンソースのデコーダーです。このテストは誰でも再実行できるスクリプトで、テストしているのは1つのデコーダーです。iOSとAndroidに組み込まれたカメラのデコーダーは非公開で、一般にはより許容度が高く、このテストの対象ではありません。

印刷した名刺のQRコードをスマホでスキャンしている手元

デコーダーのテストで分かったこと

テストに使ったシンボルは、誤り訂正レベルHの41 x 41モジュールのQRコードで、ファインダーパターンは塗りつぶし、それ以外の暗いモジュールはすべてドットとして描きました。各組み合わせを、わずかにずらした16の位置と2段階のぼかしでデコードしており、以下の回数は2段階のうち鮮明なほうのものです。

  • 幅いっぱいのドットは四角と同じように振る舞った - セルの幅の100%のドットは、キャプチャ時の1モジュールあたり2.5〜10ピクセルのすべての解像度で、16の位置すべてでデコードでき、四角いモジュールとまったく同じ結果でした。90%のドットは、1モジュールあたり8ピクセルを除くすべてでそれに並び、8ピクセルでは16回中9回のデコードでした。
  • 80%のドットは範囲の中ほどで確実にデコードできた - 1モジュールあたり2.5、3、4ピクセルでは、80%のドットは16回中16回の位置でデコードできました。これはKoloQRの「ドット」パターンが使う大きさで、この範囲は、コードがカメラのフレームのほどほどの部分を占める状態に当たります。
  • 遠くよりも近くのほうが難しかった - 1モジュールあたり8ピクセルと10ピクセルでは、80%のドットは16回中1回か2回の位置でしかデコードできませんでしたが、四角は変わらず16の位置すべてでデコードできました。ドットのあいだのすき間が鮮明に解像されると、このデコーダーはグリッドを追うのに苦労します。対処はスマホを離すことで、これはよくある助言とは逆です。
  • 70%を下回ると使える範囲が崩れた - 70%のドットは、1モジュールあたり2.5〜4ピクセルのあいだでは、まだ15または16の位置でデコードできました。56%のドットはその範囲で12〜15にとどまり、範囲の外ではほとんどデコードできず、35%のドットは1つの解像度でしかデコードできませんでした。
  • 少しのぼかしは助けになり、多いぼかしは害になった - ぼかしをわずかに増やすと、1モジュールあたり6ピクセルの80%のドットは16回中10回から16回中16回になりました。ぼかしがすき間を埋めるからです。同じぼかしで、1モジュールあたり3ピクセルの56%のドットは16回中14回から3回に落ちました。

実用上の読み方はこうです。印刷するものではドットをセルの幅の80%以上に保ち、70%を下限として扱い、ドット調のコードが近距離でスキャンできないときは、デザインを変える前にスマホを離してください。

テストから導かれるデザインのルール

これらのルールは、どの作成ツールで作ったドットのQRコードにも当てはまり、どれも丸いモジュールが手放す余裕を守るものです。

  • ドットのコードは四角のコードより大きく印刷する - セルの幅の80%のドットにインクが載る面積は四角いモジュールの約半分で、非塗工紙でのインクのにじみは小さなドットをぼかしてグレーにします。四角いモジュールのコードが2 cmで安全な場面では、ドット調のコードには2.5 cmを与えてください。
  • コントラストを高く保つ - ドット調のコードは、もともと四角のコードよりもモジュールあたりの反射光が多いので、四角では機能する中間調のブランドカラーが、ドットでは失敗することがあります。明るい背景に濃い色を使い、その組み合わせをQRコントラストチェッカーで確認してください。
  • リンクを短くする - URLが短いほどQRコードのバージョンが低くなり、モジュールは少なく大きくなるので、同じ印刷幅でもすべてのドットが大きくなります。
  • クワイエットゾーンには手を付けない - クワイエットゾーンとは、シンボルがどこで始まりどこで終わるかをスキャナーが検出できるようにする、QRコード周囲の空白の余白です。ISO/IEC 18004はこれを四辺それぞれに4モジュールと定めており、ドットにしてもその要件は減りません。
  • 印刷したコードを2つの距離でテストする - 校正刷りを、人が実際に使う距離と、それより近い距離の両方からスキャンしてください。理由は上のテストにあります。ドット調のコードは、40 cmからは読めても10 cmではためらうことがあります。
名刺に付いた、円形フレームの丸いQRコード

ドットのQRコードのアイデア

ドット調のスタイルのよくある使い方を4つ、それぞれを実際に機能させるポイントとともに紹介します。

円形の輪郭の中のドット

丸い輪郭の中に丸いモジュールを置くのが、この見た目の最も一貫した形です。円形の輪郭はそれ自体に追加の幅が必要なので、アートワークの大きさは外側の縁からではなく、中央の正方形のデータ領域から決めてください。

リング状のファインダーパターンとドット

3つのファインダーパターンを、中心を塗りつぶしたリングとして描くと、丸のテーマが角まで行き渡ります。スマホがコードを捉えるには、リングとその中心が塗りつぶされたまま、比率を保っている必要があります。

質感としての2サイズのドット

大きなドットと小さなドットを混ぜると、ポスターや画面に合う網点のような雰囲気になります。弱点は小さなドットなので、このパターンはラベルではなく大きなサイズに向いています。

クラフト紙や色付きの用紙に単色のドット

クラフト紙の上の濃いドットは手仕事らしく見えますが、この紙は白より暗く、コントラストを下げます。使える中でいちばん濃いインクを使い、本刷りの前に校正刷りを出してください。

ドットのQRコードの作り方

ドットのQRコードは1分ほどで作れ、作成ツールを開いた時点でドットのパターンがすでに選択されています。

QRコードを作成
  1. 1

    コンテンツを入力する

    リンクを貼り付けるか、Wi-Fiやメールなど別のタイプを選ぶと、QRコードがドットのモジュールですぐに描かれます。

  2. 2

    ドットのパターンと目を選ぶ

    均一な丸いモジュールなら「ドット」のまま、より装飾的な質感なら「2サイズのドット」を試してください。ファインダーパターンがそろうように、目は「円」か「角丸」に設定します。

  3. 3

    色を設定してコントラストを確認する

    明るい背景に濃いパターンの色を選びます。プレビューの下のコントラストのバッジが、その組み合わせで確実にスキャンできそうかを示します。

  4. 4

    テストして書き出す

    プレビューをスマホで2つの距離からスキャンしたら、印刷にはSVGまたはPDFを、画面にはPNGをダウンロードします。

KoloQRのエディタ。さまざまな色とスタイルの円形QRコード

丸いモジュールでも、信頼できるグリッドはそのまま

ドット調のQRコードにデザインツールは必要ありません。KoloQRは初期設定で「ドット」パターンを描き、スマホがコードを見つけられるように3つのファインダーパターンを塗りつぶしたまま保ち、何かをダウンロードする前に、選んだ色のコントラストの測定値を表示します。

KoloQRは、印刷向けにSVG、PDF、EPSを、画面向けにPNGを書き出し、アカウントも透かしもありません。KoloQRが作るのは静的QRコードだけなので、印刷後にコードの遷移先を変えることはできません。それが問題になる場合は、コードを自分のドメインのリダイレクトに向けてください。

QRコードを作成

ドットのQRコードの書き出し形式

丸いモジュールは、四角いモジュールよりもファイル形式の影響を受けやすくなります。円には、ピクセルのグリッドにそろう辺がないからです。

PNG

画面やSNSの投稿に。印刷に使うなら大きく書き出してください。解像度が低いと、小さなドットはぼやけた数個のグレーのピクセルになります。上のテストが測定しているのは、まさにこの失敗です。

SVG

印刷に使うべき形式です。すべてのドットが本物の円として保存されるので、2.5 cmのラベルからバナーまで、コードはどんなサイズでも鮮明なままです。

PDFまたはEPS

アートワークを印刷所へそのまま渡す場合に。どちらもドットをベクターのまま保ち、変換なしでInDesignやIllustratorのレイアウトに配置できます。

Questions? Answered

通常のサイズなら、はい。スキャナーは各モジュールをセルの中央から読み取り、セルの中央に置いたドットはまさにそこにインクを置きます。ただし余裕は薄くなります。セルの幅の80%のドットが持つインクは四角の約半分なので、ドット調のコードは、ごく小さく印刷したときやコントラストが低いときに、より早く失敗します。

ドットのQRコードはモジュールが丸く、丸いQRコードは輪郭が円形です。この2つは独立した選択です。正方形のコードをドットで作ることも、円形のコードを四角で作ることもでき、2つはよく組み合わされます。データ領域はどの場合も正方形のグリッドです。

各ドットをモジュールのセルの幅の80%以上に保ち、70%を下限として扱ってください。私たちのデコーダーのテストでは、80%のドットはキャプチャ範囲の中ほど全体で16回中16回の位置でデコードできましたが、56%のドットは12〜15に落ち、その範囲の外ではほとんどすべてで失敗しました。

一部のデコーダーは、ドットのあいだのすき間が鮮明に解像されると、グリッドを見失います。オープンソースのjsQRデコーダーを使った私たちのテストでは、80%のドットは1モジュールあたり4ピクセルで16回中16回の位置でデコードでき、8〜10ピクセルでは16回中1回か2回だけでした。コードがフレームのおよそ3分の1を占めるまで、スマホを離してください。

角の四角は、丸めたりリングとして描いたりはできますが、ばらばらのドットに分けてはいけません。3つのファインダーパターンは、スマホがコードを見つけて向きを判断するための手がかりであり、スキャナーはデータを読む前に、リングと中心が塗りつぶされたその構造を探します。

実用上の目安として、短いURLなら幅2.5 cmです。同じコードを四角いモジュールで描いた場合は2 cmです。ドットはモジュールあたりのインクが約半分で、非塗工紙でのインクのにじみは小さなドットから先に侵食します。URLが長い場合は、各モジュールが約0.5 mm以上に保たれるように拡大してください。

はい。KoloQRはすべてのコードを、シンボルの約30%を復元できる誤り訂正レベルHで生成し、中央にロゴ用のスペースを空けます。ドット調のコードは四角のコードより余裕が少ないので、ロゴは控えめにして、印刷した結果をテストしてください。

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

暗い背景に明るいドットを置いたものは反転したQRコードで、規格上は許容されていますが、スマホのスキャナーでは読み取りが安定しません。ドットのパターンはそれをさらに悪くします。明るい点がいっそう小さくなるからです。暗いデザインの中であっても、代わりに明るいパネルの上に濃いドットを置いてください。

KoloQRを選ぶ理由

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