デザインシステムとは / 適用の考え方

この章でわかること: 「デザインシステム」とは何か、なぜ AI駆動開発と相性が良いのか。 そして、実在する公開例である**デジタル庁のデザインシステム(DADS)**を題材に、 自分のアプリへ適用する道すじを整理します。実際に DADS を適用したサンプルページも用意しました。

デザインシステム = 「見た目の意思決定」を再利用可能にしたもの

デザインシステムは、単なる配色ルールやパーツ集ではありません。 「このプロダクトではこう作る」という判断を、迷わず再現できる形にまとめたものです。 毎回ゼロから色や余白を決めるのをやめ、決定を資産として貯めていく——それが本質です。

なぜ非エンジニアにも関係するのか

提案やプロトタイプで「なんか安っぽい」「画面ごとにバラバラ」と感じる原因の多くは、 デザインの判断が毎回その場任せになっていること。デザインシステムは、この“ばらつき”を 構造的に無くす仕組みです。AIに作らせるときほど、この効果が大きく効きます。

3つの層で捉える

デザインシステムは、次の3層で考えると整理しやすくなります。下にいくほど、 AIが正確に働くための「文脈」が厚くなります。

層	中身	例	誰のためのもの
デザイントークン(データ)	色・余白・角丸・文字サイズなどの値	--color-key-900: #0017c1	一貫性の最小単位
コンポーネント(コード)	トークンで組まれた再利用パーツ	Button Input Card	実装の再利用
AI用ルール(文脈)	使い方・禁止事項をまとめた指示書	CLAUDE.md / SKILL.md	AIに制約を伝える

この3層が「AIが働きやすい制約」になる

値(トークン)だけ、パーツ(コンポーネント)だけでは、AIは平気でルールを外れます。 「何を使い、何を使ってはいけないか」を言語化したAI用ルールまで揃えて初めて、 抽象的な指示から一貫したUIが返るようになります。ここを体験するのが次章のハンズオンです。

題材:デジタル庁デザインシステム(DADS)

学ぶうえで都合が良いのは、中身がすべて公開されている実物です。 デジタル庁のデザインシステム(DADS)は、トークンもコンポーネントも AI 用ルールも オープンに公開されており、そのまま教材になります。

DADS(公式サイト) デザインの原則・ガイドライン

design-tokens 色・余白などのトークン定義(JSON / CSS)

example-components-react Reactの実装済みコンポーネント

実際に適用したサンプルを見る

DADS のデザイントークンだけを使って組んだ、行政サービス風のサンプルページを用意しました。 色・余白・角丸・文字は、すべて公開されているトークンの値です。

→ DADS 適用サンプルページを開く 架空の給付金申請ページ。トークンで組むと、素朴なHTMLでも“それらしく”一貫する感覚がつかめます。

ノート

派手な装飾は一切していません。それでも整って見えるのは、色・余白・文字の値が 最初から決まっているからです。これがトークンの効果です。

自分のアプリに適用する道すじ

現場の成熟度によって、始める地点は違います。あるものから使い、無いものを足していく のが基本です。

1. トークンを入れる: まず色・余白などの値を変数化する(DADSなら design-tokens を導入)。 これだけで「野良の16進数」が消え、一貫性の土台ができる。
2. コンポーネントを揃える: よく使うパーツ(ボタン・入力・カード)をトークンで組んで再利用する。 DADSの React コンポーネントをそのまま使う手もある。
3. AI用ルールを書く: 「デフォルトのTailwind色は禁止」「余白はトークンのみ」といった 制約を CLAUDE.md や SKILL.md に明文化し、AIに読み込ませる。

AIにこう頼むと良い

「この tokens.css(または tailwind.config.js)のデザイントークンだけを使って UIを作って。デフォルトの色や任意の16進数を直接書くのは禁止」のように、 使ってよいものと禁止するものをセットで伝えると、ルール逸脱が激減します。

アクセシビリティの最低ライン(3点)

提案先が公共機関や大企業だと、アクセシビリティ(誰にとっても使えるか)の配慮不足は 減点対象になります。難しく考えず、まず次の3点だけ押さえれば、品質と信頼が上がります。

• 色のコントラスト: 背景と文字の明暗差を十分に(薄い灰色文字などは読めない人が出る)
• 文字サイズ: 小さすぎない。拡大しても崩れない
• 画像の代替テキスト: 画像に「何の画像か」の説明(alt)を付ける(読み上げ・画像非表示に対応)

AIにこう頼むと良い

「アクセシビリティの基本(コントラスト・文字サイズ・代替テキスト)を満たして」と 一言添えるだけで、AIは配慮した実装をしてくれます。より厳密な監査は AI×デザインシステム ハンズオンの監査ステップへ。

なぜ大事か

デザインシステムを「見た目の定義」で終わらせず、**トークン(データ)・コンポーネント(コード)・ AI用ルール(文脈)**として構造化しておくと、AI駆動開発の速度と品質が大きく変わります。 自社の現場がどの層まで揃っているかを把握し、一歩ずつ「AIが働きやすい制約」を整えましょう。 実際に4段階で体験するのが、次のAI×デザインシステム ハンズオンです。

参考リンク(情報ソース)

• デジタル庁デザインシステム(DADS): https://design.digital.go.jp/
• design-tokens(GitHub): https://github.com/digital-go-jp/design-tokens
• example-components-react(GitHub): https://github.com/digital-go-jp/design-system-example-components-react