refactoring-ui

Refactoring UI

ビジュアルデザインは才能ではありません。一度だけ決める少数のシステム上の選択と、階層を作るためのいくつかのテクニックで成り立っています。このスキルでは、そのシステムとテクニックを扱います。

素人っぽく見える UI の最大の原因は、値をその場しのぎで選ぶことです。ここでは 17px、あそこでは #3B82F6、ホバー状態には lighten(5%)。常にスケールを基準にデザインしましょう。

---

システム — 作り直さず、これを使いましょう

以下のリストから選びます。リストにない値を作ってはいけません。

間隔とサイズ

基準値は 16px で、その因数と倍数から構成します。

4  8  12  16  24  32  48  64  96  128  192  256  384  512  640  768

小さい値の範囲は詰め、大きい値の範囲は間隔を広げます。隣り合う値同士の差は、約 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 を埋めていきます。

色は 16 進数ではなく HSL で記述します。 hsl(220, 95%, 34%) と hsl(220, 65%, 61%) には見た目の関連性がありますが、#03369E と #507DD7 からはそれが伝わりません。

lighten() / darken() を使って、実行時に色の段階を生成してはいけません。 そうすると、わずかに異なる青が 35 種類もできてしまいます。

シャドウ — 5 段階のエレベーション

0 1px 3px  hsla(0,0%,0%,.2)   /* barely raised — buttons */
0 4px 6px  hsla(0,0%,0%,.2)   /* dropdowns */
0 5px 15px hsla(0,0%,0%,.2)
0 10px 24px hsla(0,0%,0%,.2)
0 15px 35px hsla(0,0%,0%,.2)  /* modals */

「どのシャドウがよく見えるか」ではなく、「Z 軸のどこに配置されているか」を考えて選びます。ユーザーに近いほど、より注目を集めます。:active でボタンのシャドウを小さくすると押し込まれたように感じられます。一方、並べ替えのためにドラッグ中のリスト項目のシャドウを大きくすると、逆の効果が生まれます。「兄弟要素より前面にある」と認識され、ドラッグ可能であることも自然に示せます。

この 5 段階をデフォルトとして、どこでも使えます。references/techniques.md には、同じスケールを2 要素に分けて洗練させたバージョンがあります。平行したスケールですが、値は同一ではなく、最上位の段階がより強くなっています。デザインでシャドウが目立つ場合はそちらを、そうでない場合はこちらを使います。1 つのプロジェクト内で 2 種類を混在させないでください。

行の高さと行の長さ

行の高さはフォントサイズに反比例し、行幅に比例します。

• 小さなテキスト／幅の広いカラム → 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色です：

• 濃い色 — プライマリーコンテンツ
• グレー — セカンダリーコンテンツ
• 薄いグレー — ターシャリー（脚注、著作権表示）

どの色も実際の本文サイズのテキストに使うため、すべて4.5:1を満たす必要があります。「薄いグレー」とは、その基準をぎりぎり満たす最も薄い色合いのことです。9段階の色の中間あたりで、最も薄い側ではありません。薄い色合いは、無効状態と大きなテキストにのみ使います。

重要な要素を目立たせるには、周囲を目立たなくします。 重要な要素にこれ以上手を加えられず、目立たせる方法がない場合は、競合する要素を弱めましょう。非アクティブなナビゲーション項目を薄くし、サイドバーの背景色をなくして、メインコンテンツを前面に出します。

アクション： 意味ではなく、階層に応じてスタイルを設定します。

• プライマリー → 塗りつぶし、高コントラスト。通常、ページごとに1つだけです。
• セカンダリー → アウトライン、または低コントラストの背景。
• ターシャリー → リンクのようなスタイル。

破壊的な操作 ≠ 大きな赤いボタン。「削除」がページのプライマリーアクションでなければ、ターシャリーとして扱います。そのうえで、実際にプライマリーアクションとなる確認ダイアログ内では、大きな赤いプライマリーボタンにします。

