AI Web制作副業コース

AI時代の在宅副業ロードマップ

成果物:AIと作った最初の小さな成果物（ヘアサロン こもれびの紹介文、または1セクションのHTML下書き）

ChatGPT / Claude / Codex / Claude Code の使い分け

成果物:2つのAIで作り比べた、こもれびのコピー下書き（採用案）

AIへの指示出し・要件整理の基本

成果物:「ヘアサロン こもれび の制作指示書（要件メモ1枚）」をテキストファイルで保存（第6章のLP制作の“設計図”になる）

PC環境構築・VS Code・ターミナル基礎 ―「こもれび」制作の作業机を立ち上げる

成果物:制作環境一式＋こもれび用プロジェクト komorebi-site（Cursorで起動済み、AIが応答する状態）

こもれびのページを自分で編集する（HTML / CSS / JavaScript の最低限）

成果物:自分の手で編集した「ヘアサロン こもれび」のページ断片（文言1か所＋色1か所を変更）＋Chrome検証ツールで変更を確認したもの

LP制作実践 — 「ヘアサロン こもれび」のLPを1枚作り切る

成果物:ヘアサロン こもれび のLP（1枚もの・ローカルで完成）

ホームページ制作実践 — こもれびのLPを「複数ページのHP」に育てる

成果物:ヘアサロン こもれび の複数ページHP（共通ヘッダー/フッター・スマホ対応）

AIっぽく見えないデザイン改善

成果物:脱AIっぽさ改善後のこもれびサイト＋こもれびの簡易スタイルガイド（配色・フォント・余白・写真トーンの1枚メモ）

GitHub基礎・バージョン管理

成果物:GitHubに保存されたこもれびのリポジトリ（初回コミット済み）

Vercelデプロイ・公開運用

成果物:インターネットに公開された「ヘアサロン こもれび」のサイト（本番URL）。スマホからその本番URLで実際に開けること。

問い合わせフォーム・Googleフォーム連携

成果物:こもれびの公開サイトで動く問い合わせフォーム（送信テスト済み）

提案書・見積書・ヒアリングシート作成

成果物:「ヘアサロン こもれび」向けの提案書1枚＋見積書（品目・数量・単価・小計・消費税・合計・有効期限・振込先まで入った1通）

ポートフォリオ制作

成果物:公開されたポートフォリオ（こもれび案件を含む3点を掲載した、本物のURLのポートフォリオサイト）

小規模案件の納品・保守対応

成果物:こもれびへの納品メール＋保守プラン（月額案）

初案件獲得までの営業導線

成果物:こもれびの実績を使った営業文1通＋応募先リスト（クラウドソーシング/知人・地域店舗/SNSから自分で選んだ送り先）