初めてのバイブコーディング ── 何を作る？難易度別おすすめプロジェクト10選と進め方完全ガイド

この記事でわかること

• 最初のプロジェクトの選び方
• 難易度別おすすめプロジェクト10選
• 各プロジェクトの具体的な指示テンプレート
• 企画から公開までの進め方
• 挫折しないための5つのコツ
• よくある質問

---

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

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

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

---

プロジェクト選びの3つの基準

「何を作ろう？」と悩んだとき、以下の3つの基準で考えるとすぐに見つかる。

基準	考え方	例
1. 日常の「面倒」を解決	毎日やっている面倒な作業を自動化	家計簿、日報生成、予定管理
2. 「あったらいいな」を形に	既存のサービスに不満がある部分	好みのデザインのToDoアプリ、カスタム計算機
3. 学びながら作れるもの	作る過程で新しいスキルが身につく	ブログサイト、API連携ダッシュボード

---

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

初級：1時間以内で完成（バイブコーディング入門）

1. プロフィールサイト

バイブコーディングの「Hello World」。自分の名前、自己紹介、SNSリンクを載せた1ページサイトを作る。

項目	内容
所要時間	30分〜1時間
学べること	HTMLの基本構造、AIへの指示の基本
使う技術	HTML + CSS（AIが書いてくれる）
公開方法	GitHub Pages or Cloudflare Pages
拡張アイデア	アニメーション追加、ダークモード対応

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

「旅行まであと○日」「誕生日まで○日」を表示するWebページ。複数イベントを登録できるようにすると実用的。

項目	内容
所要時間	30分〜1時間
学べること	JavaScriptの日付計算、動的な表示更新
使う技術	HTML + CSS + JavaScript
公開方法	GitHub Pages
拡張アイデア	通知機能、カレンダー表示、背景画像の自動変更

3. 単位変換ツール

通貨換算、温度変換（℃↔℉）、長さ変換（cm↔inch）など、日常で使える変換ツール。

項目	内容
所要時間	30分
学べること	フォーム入力、計算ロジック、即時反映
使う技術	HTML + JavaScript
公開方法	GitHub Pages
拡張アイデア	リアルタイム為替レート取得、お気に入り登録

---

中級：半日で完成（実用的なアプリ作り）

4. ToDoアプリ

バイブコーディングの定番練習課題。タスクの追加・完了・削除ができ、ブラウザを閉じてもデータが残る。

項目	内容
所要時間	1〜2時間
学べること	CRUD操作の基本、データ永続化（localStorage）
使う技術	HTML + CSS + JavaScript
拡張アイデア	カテゴリ分類、期限設定、ドラッグ並べ替え、優先度設定

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

Astroで静的サイトを作り、Markdownで記事を書いてCloudflare Pagesで公開する。本格的なWebサイト構築の入門。

項目	内容
所要時間	2〜4時間
学べること	フレームワーク（Astro）の基本、Markdown、デプロイ
使う技術	Astro + Tailwind CSS + Cloudflare Pages
拡張アイデア	カテゴリ分け、タグ機能、検索、SEO対策、OGP画像

6. 家計簿アプリ

収入と支出を入力し、カテゴリ別の集計やグラフ表示ができるアプリ。毎日使うから改善のモチベーションが維持しやすい。

項目	内容
所要時間	2〜4時間
学べること	フォーム設計、データ集計、グラフ描画（Chart.js）
使う技術	React or HTML + Chart.js
拡張アイデア	月次レポート、CSV/PDF出力、予算設定、固定費自動入力

7. レシピ管理アプリ

お気に入りのレシピを登録・検索・カテゴリ分けできるアプリ。料理中にスマホで見るから、レスポンシブ対応が重要。

項目	内容
所要時間	2〜3時間
学べること	検索・フィルタリング、画像表示、モバイル対応
使う技術	HTML + CSS + JavaScript
拡張アイデア	材料から逆引き検索、買い物リスト自動生成、栄養計算

---

上級：1〜3日で完成（本格的なプロジェクト）

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

