Mandumon
日本語

自分の画像・絵文字の形でQRを作る：シルエットQRガイド

ハートや餃子といった基本の形から、自分の絵文字・画像のシルエットまで。形QRの仕組み、背景の削除、位置の調整、スタイルと形プリセットの組み合わせ、印刷時の注意点をまとめました。

公開日
更新日

QRコードは、たいてい正方形です。では、ハートや餃子、お気に入りの絵文字、お店のマスコットの形をしたQRコードだったらどうでしょう。ひと目で目を引き、何のためのQRなのかが形を見るだけで伝わります。この記事では、デザインQRで「全体の形」を選んだり、自分の絵文字や画像をシルエットにしたりして、形QRを作る方法を順を追って説明します。装飾したQRがなぜ読み取れるのかという一般的な仕組み（誤り訂正、余白、コントラスト）は別の記事で解説しているので、ここでは形を作る実作業に絞ります。

シルエットQRの仕組み：中央は本物のQR、外側は装飾

形QRといっても、QRコードそのものをハート型に押し込めるわけではありません。それではスキャナーが読み取れません。デザインQRは、中央に普通の正方形のQR本体をそのまま置き、本体の外側で、選んだ形の内側のスペースを装飾ドットで埋めます。見た目にはハートや星の形全体が見えますが、カメラが読み取るのは中央の本体です。

本体と装飾の間には空白の帯があります。これは本体の余白のような役割をして、装飾ドットが本物のモジュールに紛れ込まないようにします。装飾ドットは、形の内側に完全に収まるセルにだけ置かれるため、輪郭がくっきり保たれます。

  • 本体：データを持つ本物のQRです。形を変えても、その構造は変わりません。
  • 空白の帯：本体と装飾ドットの間の余白です。
  • 装飾ドット：形を埋めてシルエットを作るドットです。データは持ちません。

どの形を選んでも、本体は元のコードのままなので、読み取り結果は同じです。デザインQRは、編集中にもプレビューの読み取りを試みるので、結果をすぐに確認できます。形が狭くて本体が収まらない場合は、本体を形の外へ少し広げ、お知らせが表示されます。中身の詰まった形のほうが、シルエットはきれいに保てます。

基本の9つの形と選び方

内蔵の全体の形は、四角、円、ハート、星、吹き出し、雲、角丸四角、餃子、新郎・新婦です。絵文字と画像のオプションを加えると、11種類から選べます。エディターの「全体の形」で、クリックするだけで適用されます。

  • 四角：初期設定で、装飾はありません。普通のQRです。
  • 円と角丸四角：本体に十分な余裕を残すので、もっとも安定しています。メニュー、名刺、ステッカーに向いています。
  • ハートと星：とがった角やくぼみがあるため、内側の余裕が相対的に少なくなります。見映えはとても良いのですが、少し大きめに印刷してください。
  • 吹き出しと雲：チャット、口コミ、サポートへのリンクに自然に合います。
  • 餃子：マンドゥモンを象徴する形です。
  • 新郎・新婦：結婚式の招待状やゲストのご案内のための、カップルの形です。

形の輪郭線オプションは、形の縁に沿って細い線を描きます。装飾ドットだけではシルエットがぼんやり見えるときにオンにしてください。餃子とウェディングのプリセットは、はじめから輪郭線がオンになっています。

絵文字・画像の形を作る

「全体の形」で「絵文字」を選ぶと、絵文字ピッカーが開きます。一覧から選ぶか、入力欄に絵文字を1文字入力してください。お使いのブラウザーが描画した絵文字がシルエットになり、その内側が装飾ドットで埋められます。

  1. 「全体の形」で「絵文字」を選びます。
  2. ピッカーで絵文字を選ぶか、「絵文字1文字」の欄に入力します。
  3. プレビューで、シルエットとQR本体の位置を確認します。
  4. 必要に応じて、後述のとおり位置とサイズを調整します。

