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
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.3k
#Dubois Challenge 2025: Economics
ajstarks
0
150
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
350
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
570
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
10k
How to get a Tiger to Tulsa
mcduckyart
0
120
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
400
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
110
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.8k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1k
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Building Adaptive Systems
keathley
43
2.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
YesSQL, Process and Tooling at Scale
rocio
173
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Side Projects
sachag
455
43k
The Cult of Friendly URLs
andyhume
79
6.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Music & Morning Musume
bryan
46
6.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
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で記事を書いています。もし よかったらご覧ください!