バイブコーディング初心者が最初に作るべきもの5選｜難易度別おすすめプロジェクト

バイブコーディング初心者が最初に作るべきもの5選｜難易度別おすすめプロジェクト

バイブコーディングのツールをインストールして、基本的な使い方もわかった。「で、次は何を作ればいいの？」

この記事では、バイブコーディング初心者がスキルアップしながら楽しく学べるプロジェクトを、難易度順に5つ紹介します。

ポイントは「簡単すぎず、難しすぎない」ものを選ぶこと。簡単すぎると学びがなく、難しすぎると挫折します。この5つは、1つ作るごとに新しいスキルが身につくように設計しました。

まだバイブコーディングを始めていない方は、先に始め方5ステップを読んでCursorのインストールを済ませてください。

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

闇雲に作り始める前に、初心者がプロジェクトを選ぶ際の基準を押さえておきましょう。

• 自分が実際に使うもの：使わないものを作ってもモチベーションが続かない。日常で「あったら便利」と思うものが最適
• 1日で完成できる規模：数日かかるプロジェクトは途中で飽きる。まずは「今日中に動くものが見られる」サイズから
• 前回より少しだけ難しいもの：新しい要素を1〜2個含むプロジェクトを選ぶと、無理なくスキルが積み上がる

この基準に沿って、おすすめの5プロジェクトを紹介します。

おすすめ一覧（難易度順）

順番	プロジェクト	難易度	所要時間	身につくスキル
1	ToDoリスト	★☆☆☆☆	30分〜1時間	基本操作・プロンプトの書き方
2	ポモドーロタイマー	★★☆☆☆	1〜2時間	時間処理・アニメーション
3	ポートフォリオサイト	★★☆☆☆	2〜3時間	デザイン指示・レスポンシブ
4	家計簿アプリ	★★★☆☆	3〜4時間	データ管理・グラフ表示
5	Chrome拡張機能	★★★☆☆	3〜5時間	ブラウザAPI・拡張の公開方法

① ToDoリスト（難易度：★☆☆☆☆）

なぜ最初に作るべきか

バイブコーディングの「Hello World」的存在。機能がシンプルなので、AIへの指示出し → コード生成 → 動作確認 → 修正依頼という基本フローを最短で体験できます。

実際に作ってみた体験はこちらの記事で詳しくレポートしています。

AIへの指示テンプレート

HTMLとCSS、JavaScriptで、ToDoリストアプリを作ってください。

機能：タスクの追加・完了チェック・削除・残件数表示
デザイン：中央寄せ、カード型、モダンで清潔感のあるデザイン
1つのHTMLファイルにまとめてください。

ステップアップ：こんな機能を追加してみよう

• ローカルストレージでデータ保持（ブラウザを閉じてもタスクが残る）
• ドラッグ＆ドロップで並び替え
• カテゴリー分け機能
• 期限設定と期限切れアラート

② ポモドーロタイマー（難易度：★★☆☆☆）

身につくスキル

ToDoリストでは扱わなかった「時間」の処理を学べます。カウントダウン、タイマーのスタート/ストップ/リセット、通知音の再生など、動的な要素が増えます。また、円形のプログレスバーなどアニメーション表現にも挑戦できます。

AIへの指示テンプレート

ポモドーロタイマーアプリを作ってください。

機能：
・25分の作業タイマーと5分の休憩タイマー
・スタート/一時停止/リセットボタン
・タイマー完了時に通知音を鳴らす
・何セット完了したかの回数表示
・円形のプログレスバーで残り時間を視覚表示

デザイン：丸いタイマーを中央に大きく配置。ダークモード風の配色。
1つのHTMLファイルにまとめてください。

ステップアップ：こんな機能を追加してみよう

• 作業時間と休憩時間をカスタマイズ可能にする
• 作業ログの記録（何時から何時まで集中したか）
• デスクトップ通知

③ ポートフォリオサイト（難易度：★★☆☆☆）

身につくスキル

これまでの「1ページのアプリ」から一歩進んで、複数セクションを持つWebページを作ります。ヘッダー、自己紹介、スキル一覧、作品ギャラリー、お問い合わせフォームなど、実際のWebサイトに必要な要素を一通り体験できます。

レスポンシブデザイン（PC・タブレット・スマホ対応）の指示を出す練習にもなります。

AIへの指示テンプレート

個人のポートフォリオサイトを作ってください。

セクション構成：
・ヒーロー（トップ）：名前、一言キャッチコピー、背景画像エリア
・自己紹介：写真エリアとプロフィール文
・スキル：アイコンつきのスキルカード（HTML/CSS/JavaScript/AI活用）
・作品集：カード型のギャラリー（3〜4作品、画像＋タイトル＋説明）
・お問い合わせ：名前・メール・メッセージのフォーム
・フッター：SNSリンクとコピーライト

