はじめに
こんにちは、ENECHANGE EXPERIENCE部のデザイナーの河津です。私はAIエージェントを使って、新規プロダクトの必要なUIコンポーネントを洗い出し、開発前に追加で必要なデザインを減らすようにしました。
私がAIエージェントを使う用途は主に広告のバナー作成のアイデアだし、新規プロダクトの簡単なプロトタイプをつくり、UIコンポーネントに必要なデザインの洗い出しがメインです。最終のデザインは自分がするため、そこまでのアイデアや壁打ち相手、という認識でAIエージェントを利用しています。
本来ならばもっとデザイナーにとって有用な活用法があると思いますが、私自身がまだまだ勉強中でAIエージェントを使いこなせていない中でも業務に活用できるところがありました。今回は新規プロダクトでのUIコンポーネントの設計において、AIエージェントの活用法について紹介します。
従来のUI設計プロセスの課題
新規Webアプリの開発において、UI設計は最も時間と労力がかかる作業の一つでした。従来はFigmaでプロトタイプを作成していましたが、開発時でUIコンポーネントの不足分が発生することがありました。しかしAIエージェントを利用することで、デザイン段階でプロトタイプでは見つからなかった懸案を実装前に見つけることができました。
AIエージェントはプロジェクトの途中から導入することになったので、Figmaでプロトタイプを作成した後に、cursorでプロトタイプを作成しました。 cursorは日本語で会話しながらプロトタイプが作れます。ブラウザ上で作れてReactなどの環境を構築できます。
実践的な活用例
ケーススタディ: 新規管理画面のUI設計
課題: 複雑な管理画面のUIコンポーネントを効率的に設計したい。開発時の追加デザインを減らして開発効率を上げたい。
AI活用アプローチ:
機能要件をAIエージェントに入力し、必要なUIコンポーネントを自動抽出
既存のデザインシステムとの整合性をチェック
各コンポーネントの詳細仕様をデザイン
結果:
・従来2週間かかっていたUI設計が1日で完了
・開発段階での追加デザイン要求を削減できた
具体的な作業フロー
Step 1: 要件定義の確認とcursorへの入力
今回はWebアプリの新規サービスだったため、まず要件定義を確認し、cursorにサービス概要と各ページの機能をおおまかに記載しました。それだけで基本的なページが作成されました。本来はFigma MCPを利用して精度の高いデザインにすべきでしたが、そこまでは使いこなせていなかったため、あくまで必要なコンポーネントの洗い出しとしてcursorを活用しました。
Step 2: 機能別の詳細化
ページが作成された後は、機能別に詳細を伝えるのみでした。プロトタイプでは細かいデザイン部分は気にせず、どのコンポーネントが必要か、どんなアイコンを用意すればよいか壁打ちする程度でした。詳細の画面の作り込みは行いませんでした。
Step 3: DesignSystemのアップデート
cursorでのプロトタイプを確認しつつ、エネチェンジのDesignSystemをアップデートしました。既存のコンポーネントで対応できない部分を特定し、新しいコンポーネントの必要性を判断しました。
Step 4: Figmaでのデザイン制作
最終的には、cursorでのプロトタイプを参考に、最終的にFigmaでデザイン制作を行いました。AIエージェントで作成したプロトタイプをベースに、より洗練されたデザインに仕上げていきました。
得られた効果と学び
効率化の実感
UI設計の効率が大幅に向上しました。特に、コンポーネントの洗い出し作業が効率化されたことで、デザイナーはより作業に集中できるようになりました。また、コンポーネントだけでなく、サービスの導線についても参考になりました。
品質の向上
見落としが減り、一貫性のあるデザインが実現できました。また、開発者との認識のずれも大幅に解消されました。
重要な発見：AIの限界と人間の役割
このプロジェクトを通じて、重要な発見がありました。
AIエージェントの限界
プロトタイプはAIエージェントがあればすぐにできますが、一方で精度の高いプロトタイプにするにはサービス内容や要件定義について話をつめる必要があり、そこはAIでは代替できないと感じました。そのためにはデザイナーは開発だけでなく、参入する業界の理解も必要だと思いました。
プロトタイプが完全にユーザビリティとして良いものではないと感じ、最終的には関係各所と協議し、UIを決める必要があると思いました。
デザイナーの重要性
普段から他サービスのUIを見るなど知見を深める必要を感じました。
AIは効率化のツールとして活用し、最終的な判断と品質の担保は人間が行うという役割分担が重要です。
新しい課題の発見
AIエージェントの活用により、従来気づかなかった課題も見つかりました。例えば、既存のデザインシステムの不備や、新しいコンポーネントパターンの必要性などです。
今後の展望
AIエージェント活用の拡大
今回はFigmaとcursorの両方でプロトタイプを作成したので、今後はAIエージェントでプロトタイプを作成していきたいです。ただし、要件定義の重要性を理解した上で、より効率的なワークフローを構築していきたいと思います。
デザイナーのスキル向上
AIエージェントはあくまでツールとして使い、デザイナー自身の判断力とスキルを深めることが重要です。他サービスのUIを積極的に研究し、ユーザビリティの観点からより良い判断ができるよう、継続的な学習を進めていきます。
チーム全体への展開
この手法をチーム全体に展開し、全てのプロジェクトで効率的なUI設計を実現したいと考えています。AIエージェントと人間の役割分担を明確にし、より良いデザインプロセスを確立していきます。
PoC駆動型開発への貢献
また、エクスペリエンス部はPoC（Proof of Concept）駆動型の開発体制を目指しています。そのためデザインだけでなく、AIエージェントで新たな課題と解決案を見つけていきたいと思います。また、Figma MCPを利用し、開発の効率化など目指したいです。
おわりに
AIエージェントを活用したUIコンポーネント設計は、効率化だけでなく、品質の向上も実現できる手法です。今後も実験的なアプローチを取りながら、より良いデザインプロセスを確立していきたいと思います。
