命名の実例集
名前は、次にその値を探す人への案内です。色・余白・文字・動きの4系統を、悪い名前と良い名前の対で並べます。
図の中身を文字で読む
- ✕ 見た目・省略・順序ばらつき ○ 役割・そろえた順序
- 色 --blue-600 --color-text-link
- テーマを変えると名前が嘘になる どの地でも役割は変わらない
- 余白 --gap-big --space-6
- big の次は huge になり、間に足せない 段の番号なら、大小と並び順が一致する
- 文字 --font-14 --text-sm
- 値が名前に固定され、変えると矛盾する 段の名前。rem へ移しても名前は生きる
- 動き --anim-time-2 --dur-fast
- 2 が速いのか遅いのか読めない 用途で選べる。fast / base / slow の3段
- 共通するのは、値ではなく「使う場面」で名付けること
- 名前の順序をカテゴリ・対象・役割・状態にそろえると、並べ替えたとき関連するトークンが隣り合う。
親ページのデザイントークンで決めた3層を、実際の名前に落とします。判断の基準は1つだけです。その名前が指しているのは、値そのものか、使う場面か。
色#
| ✕ こう書きがち | 何が起きるか | ○ こう書く |
|---|---|---|
--blue-600 | 暗い表示で灰みの水色に変えた瞬間、名前と実物が食い違う | --color-text-link |
--red | 危険なのか、必須の印なのか、ブランド色なのか読めない | --color-danger |
--bg-light | 暗い表示では light が暗い色になる | --color-surface |
--color-accent-2 | 1と2の違いが名前から分からない | --color-accent-text |
--clr-txt-mtd | 書く手間は減るが、検索も推測もできない | --color-text-muted |
同じ色でも、面に敷くのか文字に使うのかで満たすべき比が違います。この資料では面と図形に --color-accent、文字とリンクに --color-accent-text を分けています。理由はコントラストと色覚にあります。
余白#
| ✕ こう書きがち | 何が起きるか | ○ こう書く |
|---|---|---|
--gap-big | big の次に huge を足すことになり、あいだに割り込めない | --space-6 |
--space-32 | 値を 28px に変えたとき、名前だけが 32 のまま残る | --space-6 |
--card-gap --form-gap | 場所ごとに名前が増え、同じ 16px が3つの名前を持つ | --space-4 |
余白は段の番号で持ちます。番号なら大小の関係が名前の順で分かり、あいだに 1 段足すときも --space-4-5 のような苦しい名前を避けられます。刻みの決め方は余白にあります。
文字#
| ✕ こう書きがち | 何が起きるか | ○ こう書く |
|---|---|---|
--font-14 | rem に移した途端、名前が意味を失う | --text-sm |
--h1-size | 見出し以外で同じ級数を使いたいとき、名前が邪魔をする | --text-2xl |
--line-height-1 | 本文用か見出し用か分からない | --leading-body |
級数は段の名前、行送りは用途の名前で持ちます。段の作り方は大きさの体系にあります。
動き#
| ✕ こう書きがち | 何が起きるか | ○ こう書く |
|---|---|---|
--anim-time-2 | 2 が速いのか遅いのか、使うたびに調べ直す | --dur-base |
--transition | 時間と曲線が1つにまとまり、片方だけ変えられない | --dur-base と --ease-out |
--ease-smooth | smooth の反対語が思いつかず、2つ目が作れない | --ease-in |
時間は fast / base / slow の3段、曲線は入るときと出るときで2本。3段で足りる理由は動きの基本にあります。
順序をそろえる#
名前の中の語順を、全トークンで固定します。
--color-bg-danger-hover
color カテゴリ（color / space / text / dur …）
bg 対象（bg / text / border …）
danger 役割
hover 状態--text-color-muted と --color-border-subtle が混在すると、--color- で検索したときに片方が漏れます。カテゴリを先頭に固定しておけば、アルファベット順に並べたとき関連するトークンが隣り合います。
実物で確かめる#
命名を決めるときは、公開されているシステムを2つ開いて、同じ役割の色をどう名付けているか見比べます。実物のデザインシステムから選ぶなら、次の3つが読みやすい入口です。
| 見るもの | 何が分かるか |
|---|---|
| Material Design 3 | 1つの基準色から役割名を機械的に生やす仕組み。層の分け方の見本 |
| Atlassian Design System | 階層の呼び分けが明示されている。命名の語順をそろえた例 |
| デジタル庁デザインシステム | 日本語で書かれた基準。和文の組版に関する値も名前を持つ |
判断が分かれた箇所が、その系統の難しいところです。まねるのではなく、分かれ目の理由を読みます。
完成例#
出発点のCSSに載せている名前を、3層に開くとこうなります。実際の案件では 1層目と2層目を1ファイルにまとめてかまいません。層が分かれていることより、部品が2層目だけを見ていることが大切です。
このコードで動いている見本です
確認する#
- プリミティブの名前（
--amber-500など）を部品の CSS から検索して、1件も出てこない - 名前だけを見て、どの場面で使う値か言える
- 同じ役割の値に2つ以上の名前が付いていない