オリジナル特集オリジナル特集

AI時代のデザインシステムは、人にもAIにも伝わる設計へ

AIが迷わない「共通の設計言語」をつくる

AIが画面の試作や実装を担うようになると、デザインシステムに求められる役割も変わります。これまでは、デザイナーと開発者が色や文字、部品の使い方を共有するための仕組みが中心でした。これからは、AIが同じルールを読み取り、適切な部品を選び、既存の品質を保って作業できることも重要になります。

その鍵は、人にも機械にも解釈しやすい「共通の設計言語」です。たとえば、デザインツールとコードでボタンの名前やプロパティが異なると、AIは両者の対応関係を推測しなければなりません。見た目が同じでも、片方が「Primary」、もう片方が「primary」や「強調」と呼ばれていれば、変換時に誤りが起きやすくなります。名称、選択肢、状態をそろえることは、単なる整理ではなく、AIの推測を減らす設計なのです。

トークンと部品の仕様を明示する

色、余白、文字サイズなどを表すデザイントークンは、画面全体の一貫性を支える基盤です。AIが自由に数値を考えるのではなく、「本文にはこの文字色」「カード間隔にはこの余白」といった既存の選択肢から選べるようにします。部品についても、名前だけでなく、用途、プロパティ、状態、アクセシビリティ上の注意を明確に記述することが大切です。

たとえばボタンなら、サイズや種類に加え、無効状態の見え方、ラベルの付け方、使うべき場面を定義します。こうした情報が構造化され、実装やデザインの実物と一致していれば、AIは「似たものを創作する」のではなく、システムにある部品を選び、意図に沿って組み合わせやすくなります。仕様書、コンポーネント、トークンが別々に更新されて矛盾する状態を避け、同じルールを参照できるようにすることが重要です。

AIに任せる範囲と、変えてはいけない範囲

AIに設計システムを参照させるだけでは十分ではありません。どのファイルを変更してよいか、共通ルールを変更するには誰の承認が必要かも定める必要があります。たとえば、画面固有の部品は編集可能にしつつ、全体で使う色や余白の定義は読み取り専用にする方法があります。新しいトークンが必要になった場合、AIに黙って追加させるのではなく、理由を説明する変更案として提示させます。

この境界がないと、局所的な見た目を整えるために共通の余白や色が書き換えられ、別の画面に予期しない影響が広がるおそれがあります。AIが生成した差分を人が確認し、共通ルールの変更は別の提案として扱う。こうした運用は、生成速度を保ちながら品質と一貫性を守るための現実的なガードレールです。

整ったシステムは、人の仕事も速くする

AI対応の設計システムは、AIだけのためのものではありません。名称や状態が統一され、使い方が明確なら、新しく参加したデザイナーや開発者も迷いにくくなります。どの部品を選ぶか、例外をどう扱うかをチームで話し合う際にも、共通の語彙が役立ちます。

導入時は、すべてを一度に作り直す必要はありません。まず利用頻度の高い部品を選び、デザイン上の名前とコード上の名前をそろえ、トークンや状態、使用例を明文化します。そのうえでAIに限定された範囲の作業を任せ、出力の誤りや不足を記録して仕様を改善します。AI時代のデザインシステムとは、機械に創造性を委ねる仕組みではなく、人が決めた意図と制約を機械にも正しく伝え、安心して協働するための基盤です。