【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践

Transcript

1. 【PoCで終わらない】運用フェーズまで見据えた AI駆動UIデザイン/フロントエンド開発実践 株式会社 PURPOM MEDIA LAB / 株式会社 Almondo 北見

   海貴

2. 登壇者紹介 北見 海貴 (Kaiki Kitami) 　　　　　　　 • 所属・業務 ◦ 株式会社

   Purpom Media Lab SWE/PM ◦ 株式会社 Almondo SWE • コミュニティ ◦ Amplify Japan User Group 運営メンバー

3. 本日お話しする内容 Almondo で実際に導入した、デザイン知識がないエンジニアでも行える AI駆動のUI デザイン/フロントエンド開発基盤 についてお話しします。

4. 昨今のAIを活用したデザイン・フロントエンド開発のパターン • Figma MCP によるFigmaに既にあるデザインからコードの自動生成 • v0などUIデザイン生成ツールによるコードを用いたデザイン生成

5. 昨今のAIを活用したデザイン・フロントエンド開発のパターン • Figma MCP によるデザインからコードの自動生成 ◦ 効果的なケース ▪ 組織内にデザイナーがいるケース ▪

   組織内に既にデザインシステムなどのアセットが充実しているケース • v0などUIデザイン生成ツールによるコードを用いたデザイン生成 ◦ 効果的なケース ▪ デザイン知識がない PMやエンジニアが初期のワイヤーフレームやデザインを作成するケー ス

6. 昨今のAIを活用したデザイン・フロントエンド開発のパターン • Figma MCP によるデザインからコードの自動生成 ◦ 効果的なケース ▪ 組織内にデザイナーがいるケース ▪

   組織内に既にデザインシステムなどのアセットが充実しているケース • v0などUIデザイン生成ツールによるコードを用いたデザイン生成 ◦ 効果的なケース ▪ デザイン知識がない PMやエンジニアが初期のワイヤーフレームやデザインを作成するケー ス 今回はこちらのパターンについてお話しします

7. v0やLovableなどUIデザイン生成ツールを使っていますか？

8. UIデザイン生成ツールの特徴 生成AIとの対話を通して、 UIデザインを生成 • ユーザーは思い通りのデザインが生成されるまで何度も試行錯誤が可 能。 • 裏側では、ReactやHTML/CSSといったコードが生成されており、それ を瞬時に描画している コードを用いてデザインを行う「

   Design as Code」の発想 • 生成AIによってコーディングのコストが著しく下がったことで、 これまで は高コストであったコードによるデザイン検討・構築が現実的に • これにより、UIデザインの構築 ≒ フロントエンド開発が可能となり、開 発効率⤴

9. UIデザイン生成ツールの難点 チャットごとにコードベースが独立してしまう • プロジェクト階層を作ることは可能だが、 生成されたコードベース が各チャット間で共有されない ため、同じアプリを継続的に作る には 1 つのチャット上で長く作業するしかない

   • → チャットが肥大化するにつれて AI が前の状態を見落とし て類似コードを乱立させてしまうなどの問題が発生

10. v0やLovableなどのUIデザイン生成ツールは何画面もあるようなシステム開発には不向 き

11. ↓ 「コードでデザインを生成する」という体験を保ちつつ、 Cursor上でUIデザインの構築 ・運用管理を行う方法をご紹介 v0やLovableなどのUIデザイン生成ツールは何画面もあるようなシステム開発には不向 き

12. Cursorを用いたUIデザイン管理・運用方法

13. v0の体験はCursorで代替可能か AIとの対話によるUI生成
 ⭕ ⭕ 生成したUIのプレビュー ⭕ ブラウザ上で即座にプレビュー確 認可能 ⭕ localhostを起動して確認可能

    チャットを跨いだ開発 ❌ ⭕ 単一のリポジトリに対して継続的に 開発可能

14. v0の体験はCursorで代替可能か AIとの対話によるUI生成
 ⭕ ⭕ 生成したUIのプレビュー ⭕ ブラウザ上で即座にプレビュー確 認可能 ⭕ localhostを起動して確認可能

    チャットを跨いだ開発 ❌ ⭕ 単一のリポジトリに対して継続的に 開発可能 UIデザイン生成ツールでは難しい複数画面の管理が可能に

15. では、単純にCursor上でAIと対話しながらUI生成すれば良いだけなのか？

16. ↓ 課題は残る では、単純にCursor上でAIと対話しながらUI生成すれば良いだけなのか？

