Cursorで最初に何を作るか｜非エンジニア向けバイブコーディング入門

Cursorを入れたあと、最初に困るのは「何を頼めばいいのか」だと思います。

自分も最初からうまく使えたわけではありません。スワぽいを作るときも、アイまーるを作るときも、最初の指示はかなり雑でした。

何度か作って分かったのは、「アプリを作って」ではなく、最初の1画面を作ってと頼むほうが進めやすいということです。

自分が実際に出した最初の指示

スワぽいを作り始めたとき、最初にCursorへ伝えたのは、だいたいこんな内容でした。

「右スワイプで保存、左でスキップ。カード1枚ずつ出したい」

設計書でも要件定義書でもありません。やりたい動きをそのまま書いただけです。それでも、カード1枚が出るところまでは行けました。

アイまーるでは、もう少し違います。最初に決めたのは画面ではなく、「何を守るか」でした。

眼精疲労対策であること
20-20-20を中心にすること
会員登録なしで使えること
記録はなるべく端末の中に置くこと

この4つだけは、途中で変えないようにしました。そのあとで「20分タイマーを作って、休憩してくださいと出る」と頼みました。体操やバイオリズムは、そのあとです。

最初は1画面だけでいい

最初からログイン、課金、データ保存まで入れようとすると、ほぼ確実に散らかります。

スワぽいの進め方は、だいたいこの順でした。

カード1枚が出る → スワイプが動く → 保存一覧ができる → ニュースが取れる → ログイン → 課金

アイまーるも同じで、20分タイマーが動いて、休憩の表示が出るところまで先に作りました。

Cursorに最初に頼むなら、このくらいの粒度がちょうどいいです。

ニュースカードを1枚表示する画面を作ってください。
右スワイプで保存、左スワイプでスキップできるようにしたいです。
まずはダミーのニュースでいいです。
スマホで触る前提で、ボタンも大きめにしてください。

20分タイマーを作ってください。
時間になったら「遠くを見て休憩してください」と表示します。
会員登録なしで、ブラウザだけで動く形にしてください。
記録は端末内に置き、外部へ送らないでください。

この時点では、データベースも本番環境もいりません。まず触れるものが出れば十分です。

「いい感じ」より「困っていること」を書く

「いい感じにして」と書くと、見た目だけ整ったものが出てくることがあります。

自分がうまくいったのは、困っていることまで書いたときです。

アイまーるでは「休憩を忘れにくくしたい」「スマホで片手でも迷わず使いたい」と書きました。単にタイマーを作るより、通知の見せ方やボタンの位置まで考えやすくなります。

スワぽいでは「ニュースを読む前に、興味あるものだけ仕分けたい」と書きました。だから、全文を読む画面より、カードを次々見る画面が先になりました。

同じ「作って」でも、目的を書いたほうが近いものが出ます。

エラーはそのまま貼る

エラーが出たら、まず全文を貼ります。

このエラーが出ました。
何が原因で、どのファイルを直せばいいか教えてください。
 
[エラー文を貼る]

「直して」だけでも動くことはありますが、原因も一緒に聞いたほうが次に困りにくいです。

スワぽいでは、Cookie同意を入れたあとにアクセス解析の新規ユーザーが急に0になりました。同意をもらう前に計測を飛ばしてなかったのが原因で、直すまでは「壊れたのか、設定ミスなのか」と焦りました。こういう地味なところは、エラーメッセージだけでは分かりにくく、実際の数字や挙動を一緒に伝える必要がありました。

完璧に理解する必要はありませんが、どの機能が壊れていたのかは知っておいたほうがいいです。

すぐ公開してスマホで触る

ローカルで動いたら、早めに公開したほうがいいです。

自分はGitHubのmainにpushすると、Cloudflare側で公開される流れにしています。スワぽいもアイまーるも、このやり方で作りました。

PCでは良く見えても、スマホだと押しにくい、スクロールしづらい、説明が長い、ということがすぐ分かります。

アイまーるでは、最初は「統計・設定」を別タブにしていました。項目が増えるほどスマホで押しづらくなり、結局ホーム側にまとめました。見た目が整った時点で「できた」と思いかけたこともありますが、実際にスマホで使うと、休憩を始めるまでが面倒、といった問題が残っていました。

最初に作るなら、自分の不便から

非エンジニアが最初に作るなら、次のどれかが進めやすいと思います。ただ、これは一般論ではなく、自分が実際にやったことです。

スワぽい — ニュースを読む前に仕分けたい（カード + スワイプ）
アイまーる — 休憩を忘れる自分を止めたい（タイマー + 通知）
真壁探偵事務所 — 手元に証拠があるミステリーが欲しかった（1ページの世界観から）

どれも「自分が使う」前提で作れました。誰かに売ることを考えるのは、そのあとでいいです。

自分が今なら最初に書くプロンプト

今なら、最初の指示はこう書きます。

私は非エンジニアです。
まずはブラウザで動く小さなWebアプリを作りたいです。
 
目的：
画面作業中に休憩を忘れないようにする
 
守りたい条件：
- 会員登録なし
- 記録は端末内に置く（外部へ送らない）
- 医療機器ではない（参考値であることを明記する）
 
最初に欲しい機能：
- 20分タイマー
- 休憩開始ボタン
- 休憩が終わったら再開できるボタン
 
画面の条件：
- スマホでも押しやすい
- 1画面で完結
 
まず必要なファイル構成を作ってください。
そのあと、どう動かすかも教えてください。

ここまで書くと、少なくとも「何を作ればいいか分からない」状態からは抜けやすいです。

次に読む記事

実際に作った記録はこちらです。

一人で進めるのが不安な人は、トミークリエイトの伴走サポートもあります。必要ならメールください。

関連記事