AI 開発を加速させるデザインシステムの整え方：実践的なチェックリスト

2026年6月6日 H.Ueda

先日、Creating AI-Ready Design System: Checklist という記事を読み、AI（特に Claude Code などのエンジニアリングに特化したエージェント）が最大限にパフォーマンスを発揮できる「下地」をどう作るか、という視点が非常に重要だなぁと感じました。

最近の AI 技術の進展によって、コードの自動生成や UI の構築が驚くほど身近になりました。しかし、AI に「いい感じに作っておいて」と頼むだけでは、期待通りの成果は得られにくいものです。AI が迷いなく正確なアウトプットを出すためには、デザインシステムの側も「AI が理解しやすい形」に整えておく必要があります。

1. 信頼できる唯一の情報源（SSOT）の確立

デザインシステムを構築する際、まず向き合うべきは「情報の整合性」です。AI を活用した開発において、AI が参照する情報源が複数に分散していると、一貫性のないコードが生成される原因になります。

理想的には、コードファースト（Code-first） なデザインシステムを目指すのが良いかと思います。たとえば、Claude Code のような AI ツールは、Figma のデザインファイルを直接眺めるよりも、コードベース（GitHub など）にある定義を読み解く方が圧倒的に得意だからです。

以下の図は、AI がどのように情報を参照して出力を生成するかのイメージです。

flowchart TD
    subgraph SSOT [信頼できる唯一の情報源]
        Code[コードベース / GitHub]
        Docs[ドキュメント / Markdown]
    end

    AI[AI エージェント / Claude Code]
    Dev[開発者]

    Code <--> Docs
    Docs -.-> |コンテキスト提供| AI
    Code -.-> |実装ルールの参照| AI
    AI --> |一貫性のあるコード生成| Output[成果物]
    Dev --> |メンテナンス| Code

もし、どうしてもデザイン（Figma）とコード（GitHub）の両方を運用する必要がある場合は、両者が常に同期されていることが不可欠です。AI が古い定義を読み込んでしまうと、結局は人間が手修正することになり、効率が上がりません。

2. AI が解析しやすいドキュメント構造

AI は、コンテキスト（文脈）を理解するためにドキュメントを読み込みます。このとき、ドキュメントが PDF や複雑な階層の Wiki になっていると、AI は情報を正しく抽出できないことがあります。

こちらに関しては、Markdown や JSON/YAML といった、プレーンテキストベースで構造化された形式で提供するのが望ましいです。

ドキュメント形式の比較

AI にとっての「扱いやすさ」を比較すると、以下のようになります。

形式	人間にとっての読みやすさ	AI にとっての解析しやすさ	特徴
Markdown	◎	◎	構造が明確で、AI が最も得意とする形式です。
JSON/YAML	△	◎	設定値やトークンの定義に向いています。
PDF/画像	◯	×	テキスト抽出の精度に左右され、文脈が落ちやすいです。
Figma UI	◎	△	視覚的ですが、コード化の意図を伝えるには不足があります。

AI の効率を最大化するためには、デザインの「見た目」だけでなく、「なぜその定義になっているのか」という意図も含めてテキストで構造化しておくのが、一つのポイントになるかと思います。

3. デザイン・トークンの明文化

AI が「いつ」「どの」デザイン要素を使うべきかを判断できるように、デザイン・トークンを厳密に定義しておく必要があります。たとえば、「この青色は primary ボタンの背景色である」という情報が明示されていないと、AI は適当な青色を割り当ててしまうかもしれません。

具体的には、以下の項目をトークン化し、命名規則を整えておくのが良いでしょう。

カラー: ブランド色、背景色、文字色、エラー色など
タイポグラフィ: フォントサイズ、ウェイト、行間
スペーシング: 余白（Margin/Padding）のステップ定義
角丸 (Radius): ボタンやカードの角の丸み
エレベーション (Shadow): 影の強弱による階層表現
インタラクション状態: Hover, Active, Disabled などの変化

たとえば、スペーシングを「8px」と直接指定させるのではなく、var(--spacing-m) のようなトークンを使わせるように指示することで、AI はシステムのルールに沿ったコードを出力できるようになります。

まとめ：AI レディな状態とは「整理整頓」された状態

AI レディなデザインシステムを構築するといっても、実は突飛なことをする必要はありません。本質的には、「人間にとっても、機械にとっても、迷いがない状態」 を作ることだと言えます。

情報を一箇所に集める（SSOT）
機械が読める形式で書く（Markdown / JSON）
ルールに名前をつける（デザイン・トークン）

これらを整えることで、AI は強力な副操縦士（コパイロット）として、一貫性のある高品質な UI を素早く組み上げてくれるようになるはずです。

まずは、現在のプロジェクトで「AI にこのドキュメントを渡して、正しく理解してもらえるだろうか？」と問いかけてみることから始めてみるのはいかがでしょうか。

MicroArchitectures

H.Ueda

Programmer

ブログ