17. 残る課題 Cursorで好き放題に画面を量産すると、リポジトリがカオス化しがち • 同じようなコンポーネントが何個も生まれがち • 画面ごとにトンマナ・スタイルがバラバラになる → 結果、保守が難しくなる

18. 残る課題 Cursorで好き放題に画面を量産すると、リポジトリがカオス化しがち • 同じようなコンポーネントが何個も生まれがち ◦ → shadcn/ui を用いることで解決 • 画面ごとにトンマナ・スタイルがバラバラになる

    ◦ → Storybook を用いることで解決 上記ライブラリを用いた「制約」を設けることで AIによる生成結果をコントロール

19. shadcn/ui とは • Tailwind CSS × Radix UI の OSS

    コンポーネント集 • npm 依存ではなく、CLI 経由でソースをリポジトリに 生成してくれるので、コードが隠蔽されず生成 AIとの 相性⭕ • global.css にてトークン一括管理を行うため、スタイリ ングの一括管理が容易に可能

20. shadcn/ui とは npm 依存ではなく、CLI 経由でソースをリポジトリに生成してくれるので、 コードが隠蔽されず生成 AIとの相性⭕ $ npx shadcn@latest

    add button

21. shadcn/ui とは global.css にてトークン一括管理を行うため、スタイリングの一括管理が容易に可能

22. Storybookとは • コンポーネントや画面をブラウザで確認できる UIカタ ログツール • コンポーネントごとにユーザーが定義した状態 （Story）の確認が可能

23. Storybookとは • 開発中のコンポーネントをブラウジング可能 https://storybook.js.org/

24. UIデザイン・フロントエンド開発の流れ 以下の3ステップでUIデザイン・フロントエンド開発を行う 1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める 2. Cursor上でデザインシステムを構築し、実装した画面に一括で適用
 3. 生成されたUIデザインの一貫性をStorybook上で確認

25. 実際にやってみた

26. 事例紹介 お題: 社内向けの RAG Chatシステム • AIチャットページ ◦ チャット履歴の表示 ◦

    AIチャットインターフェイス • ナレッジベース管理画面 ◦ RAGで参照するドキュメントやFAQなどをアップロード／管理 • ユーザー管理画面 ◦ 組織内ユーザーの招待 / 管理

27. 1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める CursorのProject Rules にて、shadcn/ui を用いて実装することを明文化

28. 1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める • 画面ごとに機能要件・実装先を 指定

29. • v0で同じ要領で、localhost上で 生成されたUIを確認しながら納 得のいくデザインになるまで試 行錯誤を繰り返す 1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める

30. CursorのProject Rules にて、デザインシステム構築ステップを定義 → デザインの知識がないエンジニアであってもデザインシステムが構築できる 2. Cursor上でデザインシステムを構築し、実装した画面に一括で適用 


31. 2. Cursor上でデザインシステムを構築し、実装した画面に一括で適用 
 Cursorとの対話を通してデザインシステムを構築 • AIからの質問に回答するだけでブランドイメージに沿っ たデザインシステムを作成可能 • ここで固まったデザインシステムを global.cssに対して

    定義することで、一括反映が可能

32. デザインシステム適用前

33. デザインシステム適用後

34. 3. 最終成果物をStorybookで確認 生成された UIデザインの一貫性を Storybook上で確認 • コンポーネントレベルでの確認 ◦ コンポーネントの状態別のデザインまで確認可能 •

    画面レベルでの確認 ◦ API呼び出し部分をモック化することで画面の確認も可能

35. 3. 最終成果物をStorybookで確認 • コンポーネントレベルでの確認

36. 3. 最終成果物をStorybookで確認 • 画面レベルでの確認

37. まとめ • 生成AIによってコードでデザインを管理するというのが現実的になったが、 v0などのツールは現 状だと中規模以上のシステム開発においては不向きな点が多い ◦ → Cursorで代替 • Cursorで好き放題画面の生成を行うと、デザインの一貫性・保守性が保てない

    ◦ → shadcn/ui、Storybookを活用 • 生成AIによって生成されるアウトプットの責任を持つのは人間 ◦ 生成内容をコントロールし続けないと 0→1のスピードは上がってもその後の保守性が低下 し、結果的に生産性や品質の低下を招くリスクも 0→1のスピード感を保ちつつ、拡張性の高いデザインと継続的な運用体制の両立が重要

38. Appendex • 本日お話しした内容の詳細については、Zennで記事を書いています。もし よかったらご覧ください！