はじめに（この記事で書くこと）
最近よく見る「Vibe Coding」を自分でも実感してみたくなり、Cursor / Claude Code を使ってWebアプリを作って公開してみました。
この記事で書くことは大きく3つです。
- Cursor / Claude Code を両方使ったこと
- どちらも一番安いプランにしたので制限が来る → 制限がかかったらもう片方を使うという“分立”が現実的に効いたこと
- デザインが難しかったので、Figma AIでデザイン作成 → HTML出力 → AIと会話しながら詰めるという流れで進めたこと
ツール比較の勝ち負けというより、「止まらずに作り切るためのやり方」の記録です。
追記: 2026/01/06
Cursorは一度上限に達するとその月は追加課金をしないと使えないが、Claude Codeは上限に達しても数時間経てばまた使えるようになる。Claude CodeをCursor上で呼び出すこともできるので、趣味で使いたい、$100も払えないという私にとっては、Claude Codeだけサブスクして、CursorからClaude Codeを呼び出す、みたいな使い方がお財布には良さそう。
参考: https://apidog.com/jp/blog/claude-code-cursor-cost-analysis-jp/
目的：Vibe Codingを実感してみる（特にClaude Code）
今回の目的はシンプルで、Vibe Codingを実感することです。
特に Claude Code を使ってみたくて、「会話から設計や実装が進む」体験が本当に成立するのか試してみました。
記事作成者について（前提）
自分は普段、IT業界で
- 業務要件をまとめる
- プロジェクトマネジメントをする
といった仕事をしています。
簡単なデータ分析スクリプトを書くくらいで、非エンジニアです。
ただ、昔にJSやJSPっぽいものを書いていたり、Subversionを使っていたり、今もエンジニアと一緒に仕事をしたりしているので、システムのことは少し分かる、という立ち位置です。Cursor は業務で軽く触れていました。
プロダクトのコンセプト：タイムラインで自分を相対化する
タイムライン系のプロダクトを一度作ってみたかった、というのが出発点です。主に自分が使うため。
- 時系列で自分を振り返ることで、将来を考えるきっかけになる。
- 今を相対化することで、自分や周囲を客観的にみることができる。
- プロダクトが変わっても人間の本質は変わらない。
そんなことをなんとなく感じられるプロダクトを作ってみたいと思いました。
やったこと（時系列）
1) Claude Code を一番下のプランで申し込み
まずは Claude Code を一番安いプランで始めました。
2) Claude Codeと会話開始 → でもイメージが湧かない
設計書も要件もしっかりしたものはありません。
上に書いたようなコンセプトを、そのまま Claude Code に投げて会話を開始しました。
最初は vanilla JS と HTML でモックを作ってきたのですが、出来上がったものを見ても、全く利用イメージがわかない。
自分の頭の中にも完成イメージがないので、モックを見ても判断できない状態でした。
3) Figma AIでデザイン作成 → Token Limit → HTML出力してClaudeに渡す
「これは文章で詰めるより、まず形を作った方が早い」と思い、Figma AI を使ってデザインを作成しました。金銭的余裕はないので、無料枠で使える範囲です。何度か回すと Token Limit に達したので、途中のデザインを HTMLとして出力し、それを Claude に渡して続きを進めました。
デザインが苦手な自分にとっては、
- AIに“見た目の叩き台”を作らせる
- それを材料に会話して詰める
という流れが、一番前に進みました。
4) vanilla JSでは勉強にもなりづらい → Next.jsに切り替え
ブレブレですが、最近のテックスタックにも触れたくて、vanilla JS だと面白みにかけるので、最近のトレンドである Next.js / Tailwind CSS を使うことにしました。
Figma が作ったデザインをもとに「Next.js / Tailwind CSSで作り直して」と指示しました。
5) それっぽいものが出来上がる（しかも普通に動く）
すると、それっぽいものが出来上がる。
しかも、ほぼエラーもなく普通に動くので驚きました。
この時点で「本当にここまで行けるんだ…」という感覚になりました。
React.js / Tailwind CSSのコードは、HTML / ただのJSしか見たことがない自分には魔法に映り自力でのデバッグはこの段階ですでに無理でしたが、デバッグの必要が全くありませんでした。
6) 微修正を繰り返すと制限に当たる → Cursorへ切り替え（分立）
何度か微修正するうちに、Claude側のトークン上限に達しました。
数時間待つのももったいないので、Cursorへ切り替えました（Cursorの有料プランはこのタイミングでサブスク）。
Cursorでも Opus 4.5 が使えるので、コード品質は極めて高いことにまた驚きました。
また、Cursorはフォルダ構成が常時Editor上で見えることもあり、安心感が強いです。細かい文言の調整とかは、Cursor上で自分ですれば良いので。
ここで実感したのが、今回の重要ポイントです。
最安プラン運用だと制限は来る。だから制限が来たらもう片方に切り替える。
これだけで、開発が止まりにくくなる。
ただ、最初から高いプランを申し込めば良いのですが、そんなに余裕がないため、このような微妙なやり方で乗り切りました。
7) 「誰が使うの？」と自分でも分からなくなる
出来上がるものを眺めていると、一体誰が使うのか、プロダクトの魅力が自分にもわからなくなってきました。
「作れてるけど、これ面白いのか？」というやつです。
8) Cursor AskでGPT-5.2に辛口レビュー → Plan → Agentで反復
そこで Cursor の Ask モードを使って、GPT-5.2 と会話を開始しました。
ポイントは、いい人フィルタを外して辛辣なコメントを求めること。
そうすると、ダメ出しをいくらでもしてくれます。こちらも自虐的なコメントばかりしていると、たまに褒めてくれます。
- ダメ出しを集める
- それをもとに Plan モードで計画を立てさせる
- Opus 4.5 の Agent モードで開発を指示する
この流れを、時間の許す限り繰り返しました。
時間の猶予が1.5日だったので、その間ずっとこのループを回していました。
9) コンセプトも揺れる → 自分が使いたい形に寄せる
プロダクトのコンセプトも合ってないような状態だったので、
- 自分が使ってみたいと思える機能を入れる
- 違うと思ったら消す
を繰り返しました。
「仕様を固めてから作る」というより、作りながらコンセプトを寄せていく感じです。
この進め方が成立するのも、AIが修正を速く回してくれるからだと思います。
実際のビジネスでこのような開発はできないと思うのですが、趣味の範囲だからできるやり方です。
10) Vercelでデプロイ（CI/CDっぽさもついでに理解したい）
最近流行りのCI/CDもついでに理解したくて、Vercelを使ってデプロイすることにしました。
Githubのrepositoryを連携するだけでデプロイできることに感激。
ただし、ウェブ上にデプロイするのであればセキュリティ面でのリスクは無くしたく、データはすべてユーザローカルにしか保存されないようにしています。 （サーバに個人データを持たない方針）
-> 一部データをサーバに保持するようにしました。詳細はヘルプをご参照ください。
最後に：作って分かったこと（まとめ）
今回いちばん印象的だったのは、AIが出力する結果にエラーがほとんど出なかったことでした。もちろん途中で修正は必要でしたが、少なくとも「まず動くものを作る」までの距離が短い。だからこそ、AIとちゃんとコミュニケーションさえ取れれば、非エンジニア寄りでも“作り切る”体験ができる、という手応えがありました。
一方で、正直なところ自分には、出てきたコードの良し悪しを判断する力が十分ではありません。「動いている」ことと「メンテしやすい／拡張しやすい」ことは別なので、ここは今後の課題です。
あとは、仕事で使う場合には、要件をもっと明確にしてから開発に着手することになるので、その状態で開発に入ったら、どのくらい短期間で開発が進むのかも知りたいな、と思いました。
ただ逆に言えば、コード品質・アーキテクチャ・設計の判断力を持った上でAIを使い切れるようになると、個人開発でも業務でも、生産性は明確に跳ねそうです。AIは魔法というより、判断力を増幅する道具で、使う側の解像度が上がるほど効果が出る。今回の開発は、その感覚を実感できた体験でした。
サービス（ここにリンク）
- サービスURL：https://productandme.vercel.app/
追記（任意）
ここまでの内容は「このやり方が正しい」という話ではなく、
自分みたいな立場でも“作り切る”ところまで行けた、という記録です。
もし同じように「触ってみたいけど作り切れるか不安」という人の参考になれば嬉しいです。
追記 20260118
タイムラインを簡単に編集することだけを目指して、自ら使いやすいように変えました。
個人開発物の範囲ですが、自分は使ってみようというものにはなりました。
データの扱いに関する仕様については、ヘルプを参照ください。
また、自分の使い方では、Claude Code Max Plan($100)がストレスなく作業ができました。少し奮発。
追記 20260125
すぐ上で使ってもいいかもと言っておきながら、満足いかない部分が多すぎたので、夜な夜な改良していました。Claude Code Max Plan($100)にしたことで、私の使い方であればTokenの使いすぎとして使えなくなることもなくなり、快適。仕事の行きと帰りで電車中からスマホでCLAUDEに指示をするだけで軽微な修正であれば実現できたことで、結構使いやすくなりました。転職する時や将来のことを考える時、自分の過去をうまく認識できると未来を深く考えられると思います。私はそれが大の苦手で、面接でも自分のことをうまく説明できずに苦しみました。年表が役に立ちそうなことは分かりつつ、ただ、そのために年表作るのも大変、、、。そんな自分をほんの少し助けてくれる（かもしれない）ツールになりました。私の場合、もはや西暦だけではその年に何があったか全く思い出せないので、その年にあった出来事やモノも合わせて認知することで、より深く過去の自分と出会えるのではないかなと考えています。せっかくなので、ランディングページも作ってみました。
スマホでの利用のしやすさはほとんど考慮していませんmm
