【完全ガイド】AIで診断ツール開発！プロンプト生成からWordPress埋め込みまで

はじめに（開発のゴール）

今回は、AIに指示を出す「司令官」として振る舞い、プログラミング不要でインタラクティブなWeb診断ツールを開発する手法を解説します。最終的なゴールは、ユーザーの回答に応じて結果が分岐し、メールアドレスを登録すると詳細レポートが見られる、というマーケティングにも活用できるツールを完成させることです。このプロセスを通じて、AIを単なるアシスタントではなく、開発の主体として活用するスキルを習得しましょう。

使用ツールと創成の呪文

今回のワークフローでは、複数のツールを連携させて開発を進めます。それぞれの役割を理解しておきましょう。

• 診断ツールプロンプトビルダー: 診断ツールの質問、選択肢、スコア、結果分岐などを入力するだけで、AIへの詳細な指示書（プロンプト）を自動生成するアカデミー専用ツールです。
• Gemini (Pro Model) & Canvas: プロンプトを実行し、コードを生成・修正するためのメイン環境です。Canvas機能を使うことで、リアルタイムにプレビューしながら対話形式で開発を進められます。
• Google AI Studio: Gemini Canvasで修正が困難な複雑なバグや、特定の環境（テーマ）に依存する問題を解決するための「セカンドオピニオン」として活用します。
• LP Architect Studio (Partial Embed Wrapper): 開発したツールをWordPressなどのサイトに埋め込む際に、テーマのCSS（デザイン）が干渉して表示が崩れるのを防ぐための専用ツールです。

開発の起点となる「創成の呪文（プロンプト）」は、「診断ツールプロンプトビルダー」で生成されたものがベースとなります。

実演ワークフロー解説

それでは、実際の開発手順をステップバイステップで見ていきましょう。

STEP 1: プロンプトビルダーでツールの設計図を作成

まず、『診断ツールプロンプトビルダー』で開発したいツールの仕様を定義します。診断名、キャッチコピー、質問項目、選択肢ごとのスコア、そしてスコア合計に応じた診断結果を具体的に入力します。入力が完了したら、「設計図プロンプトを生成する」ボタンをクリックします。すると、以下のような詳細な指示書が生成されます。

あなたはプロのフロントエンドエンジニアです。以下の仕様に基づいて、インタラクティブな診断ツールをHTML、CSS、JavaScriptを使用して作成してください… # 診断名 あなたの市場価値を知る！転職タイミング診断 # 質問リスト – 質問1: 現在の仕事の満足度は？ – 選択肢1: とても満足 (スコア: 0) – 選択肢2: 不満 (スコア: 20) – 質問2: 今すぐに転職したいですか？ – 選択肢1: はい (スコア: 10) – 選択肢2: いいえ (スコア: 0) # 結果分岐 – スコア 0-19: 今は待ちましょう… – スコア 20-29: 1ヶ月以内に。比較的早めの転職を… – スコア 30以上: 今が絶好の転職期！… （…以下、デザインや機能要件の詳細が続く）

このプロンプトをクリップボードにコピーします。

STEP 2: Gemini Canvasでツールを初回生成

次に、Geminiを開き、モデルが「Gemini Pro」になっていることを確認します。そして、「ツール」から「Canvas」を有効にします。これにより、画面が2分割され、右側にリアルタイムプレビューが表示されるようになります。左側のチャット欄に、STEP 1でコピーしたプロンプトを貼り付けて実行します。

STEP 3: 対話形式でのデバッグと修正

AIがコードを生成し、Canvasにプレビューが表示されます。しかし、初回生成ではデザインが崩れたり、意図しない挙動をすることがあります。動画内では、診断結果のテキストが背景と重なったり、画面下部が見切れてしまう問題が発生しました。このような場合、問題点を具体的に指示して修正させます。

ポイントは、スクリーンショットを添付することです。 問題箇所を画像で見せることで、AIは修正箇所を正確に特定できます。

結果のテキストが背景と重なっており、ボタンの下が見切れています。修正してください。（ここにスクリーンショットを添付）

このように対話を繰り返し、ツールの完成度を高めていきます。

STEP 4: WordPress埋め込みとテーマ互換性の確認

Canvas上でツールが完成したら、「共有」からコードをコピーし、実際にWebサイトに埋め込んでみます。今回はWordPressテーマの「Cocoon」と「Affinger」でテストしました。

