初めてのバイブコーディング ── 何を作る？おすすめプロジェクト10選

何を作ればいいかわからない問題

バイブコーディングの概念はわかった。ツールも選んだ。でも**「何を作ればいいかわからない」**──これが最も多い挫折ポイント。

大事なのは**「自分が使いたいもの」を作る**こと。誰かの役に立つものを作ろうとしなくていい。自分の生活がちょっと便利になるもの、それが最高の練習課題だ。

---

難易度別おすすめプロジェクト

初級（1時間で完成）

1. プロフィールサイト

• 自分の名前、自己紹介、SNSリンクを載せた1ページサイト
• HTML + CSSだけで完成
• バイブコーディングの「Hello World」

2. カウントダウンタイマー

• 「旅行まであと○日」を表示するタイマー
• 日付計算のロジックをAIに任せる

3. 色変換ツール

• カラーコード（#FF5733）を入力すると、RGB表示に変換
• Webデザインで実際に使える

中級（半日で完成）

4. ToDoアプリ

• タスクの追加・完了・削除
• ローカルストレージでデータ保存
• バイブコーディングの定番練習課題

5. ブログ / ポートフォリオ

• Astroで静的サイトを作る
• Markdownで記事を書く
• Cloudflare Pagesで公開

6. 家計簿アプリ

• 収入と支出を入力
• 月別のグラフ表示
• CSVエクスポート機能

上級（1〜2日で完成）

7. Webスクレイピングツール

• 特定のサイトから情報を自動取得
• PythonでCSVに出力

8. チャットボット

• AIのAPIを使った簡易チャットボット
• 自分のサイトに埋め込み

9. 業務効率化ツール

• Excel作業の自動化
• メール自動生成
• 日報の自動作成

10. APIを使ったダッシュボード

• 天気、株価、ニュースなどのAPIからデータ取得
• グラフやカードで可視化

---

プロジェクトの進め方

ステップ1: 要件を書き出す

作りたいもの：家計簿アプリ
機能：
- 収入・支出の入力フォーム
- カテゴリ別の集計
- 月別のグラフ表示
- データのCSVエクスポート
技術：HTML + JavaScript（ローカルで動く）

ステップ2: 小さく始める

まず「収入・支出の入力フォーム」だけ作る。動いたら次の機能を追加。

ステップ3: 動かして修正

エラーが出たらAIに伝える。デザインが気に入らなければ「もっとシンプルにして」と伝える。

ステップ4: 公開する

できたものはGitHubにアップして、Cloudflare PagesやVercelで公開。世界中からアクセスできるようになる。

---

次のステップ

作りたいものが決まったら、ツールを選んで実際に作ってみましょう。ツールカテゴリで各ツールの使い方を解説しています。