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

MetaのAstryxに見る、AIが迷わず使えるデザインシステムの作り方

AIが「見た目」ではなく、共通ルールを使えるようにする

AIに画面づくりを任せると、ボタンの形や余白、色の選び方がページごとにばらつきがちです。問題は、AIのデザイン能力だけではありません。どの部品を使い、どんな規則に従えばよいかを、プロジェクト内で確実に参照できる形にしていないことも原因です。

Metaのデザインシステム「Astryx」が示す重要な考え方は、デザインシステムを人間向けの部品集にとどめず、AIエージェントが作業中に調べ、正しく使える仕組みにすることです。コンポーネント、テーマ、利用手順を一体で整え、AIが都度独自ルールを発明しなくてもよい状態を目指します。AIに「洗練された画面を作って」と曖昧に頼むのではなく、既存のルールを選び、組み合わせる作業へと変えるのです。

迷いを減らす鍵は、参照先と作業手順

Astryxでは、コマンドラインツール（CLI）やエージェント向けの説明ファイルを通じて、AIがコンポーネントの使い方を確認できるようにしています。初期設定では、プロジェクトに利用ルールを記したファイルを用意し、エージェントが何を参照し、どの順序で作業するかを伝えます。必要な部品の名前やプロパティ、使用例を調べてから実装する流れを作ることで、「それらしい名前の部品を想像して書く」といった誤りを抑えられます。

この設計のポイントは、AIに長い指示を一度だけ与えることではありません。作業場所に近いところに、更新可能で具体的な参照情報を置くことです。チームが使うAIツールが変わっても、同じコンポーネント仕様や設計方針を基準にできれば、成果物の一貫性を保ちやすくなります。

トークンと既製部品で、独自解釈を抑える

色、文字、角丸、余白などのデザイントークンは、画面の見た目を支える共通の変数です。AIがページごとに色や寸法を直接決めるのではなく、定義済みのトークンやコンポーネントを使えば、個別の判断を減らせます。テーマを切り替える場合も、各画面を一つずつ修正するのではなく、共通の設定を変更する方向へ誘導できます。

重要なのは、自由度をなくすことではありません。まず標準の部品やテーマで構成し、必要な場合に限って明示的な拡張を許すことです。Astryxのように、コンポーネントとテーマ、利用情報をまとめて提供すれば、AIは「似たものを新しく作る」よりも「既存の正解を探す」動きに移りやすくなります。

導入時は、運用できるルールに絞る

デザインシステムをAI対応にする際、最初から全ページの仕様を細かく書き切る必要はありません。まず頻繁に使うボタン、入力欄、カード、ナビゲーションなどを整理し、利用例と避けるべき実装を記述します。次に、AIがその情報を作業中に参照できるよう、プロジェクトの説明ファイルやCLIなどの入口を整えます。最後に、生成された画面を確認し、誤用されやすい部品や不足している説明を更新します。

AIは与えられた仕組みを自動的に正しく理解するわけではありません。仕様が古い、例が不足している、部品名が分かりにくいといった問題は、人間が見直す必要があります。またAstryxはベータ版として紹介されているため、採用を検討する場合は、更新状況や既存環境との適合性を確かめることが大切です。

AI時代のデザインシステムは「使い方」まで設計する

Astryxから得られる示唆は、優れた部品を用意するだけでは不十分だということです。AIがどこで仕様を探し、どの順番で部品を選び、どう一貫性を確認するかまで設計して初めて、デザインシステムは実務で機能します。人間とAIが同じ情報を参照し、同じルールを共有することが、画面ごとのばらつきを抑える土台になります。

これからのデザインシステムには、コンポーネントの一覧だけでなく、機械が読み取りやすい仕様、実例、更新手順が求められます。AIに迷わせないとは、判断をすべて奪うことではありません。良い選択肢を見つけやすくし、例外を人間が判断できるようにすることです。