AIフレンドリーなデザインシステムで作るAI時代のUI開発フロー

昨今、大きな注目を集めているLLM（大規模言語モデル）、いわゆる生成AIは、フロントエンド開発の領域においても大きな変化をもたらしています。

その影響は、単にコーディングが効率化されるという話に留まらず、これまでデザイナーとエンジニアが担ってきた開発のプロセスや協業のあり方を見直すきっかけになるとも考えています。

本記事では、この変化に対応する開発スタイルの1つとして「AIフレンドリーなデザインシステムを活用した開発フロー」を紹介します。

エンジニアの役割は「実装者」から「設計者」へ

UI開発におけるフロントエンドエンジニアの仕事は、大きく分けると「設計」と「実装」という2つの工程から成り立っています。まず、デザイナーが作成した設計図（デザイン）からその意図を読み解いて再利用可能でメンテナンス性の高いコンポーネントを設計し、コードに落とし込みます。この工程の役割は「設計者」と言えるでしょう。次に、設計されたコンポーネントを組み合わせて、実際の画面を構築していきます。この工程の役割は「実装者」と言えます。

AIの進化は、この2つの役割に大きな変化をもたらそうとしています。

現在のAIは、デザインを単なる画像（ピクセル）として認識するだけでなく、Figmaのレイヤー構造やコンポーネント名、適用されているデザイントークンといった構造化されたデータを理解することが可能になりました。この能力によって、AIはこれまでエンジニアが担ってきた工程の一部を代替できるようになります。特に、質の高いコンポーネントがあらかじめ用意されている場合は、コンポーネントを適切に組み合わせて画面を実装する工程の多くをAIに任せられる可能性があります。

これらの変化により、今後、エンジニアは、AIが理解しやすく組み立てやすい質の高いコンポーネントを設計したり、AIの成果物をレビューして軌道修正するような役割がより一層求められるようになります。

つまり、私たちエンジニア（人間）が価値を発揮すべき領域が、「実装」から、より上流の「設計」へと移行していくと考えています。

AI時代の協業を支える「共通言語」としてのデザインシステム

AIに「実装」を任せてエンジニア（人間）が「設計」に集中するためには、AIが最高のパフォーマンスを発揮できるような仕組みが必要です。その仕組みの中核となるのが、デザインシステムです。

これまでもデザインシステムは、主にデザイナーとエンジニアの「共通言語」として非常に重要な役割を果たしてきました。デザインや実装のルールを明確に定義し、「信頼できる唯一の情報源」として機能することで、関係者間の認識のズレや手戻りを防ぎ、開発の品質と効率を支える存在です。

そして、そこにAIが加わることで、このデザインシステムの重要性はさらに一歩前進します。AIが理解しやすく適切に整備された（AIフレンドリーな）デザインシステムは、デザイナーとエンジニアの連携を助けるだけでなく、AIが開発に参加するための「共通言語」としても機能することを意味します。

この新しい関係性において、デザイナー、エンジニア、AIはそれぞれ次のような役割を担うことになります。

• デザイナー

  • 「共通言語」のルールに則ってUIを設計します。AIが設計意図を正確に解釈できるよう、デザイントークンやコンポーネントのルールを正しく適用することが、これまで以上に重要になります。

• エンジニア

  • 「共通言語」をコードに落とし込み、設計します。AIが活用しやすいようFigma上の設計とコードの仕様を一致させ、AIが参照するコンポーネントやドキュメントを整備する役割を担います。

• AI

  • デザイナーとエンジニアによって整備された「共通言語」を理解し、設計意図や仕様を汲み取りながら、UIを自律的に構築します。

このように、全員がデザインシステムという共通の言語でコミュニケーションをとり、同じルールを参照することで、関係者のコラボレーションはこれまで以上に強力で高速なものになります。

AIが自律的に画面を実装するワークフロー

ここからは、デザインシステムという「共通言語」を使いながら、AIがどのようにUIを自律的に実装していくか、人間は仕組みとして何を整備すればよいのか具体的な流れで紹介します。

それぞれの連携で鍵となるのは、MCP（Model Context Protocol）という技術です。

MCP（Model Context Protocol）とは何か

MCPは、AIが外部ツールやサービスと決められた形式でやり取りするためのルールです。つまりMCPは、AIが必要な情報（たとえば作業の背景や条件）を正しく理解し、自律的に作業できるようにする「情報の変換・中継地点」となります。

Figmaから「設計図」をStorybookから「説明書」を抽出する

