【Google AI Studio】時短クッキング No.46：デザイン指定やアニメ表現が可能なQRコード作成アプリ

前回は、QRコードの読み取り実験を行うアプリを公開しました。

そこで今回は、逆にQRコードを作成するアプリ「Artistic QR Studio」を作ってみました。

それだけではおもしろくないので、ドットのデザイン変更、中央へのアニメ配置、背景に画像を入れる機能なども実装しています。

どんなQRコードが作成できるのか？

本アプリで作成したQRコードを紹介します。
これらの機能は、ある程度組み合わせて使用することも可能です。
ちなみに、このサンプルの飛び先はすべてGoogleです。

通常のQRコード

丸ドットQRコード

背景画像入りQRコード

中央画像入りQRコード

静止画アニメQRコード

文字出力QRコード

アニメGIF・APNG動画QRコード

🚀 一番簡単なクイック作成の流れ

まずは、シンプルなQRコードを作成する手順を紹介します。

1. URLを入力する: 図の ① に、飛ばしたいサイトのURLを入力します。

2. 保存する: 図の ③ または ⑥ の「GIF保存」または「PNG保存」ボタンを押す。これで画像がダウンロードされます。

こだわりのQRコードの作り方

ここからは、本アプリを使った、少しマニアックなQRコードの作成方法です。

ドット形状を変えるには

「基本設定」の「ドット形状」と「角の形状」を選択してください。
正方形だけでなく、丸や角丸など、さまざまな表現が可能です。

背景画像を入れるには

背景画像を用意したら、「背景をD&Dまたはクリック」でアップロードします。
背景とドットの区別がつくように、「背景の不透明度」を調整してください。

中央にアイコン画像を入れるには

アイコン画像を用意し、「クリックまたはドロップ」でアップロードします。
静止画（GIF、PNG）だけでなく、動画（アニメGIF、APNG）も中央に表示できます。

「ホールサイズ」で中央の穴のサイズを指定できます。
また、「画像サイズの微調整」で貼り付けた画像の大きさを調整できます。
サイズを大きくしてドットに重なっても、誤り補正が働くため基本的には読み取れますが、最終的には必ず確認してください。

静止画アニメにする

中央に読み込んだ画像が静止画（GIF、PNG）の場合、静止画アニメにできます。
「アニメーション（画像動き）」ボタンを押すことで、スクロール・点滅・回転などの演出が可能です。

文字出力を行う

中央に設定した文字を、1文字ずつ表示できます。
「文字アニメーション」欄に文字を入力し、「間隔」で表示時間を指定してください。

画像表示と文字表示のコンビネーション

動画（アニメGIF、APNG）や静止画アニメは、単体使用の場合は無限ループします。
文字表示を同時に指定した場合は、画像と文字が交互に表示されます。

• 「静止画アニメ＋文字表示」の場合
  静止画アニメの繰り返し回数を「繰り返し」ボタンで指定可能

• 「動画＋文字表示」の場合
  どちらも1回ずつ交互に表示されます

🛠 リファレンスマニュアル

図番号に対する各エリアの機能は次の通りです。

① QRコードの内容

ここに入力したURLがQRコード化されます。URL以外の文字列でも構いません。入力すると、リアルタイムでプレビュー（③）が更新されます。

② 基本設定（QRのデザイン）

QRコードのデザインをカスタマイズします。

• 解像度: QRコードの画像サイズを4種類から選択します。印刷用なら大きめの「1024px」がおすすめです。

• 縁の幅: QRコードの周りの縁の幅を調整できます。

• ドット・角の形状: 正方形だけでなく、丸や角丸に変更して柔らかい印象にできます。

• 誤り訂正レベル: QRコードは一部が多少欠損しても、誤り補正によって保管される特徴があります。本項目は、そのレベルを選択します。基本的には、欠損に強い 「H (30%)」 を設定してください。それ以下だと読み取れないことがあります。

• カラー設定: ドットの色と背景色を設定します。

③ プレビューエリア

出力イメージをを確認するためのエリアです。アニメーションの場合、リアルタイムプレビューできますので動きのチェックにご利用ください。
「リセット」ボタンを押すと、編集中のQRコードをすべてクリアーして最初からになります。

④ 中央アイコン

QRコードの中央にホール（穴）を作り、そこにアイコン画像をレイアウトするためのエリアです。

• アップロード: 画像をドラッグ＆ドロップするかファイル選択してアップロードします。アニメGIFとAPNGの動画のアップロードも可能です。

• ホールサイズ: 中央のQRのドットをどれくらい消してスペースを作るかを選択します。

• 微調整: アイコン画像のサイズを微調整するボタンです。微調整でアイコン画像を拡大して、ホールよりも大きく表示することもできますが、誤り訂正の適用範囲かどうかを必ず確認してください。

• 画像動き: アップロードしたアイコン画像が静止画のときにアクティブになります（アニメGIFとAPNGの場合は非アクティブになります）。アイコンを回転させたり、上下にスクロールさせたりして、目を引く動画QRコードを作ることができます。

• 文字アニメーション: ここに文字列を設定すると、文字が一定時間ごとに1文字ずつ表示されます。メッセージが表現できます。

⑤ 背景設定

背景に好きな画像を敷くことができます。

• 不透明度: 背景が濃すぎるとQRが読み取りにくくなるため、スライダーで薄さの調整をしてください。

• レイアウト: 「全面表示」で画像全体サイズになります。「QRサイズ」でQRコードのサイズになります。

• 背景をD&Dまたはクリック: 画像をドラッグ＆ドロップするかファイル選択してアップロードします。GIFとPNG形式に対応しています。

⑥ ヘッダーメニュー

• GIF保存: GIF形式（もしくはアニメGIF形式）で保存します。

• PNG保存: PNG形式（もしくはAPNG形式）で保存します。

公開URL

本アプリをデプロイして公開しました。
Webブラウザがあれば、誰でも利用できるバージョンです。

シェアURL

Google AI Studio環境で使えるバージョンです。

まとめ：認識できなきゃ意味がない

本アプリを使えば、単調なQRコードを視覚的に楽しく彩ることができます。
しかし、最も重要なのは「誰が使っても、正しく認識できること」に変わりありません。

QRコードは誤り補正によって非常に堅牢ですが、
誤り補正レベルを下げたり、背景を強くしすぎたり、
アニメーションで重くなって表示しづらくなってしまっては本末転倒です。

本アプリは、QRコードの可能性を探る目的で実験的に作成したものです。
実際のプロモーション用途で使用する場合は、複数のスマートフォンで、短時間に正しく読み取れるか必ずテストすることをおすすめします。

以上！