HOME/コラム一覧/事例紹介
コラム一覧に戻る
事例紹介

従来の全画面分の Figma デザイン作成
プロセスを原則廃止。
開発工数を約 50%短縮し、
モダンな UX を実現。

商業施設内の DX 推進プロジェクトにおいて、gaipack の「AI デザインシステム」サービスを導入。
AI 技術(Figma MCP、GitHub Copilot など)を活用して従来のデザイン作成プロセスを原則廃止し、AI 駆動開発(AIDD)の品質と速度を両立させることで、開発工数全体を大幅に短縮しました。

2025年12月19日
AI デザインシステム導入事例

導入前の課題と背景

DX 推進と顧客体験向上を目指す中で、主に以下の技術的・プロセス的な課題に直面していました。

構造的な課題とユーザー体験(UX)の不満

既存システムの遅延とユーザーにとって使いにくいインターフェースが、DX 推進の障壁となっていました。

IT 基盤の遅延と DX の必要性

既存システムの IT 基盤整備が約 10 年遅れており、抜本的なプロセス改革が急務でした。これは、2026 年の新施設・PA 開業に向けた DX 推進の一環です。

ユーザー体験の低下

現行の予約画面が使いにくく(特に平日・休日の区別がつきにくいなど)、予約時のストレス要因となっていました。

AI 駆動開発(AIDD)における技術的課題

AI を活用した開発において、デザインの統一性と開発速度を両立させるための仕組みが不足していました。

デザイン統一性の欠如

AI 駆動開発(AIDD)において、AI が UI を自動生成する際、AI が参照できる信頼性の高いデザインシステムがないため、ページごとにボタンの色が異なるなど、統一感がなく意図しないデザインになってしまう課題がありました。

AI の速さを活かしきれない

AI によるUIコード生成は高速ですが、従来の「全画面分の Figma デザイン作成」のプロセスに多大な時間を要するため、そのスピードメリットが相殺されてしまうという課題がありました。

解決策と導入プロセス

AI デザインシステムによるプロセスの再定義

アイレットは、AI 統合ソリューション群「gaipack」内の「AI デザインシステム」サービスを提供することで、従来のボトルネック(デザイン作成工数)を根本的に排除し、AI 駆動開発の品質と速度の両立を実現する UI/UX 設計プロセスの再定義と確立を支援しました。

当社のソリューションは、AI が参照可能な Figma デザインシステムを基点とし、従来の「全画面分のデザイン作成」を原則不要とする新しいスキームを確立しました。

導入プロセス

1
デザインシステム基盤の構築

デザイナーが Figma 上で、AI(Figma MCP)がデザイントークン(変数)やコンポーネント構造を解釈可能な形で設計・構築します。

2
UI 自動生成フローの確立

開発者が、ユーザーストーリーと受け入れ基準(要件定義書)を AI(GitHub Copilot)にプロンプトとして入力します。

AI は Figma MCP を経由してデザインシステムを参照し、デザインの統一感を担保した UI コードを自動生成します。これにより、個別画面の Figma デザイン作成を原則廃止しました。

3
レビューと調整

AI が生成した UI(プレビュー)を開発者とデザイナーがレビューし、修正が必要な場合のみデザイナーが Figma で詳細デザインを作成・調整します。

導入効果と成果

AI デザインシステムの導入は、
AI 駆動開発における UI/UX 設計プロセスの再定義と確立という
最大の目標を達成しました

開発工数の劇的な削減

従来の全画面分の Figma デザイン作成プロセスを廃止し、デザイン作成における開発工数を大幅に削減

全体工数を約 50% 短縮

従来のプロセスが AI による UI コード生成の高速化メリットを相殺していた構造を解消し、
AI 駆動開発の真のポテンシャルを引き出すことに成功しました。

定量的・定性的な成果

開発工数の大幅削減を実現

AI 開発のスピードメリットを相殺していた「全画面分のデザイン作成」プロセスを原則廃止することで、通常6〜10日を要する画面実装が約1日で完了するなど、全体工数を 50% 以上削減

統一感のある UI を安定して生成

AI が Figma 上のデザイントークン(変数)を正確に認識できる環境を構築しました。その結果、AI が人間が意図したデザインシステムに準拠した UI を生成「できる」状態が実現し、品質とスピードの両立に成功

デザイナーの役割を「システム構築・レビュー」へ

デザイナーの役割を、個別の画面作成から「デザインシステムの構築・管理」および「AI 生成 UI のレビュー」へとシフトさせ、Chromatic 等のツールで品質管理を標準化し、開発者とデザイナーの効率的な分業体制を確立

顧客からの喜びのコメント

この新しい開発スタイルへの転換は、従来の開発スタイルと比較して大きな変革をもたらしました。

このスピード感が AI 開発か…と実感しています。

プロジェクト担当者

弊社側でも課題がクリアになってきており、大変有意義でした。 Gemini 3.0 などを使い始めていますが、御社のスピードと知見の深さに驚愕しております。

プロジェクト担当者

今後の展望

事業戦略

2026 年の新施設開業を見据え、AI 駆動開発で得られたスピード感を活かし、ファン層の裾野拡大を追求します。特にライトなユーザー(子連れのファミリーなど)が気軽にイベントに参加できるなど、サイトを一見のユーザーにフレンドリーな作りに改善していきます。

IT 戦略

アイレットは、確立した AI デザインシステムプロセスを実運用に定着させ、継続的な改善を推進します。Figma を「いかに AI が解釈可能な形」で構築・変数管理するかの R&D 要素を継続し、プロンプトテンプレートのアップデートを通じて、さらなる開発効率化と品質向上を目指します。

AI が創る、新しい開発の標準

AI の導入によって、開発プロセスの効率・品質・スピードすべてが向上。
アイレットは今後も AI 技術を活用し、開発プロセス全体の効率化を推進していきます。

AI で、ビジネスを加速させる

開発コスト削減・スピード向上・セキュリティ確保を同時に実現。
専門スタッフが貴社の課題に最適なソリューションをご提案いたします。

gaipack