このページの中身

デザインシステム

同じものを同じに作り続けるのは、気をつけることではなく、仕組みの仕事です。公開されている実物は実物のデザインシステムにまとめています。

デザインシステムで決める順と、前後の分野とのつながりを示した図

図の中身を文字で読む

このページから降りる#

ページ	何が書いてあるか
実物のデザインシステム	公開されているものを見て、判断の根拠を掴む

全7件。ほかの分野もまとめて引くなら逆引きへ。

この分野が答えになる場面困り事から引く7 件

こういうとき	答え	いますぐ	詳しくは
同じ部品が場所ごとに違う実装になっている	値に名前を付けて共有する。色・余白・角丸・影・時間をトークンにする。	コードを開く	デザイントークン
トークンの名前の付け方が分からない	値ではなく役割で付ける。--space-3 のような段階名か、--color-text-muted のような用途名。	コードを開く	デザイントークン
部品をどこまで分けるか分からない	同じ形が3回出たら部品にする。2回目までは複製でよい。	`/* 同じ形が3回出たら .card 等に切り出す */`	コンポーネント設計
部品の指定が増えすぎた	真偽値の指定が並んでいるなら、組み合わせで持たせる形に変える。	コードを開く	コンポーネント設計
デザインシステムが使われない	使う人が見つけられていない。名前と置き場所と、直してほしいときの窓口を先に決める。	コードを開く	運用
デザインと実装がずれていく	同じトークンを両方から参照する。図面と実装で別々に値を持たない。	コードを開く	デザイントークン
例外を作りたいと言われた	例外の置き場所を決めておく。決めないと、例外が本体を侵食する。	コードを開く	運用

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