---

---

近年、デザインシステムを導入する企業が増えています。その背景には、生成AIでの制作の高速化で一貫性あるUI UXの重要性が高まったことや、アジャイル開発の隆盛、さらには2021年に発足したデジタル庁による導入の後押しといった要因があります。

ただ、「導入はしてみたがうまく活用できていない」という企業も多いのではないでしょうか。
この記事では、そんな「デザインシステムの運用に課題がある」企業や担当者向けに、AIによる運用自動化を、実践を交えながら解説します。

デザインシステムの基本や作り方について詳しく知りたい方はこちら

■イベント動画の紹介

本記事は、2025年11月にニジボックスが開催したオンラインイベント『AI時代のデザインシステム〜実践デモで学ぶ、AIがもたらすUI UXの新しい可能性〜』の内容をもとに執筆しています。

実際の操作画面や詳細な解説を動画で見たい方は、こちらからご覧いただけます。

アーカイブ動画を視聴する（YouTube）

うまくいかない「デザインシステムの運用」は、AIと組み合わせて変えていく

デザインシステムは、本来「デザインの一貫性を保つこと」や「制作・開発業務を効率化すること」を目的として構築するものです。しかし実際の現場では、「時間をかけて作ったものの、次第に使われなくなった」「一部のメンバーしか理解・運用できていない」といった課題を抱える企業も少なくありません。

デザインシステムにおいて本当に重要なのは、“作ること”ではなく、“運用し続け、組織に根付かせること”です。ところが、ルールの理解や更新コスト、属人化などの問題によって、その理想と現実の間には大きなギャップが生まれています。

こうした課題に対する一つの解が、「AIによるワークフローの変革」です。AIをデザインシステムと組み合わせることで、要件定義からデザイン、実装までをスムーズにつなげることが可能になります。つまり、「組織全体でデザインシステムを正しく使い、自然と運用に参加できる状態」をワークフローそのものから設計する、というアプローチです。

ここからは、前述のオンラインイベントで実演されたデモをもとに、AIとデザインシステムを組み合わせることで、プロダクト制作の流れがどのように変わるのかを具体的に見ていきましょう。

STEP0：プロダクトの要求を「人間が」整理する

AIを使った制作というと、いきなりツールに投げて“それっぽいもの”を生成するイメージを持たれがちですが、その前に「人間側が明確な意思を持つこと」が最も重要です。

AIは一瞬で完成度の高いアウトプットを出してくれますが、それが本当に良いものかどうかを判断できなければ、評価は曖昧になります。「なぜこの形なのか」「なぜこの表現が最適なのか」を自分の言葉で説明できる状態を創り出す。そのための土台が、プロダクトの要求整理です。

今回デモでは、「ニジボックスのイベントチケットおよびノベルティグッズを販売するECサイト」という仮想プロダクトをテーマに設定しました。

本格的なプロダクト開発では詳細な調査や分析を行いますが、今回はAI活用の流れを実演するため、ターゲットと要求を以下のようにシンプルに整理しています。

• ターゲット設定：ニジボックスのブランドに共感する層（メイン）と、社名は知っているが活動内容は深く知らない層（サブ）を想定。
• 要求の整理：認知度の違いによって「チケット購入を最優先にするか」「イベント説明を重視するか」など、ユーザー状況に合わせた情報の優先順位を明確化。

要求を整理することで、「このサイトでは何が最も重要か」「どの情報を前に出すべきか」という、AIへの指示（プロンプト）の軸が定まります。

STEP1：『ChatGPT』で要件定義をする

STEP0で整理したゴール、ターゲット、要求をもとに、ここからAIを活用していきます。まずは、より詳しい要件定義へと落とし込んでいくところから始めましょう。

STEP1-1：要求整理をAIに渡す

今回使用したのは、要件定義を生成するためにカスタマイズされたChatGPTです。事前にまとめた以下の情報を入力します。

• ゴール
• ターゲット定義
• 要求整理（ユーザーに何を提供するか）

STEP1-2：要件定義の自動生成と人間の役割

ChatGPTに情報を渡すと、サイト全体の要件定義が生成されます。

ただし、ここでも重要なのは「AIが出したものをそのまま使う」ことではありません。

• なぜこの要件が必要なのか
• なぜこの表現が最適なのか

これらを説明できる状態になるまで、人間が細部を詰めていくことが前提です。

STEP2：『Figma Make』でデザインを制作する

次に、要件定義をもとにデザインシステムとAIを組み合わせたデザイン制作へと進みます。

STEP2-1：デザインシステムの下準備

ここではFigma Makeを使用し、事前に用意したデザインシステムを読み込みます。設定されているのは、以下のような基本要素です。

• カラー（プリミティブ＋セマンティック）
• スペーシング
• フォントサイズ
• ラディウス

STEP2-2：要件定義テキストからデザイン生成

ChatGPTで作成した要件定義テキストをFigma Makeに入力し、デザインを生成します。テキストベースの情報だけでも、レイアウトや動き、ホバー表現まで含んだデザインが自動で立ち上がります。

この時点で、デザインの精度はかなり高く、AIの実力を感じられる仕上がりです。

STEP2-3：コンポーネント調整

一方で、デザインシステムで定義したコンポーネントが完全には反映されない部分もあります。そのため、ボタンなど一部の要素を「デザインシステムのコンポーネントに置き換える」調整を行います。

