フェーズ1：AIプロンプター（全20日）
目標：4週間（20日間） / ゴール：Webデザインの3大構造（HTML・CSS・JS）を分けて美しく運用する
フェーズ1のミッション（ゴール）
架空のクライアントから実務を受注した想定で、AIツール（v0.dev）からコードを抽出し、Geminiを使ってプロ基準の「HTML（骨組み）」「CSS（見た目）」「JS（動き）」の3つのファイルに分離して運用・構築せよ！
役割ごとにファイルを分けるモダンな開発知識を植え付け、Geminiとの対話で1ピクセルまでデザインをこだわり抜き、GitHub経由でVercelへ本番公開し、事業所内でプレゼンを行う。
初学者向けのデザイン副読本（3ファイル分離ガイド付）
v0からの抽出方法や、HTML・CSS・JSに分けるメリットを詳しく解説！
Day 1 〜 Day 20 毎日を迷いなく進む日別カリキュラム
情報設計、AI生成 ＆ 3つのファイルへの分離
Day 1：クライアントの決定 ＆ ターゲット（ペルソナ）設定
提供された3つの架空クライアント（ジム・カフェ・和菓子屋）から1つを選び、理想の顧客像（ペルソナ）をノートやメモ帳に1人具体的に書き出す。
Day 2：プロの目を養う「競合サイトの徹底リサーチ」
インターネットで実際の同業種サイトを3つ探し、使われているメインカラーやフォントの種類、見やすさの理由を分析して記録する。
Day 3：心理学に基づく「黄金構成案」の組み立て
ヘッダーから悩み共感、料金、CTA、フッターに至る売れるLPの基本テンプレートに沿って、情報の掲載順序を文字で整理する。
Day 4：キャッチコピー決定 ➔ 完全原稿（ライティング）の確定
ボタンの中の文言や強みの見出しなどを、日本語としてこれ以上修正の必要がないクオリティまで完全にテキストとして書ききる。
Day 5：v0への投入 ＆ Geminiによる【HTML・CSS・JSへの分離変換】
確定原稿をプロンプトと共にv0.devへ投入して土台を生成。出力されたコードをGeminiに渡し、「index.html」「style.css」「script.js」の3つのファイルに分離・変換させ、パソコンのメモ帳にそれぞれ保存する。内容の抜け漏れがないか職員チェックを受けて第1週をクリア！
デザインの4原則と世界観（Geminiでの微調整）
Day 6：【整列・近接】Geminiによる「美しい余白」のコントロール
手元の `index.html` と `style.css` をGeminiに見せ、「セクションごとの上下余白を均等にし、関連する情報グループを近づけて整列させて」と指示して修正されたCSSを上書きする。
Day 7：【コントラスト】キャッチコピーとCTAボタンの視線誘導強化
一番目立たせたい文字を極大（bold）にし、予約ボタン（CTA）がパッと1秒で視界に入るよう、Geminiと文字サイズや強弱のデザインを研ぎ澄ます。
Day 8：【配色ルール】面積比「70：25：5」の厳格な適用
サイト全体のカラー比率をベース70%、メイン25%、アクセント5%にするようGeminiに指示を出し、`style.css` のカラーコードを美しく整理させる。
Day 9：【反復・タイポグラフィ】フォント統一とパーツの共通化
Google Fontsを読み込み、見出しと本文のフォントを世界観（高級感や親しみやすさ）に合わせて完全に統一。ボタンや箇条書きのアイコンなど同じ役割のパーツを反復デザインにする。
Day 10：中間レビュー ➔ フィードバックをプロンプトに変える訓練
職員（クライアント役）からデザインの改善点の指摘を受け、それを「右の余白を多めにする」「フォントを太くする」などAIが理解できるロジカルな言葉に変換してGeminiに修正させる。
超・レスポンシブ最適化とUIパーツの分離実装
Day 11：デベロッパーツール（F12）によるスマホ表示の検証（バグ探し）
ブラウザで `F12` を押し、スマホモードに切り替えてサイトを徹底検証。横スクロールが発生していないか、文字がはみ出していないかバグを洗い出す。
Day 12：スマホ最適化（レスポンシブブレイクポイント）の個別指示
発見した崩れをGeminiに伝え、`style.css` の中に「スマホ表示（横幅768px以下）の時は縦並びにする、文字を小さくする」といったレスポンシブ用のコードをピンポイントで追記させる。
Day 13：スマホ用ハンバーガーメニューの作成 ＆ `script.js` 運用
スマホ画面の時にメニューを三本線の中に格納し、タップするとメニューが滑らかに表示される制御を、Geminiと一緒につくり、`script.js` に保存して連携させる。
Day 14：よくある質問（FAQ）のアコーディオン開閉アニメーション実装
質問（Q）をクリックすると、答え（A）の箱の高さが滑らかに伸び縮みして現れるモダンな開閉UIアニメーションを、CSSと `script.js` を使って実装する。
Day 15：構造の適正化（セマンティックWeb・SEOリファクタリング）
ただのdivタグの多用を避けるため、Geminiに `index.html` を読ませ、「header, main, section, footerなどの正しい意味のタグにコードをきれいに清書（リファクタリング）して」と指示し適正化する。
品質チェック・GitHub手動納品・本番公開・発表
Day 16：プロの品質保証（QA）① 複数ブラウザチェック ＆ リンク検証
異なる複数のブラウザ（Chrome/Safari/Edge等）で開いて崩れがないか、すべてのボタンやリンクが正しい場所にジャンプするか徹底テストする。
Day 17：プロの品質保証（QA）② 画像の軽量化 ＆ ページ表示速度高速化
画像素材（trainer.png等）の容量を、見た目を保ったまま極限まで軽量な「WebP形式」へ変換するようGeminiに指示し、表示速度を向上させる。
Day 18：GitHubでの「Privateリポジトリ作成」＆ 3ファイルのドラッグ＆ドロップ公開
GitHub上で非公開の安全な金庫（Privateリポジトリ）を作成。完成した「index.html」「style.css」「script.js」と画像フォルダを、画面へ直接手動で放り込んでアップロードする。
Day 19：Vercelダッシュボードへの接続 ＆ 独自ドメインの割り当て設定
Vercelへログインし、GitHubのリポジトリをインポートしてDeployを実行。最後に事業所の独自ドメインのDNS設定を被せ、本番公開を完了させる。
Day 20：フェーズ1修了プレゼンテーション（制作意図のデザイン言語化発表）
成果URLをモニターに映し、「どのターゲットに向け、どんな意図でレイアウトし、配色・フォントのプロンプトをAIに指示したか」を論理的に説明し、自信を持って修了する。