同じものを同じに作る

この場面の困り事と、そのまま使えるコード。全9件。足りなければ、行末のページへ進む。

同じものを同じに作るの場面で、最初にどこを見るかの順と、避けること

この場面を絞り込む

このページの中だけを絞ります。ページは移りません。

同じ部品が場所ごとに違う実装になっている

値に名前を付けて共有する。色・余白・角丸・影・時間をトークンにする。デザイントークン

:root {
  --space-4: 16px;
  --color-text: #1c1a17;
  --dur-base: 240ms;
}

トークンの名前の付け方が分からない

値ではなく役割で付ける。--space-3 のような段階名か、--color-text-muted のような用途名。デザイントークン

:root {
  --space-4: 16px;
  --color-text-muted: #6f6a62;
  --color-surface: #f3efe8;
}

部品をどこまで分けるか分からない

同じ形が3回出たら部品にする。2回目までは複製でよい。コンポーネント設計

同じ形が3回出たら .card 等に切り出す

部品の指定が増えすぎた

真偽値の指定が並んでいるなら、組み合わせで持たせる形に変える。コンポーネント設計

.button--primary { /* 組み合わせで持つ */ }
.button--large { /* size + variant */ }

デザインシステムが使われない

使う人が見つけられていない。名前と置き場所と、直してほしいときの窓口を先に決める。運用

名前・置き場所・問い合わせ窓口を先に決める

デザインと実装がずれていく

同じトークンを両方から参照する。図面と実装で別々に値を持たない。デザイントークン

:root { --color-text: #1c1a17; }
body { color: var(--color-text); } /* 図面も同じ変数 */

他社のデザインシステムを参考にしたい

自分の案件に近い規模と業種のものを1つ選ぶ。見るのは見た目ではなく、名前の付け方と分け方。実物のデザインシステム

トークンの階層をどう組むか迷う

公開されているものを2つ開いて見比べる。判断が分かれる箇所が、そこの難しいところ。実物のデザインシステム

公開DSを2つ開いて名前の付け方を見比べる

例外を作りたいと言われた

例外の置き場所を決めておく。決めないと、例外が本体を侵食する。運用

@layer components {
  .card { padding: var(--space-5); }
  .card--exception { padding: var(--space-3); } /* 例外はここ */
}

この場面の値をまとめて決めるなら作業台へ。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 部品がトークンに追従する

この場面で貼れるもの#

答えを読んだら、ここから完成形を持ち帰れます。

この資料は、Webサイトを作るときに引くためのものです。何のために作ったか。作っているのは AK²Lab。