AIを使って小さなWebサイトを作る実践例
ケース概要
「個人のポートフォリオサイトを 1 週間で作りたいが、デザイン・コーディングが得意ではない」というシナリオで、AI を活用してサイトを構築した事例を紹介します。
プロジェクト情報
目標：個人ポートフォリオサイト構築
期間：5 営業日
チーム：1 人（AI 活用）
技術スタック：HTML, CSS, JavaScript
プロセス
Day 1：企画・設計
作業内容：
- サイト構成を決定
- ページ一覧を作成
- デザインの方針を文書化
AI の活用：
Claude Code への指示：
「個人ポートフォリオサイトの構成案を作成。
ページ：Home, About, Projects, Contact
レスポンシブ対応
明るい色使い」
出力：
- ページ構成図
- 色パレット案
- コンポーネント一覧
時間：2-3 時間
Day 2-3：コーディング
作業内容：
Step 1：HTML 骨組み
Step 2：CSS スタイリング
Step 3：JavaScript インタラクション
Step 4：レスポンシブ対応
AI の活用： 各 Step で Claude Code に実装を依頼
「index.html に以下のコンポーネントを追加：
- ナビゲーションバー
- ヒーローセクション
- 説明テキスト
セマンティック HTML を使用」
確認項目：
□ git diff で差分確認
□ ブラウザで表示確認
□ モバイルで表示確認
□ リンク確認
時間：2 日間 × 6 時間 = 12 時間
Day 4：レビュー・修正
作業内容：
- セキュリティチェック
- パフォーマンスチェック
- ブラウザ互換性確認
AI の活用：
Claude Code への指示：
「HTML をセキュリティレビュー。
XSS 対策、入力検証を確認」
時間：3-4 時間
Day 5：公開
作業内容：
- ホスティングサービス設定
- 本番環境へアップロード
- 最終確認
チェックリスト：
□ すべてのページが表示される
□ リンクが正しく動作
□ 問い合わせフォームが機能
□ 速度が許容範囲
時間：2-3 時間
費用対効果
【通常の方法】
フリーランサーに依頼：30-50万円
または
自分で勉強して作る：20-30 時間
【AI を活用した方法】
AI サービス利用料：月額 $20（Claude Code）
自分の時間：25 時間（学習時間含む）
費用：約 2,000 円 + 時間
費用削減：95% 以上
時間削減：40% 以上
実装のコツ
コツ 1：最小限の機能から始める
❌ 避ける：
完璧なサイト → 時間がかかる
✅ 推奨：
最小限のサイト → 公開 → 改善
コツ 2：テンプレートを活用
AI に指示：
「Bootstrap を使ったレスポンシブテンプレートを作成」
↓
すぐに形が出来る
↓
カスタマイズに集中
コツ 3：段階的に機能追加
Day 1: 情報表示だけ
Day 2: スタイリング
Day 3: インタラクション
Day 4: フォーム機能
Day 5: パフォーマンス最適化
失敗しやすいポイント
❌ 失敗1：AI の出力をそのまま使う
「AI が作ったコードはそのまま公開」
↓
セキュリティ問題
↓
トラブル
✅ 改善：AI + 人間による確認
「AI が作成 → 確認 → 修正 → 公開」
❌ 失敗2：差分確認をスキップ
「AI が作ったから確認不要」
↓
予期しない変更
↓
バグ
✅ 改善：常に git diff で確認
「全変更を確認してから commit」
学んだ教訓
1. AI は「ドラフト作成」が得意
2. 人間は「目的設定」と「確認」が得意
3. 組み合わせることで効率化
まとめ
AI を活用した小規模 Web サイト構築：
プロセス：
- 企画・設計（AI サポート）
- コーディング（AI 実装）
- レビュー・修正（人間確認）
- 公開
効果：
- 期間短縮：20-30% 削減
- 費用削減：95% 以上削減
- スキル習得も同時達成
AIを使って小さなWebサイトを作る実践例と合わせることで、効率的な Web 開発が実現します。