← Yoshiki Web Studio｜配布資料

📹 実機操作の解説動画

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

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

方法A：Claude Design方式の操作

1
Claude Design でテンプレを生成する
業種・雰囲気の指定方法／生成テンプレの見方／気に入らない時の再生成のコツ
準備中
2
Claude で顧客情報に書き換え
テンプレを Claude に読み込ませる方法／一括置換のプロンプト／確認ポイント
準備中
3
配色・写真の差し替え
Tailwind の配色変更／無料素材サイト／AI 生成画像の挿入
準備中

方法B：画像生成方式の操作

4
ChatGPT で HP の雰囲気を画像生成
プロンプトの組み立て方／業種別のコツ／生成画像の選び方
準備中
5
Claude Code で画像からコーディング
画像の渡し方／Next.js + Tailwind の指示／微調整プロンプト
準備中

共通：デプロイと公開

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

関連リンク

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

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