特定のWebサイトから情報を自動取得し、CSVやスプレッドシートに出力するツール。

項目	内容
所要時間	3〜6時間
学べること	Python、HTTP通信、データパース、定期実行
使う技術	Python（BeautifulSoup / Playwright）
拡張アイデア	定期実行（cron）、差分通知、データベース保存

9. APIダッシュボード

天気・株価・ニュース・為替などの外部APIからデータを取得し、グラフやカードで可視化するダッシュボード。

項目	内容
所要時間	4〜8時間
学べること	API連携、非同期通信、データ可視化
使う技術	React + Chart.js + 各種API
拡張アイデア	自動更新、アラート設定、複数API統合、カスタムウィジェット

10. 業務効率化ツール

Excel作業の自動化、メール自動生成、日報作成、請求書生成など、自分の業務を効率化するカスタムツール。

項目	内容
所要時間	1〜3日
学べること	業務フローの分析、自動化設計、ファイル操作
使う技術	Python or JavaScript
拡張アイデア	Slack通知、Google Sheets連携、定期実行

---

各プロジェクトの具体的な指示テンプレート

「選んだはいいけど、AIにどう伝えればいい？」という人のために、各プロジェクトの指示テンプレートを用意した。

プロフィールサイトの指示テンプレート

プロフィールサイトを作ってください。

内容：
- 名前：[あなたの名前]
- 肩書き：[職業やキャッチコピー]
- 自己紹介：[3〜5行の自己紹介]
- スキル：[スキル1], [スキル2], [スキル3]
- SNSリンク：[Twitter], [GitHub], [LinkedIn]等

デザイン：
- 1ページ構成
- [好きな色]基調（色のイメージ：[明るい/落ち着いた/ポップ]）
- スマホでも見やすいレスポンシブ対応
- アイコンにFont Awesomeを使用

技術：HTML + Tailwind CSS

ToDoアプリの指示テンプレート

ToDoアプリを作ってください。

基本機能：
1. タスクを追加できる（テキスト入力 + Enterキーで追加）
2. タスクを完了にできる（クリックで取り消し線）
3. タスクを削除できる（×ボタン）
4. データはlocalStorageに保存（ブラウザを閉じても残る）

追加機能（余裕があれば）：
- カテゴリ（仕事/プライベート/買い物）の選択
- 期限の設定
- 完了済みタスクの一括削除

デザイン：
- シンプルで見やすい
- 中央寄せの1カラムレイアウト
- 完了タスクはグレーアウト + 取り消し線

技術：HTML + CSS + JavaScript（フレームワークなし）

家計簿アプリの指示テンプレート

家計簿アプリを作ってください。

機能：
1. 収入・支出の入力フォーム（金額、カテゴリ、日付、メモ）
2. カテゴリ別の集計表
3. 月別の収支バランス（棒グラフ）
4. カテゴリ別の内訳（円グラフ）
5. 一覧表示（日付の新しい順）
6. CSVエクスポート

カテゴリ：
- 収入：給与、副業、その他
- 支出：食費、交通費、住居費、通信費、娯楽費、その他

データ保存：localStorage
グラフ：Chart.jsを使用
デザイン：白基調、アクセントカラーは緑（#10b981）

---

プロジェクトの進め方：企画から公開まで

各ステップの詳細

Step 2: 要件の書き出し方

要件をうまく書けない人は、以下の3つだけ書けばOK：

1. 何ができるか（機能を箇条書き）
2. どんな見た目か（色、レイアウト、雰囲気）
3. どこで使うか（PC、スマホ、両方）

Step 5: フィードバックのコツ

やりがちなNG	おすすめのやり方
「なんか違う」	「ヘッダーの色をもっと濃くして」と具体的に
一度に5個修正依頼	1回に1〜2個の修正に絞る
デザインと機能を同時に変更	まず機能を完成→その後デザインを調整

Step 6: 公開の選択肢

