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

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

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

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

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

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

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

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

アイまーるでは、最初に決めたのは画面じゃなくて、「何を守るか」でした。眼精疲労対策であること。20-20-20を中心にすること。会員登録なしで使えること。記録はなるべく端末の中に置くこと。この4つだけは、途中で変えないようにしました。そのあとで「20分タイマーを作って、休憩してくださいと出る」と頼みました。体操やガイド記事は、そのあとです。

最初は1画面だけでいい

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

スワぽいの進め方は、だいたいこの順でした。カード1枚が出る → スワイプが動く → 保存一覧ができる → ニュースが取れる → ログイン → 課金。アイまーるも同じで、20分タイマーが動いて、休憩の表示が出るところまで先に作りました。休憩間隔を12〜20分で変える話や、目の体操、4-4-6呼吸は、あとから足しています。

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

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

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

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

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

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

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

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

スワぽいでは「ニュースを読む前に、興味あるものだけ仕分けたい」と書きました。だから、全文を読む画面より、カードを次々見る画面が先になりました。見出しと要約だけ出して本文は配信元へ飛ばす、という判断も、この目的から来ています。

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

エラーはそのまま貼る。数字も一緒に見る

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

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

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

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

ニュース周りも同じです。同じ記事が二重に出たり、古いのが残ったりする。いまは90日より古いものは出さないようにしています。こういう条件は、自分から言わないとスルーされがちです。

完璧に理解する必要はないけど、どの機能が壊れてたのかは知っておいたほうがいい。

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

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

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

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

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

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

非エンジニアが最初に作るなら、自分の不便からでいい。一般論じゃなくて、自分が実際にやったことです。

スワぽいは、ニュースを読む前に仕分けたいから作りました。カードとスワイプ。無料1日50回や PRO 月額980円は、あとから足しました。アイまーるは、休憩を忘れる自分を止めたいから作りました。タイマーと通知。医療機器ではないことも明記しました。真壁探偵事務所は、手元に証拠があるミステリーが欲しくて作りました。公式サイトは入口、販売は Booth。

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

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

今なら、最初の指示はこう書きます。話し言葉のまま、一塊で出します。

私は非エンジニアです。画面作業中に休憩を忘れない道具を、ブラウザだけで動かしたいです。
会員登録なし。記録は端末内に置く。外部へ送らない。医療機器ではないので、参考値であることも画面に書いてください。
まずは20分タイマーと、休憩開始ボタン、終わったら再開できるボタンだけでいいです。スマホでも押しやすく、1画面で完結させてください。
まず必要なファイル構成を作ってください。そのあと、どう動かすかも教えてください。

「目的」「条件」「機能」と見出しで分けなくても、困っていることと守りたいことが入っていれば十分です。ここまで書けば、「何を作ればいいか分からない」状態からは抜けやすいというわけです。

次に読む記事

実際に作った記録は 実験ログ#001（スワぽい）、実験ログ#002（アイまーる）、実験ログ#003（真壁探偵事務所） です。順番の話は 非エンジニアのAI副業ロードマップ、言葉の話は バイブコーディングとは？ に書いています。

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