🎴

Day13｜UIはコードを書く前に8割決まる。Cursorで“実装前の会話”を本気でやってみた話/日本・予測市場サイト(個人開発)

2026/01/19に公開

今日は13日目。

今日は「がっつり改善した日」だったと思う。

昨日まで作っていた予測投票画面を、モバイル向けに本格的に作り直した。

でも、これまでと違う点がある。

Cursorへの指示の仕方を変えた、というのが今日一番大きなポイントだった。

 これまでの違和感正直、今まで見てきた予測市場系のサイトって、どれも似ている。

金融っぽい。 マーケティング色が強い。

そして、ざっくりいう。今っぽくねーーー
ユーザビリティの観点で見ると、

「情報量が多い＝不親切」になっているケースが多い気がしていた。

だったら逆をやろう、と思った。

 TikTok風UIという発想今回のUIのコンセプトはかなり単純
フルスクリーン
ワンタップ操作
思考より直感
情報は必要最小限
発想元はTikTok。

動画は使わないけど、動画の代わりにオッズのチャートが全面に表示されるイメージ。

 今回、Cursorの使い方を大きく変えたここが今日のポイントかな。

実は、VibeCodingしてきたけど、これまでは下記のループ
「こんな感じにしたい → とりあえず実装　→　結果見る　→　指摘する」

を繰り返していた。
でも今回は違う。
実装前に、Askモードで徹底的に会話した。

 まずは、やりたいことを全部書く今回は「ざっくり」ではなく、

やりたいこと・理想の操作感・違和感を全部文章で投げた。

すると、Cursorから質問が返ってきた。
最初は9項目
それに全部回答したら、追加で10項目
さらに確認として5項目
合計で20項目以上
正直、途中で「多いな…」とも思ったけど、

ここで雑に答えたら意味がないので、全部ちゃんと書いた。


 Askモードで“要件定義”をやった感覚このやり取りを通して感じたのは、
Askモードは、超優秀なPMとの壁打ち
ということ。
不明点を勝手に実装しない
曖昧な部分を全部言語化させにくる
UIの意図を何度も確認してくる
結果として、

「何を作るか」がコードを書く前にほぼ固まった。

 実装は一発…ではなかった（正直に）正確に言うと、実装は一発ではない。
1回目の実装 → かなり良い
そこから微調整を入れて 2発目で完成形
ただ、ここが重要で、

2発で済んだというのが異常に早い。
しかもUI全体がガラッと変わるレベルで、だ。

 Before / After は一目瞭然前の画面と比べると、違いは一瞬でわかる。
情報の詰め込み感が消えた
操作が迷わない
「触ってて楽しい」感じが出た
正直、

「これを2回の実装で出してくるのは、かなりすごい」

と思った。
■Before


■After



 今日の学び今日の学びはシンプル。
Cursorは、いきなり実装させるより、まず会話させた方が強い
Askモードで要件を潰しきってから実装。

この流れ、今後は標準にしようと思う。
明日は、このUIをもう少し触りながら、

「予測する体験」そのものをどう磨けるかを考えたい。
また、明日

バイバイ！