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
380
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
北見海貴
June 20, 2025
Tweet
Share
More Decks by 北見海貴
See All by 北見海貴
エンジニアがデザインまで担うための AI駆動UIデザイン/フロントエンド開発実践
kitami
4
840
Amplify × ブロックチェーン で取引管理システムを作った話
kitami
0
160
Other Decks in Design
See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
6
800
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
190
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.8k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
4.1k
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.6k
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
110
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
630
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
680
decksh object reference
ajstarks
2
1.3k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Being A Developer After 40
akosma
90
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
Embracing the Ebb and Flow
colly
88
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Optimizing for Happiness
mojombo
379
70k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Faster Mobile Websites
deanohume
310
31k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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で記事を書いています。もし よかったらご覧ください!