現時点では完全自動とはいかないものの、部分的に反映・修正していく運用は十分可能です。最終的に、実装用のデザインデータとして書き出し、次の工程に移ります。

STEP3：『Cursor』で実装する

STEP2で作ったデザインをもとに、実装フェーズへと進みます。

STEP3-1：Figma MCPを使った連携

ここではCursorを使用し、FigmaのMCP（Model Context Protocol）を介してデザインデータと接続します。

FigmaをDev Modeに切り替え、MCPサーバーが有効化されていることを確認すると、Figma上のデザイン情報を他のAIツールから参照できる状態になります。

STEP3-2：デザインを参照した実装

Cursorを起動すると、Figmaで作成したデザインが参照されていることが確認できます。この状態で実装を進めることで、デザインをほぼそのままコードに落とし込むことが可能です。

操作自体は非常にシンプルで、複雑な設定を行わずとも実装まで到達できます。

STEP3-3：実装結果

完成した画面は、デザインとほぼ同等の見た目で再現されていました。

要件定義→デザイン→実装という一連の流れを、AIとデザインシステムを使って短時間でつなげられました。

『Figma Make』や『Cursor』の使い方についてはこちらの記事でも解説しています。
気になった方はぜひご覧ください。

AI時代に人間が磨くべき「審美眼」と「言語化力」

今回紹介した「AI×デザインシステム」によるワークフローによって、プロダクトの大幅な工数短縮が期待できます。今後もAIの進化によって、デザインや実装の作り方は大きく変わっていくことでしょう。
そんな中、私たち「人間」は「審美眼」と「言語化力」を磨く必要があります。

デザインの作り方は変わるが、判断の価値は残り続ける

数年後には、スタイリングやレイアウトも含め、意図通りのデザインが高い精度で自動生成されることが当たり前になるはずです。その結果、デザイナーやクリエイターが「手を動かして作る」作業の比重は、確実に減っていくと考えられます。

しかし、それはデザイナーの価値が下がることを意味しません。むしろ重要性を増していくのが、「いいものとは何か」を見極める力です。

いいものを見て「これは良い」と感じ、その理由を言葉にし、プロンプトや指示としてAIに伝えられる。そして、生成されたアウトプットを再び判断する。この循環を回せるかどうかが、クリエイターとしての価値を左右します。

これはデザインに限った話ではありません。映像制作や実装など、あらゆる制作領域で同じことが言えます。専門家でなければ気づけない「ここが足りない」という違和感や、「この見せ方が最適だ」という感覚は、依然として人間の領域です。AIが均質なアウトプットを量産できる時代だからこそ、作り手の審美眼の差が、結果として価値の差として浮き彫りになります。

作業から設計へ、そしてコミュニケーションへ

AIによって作業時間が大幅に短縮されることで、人間はより上流の思考に時間を使えるようになります。「まず作ってみて、触りながら議論する」ことが高速で可能になり、その分、本質的な議論や検証にリソースを割けるようになります。

その中で欠かせないのが、「言語化力」です。なぜこのデザインなのか、なぜこの構成なのか。それを企画・デザイン・実装のいずれの立場でも説明できることが、プロジェクトを前に進める力になります。この姿勢が、個人の成長にも、組織の成熟にもつながります。

ニジボックスが考えるAI時代のクリエイター像とは、AIを使いこなす人ではなく、意思と判断軸を持ち、AIを通じてそれを具現化できる人です。

「審美眼」と「言語化力」。この2つを磨き続けることが、これからのデザインシステム運用、そしてプロダクトづくりの中核になっていくのです。

ニジボックスがデザインシステムの構築から運用まで支援

ニジボックスは、デザインシステムを「作って終わり」にしないことを重視してきました。デザインシステムは、ガイドラインやコンポーネントを整備すること自体が目的ではなく、デザイナー、エンジニア、PMなど多職種が関わりながら、長期的に運用され、組織の文化として根付いていくことで初めて価値を発揮します。

その考え方を体系的にまとめたのが、書籍『つくって、みなおす、デザインシステム』です。実際の案件で直面してきた課題や、運用フェーズで詰まりやすいポイント、組織に浸透させるための工夫など、「生きたデザインシステム」を育てるための実践知が詰まっています。

書籍の詳細はこちらからご覧ください。
https://gihyo.jp/book/2024/978-4-297-14411-1

本記事では、AIを使ったデザインシステム運用について解説してきました。
とはいえ、こうした新しい仕組みを形にするのは、決して容易なことではありません。

ニジボックスは、AIを活用したワークフローの設計から、デザインシステムの構築・運用、組織への定着までを一気通貫で支援するパートナーとして、持続可能なプロダクトづくりに伴走しています。AI活用やデザインシステムに関してお悩み事があれば、まずはお気軽にお問い合わせください。

また、ニジボックスでは、幅広いAIサービスの利活用を研究し、企業のAI活用を総合的に支援しております。
AI技術をどのようにビジネス成果へ結びつけるかお悩みの際は、下記バナーより資料をダウンロードのうえ、ぜひご覧ください。

編注：『ChatGPT』はOpenAI OpCo, LLCの登録商標です。『Figma』はFigma, Inc.の登録商標です。