トミークリエイト

最初から、Cursorに「アプリを作って」と頼むと、適当な物が出来上がる。まずは要件定義・設計から始めよう。

暗いデスクのノートPC。短い指示の入力欄の横に、アプリ全体ではなくカード1枚だけの画面が出ている
最初に頼むのはアプリ全体ではなく、1画面。

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

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

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

Cursorで出した最初の指示

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

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

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

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

最初は1画面だけでいい

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

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

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

ニュースカードを1枚表示する画面を作ってください。
右スワイプで保存、左スワイプでスキップできるようにしたいです。
まずはダミーのニュースでいいです。
スマホで触る前提で、ボタンも大きめにしてください。
20分タイマーを作ってください。
時間になったら「遠くを見て休憩してください」と表示します。
会員登録なしで、ブラウザだけで動く形にしてください。
記録は端末内に置き、外部へ送らないでください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

私は、GitHubの main にpushすると、Cloudflare Pages で公開される流れにしています。ドメインは、サイトができてから取りました。スワぽいもアイまーるも、このやり方で作りました。

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

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

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

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

スワぽいは、ニュースを読む前に仕分けたいから作りました。カードとスワイプ。無料は1日50回までスワイプできて、PROは月額プランが980円、買い切りプランが9,980円です。この料金は、あとから足しました。

アイまーるは、休憩を忘れる自分を止めたいから作りました。タイマーと通知。医療機器ではないことも明記しています。Android版も作りましたが、Google Playに出すと自宅の住所が載ってしまうので、公開は止めています(経緯はこちら)。

真壁探偵事務所は、手元に証拠があるミステリーが欲しくて作りました。公式サイトは入口、販売はBoothです。2026年10月11日の時点では、まだ一つも売れていません。

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

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

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

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

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

次に読む記事

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

「最初の1画面までは作れたけど、その先が分からない」という人は、トミークリエイトの伴走サポートもあります。お問い合わせから連絡してください。

> RATE THIS POST

この記事を評価する

評価には Google アカウントでのログインが必要です。

まだ評価はありません

> SHARE

この記事をシェア

役に立ちそうなら、気軽に共有してください。

> EDITORIAL

この記事の執筆について

AIが下書きを作成し、冨岡 優喜(トミークリエイト代表)が責任を持って内容を確認・校正しています。公開する文章の最終責任は運営者にあります。 運営者の実績・免責は運営者情報をご覧ください。

> RELATED LOGS

関連記事

バイブコーディングでAIに任せても良いこと、逆に人間が考えなければいけないこと

バイブコーディングは、雰囲気で作ることではありません。作りたい体験を言葉にして、AIと直し続けるやり方です。スワぽいとアイまーるを公開して分かった、AIに任せてよいことと、人間が決めることを書いています。

画面に表示される情報でも、自動で集めていいとは限らない。作る前に規約を調べた。

画面に見える情報でも、プログラムで自動的に集めてよいとは限りません。スクレイピングのツールを作る前に規約を開いて考え直した話と、公式APIを先に探す順番を書いています。法律の助言ではありません。

NEW!

バイブコーディングでサイトやツールを作るより前に、まず利用規約を確認しなきゃいけない

AIに頼めば、情報を自動で集めるツールも数分でできてしまいます。でも「動く」と「やっていい」は別の話です。作る前に確認する3つのことと、ツールを買う・頼むときに聞いておきたいことを、自分の体験と一緒に書きました。法律の助言ではありません。