【v0 x Cursor】 Webアプリでよくあるフロントエンドのテンプレート的なものを作ってみた
こんにちは、UI/UXデザイナーのYoshikaです！
現在フリーランスとして活動しており、主にアプリケーションのデザインを作りつつ生きています。
大阪市在住で、好きなお酒はビール、ハイボール。
ミナミ、天満、新世界あたりでよく飲んでます。
飲み依頼はXのDMにてお待ちしてます（マジ）
本記事の経緯
生成AI周りはずっと情報だけは追っていて、GPTに雑談とか人生相談してみたり、Stable diffusionなどで画像生成して遊んだりしていたのですが、CreateっていうツールでWebサイトを生成できるらしい！ということを知り、このあたりから本格的にデザイン生成AIを触るようになりました。
今回はv0を使用して、Webアプリでよくあるフロントエンドのテンプレート的なものを作ってみました。v0で出力したものをCursorに貼り付けて進めています。
はじめに
冒頭でもお伝えしましたが、私はUI/UXデザイナーです。業務では基本的にデザインばっかり作っていてFigmaというツールを主に触っています。で、通常コードは書きません。
ただこれからますますデザイナーに求められることが広がっていく感覚があり（他の職種でもそうやと思うけど）普通にモダンなフレームワークに慣れといた方がいいよね→汎用的に使いまわせるテンプレートでも作るかというのが動機です。
まずはClaude先生
Claude先生にこんな感じのアプリを作りたいんやけど～と相談します。v0でもいいのですが、Claudeが使い慣れているので。ここで要求を投げ、要件定義を行います。ここどうなってる？これどういう意味？とか聞きまくって、自分のイメージに近づけていきます。
ここで作った要件をv0に送り→Cursorエディタ内にNext.jsベースのディレクトリ構成を作る方法を教えてもらいます（環境構築）
マジで全部教えてくれるの神。初心者の人は「俺初心者やから、めっちゃわかりやすくお願い♡」と伝えておきましょう。
実際に作ったもの
TOPページ
機能実装ができるか？が検証ポイントなので、デザインについては捨てています。笑
僕自身が過去Webサイトをフルスクラッチでコーディングしていた経験があり、CSSは結構得意なので、デザイン作ってCSSで再現は可能。
ちなみに僕はReact、Next.jsの知見がほぼ皆無なので、エラーが出たら下記の流れで解決していきました。
そのエラー文と該当のファイル内のコードをすべてv0に渡す。
エラーを解消した完全版のコードを返してくださいと伝える
再度、Cursorのコードを置き換える
エラーがなくなるまでそれを繰り返す
v0で解決が難しい場合、Claudeが解決してくれることがあるので、他のAIにも聞いてみる
左メニューの検索の挙動についてはもう少し手を入れていかないといけないですが、一応動いてはいるのでひとまずヨシとします。
なおログイン中は右上に○○さんと名前が出るようにしました。
ログインページ
フォームUIを即時出力してくれるのは感動ですね。地味にめんどくさいので。ぶっちゃけ裏側の部分はわけわからんかったんですが、データベースはPrismaを使用。これもv0にしつこく聞きつつ、何とか認証周りの挙動を実現できました。
ブログ一覧ページ
ヘッドレスCMS（Strapi）を導入し、管理画面からブログ投稿ができるようになっています。このへんの繋ぎこみはわりとスムーズにできた感じですね。
セキュリティ設定
セキュリティ周りはひとまず表側だけできてるような感じで、ここは正直バックエンドエンジニアに入ってもらいたい領域です。
誰か一緒に仕事できる方いらっしゃったら仲良くなってほしい、、
→DMください
まとめ
デザイン生成AIの課題として感じていたのが、ポン出しでサムネイルやLPとかは作れるけど、実務で使えるようなものではなかったり、世の中に出ているサンプルもオセロを作りました！！とかでもうちょっと現実的というか実用的なフローが構築できないものかと思い、私自身も試行錯誤しているところです。
v0や最近人気のBoltなど、引き続きサイト・アプリ生成AIが盛り上がってきているので、引き続き手を動かしつつ自分なりにアウトプットしていこうと思います。
ここどうやってやったか、もうちょい詳しく教えて～などあれば、コメントください。お答えできる範囲でお答えします。
もしYoshikaのことを気になってくれた方は、ぜひ繋がりたいです。Xのフォローお待ちしております。DMいただければお返事させていただきます。
またUI/UXデザイン案件の依頼もお待ちしております！
最近は業務アプリのUI/UX改善依頼なども多く、このあたりに課題を感じられている企業様も多いので、ぜひぜひご連絡ください。
ポートフォリオ→yoshi-ka.com