私はモバイルエンジニアで、これまでUIデザインにはFigmaを愛用してきました。
しかし近年のWebフロントエンド技術の大衆化により、従来のUIデザインワークフローが変化しつつあります。
デザインファイルの管理コストが嵩むこともあり、最近個人的にNext.jsを使ったプロトタイピング、UIデザインにシフトしました。
本記事では、個人開発者向けモバイルUIデザインツールとしてのNext.js の可能性を探ります。
ポエム記事なので、手順はさらっと書いていきます。
効率的なプロトタイピングワークフロー
私が個人開発で実践している、デザインファイルの管理コストを削減し、より効率的なUIデザインを実現する手法をご紹介します。
A4一枚に集約する形で、要件を一通り書き出す
それをもとに、ChatGPTで要件定義書を生成する
デザイン仕様書も同時に生成
それをv0に投げる
ブラウザ上でモバイルビューを確認
これだけで一通りは完成します。
3について少し補足すると、「デザイナーに依頼することを想定して、デザイン仕様書を書いて」「モバイルファーストで」といった文言をプロンプトに含めることをお勧めします。
メリットと今後の展望
v0はshadcn/ui とNext.jsを用いてデザインを組んでくれるため、実際利用するコンポーネントライブラリによっては、実装時の正確な見た目を表現するのは難しいかもしれません。
しかしながら、デザインプロセスから「コンポーネントの配置」が消える利点は依然として大きいので、もし個人開発時にフルスクラッチでUIを考えているモバイルエンジニアの方がいれば、是非一度試してみていただきたく思います。
Cursorを用いることで、Webの知見が皆無であっても、最後まで自然言語でUIを組み切ることができます。
便利なツールを積極的に組み合わせることで、より効率的なUIデザインプロセスを構築していきましょう。