インターフェースクラフト
ほとんどのインターフェースはアイデアではなく実行で失敗します—ほぼ一貫したスペーシング、 ほぼ明確な階層、ほぼ適切なタイポグラフィ。
再スタイリング前の診断
画面が何のためなのかを問いかけてください。1つのプライマリアクション、多くても1つのセカンダリアクションです。プライマリアクションを名付けられない場合、レイアウトの問題は製品の問題であり、スタイリングでは修正できません。
実際に品質として伝わる要素
階層。 視聴者が何も読む前にどこを見ればよいかがわかる必要があります。サイズ、ウェイト、スペースの順で実現します。色は最も弱い階層ツールであり、最も過剰に使用されています。
スペーシングのリズム。 関連するものは関連しないものよりも近くに配置し、間隔は1つのスケールから取ります。一貫性のないスペーシングは、人々が感じるが名前を付けられない欠陥です。近接性を正しくすれば、シンプルなレイアウトでもデザインされたように見えます。
タイポグラフィ。 インターフェースには1ファミリー、ページ全体で多くても2ファミリーまで。実際のスケールを設定し、そのステップを使用してサイズを発明しないでください。本文テキストは快適な文字数（おおよそ60～75文字）と、行幅が広がるにつれて大きくなる行間が必要です。
表面の抑制。 ボーダー、シャドウ、塗りはすべて要素を分離します。境界1つにつき1つだけを選びます。3つすべてを重ねると、通常の密度でインターフェースがごちゃごちゃして見えます。
整列。 すべての要素が何かと揃っています。何にも揃っていない要素は、意図的であっても間違いのように見えます。
密度は意思決定
情報密度の高いツールとマーケティングページでは、逆の扱いが必要です。これがどちらかを決定し、それにコミットしてください—データテーブルにランディングページのパディングが適用された、どちらでもない中途半端な状態はどちらにも役立ちません。
状態を完成させる
ローディング、空、エラー、オーバーフローは製品が未完成に感じられる箇所です。空の状態はデザインのチャンスです。コンテキストのないスピナーは欠陥の表明です。長い文字列、長いリスト、小さな画面はすべて処理される必要があり、願望で済ませてはいけません。
ダークモードはパレットであり、反転ではない
ライトテーマを反転させると、特徴的な悪いダークモードが生まれます：純粋な黒の背景、純粋な白のテキスト、何も効果のないシャドウ。
- 純粋な黒ではなく非常に濃いグレーを使用し、純粋な白ではなくやや暗い白を使用します。両者の最大コントラストはハレーションを引き起こし、読むのが本当に疲れます。
- 高低差は逆転します：ライトテーマでは浮き上がった面に影が落ちますが、ダークテーマでは明るくなります。影だけでは暗い地面では何も伝えません。
- 白で機能した彩度の高い色は、暗い背景で振動します。アクセントカラーを再利用するのではなく、ダークパレット用に彩度を下げて明るくします。
- 両方のパレットをトークンレベルで最初から一緒に定義します。後付けで追加するにはすべての面を監査する必要があります。
アクセシビリティの基準
これらは洗練項目ではありません—これらを下回ると、一部のユーザーはインターフェースをまったく使用できません。
- テキストのコントラストが、実際の背景（画像上のテキストや色付きボタン内部も含む）に対して標準の比率を満たしていること。
- 色だけで意味を伝えないこと。エラーを示す赤いボーダーには、テキストやアイコンも必要です。
- すべてのインタラクティブ要素がキーボードで操作可能であり、適切な順序で、可視のフォーカス状態を持つこと。
- タッチターゲットが確実にヒットできる十分なサイズであり、隣接するターゲットとの間に間隔があること。
prefers-reduced-motion設定を尊重すること：無効にできないアニメーションは一部のユーザーに実際の症状を引き起こします。- 実際のセマンティック要素を使用すること：ボタンはボタン、見出しは順序通りに。スタイル付きのdivは支援技術からは見えません。
禁止事項
- 同じ重みの要素が多すぎるために生じた階層問題を、視覚的な重みを追加して解決しないこと。代わりに削除すること。
- 本文テキストを中央寄せにしないこと。
- 対応するフォーカス状態なしにホバー状態をリリースしないこと。