PROJECT 02 ROUTE B

Web診断ツール開発

コードを書かずに、ブラウザで動くWebアプリを作る。
Gemini Canvasと専用ツールを駆使し、アイデアを即座に形にする実践ルートです。

💡
APIキーについて：Gemini APIの無料枠は制限が厳しくなっています。スムーズに進めるには有料APIキーの取得を推奨します。

プロジェクト概要

転職タイミング診断

現在の仕事への満足度は？

満足
普通
不満

完成イメージ：Webブラウザで動く診断ツール

  • GOAL AIとの対話だけで「転職タイミング診断ツール」を開発し、WordPressに安全に埋め込めるようにする。
  • TECH HTML, CSS(Tailwind), JS, Gemini Canvas, LP-Architect-Studio
  • SKILL AIへの指示命令、フロントエンド開発、ロジック設計、WordPressへの実装

開発の準備はできていますか？

まずは、Phase 1 の環境構築からスタートしましょう。
このルート専用の司令部を設営するところから、全ては始まります。

B-01: 司令部の設営 (Web編) へ進む

よくある質問 (FAQ)

Q. WordPressに埋め込んだらデザインが崩れました。

A. 親テーマのCSSと競合しています。
B-05で解説しているLP-Architect-Studioの「Partial Embed (Wrapper)」機能を使って、Iframe化された埋め込みコードを生成してください。これにより、外部からのデザイン干渉を完全に防げます。

Q. ボタンを押しても何も反応しません。

A. JavaScriptにエラーが発生している可能性が高いです。
ブラウザでF12キーを押し、「コンソール(Console)」タブに表示される赤文字のエラーメッセージを確認してください。そのエラー文をLesson 05の「治癒ビルダー」でAIに見せれば、原因と修正案を教えてくれます。