MCPの仕組みを通じてAIは、Figmaから正確なデザイン情報（「設計図」）を、Storybookから最新のコンポーネント仕様（「説明書」）を直接取得することができます。

1. 設計図（デザインデータ） — デザインの構造、見た目やテキストに関する情報

2. 説明書（コンポーネント仕様） — 利用可能なコンポーネント、実装方法や利用ルールに関する情報

この二つを共通言語（デザインシステム）で揃えて提供することで、AIは「何をどう組み立てればよいか」を正確に判断することができます。

AIがUIを構築するまでの3ステップ

エンジニアがAIへ下記のようなプロンプト（指示）を渡すことで、AIが自律的にUIを構築するワークフローが動き始めます。

Figmaから取得した情報とStorybookから取得した情報をもとに、コンポーネントを組み合わせて画面を実装してください。

FigmaデザインURL
https://www.figma.com/design/AAAAAA/BBBBBB?node-id=000000000

以下が実装におけるルールです。

（ここで、詳細な実装ルールを記載しますが、本記事では省略します。）

AIが確認する情報の順番は下記のようになります。

1. 与えられたプロンプトから、Figmaファイルへアクセスし「設計図」を取得

2. Figmaファイルより得られたコンポーネントの情報から、Storybookで整備されているコンポーネントの「説明書」を読み取る

3. Figmaファイルから得られた「設計図」とStorybookから得られた「説明書」を突き合わせて総合的に判断しながらUIを構築

ステップ1. Figma から「設計図」を取得

まず初めに、AIは、FigmaのMCP（Dev Mode MCP）を通じてデザインデータを直接参照します。ここでAIは、単に見た目を画像として捉えるのではなく、レイヤー構造、コンポーネント名、適用されているデザイントークンといった構造的な情報を「設計図」として正確に理解します。

デザイナーが作成したFigmaファイルから、下記のような情報を取得します。

• レイアウト

• コンポーネント

• デザイントークン

• テキスト

など

ステップ2. Storybookから「説明書」を読み取る

次に、AIは、エンジニアが整備したコンポーネントのカタログであるStorybookを参照します。Storybookは、各コンポーネントがどのようなProps（プロパティ）を持ち、どのような見た目や振る舞いをするのかをまとめた、言わば「説明書」の役割を果たします。

エンジニアが整備したStorybookから、下記のような情報を取得します。

• 各コンポーネントのprops

• 使用例（サンプルコード）

• 状態バリエーション

など

ステップ3. AIが「設計図」と「説明書」を突き合わせて、UIを構築

AIは、Figmaから得た「設計図」（コンポーネント名や構造）と、Storybookから得た「説明書」（コードレベルの仕様）を突き合わせ、使用するコンポーネントを判断しながらUIを自律的に組み立てます。例えば、「FigmaにあるPrimaryButtonは、StorybookにあるPrimaryButtonコンポーネントのことであり、sizeプロパティを指定すれば大きさを変更できる」のような思考ロジックで判断します。

AIとの協業ワークフローによって生まれる価値

このようにAIが情報を突き合わせられるのは、まさにデザインシステムが「共通言語」として機能しているからこそです。このUI開発フローは、開発プロセスに次のようなメリットをもたらします。

• 開発速度の向上

  • UIの組み立てという時間のかかるタスクをAIに任せることで、人間がよりクリエイティブな課題に集中できます。

• 品質の安定とヒューマンエラーの削減

  • デザインシステムに準拠したコードが一貫して生成されるため、実装者による解釈のブレや意図しない差異の発生を防ぎます。

• シームレスな連携

  • Figmaでの変更が、AIを通じてほぼダイレクトにコードへ反映されるため、これまで変更があるたびに発生していた関係者間のコミュニケーションコストを大幅に削減することが可能です。

私は、「人間がよりクリエイティブな課題に集中できる」という点が、AIとの協業によって生まれる最大の価値だと感じています。単純な作業がAIに代替されることで、デザイナーもエンジニアも、本当に時間をかけるべき部分にじっくりと向き合えるようになるからです。UXやアクセシビリティに徹底してこだわったり、本質的な課題解決に時間を費やせるようになることで、最終的により質の高い成果物につながり、プロジェクトに関わるすべてのステークホルダーにとっても大きな価値になります。

AIとの協業を成功させるためのコツ

このワークフローを機能させるためにはいくつかのコツがあります。とてもシンプルですが、いずれもプロジェクトの途中から導入すると不必要なコストがかかり遠回りをすることになってしまうため、プロジェクト開始時にデザイナーとエンジニアが双方で認識を合わせておく必要があります。