サービス	特徴	料金	おすすめ度
GitHub Pages	GitHubリポジトリから直接公開	無料	★★★★☆
Cloudflare Pages	高速CDN、カスタムドメイン対応	無料	★★★★★
Vercel	Next.js/Astroとの相性抜群	無料（個人）	★★★★★
Netlify	フォーム機能付き	無料（個人）	★★★★☆

---

挫折しないための5つのコツ

バイブコーディングを始めて挫折する人に共通するパターンと、その対策を紹介する。

1. 最初から大きなものを作ろうとしない

挫折パターン	対策
「ECサイトを作りたい！」と意気込む	まずToDoアプリから。小さな成功体験を積む
3日かけて完成しないと飽きる	1時間で完成するものから始める

2. 「完璧」を目指さない

挫折パターン	対策
デザインが気に入るまで修正し続ける	80%の完成度で公開する。後から直せる
バグが気になって先に進めない	致命的でないバグは後回し。まず動くものを作る

3. 1日に何時間もやらない

挫折パターン	対策
初日に8時間ぶっ通しでやって燃え尽き	1日30分〜1時間で十分。継続が大事
翌日やる気がなくなる	毎日少しずつ進める習慣を作る

4. エラーで止まったらすぐAIに聞く

挫折パターン	対策
エラーを自分で調べて30分消費	エラーメッセージをそのままAIに貼り付ける
「自分にはできない」と思ってしまう	エラーはプロでも日常。AIに聞けば解決する

5. 作ったものを誰かに見せる

挫折パターン	対策
作っても誰にも見せずモチベーション低下	SNSで「#バイブコーディング」タグ付きで投稿
「こんなものでいいのかな」と不安	初心者の作品は応援される。自信を持って公開しよう

---

よくある質問（FAQ）

Q. どのプロジェクトから始めるのが最適ですか？

A. 迷ったらToDoアプリです。 理由は3つ：(1) 30分〜1時間で完成する、(2) CRUD（追加・表示・更新・削除）の基本が学べる、(3) 段階的に機能を追加していく練習になる。本サイトの実践カテゴリで「ToDoアプリを30分で作る」ハンズオン記事を用意しています。

Q. 同じものを別のツールで作り直すのはアリ？

A. 大アリです。 同じToDoアプリでもCursorで作るのとBoltで作るのでは体験が全く違います。ツールの特性を理解するのに最適な方法です。さらに、2回目は要件が明確なので指示の質も上がり、より良いものが作れます。

Q. 作ったものを友人に使ってもらいたいけど、安全ですか？

A. 静的サイト（HTMLのみ）なら基本的に安全です。 個人情報を扱う機能や決済機能がなければ、セキュリティリスクはほぼありません。ただし、ユーザーが入力するフォームがある場合はAIに「XSS対策をして」と伝えておくと安心です。

Q. プロジェクトのアイデアが思いつかない場合は？

A. 「1日の行動」を振り返ってみましょう。 朝起きてから寝るまでの行動で「面倒だな」「もっと楽にしたいな」と感じる瞬間があるはず。それがプロジェクトのタネです。例：「毎朝天気を確認する」→ 天気ダッシュボード、「買い物リストをメモする」→ 買い物リストアプリ。

Q. 作品が完成したらどこに公開すればいいですか？

A. Cloudflare PagesかVercelがおすすめです。 どちらも無料で、GitHubにコードをプッシュするだけで自動的に公開されます。独自ドメインも設定可能。さらにSNSで「#バイブコーディング」タグ付きで投稿すると、同じように学んでいる仲間からフィードバックがもらえます。

---

まとめ：「作りたい」が見つかったら、今すぐ始めよう

最初のプロジェクト選びで大事なのは、「自分が使いたいもの」を「小さく」作ること。

この記事のポイント：

• 日常の「面倒」を解決するものが最高の練習課題
• 迷ったらToDoアプリから始める（30分で完成）
• 指示テンプレートをコピペすればすぐ始められる
• 企画 → 指示 → 確認 → 改善 → 公開の5ステップで完成
• 完璧を目指さない。80%で公開、フィードバックで改善