はじめに：Web会議あるある「指示が伝わらない」

リモートワークが当たり前になった今、Web会議での画面共有は日常茶飯事です。しかし、こんなやり取りにストレスを感じたことはないでしょうか？

私：「画面の中段、左から4つ目のフィールドに会社名を入れてください」
相手：「えっと、これですか？」
私：「あ、いえ、そのもう一つ右です…いや、その下の…」
相手：「（ポインタを彷徨わせる）」
「あーーー！そこそこ！そのボタン！」 と心の中で叫ぶあの瞬間です。

ZoomやTeamsの描画機能を使えば良い話なのですが、客先のセキュリティ設定でツールが制限されていたり、ブラウザ上の操作のみで完結させたかったりと、使えない場面も多々あります。

「画面上の項目を、言葉じゃなくて『番号』で伝えられたら楽なのに……」

そう思ったのが、今回の開発のきっかけです。

着想：Windowsのアクセシビリティ機能

「番号で伝える」というアイデアは、実はWindowsの標準機能である音声操作（ボイスアクセス）からヒントを得ました。

参考：音声を使用して画面上の項目を操作する - Microsoft サポート

この機能を使うと、画面上のクリック可能な要素にオーバーレイで番号が振られ、「25をクリック」のように音声で指示ができます。
これをChrome拡張機能として実装すれば、インストールも容易で、どんなWebシステムでも汎用的に使えるはずだと考えました。

作ったもの：「透過ナンバリング」

機能概要
Chrome拡張のアイコンをクリックすると、画面上の入力フィールドやボタンを自動検出し、連番（1, 2, 3...）を表示します。
■完成イメージ

　＊上記のテスト用の「受注登録フォーム」もGeminiで生成しています。

こだわりの仕様

視覚的な順序: HTMLの記述順ではなく、人間が見ている「左上から右下」の順序で番号を振る。
操作を邪魔しない: 番号が表示されていても、クリックや入力はそのまま可能。
オプション: 番号のフォントサイズや色を変更可能。

開発プロセス：Geminiに丸投げ

今回の開発において、私はコードを一切書いていません。すべて生成AIの「Gemini」にお願いしました。
実際の開発ステップは以下の通りです。

ステップ1：ざっくりとした要望を伝える

まず、作りたいもののイメージを自然言語で伝えました。

私からの指示：

Chrome拡張機能を開発して。機能名は「透過ナンバリング」。  
機能をONにすると、Web上の項目に画面上部からナンバリングを行うようにしたい。

たったこれだけで、Geminiは以下のファイルを一瞬で生成してくれました。

manifest.json （設定ファイル）
content.js （メインのプログラム）
style.css （見た目のデザイン）
background.js （裏側の処理）

この時点で、すでに「拡張機能としての体裁」は整っていました。

ステップ2：こだわりポイントを追加する

最初のバージョンでは「フィールドはF01、ボタンはB01」というルールでしたが、使ってみると少し見づらく感じました。そこで、仕様変更を依頼します。

私からの指示：

＃仕様変更  
ナンバリングのルールを変えてください。  
・フィールドとボタンで分けずに通し番号にする  
・ナンバリングの順番は、左上⇒中央⇒右上⇒左中央…の順番で行う事

Geminiはこの指示だけで、複雑な座標計算のロジックを実装したコードに書き換えてくれました。私はコードの中身を一切見ることなく、機能をアップデートできました。

ステップ3：トラブルシューティングもAI任せ

開発中、アイコン画像が表示されないというトラブルが発生しました。昔ならGoogle検索で何時間も調べるところですが、ここでもAIに聞くだけです。

私からの指示：

アイコンが表示されません。パスが正しいか確認して。  
（現在のファイル構成を提示）  
Geminiの回答：  
manifest.json の記述に誤りがあります。PCのローカルパスではなく、相対パスで書く必要があります。以下のように修正してください。

エラーの原因特定から修正コードの提示まで、ものの数秒で解決しました。

開発で不便だったこと

「要件定義」と「コーディング」はGeminiのおかげで爆速でした。
しかし、思わぬところで手間がかかりました。
それは、「ファイルのコピペ作業」 です。

今回の拡張機能は、以下の7ファイルで構成されています。

manifest.json
background.js
content.js
style.css
options.html
options.js
options.css

Geminiはコードを生成してくれますが、「これらをまとめてZIPでダウンロード」 させてくれる機能は（現時点の環境では）ありませんでした。

Geminiの回答画面でファイルごとのコードをコピー
ローカルでメモ帳を開く
ペーストして名前をつけて保存
（次のファイルへ…）

この作業を7回繰り返すのが、正直一番の苦行でした。「ここさえ自動化できれば…！」と思わずにはいられませんでした。

それを嘆いていたところ、同僚から目からウロコの解決策を教えてもらいました。

「Geminiに、『ファイルをZIPでダウンロードできるHTML』を作らせればいいんだよ」

なるほど！その手があったか！

実際に試してみると、ブラウザ上で全ファイルをZIP化してダウンロードできる「専用ツール」を一瞬で作ってくれました。

これはGeminiで複数ファイルを扱う開発をする際に非常に役立つテクニックだと思うので、その時に使用したプロンプトを共有します。

解決策：一括ダウンローダー作成プロンプト

ファイルが出揃ったタイミングで、以下のプロンプトをGeminiに投げます。

今回生成した以下のファイルを、クリックひとつでZIP形式にまとめてダウンロードできるツール（HTMLファイル）を作成してください。

**要件:**
1. **JSZipライブラリ**（CDN）を使用すること。
2. 各ファイルの中身をJavaScriptの変数としてHTML内に直接埋め込むこと。
3. ボタンをクリックすると `extension.zip` がダウンロードされるようにすること。
4. UIはTailwind CSS等を使って見やすくすること。

**対象ファイル:**
- manifest.json
- background.js
- content.js
- style.css
- options.html
- options.js
- options.css

完成品

完成品

下記からダウンロードして試すことができます。

ノンコーディング開発で感じたメリット

今回、Geminiを使って開発をして感じた最大のメリットは以下の3点です。

1.「どう書くか」より「何を作りたいか」に集中できる

JavaScriptの文法やChrome拡張のAPI仕様を覚える必要がありません。「こういう動きにして」と伝えるだけで済みます。
2. 修正や仕様変更が爆速
「やっぱり文字を大きくして」「英語対応して」といった変更も、チャットで頼むだけで完了します。手作業での書き換えミスも起きません。
3. 挫折ポイントを回避できる
環境構築や設定ファイルの書き方など、初心者が最初につまずくポイントをAIが全て代行してくれます。

おわりに

「自分専用の業務効率化ツールが欲しいけれど、プログラミングは難しそう…」と諦めていた方こそ、ぜひGeminiなどの生成AIを使ってみてください。

必要なのはプログラミング言語の知識ではなく、「どんな道具が欲しいか」を具体的にイメージして伝える力だけです。

みなさんも、AIという優秀なパートナーと一緒に、業務改善ツールを作ってみてはいかがでしょうか？