コツその1. コンポーネントの名前を完全に一致させる

AIがFigma上の「見た目」とコード上の「実体」を結びつけるためのコツです。命名がそれぞれのコンポーネントを紐づける唯一のIDとなります。デザイナーとエンジニアが合意した命名規則に従い、Figmaのコンポーネント名とコードのコンポーネント名を完全に一致させることが重要です。

// ❌ Bad: ファイル名やコンポーネント名がFigmaと一致していない
// /components/Button.jsx
export function CtaButton({ children }) {
  return <button className="button-primary">{children}</button>;
}

// ✅ Good: ファイル構造、コンポーネント名がFigmaと完全に一致
// /components/PrimaryButton/index.jsx
export function PrimaryButton({ children }) {
  return <button className="button-primary">{children}</button>;
}

コツその2. FigmaのバリアントとコードのPropsを一致させる

デザインのバリエーションを、コードで再現可能にするためのコツです。Figmaのバリアントのプロパティと値は、そのままReactコンポーネントのPropsとして扱えるように設計します。これにより、AIは「このデザインのときは、このPropsを使えばよい」と迷いなく判断できるようになります。

これは、従前のデザインシステムでもベストプラクティスとして考えられてきたものですが、AI時代のデザインシステムにおいても力を発揮します。

例えば、FigmaではButtonコンポーネントに以下のバリアントを設定していた場合

• size: small | medium | large

• state: default | disabled

対応するReactコンポーネントでは、Figmaのバリアントに合わせてPropsを定義します。

// ✅ Good: FigmaのバリアントとPropsが1対1で対応している
export function Button({ size = 'medium', state = 'default', children }) {
  const sizeClass = `button--${size}`;
  const stateClass = `button--${state}`;
  
  return (
    <button className={`button ${sizeClass} ${stateClass}`} disabled={state === 'disabled'}>
      {children}
    </button>
  );
}

// このような作りにしておくことで、AIはデザイン情報から以下のようなコードを生成できる
// <Button size="large" state="default">ボタンテキスト</Button>

コツその3. 画面を構成するUIは「すべて」コンポーネント化する

AIの思考に「想定外」や「例外」を作らないためのコツです。AIは、定義されていないものをうまく扱うことができず、良かれで勝手に解釈して実装してしまいます。そのため、「ここだけ特別に」といったハードコーディングをしてしまうと、自律的なUI開発のプロセスを妨げることになり、その結果、手作業による修正を増やす原因になってしまいます。レイアウト用のコンポーネントも含め、画面上のあらゆる要素をコンポーネントとして定義しておくことが望ましいです。

// ✅ Good: すべて定義済みのコンポーネントで構成され、div要素などのベタ書きがない
export default function UserProfile({ user, posts }) {
  return (
    <PageLayout>
      <UserProfileHeader user={user} />
      <Stack spacing="lg">
        {posts.map(post => (
          <PostCard key={post.id} post={post} />
        ))}
      </Stack>
    </PageLayout>
  );
}

ただしAIは万能ではない。人間が担うべき責任と価値

本記事では、AIの進化がもたらすUI開発の変化と、その変化に対応するための「AIフレンドリーなデザインシステム」を活用したUI開発フローについて解説しました。

この記事で紹介したワークフローが完全に機能したとしても、AIがすべてを解決してくれるわけではありません。AIの成果物は必ず人間がレビューを実施する必要があり、ほとんどのケースでは少なからず人間の手直しが発生します。AIが生成するものは、あくまで高品質な「ドラフト」であり、最終的な品質に責任を持つのは、私たち人間（エンジニア）の重要な役割です。

そして、私たちエンジニアの仕事は、単純な「実装」作業から徐々に解放され、AIが最高のパフォーマンスを発揮できる仕組みを「設計」する作業へと役割が移行しつつあります。UI開発の現場でAIの能力を最大限に活用するには、再利用性や拡張性まで深く考え抜いたデザインシステムを構築し、そのルールに基づいてUIを作り上げていく必要があります。

まさにこの「設計」こそが、これからのエンジニアがより注力していくべき、本質的で付加価値の高い（人間にしか成し得ない）領域ではないでしょうか。

株式会社デパートでは、本記事で解説したようなAIフレンドリーなデザインシステムの設計・構築から、それらを活用したUI開発までを一貫してご支援します。 UI開発のプロセス改善や、デザインシステムの導入・運用に関するご相談も随時お受けしておりますので、ぜひお気軽にお問い合わせください。