web-design-mastery

Web Design Mastery

Adam Wathan と Steve Schoger による Refactoring UI の、本番環境向け UI デザイン原則です。

---

デザインの基本ワークフロー

1. レイアウトではなく、機能から始める

• まず、実際の機能をデザインします
• ナビゲーション、サイドバー、シェルから始めないでください
• 細部は後から整えます。まずはグレースケールで作業します
• 作り込みすぎず、サイクルを繰り返して進めます

2. デザインの前にシステムを確立する

意思決定の負担を減らすため、最初に以下のシステムを定義します。

スペーシングスケール（px）：

トークン	サイズ	用途
1	4	ごく小さな隙間
2	8	コンポーネント内の狭い間隔
3	12	関連する要素間
4	16	セクションのパディング
6	24	セクション間
8	32	大きな区切り
12	48	広い間隔
16	64	ヒーローの余白
24	96	最大の区切り

タイポグラフィスケール（px）：

サイズ	用途
12	ラベル、メタ情報、注記
14	本文、標準サイズ
16	強調、サブ見出し
18	セクション見出し
20	カードタイトル
24	ページ内セクションのタイトル
30	ページ見出し
36	ヒーローのサブ見出し
48	ヒーローの見出し
60-72	ディスプレイテキスト

シャドウスケール（5段階）：

レベル	用途
1	ボタン、控えめな浮き上がり
2	カード、入力欄
3	ドロップダウン、ポップオーバー
4	固定要素
5	モーダル、ダイアログ

3. 装飾ではなく、階層を構築する

• プライマリ：濃い色（見出し、主要なアクション）
• セカンダリ：グレー（補足テキスト、日付）
• ターシャリ：薄いグレー（メタデータ、著作権表示）

主な原則：

• サイズがすべてではありません。太さと色も活用します
• 競合する要素を目立たなくして、強調します
• ラベルは最終手段です。値と組み合わせます
• 意味づけよりも階層を優先します

4. 意図を持って奥行きを加える

• 光は上から差します
• シャドウは高さを表します（近いほど、注意を引きます）
• 上質な印象には、2つのパーツから成るシャドウを使います
• レイヤーを作るため、要素を重ねることも検討します

5. 仕上げを整える

• 標準の見た目を強化します（箇条書き → アイコン、引用のスタイル調整）
• 視覚的なアクセントとして、境界線を追加します
• 空の状態も第一印象を決めるものとしてデザインします
• 境界線は減らし、シャドウや余白を優先します

---

カラーシステム

必要なカテゴリー：

1. グレー（8～10段階）：テキスト、背景、パネル、境界線
2. プライマリカラー（5～10段階）：アクション、アクティブ状態、リンク
3. アクセントカラー（意味ごと）：成功、警告、エラーの状態

色の濃淡を定義する手順：

1. ボタンの背景色として使えるベースカラー（500）を選びます
2. 両端の色を選びます（色付き背景には100、テキストには900）
3. 空いている段階を埋めます：700、300 → 800、600、400、200

主なルール：

• 直感的に調整できる HSL を使います
• 明度の両端では彩度を高めます
• 明るい色は、色相を明るい方向（60°、180°、300°）に回転させます
• グレーは暖色系（黄色／オレンジの色味）にも寒色系（青の色味）にもできます
• アクセシビリティ：通常のテキストはコントラスト比 4.5:1、大きなテキストは 3:1

---

避けるべきアンチパターン

絶対にしないこと：

• 色付きの背景にグレーのテキストを使う（色は個別に選びます）
• 必要以上に画面全体を埋める
• グリッドを盲目的に使う（固定幅のほうが適切な場合が多くあります）
• 曖昧なスペーシングにする（グループ間の余白を、グループ内より広くします）
• 拡大縮小に対応できない相対サイズを使う
• アイコンを本来のサイズを超えて拡大する
• 意味を色だけで伝える

---

参考ファイル

特定のトピックに関する詳しいガイダンス：

トピック	ファイル	読むタイミング
視覚的階層、ラベル、強調	hierarchy.md	要素の重要度のバランスを取るとき
スペーシング、余白、レイアウトグリッド	spacing-layout.md	レイアウトを決めるとき
タイポグラフィ、フォント、行の高さ	typography.md	テキストのスタイルを整えるとき
HSL、色の濃淡、アクセシビリティ	color.md	カラーパレットを作成するとき
シャドウ、高さ、レイヤー	depth.md	UI に奥行きを加えるとき
境界線、背景、空の状態	finishing-touches.md	デザインを仕上げるとき