📹 実機操作の解説動画

資料①「HP制作の進め方」の各ステップを実際の画面で見せる解説動画集

📘 関連資料:資料①「HP制作の進め方」 🎬 形式:YouTube 限定公開 / 各5-15分
💡 テキストでは伝わりにくい 「実際にどの画面でどこをクリックするか」 を解説。受講者専用の限定公開動画として順次公開予定。

STEP1:構成案づくりの操作

1
AIと対話しながら構成案をまとめる
リサーチ結果の渡し方/ページ構成の決め方/訴求軸の決め方
準備中

STEP2:デザイン画像の生成(Codex)の操作

2
Codex で HP デザイン画像を生成する
プロンプトの組み立て方/業種別のコツ/同じ指示で4パターン出して選ぶ方法
準備中

STEP3:Claude Codeでコーディングの操作

3
Claude Code で画像からコーディング
画像の渡し方/Next.js + Tailwind の指示/微調整プロンプト
準備中
4
配色・写真の差し替え
Tailwind の配色変更/無料素材サイト/AI 生成画像の挿入
準備中

共通:デプロイと公開

5
GitHub にプッシュして Cloudflare Pages 公開
GitHub リポジトリ作成/Cloudflare Pages 連携/独自ドメイン設定
準備中
6
よくある詰まりポイント7選 実演
資料①スライド12の各ケースを実際の画面で再現+対処
準備中

関連リンク

📘 資料①「HP制作の進め方」(スライド版)

📋 リサーチ用プロンプト営業文用プロンプト