1
【Lv.1】HTMLだけで自己紹介ページを作る ── バイブコーディング最初の一歩
最も簡単なプロジェクト。AIに指示を出してHTMLファイル1つで自己紹介ページを作り、ブラウザで表示するまで。
実践
実際にアプリやサイトを作るハンズオンガイド
入門を読み終えたら、実践編に挑戦しましょう。
2
【実践】ToDoアプリを30分で作る ── AIと一緒にJavaScript入門
バイブコーディングでToDoアプリを作りながら、HTML・CSS・JavaScriptの基本を自然に学ぶハンズオン。
3
【実践】ポートフォリオサイトをAIで作る ── 0からデプロイまで完全ハンズオン
Claude Codeを使って、プロフィールサイトをゼロから作り、インターネットに公開するまでの全工程をハンズオン形式で解説。
4
【実践】ブログサイトを作ってCloudflareで公開する ── Astro + AIで本格Webサイト
Astroで本格的なブログサイトを構築し、Cloudflare Pagesで世界に公開するまでの全工程。バイブコーディングの集大成。
5
エラーが出た！── バイブコーディングで困ったときの対処法
AIが生成したコードが動かない、エラーが出た、デザインが崩れた。よくあるトラブルと解決パターンを初心者向けに解説。
6
【Lv.5】天気APIダッシュボードを作る ── 外部データを取得して表示するアプリ
無料の天気APIからデータを取得し、ダッシュボードに表示するアプリを作る。API連携の基本を学ぶハンズオン。