• Cocoon: 問題なく表示・動作しました。
• Affinger: テーマ側のCSSが強く影響し、見出しの文字が黒色に変わり、背景に溶け込んで見えなくなってしまいました。

このように、使用している環境（テーマ）によってデザインが崩れることは頻繁に起こります。

STEP 5: 『LP Architect Studio』でデザイン崩れを防止

テーマとのCSS干渉を防ぐため、『LP Architect Studio』の『Partial Embed Wrapper』機能を利用します。生成したツールのコードを貼り付けてボタンを押すだけで、コード全体を<iframe>という特殊なタグで囲んでくれます。これにより、ツールが外部のCSSから隔離され、デザイン崩れを強力に防ぐことができます。

STEP 6: Google AI Studioで最終調整

<iframe>で囲んだ結果、Affingerでの文字色問題は解決しましたが、今度はツール全体の下部が見切れるという別の問題が発生しました。このような複雑な問題は、同じAI（Gemini Canvas）に何度も指示するより、別の視点を持つAIに相談する方が効率的です。

そこで、<iframe>で囲まれたコードをGoogle AI Studioに持ち込み、改めて修正を依頼します。

このコードをWebサイトに埋め込んだところ、下が見切れてしまいます。どんなテーマや環境でも、コンテンツの高さに合わせて全体が自動的に表示されるように修正してください。

AI Studioが修正した最終コードをコピーし、再度WordPressに貼り付けます。これで、どのテーマでも正しく表示される汎用的な診断ツールが完成しました。

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

このワークフローには、AIを効果的に活用するためのプロの思考法が詰まっています。特に重要な3つの視点を解説します。

なぜAIは指示にない質問を追加したのか？

動画の途中で、AIが指示していない質問を2つ追加する場面がありました。これは、AIが「質問が2つだけでは診断ツールとして不十分だ」と判断し、良かれと思って補完したためです。これを防ぐには、プロンプトに「勝手に質問を増やさないこと」「必ず指定した質問の数と内容で作成すること」といった「禁止事項」を明確に記述することが重要です。AIをコントロールするには、やってほしいことだけでなく、やってほしくないことも伝える必要があります。

Canvasで詰まったら、AI Studioに相談する「壁打ち思考」

Canvas上で「結果のぼかしが表示されない」という修正を3回繰り返しても直らない場面がありました。同じAIに同じ指示を繰り返しても、堂々巡りになることがあります。これはAIが一度「これが正しい」と思い込むと、その考えから抜け出しにくくなるためです。このような時は、人間が別の専門家に相談するように、別のAI（今回はGoogle AI Studio）にコードを持ち込んで「壁打ち」するのが極めて有効です。異なる視点からコードを解析させることで、解決の糸口が簡単に見つかることがよくあります。

テーマ特化の修正依頼はNG？「汎用性」を意識した指示のコツ

Affingerで表示が崩れた際、「Affingerで動くように直して」と指示するのは得策ではありません。なぜなら、AIは特定のテーマの最新の仕様を完全に把握しているわけではないからです。より効果的なのは、「どんなテーマでも表示が崩れないように、汎用的な対策を施して」と指示することです。これにより、AIは特定の環境に依存しない、より堅牢なコード（例えば、CSSのリセットや高さの動的調整など）を提案してくれます。問題の根本原因にアプローチするこの思考法が、修正の手戻りを減らす鍵となります。

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

今回は、以下の戦略的なワークフローでWeb診断ツールを開発しました。

1. 設計(プロンプトビルダー): ツールの仕様を定義し、AIへの指示書を作成。
2. 生成(Gemini Canvas): 指示書を元にツールを高速でプロトタイピング。
3. デバッグ(Canvas & AI Studio): Canvasでの対話修正と、AI Studioへの「壁打ち」による高度な問題解決。
4. 実装(WordPress & 専用ツール): 環境依存の問題を専用ツールで解決し、最終コードを実装。

AI開発は、単一のツールで完結するものではありません。それぞれのツールの得意・不得意を理解し、司令官として適切に使い分けることで、開発の速度と質は飛躍的に向上します。ぜひ、あなたも『診断ツールプロンプトビルダー』を使って、自分だけのオリジナル診断ツールの開発に挑戦してみてください。