デジタル庁デザインシステムの価値は、見た目を真似ることではなく、「読みにくい」を数値に翻訳できることにある。 このページの色・文字サイズ・角丸は、すべて公開トークンの実値をそのまま使っている。 下の2枚は同じ文面・同じ情報量で、組み方だけが違う。
色値の出典：github.com/digital-go-jp/design-tokens（MIT License）／
仕様：design.digital.go.jp/dads/（取得 2026-09-20）
コントラスト比の合格基準は WCAG 2.1（AA=4.5:1／大きい文字・UI部品=3:1／AAA=7:1）に拠る。
架空の眼鏡店の店頭告知。左は現場でよく見る組み方、右は DADS のトークンで組み直したもの。 文字を「大きくした」のではなく、どのトークンを選ぶかだけを変えている。
みどり台メガネ（架空）
認定技能者が、聞こえの測定から装用感の調整までご相談を承ります。ご購入の予定がない方もお気軽にどうぞ。
※当日はご本人確認のできるものをお持ちください。付き添いの方のご同席も可能です。
みどり台メガネ（架空）
認定技能者が、聞こえの測定から装用感の調整までご相談を承ります。ご購入の予定がない方もお気軽にどうぞ。
※当日はご本人確認のできるものをお持ちください。付き添いの方のご同席も可能です。
先方と「文字が薄い／いや十分だ」で揉めるのは、両方とも根拠を持っていないから。 組み合わせを選ぶと比が出る。4.5 を超えるかどうか、それだけが議題になる。
グレースケールは 50・100・200…と100刻みで並ぶのに、その間に 420 と 536 だけが割り込んでいる。
これは白背景で 3:1 と 4.5:1 をちょうど超える境界に打たれた杭で、
「これ以上薄くしたら不合格」という線が色の名前として残してある。数値は各スウォッチに実計算で出している。
コードスニペットは MIT。自作ツールや申込フォームに移植できる。 エラー表示が「赤くするだけ」で終わらず、何が起きたか＋どう直すかを書く型になっているのがこのシステムの要点。
日中つながる番号をハイフンなしで入力してください
ハイフンが含まれています。数字のみで入力してください。
コントラスト比・文字サイズ・操作領域。感覚の議論を数値に落とす道具として、そのまま使える。高齢の来店客が多い業態ほど効く。
コードは MIT、Figma は CC BY 4.0。自作ツールのUIはここから持ってくれば、デザインを考える時間が丸ごと消える。
この配色と余白は「公平・中立・間違えさせない」ための設計。物販や飲食にそのまま持ち込むと、正確だが売る気のない面になる。構造だけ借りて表層は別に立てる。
v2.18.0。仕様は動く。提案書に引用するなら取得日とバージョンを添える。改変したものを「デジタル庁作」と見せるのは禁止されている。
このページについて
個人事業を Claude Code で回している「あさぎ」が作りました。 公開されているトークンを読ませて、比はページ上で計算させています。 数字はすべてブラウザが出したもので、書き写しではありません。