概要

デザインシステムの語彙を知ることで、AIへの指示は「なんかGoogleっぽい感じで」から「Material Design 3のカラートークンを使って」に変わります。

• 主要デザインシステム7つの特徴と使い分けを理解する
• デザイントークンで色・余白・サイズを数値で伝えられるようになる
• エレベーション・シャドウ・ボーダーラジウスでUIの質感を精密に指示する

「雰囲気で伝える」から「仕様で伝える」へ

デザインシステムの語彙を知ることで、AIへの指示は「なんかGoogleっぽい感じで」から「Material Design 3のカラートークンを使って」に変わります。

記事1・2でUIの部品名と状態の語彙を学びました。しかしまだ「雰囲気」で指示しているシーンが残っています。

デザインシステムとは、色・余白・タイポグラフィ・コンポーネントの設計ルールをまとめた「共通言語集」 です。開発元が異なるいくつかの主要なデザインシステムが存在し、それぞれ独自の世界観と語彙を持っています。

主要デザインシステムの比較

デザインシステムはただの「スタイルガイド」ではありません。それぞれ独自の世界観・哲学を持つ「設計思想」です。どのシステムを参照するかをAIに伝えるだけで、UIの方向性が一気に定まります。

主要なデザインシステムを7つ整理します。

主要デザインシステム比較表

各デザインシステムの参考URL

どのデザインシステムを参照するか

作るものの「用途」と「ユーザー」で参照するデザインシステムが変わります。

デザイントークン：色・余白・サイズを数値で伝える

「青っぽい色で」ではなく「Primary Color トークンで」と指示できるようになると、AIが出力するコードに一貫性が生まれます。デザイントークンはUIの仕様を数値・変数で定義する共通言語です。

デザイントークンとは、色・余白・フォントサイズ・角丸などのスタイル値に名前をつけて変数化したものです。マジックナンバー（#1976D2や16px）を直接使う代わりに、意味のある名前（primary-color・spacing-md）で管理します。

カラートークン（Color Token）

色を「役割」で名前をつけて管理します。色の見た目ではなく、使いどころで名前が決まります。

AIへの指示例：「ボタンの背景色はPrimaryトークン、テキストはOn Primaryトークンを使って実装して」

スペーシングトークン（Spacing Token）

余白を「段階的なスケール」で管理します。4px・8px基準のグリッドシステムが一般的です。

AIへの指示例：「カード内のパディングはspacing-md（16px）、カード間のギャップはspacing-lg（24px）で統一して」

タイポグラフィトークン（Typography Token）

文字サイズ・太さ・行間を「役割」で管理します。見出し・本文・キャプションなど用途で名前が決まります。

AIへの指示例：「記事タイトルはheadline-md、本文はbody-lg、投稿日時はlabel-smのタイポグラフィトークンを使って実装して」

トークンの階層構造

デザイントークンは「グローバルトークン→エイリアストークン→コンポーネントトークン」の3階層で管理するのが一般的です。

「プライマリボタンの背景色」を例に3階層を追ってみます。

ブランドカラーを青から緑に変えたい場合、グローバルトークンの参照先を変えるだけでprimaryを使っている全箇所が一括で変わります。

TailwindCSSを使う場合

TailwindCSSはトークンの概念をクラス名として実装しています。

プロジェクト固有のブランドカラーはtailwind.config.jsでカスタムトークンとして定義します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1976D2',
        'primary-hover': '#1565C0',
      },
      spacing: {
        'sm': '8px',
        'md': '16px',
        'lg': '24px',
      }
    }
  }
}

アトミックデザイン：考え方は使う、実装への適用は注意

アトミックデザインはUIを「部品の階層」で考える強力なフレームワークです。ただし実装のフォルダ構成にそのまま適用すると、分類の曖昧さが混乱を招くことがあります。

アトミックデザインとは

アトミックデザインとは、UIを化学の原子（Atom）になぞらえて5つの階層に分解して考える設計思想です。Brad Frost氏が提唱しました。

「考え方」としての使い方

アトミックデザインの本来の価値は「UIを階層で考える視点」を与えてくれることです。

AIへの指示でこの視点を使うとこうなります：

フォルダ構成への直接適用は注意

「このコンポーネントはAtomかMoleculeか？」という問いに明確な答えは出ません。チームやAIとの間でも判断がブレやすくなります。

実際のプロジェクトでの落とし所

「共通で使うか、機能固有か」という軸で分けるのが実用的です。

エレベーション・シャドウ・ボーダーラジウス

「影をつけて」「角を丸くして」という指示を数値と用語で伝えられるようになると、AIが出力するUIの質感が一気に揃います。

視覚的な「奥行き」「柔らかさ」「立体感」を作り出す3つの語彙を整理します。

エレベーション（Elevation）

UIの要素が「どのくらい浮いているか」を表す概念です。Material Designが定義した語彙で、影の深さで奥行きを表現します。

AIへの指示例：「カードはElevation Level 1、ホバー時はLevel 2に上がるアニメーションをつけて、モーダルはLevel 4で実装して」

シャドウ（Shadow）

エレベーションを実現するための具体的なCSS表現です。種類と使い分けを知ることで、AIへの指示がより精密になります。

AIへの指示例：「カードにはドロップシャドウ（shadow-md相当）、Active状態のボタンにはインナーシャドウで押し込まれた質感をつけて」

ボーダーラジウス（Border Radius）

要素の角の丸みを指定する値です。数値が大きいほど丸くなります。角丸の大きさひとつでUIの印象が大きく変わります。

3つの語彙を組み合わせた指示例

エレベーション・シャドウ・ボーダーラジウスを組み合わせることで、UIの質感を精密に伝えられます。