Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Search
北見海貴
June 20, 2025
Design
1
270
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
北見海貴
June 20, 2025
Tweet
Share
More Decks by 北見海貴
See All by 北見海貴
Amplify × ブロックチェーン で取引管理システムを作った話
kitami
0
160
Other Decks in Design
See All in Design
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
The Spectacular Lies of Maps
axbom
PRO
1
210
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
780
Installing and Running decksh/pdfdeck
ajstarks
1
800
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
150
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
610
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
460
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
It's Worth the Effort
3n
185
28k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Faster Mobile Websites
deanohume
308
31k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cult of Friendly URLs
andyhume
79
6.5k
Balancing Empowerment & Direction
lara
1
520
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
【PoCで終わらない】運用フェーズまで見据えた AI駆動UIデザイン/フロントエンド開発実践 株式会社 PURPOM MEDIA LAB / 株式会社 Almondo 北見
海貴
登壇者紹介 北見 海貴 (Kaiki Kitami) • 所属・業務 ◦ 株式会社
Purpom Media Lab SWE/PM ◦ 株式会社 Almondo SWE • コミュニティ ◦ Amplify Japan User Group 運営メンバー
本日お話しする内容 Almondo で実際に導入した、デザイン知識がないエンジニアでも行える AI駆動のUI デザイン/フロントエンド開発基盤 についてお話しします。
昨今のAIを活用したデザイン・フロントエンド開発のパターン • Figma MCP によるFigmaに既にあるデザインからコードの自動生成 • v0などUIデザイン生成ツールによるコードを用いたデザイン生成
昨今のAIを活用したデザイン・フロントエンド開発のパターン • Figma MCP によるデザインからコードの自動生成 ◦ 効果的なケース ▪ 組織内にデザイナーがいるケース ▪
組織内に既にデザインシステムなどのアセットが充実しているケース • v0などUIデザイン生成ツールによるコードを用いたデザイン生成 ◦ 効果的なケース ▪ デザイン知識がない PMやエンジニアが初期のワイヤーフレームやデザインを作成するケー ス
昨今のAIを活用したデザイン・フロントエンド開発のパターン • Figma MCP によるデザインからコードの自動生成 ◦ 効果的なケース ▪ 組織内にデザイナーがいるケース ▪
組織内に既にデザインシステムなどのアセットが充実しているケース • v0などUIデザイン生成ツールによるコードを用いたデザイン生成 ◦ 効果的なケース ▪ デザイン知識がない PMやエンジニアが初期のワイヤーフレームやデザインを作成するケー ス 今回はこちらのパターンについてお話しします
v0やLovableなどUIデザイン生成ツールを使っていますか?
UIデザイン生成ツールの特徴 生成AIとの対話を通して、 UIデザインを生成 • ユーザーは思い通りのデザインが生成されるまで何度も試行錯誤が可 能。 • 裏側では、ReactやHTML/CSSといったコードが生成されており、それ を瞬時に描画している コードを用いてデザインを行う「
Design as Code」の発想 • 生成AIによってコーディングのコストが著しく下がったことで、 これまで は高コストであったコードによるデザイン検討・構築が現実的に • これにより、UIデザインの構築 ≒ フロントエンド開発が可能となり、開 発効率⤴
UIデザイン生成ツールの難点 チャットごとにコードベースが独立してしまう • プロジェクト階層を作ることは可能だが、 生成されたコードベース が各チャット間で共有されない ため、同じアプリを継続的に作る には 1 つのチャット上で長く作業するしかない
• → チャットが肥大化するにつれて AI が前の状態を見落とし て類似コードを乱立させてしまうなどの問題が発生
v0やLovableなどのUIデザイン生成ツールは何画面もあるようなシステム開発には不向 き
↓ 「コードでデザインを生成する」という体験を保ちつつ、 Cursor上でUIデザインの構築 ・運用管理を行う方法をご紹介 v0やLovableなどのUIデザイン生成ツールは何画面もあるようなシステム開発には不向 き
Cursorを用いたUIデザイン管理・運用方法
v0の体験はCursorで代替可能か AIとの対話によるUI生成 ⭕ ⭕ 生成したUIのプレビュー ⭕ ブラウザ上で即座にプレビュー確 認可能 ⭕ localhostを起動して確認可能
チャットを跨いだ開発 ❌ ⭕ 単一のリポジトリに対して継続的に 開発可能
v0の体験はCursorで代替可能か AIとの対話によるUI生成 ⭕ ⭕ 生成したUIのプレビュー ⭕ ブラウザ上で即座にプレビュー確 認可能 ⭕ localhostを起動して確認可能
チャットを跨いだ開発 ❌ ⭕ 単一のリポジトリに対して継続的に 開発可能 UIデザイン生成ツールでは難しい複数画面の管理が可能に
では、単純にCursor上でAIと対話しながらUI生成すれば良いだけなのか?
↓ 課題は残る では、単純にCursor上でAIと対話しながらUI生成すれば良いだけなのか?
残る課題 Cursorで好き放題に画面を量産すると、リポジトリがカオス化しがち • 同じようなコンポーネントが何個も生まれがち • 画面ごとにトンマナ・スタイルがバラバラになる → 結果、保守が難しくなる
残る課題 Cursorで好き放題に画面を量産すると、リポジトリがカオス化しがち • 同じようなコンポーネントが何個も生まれがち ◦ → shadcn/ui を用いることで解決 • 画面ごとにトンマナ・スタイルがバラバラになる
◦ → Storybook を用いることで解決 上記ライブラリを用いた「制約」を設けることで AIによる生成結果をコントロール
shadcn/ui とは • Tailwind CSS × Radix UI の OSS
コンポーネント集 • npm 依存ではなく、CLI 経由でソースをリポジトリに 生成してくれるので、コードが隠蔽されず生成 AIとの 相性⭕ • global.css にてトークン一括管理を行うため、スタイリ ングの一括管理が容易に可能
shadcn/ui とは npm 依存ではなく、CLI 経由でソースをリポジトリに生成してくれるので、 コードが隠蔽されず生成 AIとの相性⭕ $ npx shadcn@latest
add button
shadcn/ui とは global.css にてトークン一括管理を行うため、スタイリングの一括管理が容易に可能
Storybookとは • コンポーネントや画面をブラウザで確認できる UIカタ ログツール • コンポーネントごとにユーザーが定義した状態 (Story)の確認が可能
Storybookとは • 開発中のコンポーネントをブラウジング可能 https://storybook.js.org/
UIデザイン・フロントエンド開発の流れ 以下の3ステップでUIデザイン・フロントエンド開発を行う 1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める 2. Cursor上でデザインシステムを構築し、実装した画面に一括で適用 3. 生成されたUIデザインの一貫性をStorybook上で確認
実際にやってみた
事例紹介 お題: 社内向けの RAG Chatシステム • AIチャットページ ◦ チャット履歴の表示 ◦
AIチャットインターフェイス • ナレッジベース管理画面 ◦ RAGで参照するドキュメントやFAQなどをアップロード/管理 • ユーザー管理画面 ◦ 組織内ユーザーの招待 / 管理
1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める CursorのProject Rules にて、shadcn/ui を用いて実装することを明文化
1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める • 画面ごとに機能要件・実装先を 指定
• v0で同じ要領で、localhost上で 生成されたUIを確認しながら納 得のいくデザインになるまで試 行錯誤を繰り返す 1. Cursor上で shadcn/ui を使ってUIデザイン/画面の実装を進める
CursorのProject Rules にて、デザインシステム構築ステップを定義 → デザインの知識がないエンジニアであってもデザインシステムが構築できる 2. Cursor上でデザインシステムを構築し、実装した画面に一括で適用
2. Cursor上でデザインシステムを構築し、実装した画面に一括で適用 Cursorとの対話を通してデザインシステムを構築 • AIからの質問に回答するだけでブランドイメージに沿っ たデザインシステムを作成可能 • ここで固まったデザインシステムを global.cssに対して
定義することで、一括反映が可能
デザインシステム適用前
デザインシステム適用後
3. 最終成果物をStorybookで確認 生成された UIデザインの一貫性を Storybook上で確認 • コンポーネントレベルでの確認 ◦ コンポーネントの状態別のデザインまで確認可能 •
画面レベルでの確認 ◦ API呼び出し部分をモック化することで画面の確認も可能
3. 最終成果物をStorybookで確認 • コンポーネントレベルでの確認
3. 最終成果物をStorybookで確認 • 画面レベルでの確認
まとめ • 生成AIによってコードでデザインを管理するというのが現実的になったが、 v0などのツールは現 状だと中規模以上のシステム開発においては不向きな点が多い ◦ → Cursorで代替 • Cursorで好き放題画面の生成を行うと、デザインの一貫性・保守性が保てない
◦ → shadcn/ui、Storybookを活用 • 生成AIによって生成されるアウトプットの責任を持つのは人間 ◦ 生成内容をコントロールし続けないと 0→1のスピードは上がってもその後の保守性が低下 し、結果的に生産性や品質の低下を招くリスクも 0→1のスピード感を保ちつつ、拡張性の高いデザインと継続的な運用体制の両立が重要
Appendex • 本日お話しした内容の詳細については、Zennで記事を書いています。もし よかったらご覧ください!