Route B
Phase 1 : Setup
B-01：司令部の設営 (Web編)
LP-Architect-Studioとブラウザツールの使い方
このレッスンでは、コードを書かずにWebアプリケーションを開発するための「武器」と「作業場」を準備します。
Route A（Python開発）とは異なり、黒い画面（コマンドプロンプト）はほとんど使いませんのでご安心ください。
1. 司令塔「LP-Architect-Studio」のセットアップ
このツールは、AIへの複雑な指示書（プロンプト）を自動で作ったり、完成したコードをWordPressに安全に埋め込むための「司令塔」の役割を果たします。
セットアップ手順
- Gitを使ってツールをクローンします。
git clone git@github.com:okihiro-ai-creative/LP-Architect-Studio.git - フォルダの中にある
_setup.batをダブルクリックします。必要なライブラリが自動でインストールされます。 systemフォルダ内に自動生成されたapi_key.txtをメモ帳などで開き、Google AI Studioで取得したAPIキーを貼り付けて保存します。- フォルダ内の
_run.batをダブルクリックしてツールを起動します。（初回はライセンス認証が必要です）
2. 作業場「Gemini Canvas」の基本
Gemini Canvasは、AIとの対話を通じてリアルタイムでWebページのデザインを生成・修正できる、私たちのメインの作業場です。
操作の基本
- Gemini にアクセスし、プロンプト入力欄の左にある「＋ ツール」ボタンをクリックします。
- 表示されたメニューから「Canvas」を選択します。
- プロンプトを入力して送信すると、画面が左右に分かれ、右側にプレビューが表示されるCanvasモードが起動します。
- 左側のチャット欄に「ボタンを赤くして」などと指示を出すと、右側のプレビュー画面に結果がリアルタイムで反映されます。
3. 羅針盤「ブラウザ検証ツール」の使い方
AIが作ったコードの中身を覗いたり、簡単な修正を試したりするための必須ツールです。難しい機能は不要で、2つの操作だけ覚えれば十分です。
① 要素の選択
ページ上で右クリック →「検証」（または F12キー）でツールを開き、左上の矢印アイコンをクリック。その後、ページ上の気になる部分をクリックすると、対応するHTMLコードがハイライトされます。
② スマホ表示の確認
検証ツールの上部にあるスマホのアイコンをクリックすると、スマートフォンでの表示をシミュレートできます。レスポンシブデザインの確認に必須です。