ラベルは最後の手段です。 label: value の形式では、すべてのデータが同じ強さになります。多くのデータは、その形式（$19.99、メールアドレス）や文脈によって何を表すかがわかります。ラベルが本当に必要な場合は、値の中に組み込み（「在庫12点」ではなく「在庫：12」）、または明確にセカンダリーなコンテンツとして追加します。例外として、ユーザーがラベルを探して読み進める仕様書形式のページでは、ラベルを強調します。

ウェイトとコントラストのバランスを取ります。 ソリッドアイコンは視覚的に重く、隣のテキストより目立ってしまうため、色を弱めて調整します。逆の場合も同じです。1pxの境界線が柔らかい色では目立たなさすぎる一方、色を濃くすると強すぎる場合は、柔らかい色のまま2pxにします。コントラストが低い場合はウェイトを増やし、ウェイトが強すぎる場合はコントラストを下げます。

視覚的階層 ≠ ドキュメントの階層です。 セマンティックなマークアップと視覚的なウェイトは、別々に決めるものです。セクションタイトルは通常、見出しではなくラベルです。h1を16pxにしても問題ありませんし、コンテンツ自体が十分に語っているため、タイトルを完全に視覚上非表示にしたほうがよい場合もあります。

---

厳守事項

これらに反すると、特定の、見分けやすい問題が発生します。

1. 色付き背景にグレーのテキストを使わないでください。 グレーのテキストを白い背景に置くとコントラストが下がるため問題ありませんが、色付き背景ではくすんで見えるだけです。不透明度を下げた白は色あせて無効化されたように見え、文字の隙間からパターンが透けてしまいます。背景色と色相を合わせ、彩度と明度を調整した色を選んでください。
2. 文字サイズのスケールに em を使わないでください。 px または rem を使います。
3. 実行時にシェードを生成しないでください。 あらかじめ定義しておきます。
4. 拡大縮小すべきでないものにパーセンテージ幅を使わないでください。 サイドバーには固定幅を設定し、メイン領域は伸縮させます。要素には max-width を設定し、画面が実際に小さい場合にのみ縮小させます。ログインカードが大画面より中画面で幅広くなるべきではありません。
5. ブレークポイント間で要素を比例して拡大縮小しないでください。 大きな要素ほど、小さな要素よりも速く縮小させる必要があります。モバイルの本文が 14px のとき、2.5em の見出しは 35px と計算され、大きすぎます。ここでは 20～24px が適切です。同様に、ボタンが小さくなるにつれてパディングも比例して小さくし、フォントサイズに合わせて拡大縮小しないでください。
6. グループ内より、グループの周囲に広い余白を設けてください。 これにより、「どのラベルがどのフィールドに対応するか」という混乱、詰まった箇条書き、見出しが誤った段落に付随して見える問題を解消できます。曖昧な余白は、見た目が悪いだけでなく、機能上の不具合です。
7. 色だけを唯一の手がかりにしないでください。 アイコン、形状、またはテキストによる手がかりを加えます。グラフでは、色相ではなくコントラスト（同じ色の明るいシェードから暗いシェード）で系列を区別してください。色覚に障害のあるユーザーは明度を確実に読み取れますが、色相はそうとは限りません。
8. コントラストの最低基準： 通常のテキストでは 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つには異なるトークンが必要であり、同じものを使ってはいけません。
9. アイコンを本来のサイズから大きくかけ離れたサイズにしないでください。 16～24px のアイコンを 48px にすると、ずんぐりして細部が失われます。代わりに、色付きの円の中に配置してください。

---

参考資料

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 の改善がタスクの場合は、最初に読み込んでください。
• references/techniques.md — 奥行きと光のシミュレーション、2段階のシャドウ、ベースラインの配置、文字間隔、既定のコンポーネント形状から脱却する方法、ユーザーがアップロードした画像の扱い。