デザイン：モダンでミニマル。スクロールでセクションが切り替わる。スマホ対応。
1つのHTMLファイルにまとめてください。

作った後の活用

ポートフォリオサイトは作って終わりではなく、実際に公開して自分の名刺代わりにできます。GitHub Pagesを使えば無料でWebサイトを公開可能。副業でバイブコーディングの案件を受注する際に「こんなもの作れます」と見せる実績にもなります。

④ 家計簿アプリ（難易度：★★★☆☆）

身につくスキル

ここから少し本格的になります。収入・支出のデータを記録・集計し、グラフで視覚化するという、実用レベルのアプリ開発を体験できます。

データの保存（ローカルストレージ）、計算処理、Chart.jsなどのライブラリを使ったグラフ表示など、新しい技術要素が加わります。

AIへの指示テンプレート

シンプルな家計簿アプリを作ってください。

機能：
・日付、カテゴリー（食費/交通費/娯楽/その他）、金額、メモを入力して記録
・収入と支出を分けて記録
・月別の収支一覧表示
・カテゴリー別の支出を円グラフで表示
・月ごとの収支推移を折れ線グラフで表示
・データはローカルストレージに保存
・CSVエクスポート機能

デザイン：ダッシュボード風。上部にサマリーカード（今月の収入/支出/残高）、下部にグラフと明細。
Chart.jsを使ってグラフを描画してください。

ステップアップ：こんな機能を追加してみよう

• 予算設定と超過アラート
• 定期的な支出の自動記録
• レシート画像の添付機能

⑤ Chrome拡張機能（難易度：★★★☆☆）

身につくスキル

Webページの中だけで完結するアプリから卒業して、ブラウザそのものに機能を追加する体験ができます。manifest.jsonの作成、ブラウザAPIの活用、Chrome Web Storeへの公開方法など、新しい知識が一気に広がります。

しかも作ったものをChrome Web Storeで公開すれば、世界中の人に使ってもらえます。

AIへの指示テンプレート

Chrome拡張機能を作ってください。

機能：今見ているWebページの本文テキストを要約する拡張機能
・ブラウザの右上にアイコンを表示
・アイコンをクリックするとポップアップが開く
・ポップアップ内の「要約する」ボタンを押すと、現在のページの本文を取得して要約を表示
・要約結果をワンクリックでクリップボードにコピーできる

manifest.json、popup.html、popup.js、content.jsの各ファイルを作成してください。Manifest V3形式で作ってください。

作った後の活用

Chrome拡張機能は副業としての可能性も大きいです。便利なツールを作ってChrome Web Storeに公開し、有料版を用意すれば収益化も可能。ニッチな需要を満たす拡張機能は、月数万円の収益を生んでいるものもあります。

5つ作り終わったら：次のステップ

この5つのプロジェクトを順番に作り終える頃には、バイブコーディングの基本はしっかり身についているはずです。次のステップとして、以下を検討してみてください。

自分のアイデアを形にする
ここまでは「型」に沿って作ってきましたが、ここからは自分が本当に欲しいもの・解決したい問題に取り組んでみましょう。日常の不便を解消するツールを作れたら、バイブコーディングを完全に自分のスキルにできた証拠です。

作ったものを公開する
GitHub PagesやVercelを使えば、Webアプリを無料で公開できます。公開することで他の人からフィードバックがもらえたり、ポートフォリオとして使えたりします。

プログラミングの基礎を体系的に学ぶ
バイブコーディングで「作る楽しさ」を知った上でプログラミングの基礎を学ぶと、理解のスピードが全然違います。「なぜこのコードが動くのか」がわかるようになると、AIへの指示もより的確になり、作れるものの幅が格段に広がります。

まとめ

バイブコーディング初心者が最初に作るべき5つのプロジェクトを紹介しました。

1. ToDoリスト → 基本フローを覚える
2. ポモドーロタイマー → 時間処理とアニメーション
3. ポートフォリオサイト → 複数セクション＋レスポンシブ
4. 家計簿アプリ → データ管理＋グラフ表示
5. Chrome拡張機能 → ブラウザAPI＋公開体験

大切なのは順番に1つずつクリアしていくこと。いきなり5番に飛ぶのではなく、1番から積み上げることで、確実にスキルが身についていきます。

まだ1つ目も作っていないなら、今すぐCursorを開いてToDoリストから始めてみてください。30分後には、あなたも「バイブコーダー」の仲間入りです。