コース概要
このコースは、プログラミング経験が全くない方でも、AIと協働しながら実際に動くWebサイトを作成できるようになることを目指します。 従来の「文法から始める」アプローチではなく、「驚きの体験から始める」Vibe Codingの哲学に基づいて設計されています。
🎯 このコースの目標
驚きの体験から始めて、実用的なWebサイトを作りながら、必要に応じて深く学べるようになる
カリキュラム
Week 1-2: Vibe Codingの驚きを体験
1. AIツールの導入と初めての対話
- ✓ ChatGPT、Claude、GitHub Copilotなどの選択と設定
- ✓ 「ボタンを作って」から始まる最初の驚き体験
- ✓ 生成されたコードをコピペして動かしてみる
2. 自己紹介ページの作成
- ✓ 「自己紹介ページを作って」という簡単なプロンプトから開始
- ✓ 色やレイアウトの調整をAIに依頼する練習
- ✓ 画像の追加、アニメーションの実装
Week 3-4: 効果的なプロンプトの書き方
3. プロンプトエンジニアリング基礎
- ✓ 明確で具体的な指示の出し方
- ✓ コンテキストの重要性と与え方
- ✓ 段階的な改善の依頼方法
4. インタラクティブな要素の追加
- ✓ クリックで動作するボタンの実装
- ✓ フォームの作成と入力値の取得
- ✓ モーダルやアコーディオンなどのUI部品
Week 5-6: 実用的なWebサイトの完成
5. プロジェクトの統合
- ✓ 複数ページの連携とナビゲーション
- ✓ レスポンシブデザインの実装
- ✓ データの保存と読み込み（LocalStorage）
6. デプロイと公開
- ✓ GitHub Pagesでの公開方法
- ✓ Vercelを使った簡単デプロイ
- ✓ 自分のポートフォリオサイト完成！
学習の進め方
🎯
実践第一
理論より実践。まずは動くものを作り、後から理解を深める
🤝
AIとの対話
分からないことは遠慮なくAIに質問。対話を通じて学習
🔄
反復改善
完璧を求めず、少しずつ改善。失敗も学習の一部