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
330
【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
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
660
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
160
#Dubois Challenge 2025: Economics
ajstarks
1
170
「UXとUIの違い」v2
shirasu3
0
230
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
810
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
300
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Become a Pro
speakerdeck
PRO
29
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Docker and Python
trallard
45
3.6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Thoughts on Productivity
jonyablonski
70
4.8k
Six Lessons from altMBA
skipperchong
28
4k
It's Worth the Effort
3n
187
28k
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で記事を書いています。もし よかったらご覧ください!