第2回生成AI業務改善大会_AIで“デザインシステム健康診断”を作った話

【AmebaLIFE×FANTECH】第2回生成AI業務改善大会 AIで “デザインシステム健康診断” を作った話 25卒デザイナー Atarapi 発表スライド（公開用）

自己紹介 興味のある分野 UI,UX設計, アクセシビリティ, デザインシステム 直近の制作物 グラフィック制作 新由衣 / Yui Atarashi UI, UX設計 あだ名：あたらぴ FANBASE所属 デザイナー （最近はPMにもチャレンジ中） 第2回生成AI業務改善大会LT — 20251112

紹介 Boosting JapanESE -Origin EntertainmentS

FANBASEでの開発 アーティストごとに横展開 Boosting JapanESE -Origin EntertainmentS FANBASEでは基盤が共通である 第2回生成AI業務改善大会LT — 20251112

背景 基本的に同じUIでスタイルだけをIPごとに変えている FANBASEの各サービスのマイページ デザインシステムでデータを管理 第2回生成AI業務改善大会LT — 20251112

背景 デザインシステムとは？ 再利用可能なコンポーネントと標準規約の集まり Amebaのデザインシステム「Spindle」の全貌公開より Spindleもデザインシステム FANBASEでもデザインシステムが重要 第2回生成AI業務改善大会LT — 20251112

課題 FANBASEのデザインチーム FANBASEは 少数のチーム で開発をしている デザイナー 3 名で6つのプロダクトを担当 デザインマネージャー グラフィック担当 UI,UX設計リード 第2回生成AI業務改善大会LT — 20251112

課題 スピード感を持って定常施策も進める必要があり、 デザインシステムの運用や改修に当てるリソースが限られている... 第2回生成AI業務改善大会LT — 20251112

課題 このままデザインシステムの負債が重なっていくと... デザインデータがバラバラで統一性のないものに。。。 第2回生成AI業務改善大会LT — 20251112

課題 例えば何が起きる？ コンポーネントのスタイルがバラバラになる 完了 完了 完了 完了 投稿が完了しました 投稿が完了しました どのコンポーネントを使って良いかわからない UI設計に時間がかかったり、統一感のないアプリになったり... 第2回生成AI業務改善大会LT — 20251112

Figmaのコンポーネントの利用状況は見れないの？ ライブラリアナリティクス機能 がある 第2回生成AI業務改善大会LT — 20251112

Figma ライブラリアナリティクス機能 コンポーネントの利用状況を表示 データの羅列であり、意味が見えない + 能動的に 使用する必要がある 第2回生成AI業務改善大会LT — 20251112

目的 具体的にどこから取り組むべきか優先順位がわからない データから意味を見出し、 今とるべきアクションを導き出してくれないだろうか？ 第2回生成AI業務改善大会LT — 20251112

解決施策 デザインシステムの健康診断レポートを作ってみた

デザインシステム健康診断レポートの概要 累計のアクティビティ 既存のコンポーネントの状態判定 重大な問題 要注意 良好 コンポーネントのアクショングラフ ワークスペース別のアクティビティ

活用の例 改善が必要なコンポーネント CommentArea 要注意 - 早急対応が必要 Default 挿入数 26件 デタッチ数 6件 デタッチ率 23.1% 直近で改善するべきコンポーネントが分かる データから意味を見出し、次のアクションへ繋げる 第2回生成AI業務改善大会LT — 20251112

システム構成 デザインデータを取得 ダッシュボードのデザイン Figma MCP コピー Figma Make Cursor Figma FANBASE Design System Figma Library Analytics API コンポーネントの利用状況を取得 生成AIを使用し、デザインもコーディングも最小限で実現 第2回生成AI業務改善大会LT — 20251112

Figma Make × Figma MCP UIをプロンプトベースで自動生成 第2回生成AI業務改善大会LT — 20251112

まとめ デザインシステムの健康診断レポートを作った データを可視化し、意味を見出し、アクションを決める 少人数で少しずつ負債を解消していく 第2回生成AI業務改善大会LT — 20251112

目指すべき未来と現状 2026 今ここ デザインシステム健康診断 負債のある状態 FANBASE Design System 整えられたデザインシステム 第2回生成AI業務改善大会LT — 20251112

目指すべき未来と現状 2027 MCP ？ プロンプトベースで デザイン+フロントが完成 第2回生成AI業務改善大会LT — 20251112