【実演】Webツールを「Gemini 3」でローカル移植！対話型開発の完全ガイド

はじめに：Webツールの限界を突破する

既存のWebツールを使用していて、「ファイルを直接読み込ませたい」「APIコストを自分で管理したい」と感じたことはありませんか？

今回の実演動画では、Web版として公開されている「LP Prompt Builder」を題材に、Googleの最新AIモデル「Gemini 3 Pro」等の力を借りて、機能を拡張したローカルアプリ（Python製ツール）へと移植・再開発するプロセスを解説します。

プログラミングの知識がなくても、AIに対して的確な指示を出す「司令官」として振る舞うことで、高度なツール開発が可能になります。

使用ツールとAIモデル

本開発では以下の最新環境を使用します。

• Google AI Studio: Geminiモデルを操作するための開発環境。
• Gemini 3 Pro (gemini-3-pro-preview): 要件定義や複雑なコード生成に使用。推論能力が極めて高いメインの頭脳です。
• Gemini 2.5 Flash (gemini-2.5-flash): ツール稼働時のコストパフォーマンスに優れた高速モデル。
• VS Code (または任意のテキストエディタ): 生成されたコードの確認や保存に使用。

実演ワークフロー解説

STEP 1: 概念実証と要件定義

いきなりコードを書かせるのではなく、まずはAIと対話し、これから作るツールの解像度を高めます。

Web版ツールの課題点（例：ファイル読み込みが手動で面倒）を伝え、「これをローカルツール化してファイル参照できるようにしたい」と相談します。OKIHIRO氏の実演では、以下のように段階を踏んでいます。

1. 現状の情報をAIに渡す（「こんな講座をやっています」「こんなツールがあります」）。
2. AIに「理解度を簡潔に報告して」と指示し、認識のズレがないか確認する。
3. 「つまり、ページ作成と単体ツール作成ですね？」といったAIの問いかけに対し、さらに要件を絞り込む。

ポイント：AIにすべてを丸投げせず、「70点〜85点」程度の要件をこちらから提示し、残りをAIに補完させるスタンスが重要です。

STEP 2: 開発用プロンプトの生成

要件が固まったら、実際にツールを開発させるための詳細な「開発指示プロンプト」を作成します。ここでは、ツール開発専用のプロンプトビルダー（OKIHIRO氏自作）を使用していますが、要点は以下の通りです。

• ゴールの明確化: 「入力フォルダ内のファイルを読み込み、要約してからLP生成プロンプトを作るツール」と定義。
• UI/UXの指定: 「要約ボタン」「プロンプト生成ボタン」「コピーボタン」など、必要な機能を列挙。
• モデルの使い分け: 要約には高速なモデル、生成には高精度なモデルを切り替えられる設定画面を要求。

STEP 3: 実装とデバッグ（AIとの共同作業）

生成されたプロンプトを Google AI Studio の Gemini 3 Pro に投入し、Pythonコードを生成させます。

ここで重要なのは、一発で完璧な動作を期待しないことです。動画内でも以下のエラーや問題が発生し、それをAIと共に解決しています。

• SyntaxError（構文エラー）: 生成されたコードに記述ミスがあった場合、エラーログをそのままコピーしてAIに「修正して」と伝えます。
• API制限エラー（429 Resource Exhausted）: 入力データ量が無料枠の上限（Flash Lite等の制限）を超えてしまった際に発生。これを機に、入力ファイルの選定やモデル設定（gemini-2.5-flash 等への変更）を見直します。

STEP 4: UI改善と視覚情報の共有

ツールが起動しても、レイアウトが崩れていたり、ログが表示されず動作状況が分からない場合があります。

AIはコードの論理構造は理解していても、「実際の画面がどう見えているか」は知りません。そこで、OKIHIRO氏はツールのスクリーンショットを撮り、それをプロンプトに添付して修正を指示しています。

この「視覚情報の共有」により、AIは意図した通りのGUI修正を行えるようになります。

OKIHIRO流：司令官の視点（プロのコツ）

1. スクリーンショットは最強の指示書

GUI（画面）開発において、言葉だけでレイアウトを説明するのは非効率です。動画内でも、崩れたレイアウトのスクショをAIに見せることで、一瞬で意図を理解させ、修正に成功しています。エラーが出た際も、エラー画面のスクショを貼るのが最も確実な伝達手段です。

2. ハードコードを避ける

「モデル名」や「プロンプトの内容」をPythonコードの中に直接書き込む（ハードコードする）と、修正のたびにコードを書き換える必要があり面倒です。設定ファイル（Config）や外部テキストファイルに分離するよう指示し、後から簡単に変更できる設計にさせましょう。

3. API制限への理解

開発中はトライ＆エラーを繰り返すため、APIの利用回数やトークン量が増えがちです。特に無料枠を使用する場合、各モデル（gemini-2.5-flash-lite 等）の制限（RPM/TPM）を把握し、エラーが出たら「使いすぎたかな？」と疑える勘所を持つことが大切です。

まとめ＆ネクストアクション

本記事では、Gemini 3 Proを活用してWebツールをローカルアプリへ移植する手法を解説しました。

• 要件定義は対話で詰める。
• エラーはログとスクショでAIに報告する。
• 視覚的な修正は画像を添付して指示する。

これらのポイントを押さえれば、あなたはコードが書けなくても、優秀なAIエンジニアを指揮する「司令官」として自分だけのツールを生み出すことができます。まずは身近なWebツールの機能をリストアップし、「これをローカルで動かすには？」とAIに相談することから始めてみましょう。

この記事の自動化に使われた技術と思考法は、
すべて以下のアカデミーでインストールできます。

【売る力】
AI Web Architect

「この記事」や「売れるLP」を自動構築するスキルを習得。

【作る力】
AI-Driven 開発

プログラミング不要で「自分だけのツール」を開発するスキルを習得。