こんな課題、ありませんか？
AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう
AI 駆動開発において、AI に UI の自動生成を任せきりにすると、ページごとにボタンの色が異なるなど、意図しないデザインになってしまう課題がある。
AI による高速化メリットが、従来のデザイン作成工程で相殺されてしまう
「全画面分の Figma デザインを作成する」プロセスに時間がかかり、AI による UI コード生成の高速化というメリットを享受できていない。
AI が参照できる、信頼性の高いデザインシステムが存在しない
AI によるコード生成のメリットを享受しつつ品質を担保するためには、AI が解釈・参照可能なデザインシステムと、新しい開発プロセスを確立することが不可欠である。
AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現
UI/UX デザイナーと開発者に対し、AI が参照可能なデザインシステムと、
それを活用した開発プロセス（スキーム）を確立・提供する
AI 参照可能なデザインシステムと Figma MCP の活用
Figma、Storybook、shadcn/ui を連携させ、主に Figma MCP を通じて AI が参照可能なデザインシステムを構築する。Figma はデザイン定義、コンポーネント、変数（デザイントークン）管理の基点となり、AI 参照のメインソースとなる。
- Figma 上で制作するデザインシステムをデザイン定義として活用
- Figma MCP を通してデザインシステム上の定義を取得して必要な UI 生成に利用
- Figma Code Connect でデザインコンポーネントと実装コード（React / Next.js）を連携
- AI がデザインの意図を正確に認識できる基盤を構築
原則デザイン不要の UI 自動生成プロセスへの転換
全画面分の Figma デザイン作成を原則廃止し、前提情報、ユーザーストーリーと受け入れ基準を AI（GitHub Copilot） に入力することで、デザインシステムに準拠した UI コードを直接生成するプロセスを目指す。
- ユーザーストーリーから直接 UI コードを生成
- デザインシステムに準拠した一貫性のある UI を自動生成
- ベストケース：個別画面のデザイン作成が不要に
デザインと実装の整合性を担保するレビューフロー
Figma と Storybook をプラグイン経由で「リンク参照」させることで、デザイン定義と実装 UI コンポーネントカタログ（Storybook）の一貫性を確保する。
- Figma と Storybook のリンク参照による整合性確保
- Chromatic（GitHub 連携）によるビジュアルリグレッションテスト
- デザイナー側でデフォルトでレビューを設定する運用
AIDD デザインを活用した開発プロセス
UI/UX 設計プロセスの再定義と確立を目指す
デザインシステム
基盤の構築
デザイナーが Figma 上でデザインシステム（コンポーネント、変数）を AI が解釈可能な形で設計・構築する。
連携設定と
レビュー承認フローの確立
Figma と Storybook をプラグインで連携（リンク参照）させ、Figma Code Connect でデザインコンポーネントと実装コードを連携する。Chromatic で UI コンポーネントの変更レビューと承認フローを確立する。
UI 要件入力と
AI による自動生成
開発者が GitHub Copilot に対し、主に Figma MCP を参照させつつ要件（前提情報、ユーザーストーリー、受け入れ基準）を入力。AI がデザインシステムに準拠した UI コード（React/Next.js）を自動生成する。
AI 生成 UI の
レビュー・調整
開発者・デザイナーが生成された UI をレビュー。修正が必要な場合のみデザイナーが Figma で該当画面のデザインを作成・調整し、再実装を行う。
事例紹介
gaipack の AIDD デザインサービス導入による成功事例をご紹介します
AIDD デザインで開発工数を約50%短縮。全画面 Figma デザイン作成プロセスを原則廃止し、モダンな UX を実現。
商業施設内の DX 推進プロジェクトにおいて、gaipack の AIDD デザインを導入。AI 技術を活用して従来の全画面デザイン作成プロセスを原則廃止し、開発工数全体を約 50% 短縮しました。
税制改正対応の「マスタ管理システム」開発に gaipack を導入。AIDD デザインで更新工数 50% 削減を目指す。
税制改正対応のマスタ管理システム刷新プロジェクトにおいて、gaipack の AIDD デザインを導入。UI の標準化と再利用性を高め、更新工数の削減とミス防止の仕組みを構築しました。
FOLLOW US
SNS 公式アカウント
gaipack の最新情報を SNS で発信しています