デザイナーのためのコンポーネント設計論

すべてを完璧にできた現場はありません。完璧を目指すことより、判断に迷ったときに立ち返れる地図を持っておくことが効きます。

制約（Constraint）: 選択肢を絞り、判断の負荷を下げる

ディスプレイが表現できる色は約1680万色です。しかし、プロダクトで使う色が1680万色あったら、誰もデザインの一貫性を保てません。10色程度のセマンティックカラーに絞ることで、どの画面でも意味のある配色が再現できるようになります。

デザインシステムは「法律」ではなく「地図」のようなものです。空白地帯を開拓した者のルートを、次の正規ルートに昇格させるのが管理者の仕事です。

この考え方は「獣道を舗装する（Paving the cowpaths）」とも呼ばれます。デザイナーが自然に作り出した非公式なパターン——繰り返しDetachされるコンポーネント、独自に作られた野良部品——を観察し、正式なシステムの一部として昇格させていく。トップダウンの都市計画ではなく、現場の実態に合わせていく設計です。

Detach：コンポーネントとの紐付けを解除すること

Figmaにはメインコンポーネントとインスタンスという概念があり、前者のデザイン変更が、紐づく後者に連動する

5つの状態

UIスタック: データの有無による5つの状態

1. Ideal State（理想状態）: データが完璧に入った状態。Figmaで最初にデザインする状態

2. Empty State（空状態）: データが空の状態。リストが0件のとき、Avatarの画像がないとき

3. Loading State（読み込み中）: 読み込み中。スケルトンスクリーンやスピナー

4. Partial State（不完全状態）: データが不完全な状態。ユーザー名はあるけどアイコンがない、商品情報はあるが画像が未登録、など

5. Error State（エラー状態）: 読み込み失敗やバリデーションエラー

通常、絵を描くときは理想状態を目指し、完成する

そんな中で、自分が提示しているのは他の状態だとしたら

「落書き風の絵」をオーダーされた絵描き曰く、やりにくかったらしい

仕事絵なのできれいに描くのだけど、それだと落書きから遠ざかってしまうため

理想的な不完全状態？