家族や国旗のように複数の文字を組み合わせた絵文字も、1つとして扱われるので問題なく使えます。複数入力した場合は最後の1つだけが残り、絵文字以外を入力すると、絵文字を1文字入力するよう促すメッセージが表示されます。

絵文字は端末やOSによって見た目が違うため、自分の画面での形と、ほかの人に見える形が少し違うことがあります。ダウンロードしたファイルは、プレビューで見ているものと一致します。

「全体の形」で「画像」を選び、PNG、JPG、WebPのファイルを選択してください。15MBまでのファイルを受け付けており、背景が透明な画像だと最良の結果が得られます。透明でない画像の場合は、端につながっている明るい背景を外側とみなし、シルエットから除外します。

画像は端末内だけで処理され、サーバーには送信されません。最近使った画像は最大8枚まで、このブラウザーにのみ保存されるので、あとから選び直せます。1枚ずつ削除することも、すべて消去することもできます。

シルエットに向いた画像は、輪郭がはっきりしていて、大きなべた塗りの部分があり、内側がほぼ埋まっているシンプルなものです。マスコット、ロゴの輪郭、動物のシルエット、手描きのイラストなどがよく合います。

  • 透明なPNGがもっとも正確な輪郭になります。
  • 細い線や、離れた小さなパーツが多いと、装飾ドットを置けるセルが足りなくなります。
  • 内側の大きな穴は、形の外側として扱われます。
  • 極端に細長い形は本体が小さくなるので、避けてください。

「背景を消す」で写真をシルエットにする

写真には普通、背景が付いていて、そのままアップロードすると長方形全体が形になってしまいます。画像をアップロードすると「背景を消す」ボタンが表示されます。エディターが開くのはボタンを押したときだけで、自動では開きません。残した部分が、新しいシルエットになります。

  • AIによる選択：残したい部分をタップすると、その被写体を見つけ出します。何度かタップすると、選択範囲を結合できます。
  • 端の背景の自動削除：外周でいちばん多い色を探し、端につながっている背景だけを消します。被写体の内側にある同じ色はそのまま残ります。
  • 消しゴムと復元ブラシ：サイズは1〜150px。復元ブラシは、もともと不透明だった部分だけを元に戻します。
  • 元に戻す・リセット：元に戻すは最大30段階で、リセットも取り消せます。

AIはブラウザーの中のモデルで動作し、画像もタップした位置も外部のサーバーには送信されません。モデルはAIツールを初めて使うときに読み込まれ、グラフィックス処理の高速化に失敗した場合はCPUで再試行します。AIが失敗しても、手動のツールは引き続き使えます。

完了すると、残したピクセルから形が再計算され、QR本体は自動の位置に戻ります。仕上がりに満足できない場合は、「元の画像に戻す」で最初にアップロードした画像のシルエットに戻せます。エディターをキャンセルすると、現在の画像は変更されません。

QR本体の位置とサイズを調整する

絵文字と画像の形では、「QRの位置」グループが表示されます。自動配置では、形の内側に収まる最大の正方形を探して置きます。たいていはそのままで構いませんが、描かれた顔を避けたいときや、偏った形を補正したいときには、本体を動かすと便利です。

  • ドラッグ：プレビュー上のQR本体を、指またはマウスでつかんで動かします。タッチ操作にも対応しています。
  • 横の位置・縦の位置：0〜100%のスライダーです。
  • QRのサイズ：自動サイズの40〜100%です。本体と装飾の間の空白の帯も、同じ比率で縮みます。
  • 自動配置：手動の設定を解除して、元の配置に戻します。

ドラッグしている間は読み取りの確認が省かれ、指を離すと再び実行されます。この確認が終わるまで、書き出しは無効のままです。本体が形の外へはみ出したり、内側の穴に重なったりすると、QR本体が形の外に出ているという警告が表示されます。本体が切り取られることはないので、警告が消えるまで位置やサイズを調整してください。

