🤖 はじめに
こんにちは、haruto🐒（@ha_ru823）です。
今回は、これまでhtml/cssの触りくらいまでしか通ってこなかったエンジニアリング側への知識が浅いデザイナーの私が、v0・Figma・Cursor・ChatGPTを活用して、UI生成からデプロイまでを体験したプロセスをご紹介しようと思います。
今回はサンプルとして、ローカルに用意した4つの質問にそれぞれカテゴリ（気分）を割り当てて、ユーザーが選んだ回答の中で最も多かったカテゴリを診断結果として表示し、それに応じたおすすめコンテンツを紹介するシンプルな機能を作成してみました。
▼ ぜひ診断してみてください！（曲はある程度自分のおすすめとかを入れています）
🤖 前提
前提として、今回の内容は実際の現場でサービス開発に組み込んでこんな取り組みができるよというよりも、AIを使って仕様作成→デプロイまでの道のりを体験してみて、デザイナーがCursorやv0などのAIやエンジニアリング側に歩み寄っていく第一歩としてよかったよという事例の紹介になります📨
今回の体験から、実際のサービス開発で仕様理解のために活用できそうや細かいデザイン修正をデザインチーム側で完結できそう。もう少し幅を広げて個人のポートフォリオサイトを自分でリッチに開発できそうなど、できそうなことの肌感が増えた感覚があるのでとりあえず試してみるのがおすすめです☝️
（うまくいい使い方もっといいやり方あるよとかこれやったらダメだよとかあれば、ぜひご指摘いただけると嬉しいです！）
1. 全体の流れイメージ
以下の手順で今回のプロトタイプを作ってみました
↓ ChatGPTで壁打ち・要件定義
↓ v0でUIのイメージ作成
↓ html to designでFigmaにデザインを取り込む
↓ Figmaでデザインを調整
↓ CursorでFigma MCPを使ってデザイン取り込み
↓ 調整してvercelでデプロイ
完成！
2-1. ChatGPTで壁打ち＆要件定義
① 最初に生成したUI
まずはChatGPTを使って、ざっくりとしたアイデアを言語化していきます。
🐵 < プロトタイプまででちょうどいい機能あるかな〜
🤖 < 診断系がやりやすいかもね！
🐵 < 診断系でやるか、今の気分に合わせた音楽をSportify使ってレコメンドするやつにするかな〜
🤖 < 仕様作るで！
こんな感じでまずは全体の仕様をばっと出してもらいます。
自分は使わずに終わりましたが、Cursorに提供するときにNotion MCPを使うと仕様をより楽に伝えられて良さそうでした。
2-2. v0でUIを生成
要件が定まったら、ChatGPTで生成した要件定義をv0に渡して、最初のUIを作成してもらいます。
第一弾で遷移・結果画面の表示まで一気に最低限機能する状態まで作成してくれました。
① 最初に生成したUI
shadcn/uiで作ってくれるので自然言語からの生成でも最低限動くかつベースのデザインの状態で一発目から見ることができます。
↓
② デザインの構成イメージやトンマナの指示を一旦挟みます。
最初のベースのUIを元にこういう感じのデザインが良さそうだな〜とかこういうデザインのトンマな感がいいな〜を自然言語と共に投げます。
↓
③ 意図に近いUIを作ってくれました
それっぽい構成のUIになりました。良さそう。
ここまでできたら次はFigmaに取り込んでUIを調整していきます。
2-3. Figmaに取り込む（HTML to Design）
生成されたUIを共通画面単位でhtml/cssファイルに切り出してもらいます。
ここまでできたらFigmaに移動して、神プラグインの「HTML to Design」を起動して、デザインデータを取り込みます。
今回はモバイルファーストのデザインでやりましたが、一応モバイルサイズとデスクトップサイズで書き出せます。
Figmaデータとしては、綺麗ではないので一定綺麗にしてあげる必要はありますがすでにある程度デザインが作られているのでサクッと全体のUIを作ることができます。
それを元に共通UIの見た目を整えます。FigmaデータはCursor上で取り込んでもらえればいいので、ガチガチには作り込まずそれっぽいところまで作っておくと良さそうでした。
2-4. Cursorで開発環境に反映
おそらく、このステップが一番ハードルが高い部分かと思いますが、Cursorの基本的な使い方とFigma MCPの設定さえできてしまえばあとは自然言語で会話していくだけでそれっぽい感じにできます。
Cursorの使い方動画は、この方の入門動画がかなりわかりやすかったです。
Figma MCPの設定方法はこちらを参照すると簡単に設定できました。
設定が完了したら⌘LでFrameのリンクをコピーして、Cursorに投げるとデータを取得してそれなりに精度高く一発目から作成してくれます。
shadcn/uiなどコンポーネントライブラリを使って実装した方が最初の精度が高くなった印象があるので、最初はそれらを使うと意図に近いデザインになりそうでした。
時々デザインを調整したいときにAskモードで質問してそこに移動してコードの微調整などはしますが、基本お任せでAcceptしてnpm run devをしてエラーが出たら読んでもらって解消するを繰り返していると動くようになります笑（既存サービスの開発でそんなことしたら殴られそうですが…）
2-5. デプロイ
コードがまとまったら、そのままVercelなどにデプロイすればweb上で見ることができるようになります。諸々の設定もわからないことがあればcursor上で質問をすればやり方を全て教えてくれるので、ここで完結するのが嬉しいポイントでした。
おわりに
読んでいただきありがとうございました！
拙い開発の仕方をしていましたが、一通りやってみることでなんとなくこんな感じで実装されていくのかの解像度が少しずつ上がっていっている感覚があるので、AIの登場でデザイナー↔︎エンジニアの境界線が少しずつ曖昧になってきている今、少しずつ寄っていく一歩目として、Figmaを活用しつつFigmaを飛び出して作ってみるという体験はおすすめできるなと思いました。ぜひお試し下さい！
おまけ
他にもこんな感じの診断とかも作って見たりしました
Discussion