Refactoring UI（リファクタリングUI）
ビジュアルデザインは才能ではありません。それは一度だけ行う小さなシステム決定の集合と、階層を生み出すための少数のテクニックです。このスキルは、それらのシステムとテクニックそのものです。
アマチュアっぽいUIの最大の原因は、値をアドホックに選ぶことです — ここでは17px、あそこでは #3B82F6、ホバー状態では lighten(5%)。常にスケールからデザインしましょう。
システム — これらを使用し、再導出しないでください
以下のリストから選択してください。これらのリストにない値を発明してはいけません。
スペーシングとサイジング
ベースは16pxで、その因数と倍数から構築します：
4 8 12 16 24 32 48 64 96 128 192 256 384 512 640 768
小さい方は密に、大きい方に行くに従って間隔が広がります。隣接する2つの値は約25%以上離れている必要があります — それが選択を明確にします。線形の「4の倍数」スケールは失敗します。120pxと124pxのどちらを選ぶべきかの判断に役立ちません。
マージン、パディング、幅、高さ、アイコンサイズ、ボーダー幅など、空間に関わるすべてのものに使用します。不透明度の値も少数に固定します（例：.05 .1 .2 .4 .6 .8）。無効状態、オーバーレイ、ホバー時のティントに使用し、スライダーを毎回目視で調整するのを避けます。他のスケールと同じ論理です：一度決定し、どこでも再利用します。
タイプスケール
12 14 16 18 20 24 30 36 48 60 72
比率（4:5、2:3、黄金比）から構築したモジュラースケールではありません。これらはブラウザ間で一貫性のない丸めが発生する小数ピクセル値を生成し、インターフェースの密度に対してまばらすぎます — 代わりに、感触で選ばれた手動選択の値が優れています。
単位： px または rem のみ。決して em ではありません。 em は現在のフォントサイズに相対的であるため、1.25em の親要素内の .875em は17.5pxと計算されます — これはスケールにない値です。スケールは暗黙のうちに存在しなくなります。
フォントウェイト
2つのウェイトで十分です：
- 400 または 500 — 本文とほとんどのUIテキスト
- 600 または 700 — 強調されるもの
UIでは400未満は使用しないでください。強調を弱めるには、より薄い色またはより小さいサイズを使用します — より軽いウェイトは使用してはいけません。
カラー
5スウォッチのパレットジェネレーターが提供するものよりもはるかに多くの色が必要です。
- グレー：8〜10のシェード。 UIのほとんどはグレーです — テキスト、背景、パネル、ボーダー、フォームコントロール。3〜4のシェードでは常に不足します。真の黒ではなく、非常に暗いグレーから始めます（真の黒は不自然に見えます）。
- プライマリ：5〜10のシェード、1つまたは場合によっては2つのプライマリ。
- アクセント：それぞれ5〜10のシェード — 破壊的な赤、警告の黄色、肯定的な緑、そして製品が区別する必要があるその他の色（チャート系列、カレンダーイベント、タグ）。複雑なUIでは、10色×5〜10シェードが標準です。
これらに 100（最も明るい）→ 900（最も暗い）と名前を付け、ベースは 500 とします。
この順序でスケールを構築します： 最初に 500 を選びます（プライマリ/アクセントの場合、ボタンの背景として機能するシェードである必要があります）。次に端を見つけます — 900 は通常テキストカラー、100 は背景のティントです。アラートコンポーネントは両方を使用するため、コンポーネントを1つデザインし、2つの値を読み取ります。次に 700 と 300 を隣接色間の完璧な妥協点として埋め、その後 800 600 400 200 も同様に埋めます。
色はHSLで記述し、16進数ではありません。 hsl(220, 95%, 34%) と hsl(220, 65%, 61%) は視覚的に関連性がありますが、#03369E と #507DD7 はそうではありません。
lighten() / darken() を使用してランタイムでシェードを生成してはいけません。 そうすると、35種類の微妙に異なる青で終わることになります。
シャドウ — 5段階のエレベーション
0 1px 3px hsla(0,0%,0%,.2) /* わずかに浮いている — ボタン */
0 4px 6px hsla(0,0%,0%,.2) /* ドロップダウン */
0 5px 15px hsla(0,0%,0%,.2)
0 10px 24px hsla(0,0%,0%,.2)
0 15px 35px hsla(0,0%,0%,.2) /* モーダル */
「どんなシャドウが見栄えがするか？」ではなく、「これはZ軸上のどこに位置するのか？」と問うことで選択します。ユーザーに近い = より多くの注意。 :active でボタンのシャドウを小さくすると、押されたように感じられます。ドラッグして並べ替えるためにリストアイテムが持ち上げられたときにシャドウを大きくすると、逆の効果があります — 「現在、兄弟要素の上にある」と読まれ、ドラッグアフォーダンス自体としても機能します。
これら5つがデフォルトであり、どこでも問題ありません。 references/techniques.md は、同じスケールの洗練された2パーツバージョンを提供します — 並列的ですが、同一ではありません（最上位ステップはより重くなっています）。デザインでシャドウが目立つ場合にこれを使用します。目立たない場合、これらを使用します。1つのプロジェクトで両方を混在させないでください。
行間と行長
行間はフォントサイズに反比例し、行幅に比例します：
- 小さなテキスト / 広いカラム →
1.5から2 - 大きな見出し →
1で問題ありません
行長：45〜75文字、すなわち max-width: 20em〜35em。これは、それを囲むコンテナがより広い場合でも段落に適用されます — 1つのコンテンツエリア内での混合幅は、より洗練されて見えます。
（em はここでは正しいです — メジャーはそれが囲むテキストとともにスケールする必要があります。「em 禁止」ルールは、em がネストによって複合されるタイプスケールに限定されます。これを「修正」しないでください。）
ボーダー半径
1つを選択し、一貫性を保ちます。小さい半径 = ニュートラル。大きい半径 = 遊び心。なし = シリアス/フォーマル。1つのインターフェースで角丸と四角を混在させると、常に見栄えが悪くなります。
手順
1. レイアウトではなく、機能から始めます。「アプリ」をデザインしないでください — 製品に何が含まれているかを知る前に、トップナビとサイドバーのどちらかを決定することはできません。1つの実際の機能（検索フォーム、メッセージコンポーザー）をデザインし、シェルを出現させます。
2. 詳細は後回しにします。 初期段階では、タイプフェイス、シャドウ、アイコンは無視します。まずグレースケールで作業します — これにより、色ではなく、スペーシング、コントラスト、サイズから階層が生まれます。レイアウトが機能したら色を追加します。
3. 低忠実度に過剰投資しないでください。 スケッチ、ワイヤーフレーム、モックアップは使い捨てです — アプリの静的な画像は誰も使えません。これらはアイデアを探求するために存在します。決定が下されたら放棄し、実際のものを構築します。
4. 最小限の有用なバージョンをデザインし、それを構築します。 短いデザイン→コードのサイクルで作業します。まだ出荷する準備ができていない機能を暗示しないでください — まだ出荷できない添付ファイルゾーンがあるコメントボックスは、機能全体をブロックします。あったらいいなは後でデザインします。
5. 排除によって選択します。 スケールから値を選択する場合：正しいと思う値を推測し、それを両側の隣接値と比較します。2つは明らかに間違っています。外側のオプションが勝った場合、それを新しい中央として比較を再実行します。
6. 最初は余白を多めに取り、それを削除します。 見た目が悪くなくなるまでスペースを追加すると、最小限の量が得られます。寛大に始めてトリミングすると、適切な量が得られます。密なUI（ダッシュボード）は正当ですが — デフォルトではなく、意図的な決定として。
7. キャンバスを縮小します。 1400pxのアートボードでデザインされた小さなコンポーネントは、スペースが埋めるために存在するため、広がる傾向があります。約400pxから始めて、制約が実際にあるモバイルレイアウトを最初にデザインします — その後、大きな画面に持ち込み、実際に窮屈に感じたものだけを緩和します。予想よりも変更は少なくなります。
階層 — 最も効果を発揮するテクニック
画面上のすべてはピラミッドに位置します：プライマリ、セカンダリ、ターシャリ。すべてが競合すると、UIはノイズとして読み取られます。これがデザインを「デザインされた」ように見せるものです — スタイリングではありません。
サイズがすべてではありません。 フォントサイズだけに頼ると、プライマリコンテンツが大きすぎ、セカンダリコンテンツが小さすぎます。代わりに、ウェイトとカラーを使用して強調を伝え、サイズを妥当に保ちます。
最大3つのテキストカラー：
- ダーク — プライマリコンテンツ
- グレー — セカンダリコンテンツ
- より明るいグレー — ターシャリ（脚注、著作権）
これら3つすべてが実際の本文サイズのテキストを持つため、すべて4.5:1が必要です。「より明るいグレー」とは、それをまだクリアする最も明るいシェードを意味します — 9段階のランプの中間あたりで、薄い方の端ではありません。薄いシェードは、無効状態と大きなテキストのみに使用されます。
強調を弱めることで強調します。 重要な要素が目立たず、それに追加するものが何もない場合、代わりにそれと競合するものを弱めます。非アクティブなナビゲーションアイテムをフェードアウトします。メインコンテンツが前に出るように、サイドバーの背景色を下げます。
アクション： 意味ではなく、階層によってスタイリングします。
- プライマリ → ベタ塗り、高コントラスト。通常は1ページに1つだけ。
- セカンダリ → アウトライン、または低コントラストの背景。
- ターシャリ → リンクのようにスタイリング。
破壊的 ≠ 大きな赤いボタン。「削除」がページのプライマリアクションでない場合、ターシャリの扱いを与えます — そして、確認ダイアログ内では、実際にプライマリアクションであるため、大きな赤いプライマリボタンにします。
ラベルは最後の手段です。 ラベル: 値 はすべてのデータに等しい重みを与えます。ほとんどのデータは、フォーマット（$19.99、メールアドレス）またはコンテキストによって自分自身を識別します。ラベルが本当に必要な場合、それを値に組み込むか（「在庫: 12」ではなく「残り12個」）、または明らかにセカンダリコンテンツとして追加します。例外：ユーザーがラベルをスキャンするスペックシートスタイルのページでは、代わりにラベルを強調します。
ウェイトとコントラストのバランスを取ります。 ベタ塗りのアイコンは視覚的に重く、隣のテキストを圧倒します — 色を薄くして補正します。逆も機能します。ソフトカラーでは1pxのボーダーが繊細すぎるが、暗くすると強すぎる場合、ソフトカラーを維持して2pxにします。低コントラストを修正するためにウェイトを追加します。過剰なウェイトを修正するためにコントラストを減らします。
視覚的階層 ≠ ドキュメント階層。 セマンティックマークアップと視覚的な重みは別々の決定です。セクションタイトルは通常ラベルであり、見出しではありません — 16pxの h1 は問題なく、時にはコンテンツがそれ自体を語るため、タイトルを完全に視覚的に非表示にすることもあります。
ハードルール
これらから逸脱すると、特定の認識可能な失敗が生じます。
- 色付きの背景に決してグレーのテキストを使用しないでください。 グレーオンホワイトはコントラストを減らすため機能します。色の上にグレーは単に汚く見えます。透明度を下げた白は、洗い流されて無効に見え、パターンがグリフを通して見えるようにします。背景の色相を持つ色を手動で選択し、彩度と明度を調整します。
- タイプスケールに決して
emを使用しないでください。pxまたはrem。 - ランタイムで決してシェードを生成しないでください。 事前に定義します。
- スケールすべきでないものに決してパーセンテージ幅を使用しないでください。 サイドバーは固定幅を取得します。メインエリアはフレックスします。要素は
max-widthを取得し、画面が実際に小さい場合にのみ縮小します — ログインカードは、大きな画面よりも中程度の画面で幅広くなるべきではありません。 - ブレークポイント間で要素を決して比例的にスケーリングしないでください。 大きな要素は、小さな要素よりも速く縮小する必要があります。14pxのモバイル本文に載っている2.5emの見出しは35pxと計算されます — 大きすぎます。そこでは20〜24pxであるべきです。同様に、ボタンのパディングは、ボタンが縮小するにつれて比例的にきつくなるべきであり、そのフォントサイズと一緒にスケーリングするべきではありません。
- グループの周囲には常に内部よりも多くのスペースを確保します。 これは、「どのラベルがどのフィールドに属するか」、窮屈な箇条書きリスト、間違った段落に付いているように見える見出しを修正するものです。曖昧なスペーシングは、単に見苦しいだけでなく、機能的なバグです。
- 唯一のシグナルとして色を使用しないでください。 アイコン、形状、またはテキストの手がかりを追加します。チャートの場合、系列を色相ではなくコントラスト（1色の明るい→暗いシェード）で区別します — 色覚異常のユーザーは明るさを確実に読み取りますが、色相はそれほどでもありません。
- コントラストの最小値： 通常のテキストは4.5:1。3:1の許容値は、WCAGが24px標準または18.66px太字（18pxではありません）と定義する大きなテキストにのみ適用されます。テキストが実際にその大きさでない限り、4.5:1を想定します。色の上に白が失敗した場合、反転します：明るい色のティントの上に暗い色のテキスト（
references/systems.mdを参照）。別途、3:1は非テキストにも適用されます（WCAG 1.4.11）。ボーダーがコントロールを識別する唯一のものである場合 — 入力のアウトライン、チェックボックスの端 — 背景に対して3:1が必要です。単にコンテンツを分割するヘアラインは必要ありません。これらは2つの異なるトークンであり、1つではありません。 - アイコンを本来のサイズから大きく離してスケーリングしないでください。 48pxでの16〜24pxのアイコンは、寸胴で詳細が不足しているように見えます。代わりに、色付きの円の中に配置します。
リファレンス
assets/tokens.css — 上記すべての完全でコントラストが検証された開始セットをCSSカスタムプロパティとして提供：スペーシング、タイプ、ウェイト、ボーダー幅、固定不透明度スケール、9シェードのクールグレーランプ、9シェードのプライマリ、3つのアクセントトリオ、5つのエレベーション、セマンティックロールレイヤー（--surface、--text-primary、--action…）、およびそれらのロールのみをオーバーライドするダークモードブロック。これをコピーして、この散文からスケールを再導出するのではなく、色相を再調整します。生のランプではなく、コンポーネント内のロールを参照します — それがダークモードを機能させるものです。すべてのテキスト/サーフェスペアは、両方のモードで≥4.5:1、すべての機能ボーダーは≥3:1が検証されています。意図的なサブスレッショルドシェード（無効、装飾的な区切り線、大きなテキスト専用ステップ）は、基準により除外され、インラインでコメントされています。
作業が必要なときにこれらをロードします：
references/systems.md— スクラッチからのパレット構築：ベースカラーの選択、明るい端と暗い端での彩度の維持、色相回転、ウォーム/クールグレー、および醜い色なしでコントラスト比を達成するための2つの脱出ハッチ。references/diagnose.md— 症状 → 修正テーブル。新しいUIを構築するのではなく、既存のUIを改善するタスクの場合は、最初にロードします。references/techniques.md— 奥行きと光のシミュレーション、2パーツシャドウ、ベースライン揃え、文字間隔、デフォルトのコンポーネント形状からの脱却、およびユーザーアップロード画像の処理。