別の形を選ぶ、絵文字を変える、画像をアップロードまたは削除する、といった操作をすると、位置は自動に戻ります。古い座標がもう意味を持たないからです。一方、スタイルプリセットを変えても、手動で設定した位置は保たれます。四角や円などの内蔵の形では、手動配置は使いません。

スタイルプリセットと形プリセットの組み合わせ

デザインQRのプリセットは2種類あります。スタイルは、色、ドットの形、目（四隅の大きな四角）の形、フレームを制御します。形プリセットは、カフェメニュー、ピンクハート、餃子、ウェディングです。この2つは独立して選択できます。

  • スタイルを選ぶと、色、ドット、目、フレームだけが変わります。全体の形、輪郭線、絵文字や画像の形、その位置、装飾の濃さはそのまま残ります。
  • 形プリセットを選ぶと、形とその専用設定だけが変わります。前の形の輪郭線や位置などの名残は消去されます。
  • 形プリセットの色が適用されるのは、現在のスタイルが初期設定のミニマルのときだけです。すでに別のスタイルを選んでいる場合、その色には手を加えません。
  • アップロードしたロゴは、どのプリセットでも削除されたり上書きされたりしません。

つまり、順番は自由です。ピンクハートで形を決め、そのあとパステルのスタイルをタップすると、ハートはそのままで、色とドットだけが変わります。スタイルを先に選び、形プリセットをあとから選んだ場合も、スタイルは保たれます。片方を手動で編集した場合は、その側の選択マークだけが外れます。

装飾の濃さは、四角以外のすべての形で表示され、100%か60%を選べます。60%にすると、装飾が本体より薄くなるので、本体が際立ち、形はやわらかい背景のように見えます。装飾がコードより目立ってしまうときは、60%を試してください。

アイデアと印刷のヒント

形QRは、QRそのものが主役になる場面で映えます。以下のアイデアは提案であり、結果を約束するものではありません。

  • カフェ・飲食店：丸い形のカフェメニュープリセットは、テーブルのステッカーやカップスリーブに合います。
  • 結婚式：招待状の裏面やゲストのご案内カードに、新郎・新婦の形を使います。
  • プロフィール・SNS：トレードマークの絵文字やキャラクターを形にして、プロフィールのリンク先ページに使います。
  • イベント・チームグッズ：チームのマスコットの形のQRで、ステッカーやシャツを作ります。
  • 店舗のプロモーション：吹き出しは、口コミのお願いや問い合わせ窓口に合います。

印刷には、少し余分な注意が必要です。本体は全体のサイズの一部にすぎないので、同じ印刷幅でも、通常のコードより小さくなります。ハートや星のように本体の占める割合が小さい形は、より大きく印刷する必要があります。適切な最小サイズは、読み取る距離、内容の長さ、プリンターによって変わるので、どれか一つの数値を信じるよりテストするほうが確実です。

  1. まず、最終的な実際のサイズで1枚印刷します。
  2. iPhoneとAndroidの標準カメラの両方で読み取ります。
  3. 実際に人が立つ距離と照明の下で読み取ります。
  4. 開いたアドレスが意図したものかを確認します。
  5. ダウンロードしたファイルを使う場合は、エディターのプレビューではなく、そのファイルを確認します。

装飾の濃さを60%に下げた場合、白黒印刷や薄い紙では装飾がほとんど消えてしまうことがあるので、試し刷りで形が十分に見えるか確認してください。本体は影響を受けないため、これは見た目の問題であり、読み取りの問題ではありません。ベクターが必要な印刷物には、PNGの代わりにSVGで保存するという方法もあります。

デザインQRで試してみよう

デザインQRは、登録なしでブラウザー上で無料で使えるツールです。入力した内容やアップロードした画像はサーバーに送信されず、端末内で処理されます。まずは基本の形を一つ選んで読み取れることを確認し、それから絵文字や画像の形に進んで、位置とサイズを微調整してみてください。一度に一つずつ変更すれば、読み取れなくなったときに原因を見つけやすくなります。

デザインQRを開く

← ガイド