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

by 北見海貴

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

登壇者紹介北見海貴 (Kaiki Kitami) 　　　　　　　 ● 所属・業務 ○ 株式会社 Purpom Media Lab SWE/PM ○ 株式会社 Almondo SWE ● コミュニティ ○ Amplify Japan User Group 運営メンバー

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

昨今のAIを活用したデザイン・フロントエンド開発のパターン ● Figma MCP によるデザインからコードの自動生成 ○ 効果的なケース ■ 組織内にデザイナーがいるケース ■ 組織内に既にデザインシステムなどのアセットが充実しているケース ● v0などUIデザイン生成ツールによるコードを用いたデザイン生成 ○ 効果的なケース ■ デザイン知識がない PMやエンジニアが初期のワイヤーフレームやデザインを作成するケース

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

UIデザイン生成ツールの特徴生成AIとの対話を通して、 UIデザインを生成 ● ユーザーは思い通りのデザインが生成されるまで何度も試行錯誤が可能。 ● 裏側では、ReactやHTML/CSSといったコードが生成されており、それを瞬時に描画しているコードを用いてデザインを行う「 Design as Code」の発想 ● 生成AIによってコーディングのコストが著しく下がったことで、これまでは高コストであったコードによるデザイン検討・構築が現実的に ● これにより、UIデザインの構築 ≒ フロントエンド開発が可能となり、開発効率⤴

Slide 9

Slide 9 text

UIデザイン生成ツールの難点チャットごとにコードベースが独立してしまう ● プロジェクト階層を作ることは可能だが、生成されたコードベースが各チャット間で共有されないため、同じアプリを継続的に作るには 1 つのチャット上で長く作業するしかない ● → チャットが肥大化するにつれて AI が前の状態を見落として類似コードを乱立させてしまうなどの問題が発生

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

v0の体験はCursorで代替可能か AIとの対話によるUI生成  ⭕ ⭕ 生成したUIのプレビュー ⭕ ブラウザ上で即座にプレビュー確認可能 ⭕ localhostを起動して確認可能チャットを跨いだ開発 ❌ ⭕ 単一のリポジトリに対して継続的に開発可能

Slide 14

Slide 14 text

v0の体験はCursorで代替可能か AIとの対話によるUI生成  ⭕ ⭕ 生成したUIのプレビュー ⭕ ブラウザ上で即座にプレビュー確認可能 ⭕ localhostを起動して確認可能チャットを跨いだ開発 ❌ ⭕ 単一のリポジトリに対して継続的に開発可能 UIデザイン生成ツールでは難しい複数画面の管理が可能に

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

残る課題 Cursorで好き放題に画面を量産すると、リポジトリがカオス化しがち ● 同じようなコンポーネントが何個も生まれがち ○ → shadcn/ui を用いることで解決 ● 画面ごとにトンマナ・スタイルがバラバラになる ○ → Storybook を用いることで解決上記ライブラリを用いた「制約」を設けることで AIによる生成結果をコントロール

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

実際にやってみた

Slide 26

Slide 26 text

事例紹介お題: 社内向けの RAG Chatシステム ● AIチャットページ ○ チャット履歴の表示 ○ AIチャットインターフェイス ● ナレッジベース管理画面 ○ RAGで参照するドキュメントやFAQなどをアップロード／管理 ● ユーザー管理画面 ○ 組織内ユーザーの招待 / 管理

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

デザインシステム適用前

Slide 33

Slide 33 text

デザインシステム適用後

Slide 34

Slide 34 text

3. 最終成果物をStorybookで確認生成された UIデザインの一貫性を Storybook上で確認 ● コンポーネントレベルでの確認 ○ コンポーネントの状態別のデザインまで確認可能 ● 画面レベルでの確認 ○ API呼び出し部分をモック化することで画面の確認も可能

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

まとめ ● 生成AIによってコードでデザインを管理するというのが現実的になったが、 v0などのツールは現状だと中規模以上のシステム開発においては不向きな点が多い ○ → Cursorで代替 ● Cursorで好き放題画面の生成を行うと、デザインの一貫性・保守性が保てない ○ → shadcn/ui、Storybookを活用 ● 生成AIによって生成されるアウトプットの責任を持つのは人間 ○ 生成内容をコントロールし続けないと 0→1のスピードは上がってもその後の保守性が低下し、結果的に生産性や品質の低下を招くリスクも 0→1のスピード感を保ちつつ、拡張性の高いデザインと継続的な運用体制の両立が重要

Slide 38

Slide 38 text

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