インターフェースの質感を向上させる は何をしますか？
このスキルは、小さな設計・エンジニアリングの詳細を積み重ねて、より洗練されたインターフェースを実現するために使用します。
出典: コミュニティの古いPR #1659 (linus707 氏) より抜粋。
使用タイミング
- ユーザーがUIが「オフに感じる」「平坦」「汎用的」「窮屈」「ぎこちない」「未完成」と言った場合。
- コントロール、カード、リスト、ダッシュボード、ナビゲーション、フォーム、ツールバーを構築している場合。
- コンポーネントにホバー、アクティブ、フォーカス、エンター、エグジット、ローディング、空の状態が必要な場合。
- フロントエンドのレビューで、具体的なBefore/Afterの推奨事項が必要な場合。
基本原則
同心円半径（コンセントリックラディウス）
近接した入れ子状の丸みを帯びたサーフェスの場合:
外側の半径 = 内側の半径 + パディング
パディングが大きい場合は、計算を無理に適用せず、レイヤーを別々のサーフェスとして扱います。重要なのは光学的な一貫性であり、数式を崇拝することではありません。
光学的配置（オプティカルアライメント）
幾何学的な中央揃えは、常に視覚的な中央揃えとは限りません。アイコンボタン、再生ボタンの三角形、矢印、星、非対称なアイコンは、多くの場合、わずかなオフセットが必要です。可能な場合はSVG自体を修正し、それが不可能な場合はピクセル単位のマージンやパディングの変更で調整します。
シャドウと境界線
区切りとフォーカスリングには境界線を使用します。カード、ボタン、ドロップダウン、ポップオーバーに奥行きが必要な場合は、レイヤードシャドウを使用します。シャドウは透明で、様々な背景で機能するように十分に控えめにする必要があります。
テキストの折り返し
- 見出しや短いタイトルには
text-wrap: balanceを使用します。 - 中程度の長さの本文、キャプション、説明、リストアイテムには
text-wrap: prettyを使用します。 - 長い散文、コード、整形済みコンテンツでは、これら両方の使用を避けます。
- カウンター、タイマー、価格、テーブル、およびその他の更新される数値には
font-variant-numeric: tabular-numsを使用します。
フォントスムージング
macOSでは、プロジェクトがまだ適用していない場合、ルートレイアウトでアンチエイリアスフォントスムージングを適用します:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
画像のアウトライン
画像は、その端がサーフェスにぼやけて溶け込まないように、微妙なインセットアウトラインが必要になることがよくあります。
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
ニュートラルな黒または白のアルファアウトラインを使用します。ブランドパレットで画像のアウトラインに色をつけないでください。
モーション
インタラクティブな状態変化にはCSSトランジションを使用します。これは、ユーザーが動作中に意図を変更した場合に再ターゲットできるためです。段階的なワンショットのエントランスやローディングシーケンスにはキーフレームを予約します。
優れたモーションのデフォルト:
- エンター: 透明度、小さな
translateY、オプションでブラーを組み合わせます。 - エグジット: エンターよりも短く静かに、通常は150ms。
- プレス: 触覚的なボタンには
scale(0.96)を使用し、動きが気を散らす場合には無効にする方法を用意します。 - アイコンの入れ替え: インスタントな可視性の切り替えではなく、透明度、スケール、ブラーを使ったクロスフェード。
トランジションのスコープ
transition: all は決して使用しないでください。変更するプロパティを指定します:
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
will-change は、コンポジターに適したプロパティ (transform、opacity、filter) での初回フレームのスタッターにのみ使用します。will-change: all は決して使用しないでください。
ヒットエリア
インタラクティブなコントロールは、少なくとも 40x40px、理想的にはレイアウトが許せば 44x44px のヒットエリアを持つ必要があります。表示されるアイコンが小さい場合は疑似要素で拡張しますが、拡張されたヒットエリアが重ならないようにします。
レビュー出力
UIの磨き込みパスをレビューする際は、具体的な変更をBefore/Afterの行で報告します:
| 原則 | Before | After |
|---|---|---|
| 同心円半径 | 親と子で同じ半径 | 親の半径がパディングを考慮 |
| 表形式の数値 | カウンターが数字の変化でずれる | カウンターが tabular-nums を使用 |
| トランジションのスコープ | transition: all | 明示的なトランジションプロパティ |
スニペットから明らかでない場合は、ファイルパスとプロパティを含めます。確認したが変更しなかった原則は省略します。
チェックリスト
- 入れ子状の丸みを帯びた要素が光学的に一貫している。
- アイコンが視覚的に中央揃えされている。
- ボタン、カード、ポップオーバーが適切な理由で境界線またはシャドウを使用している。
- 見出しと短いテキストが見苦しい折り返しになっていない。
- 動的な数値が表形式の数字を使用している。
- 画像が必要に応じてニュートラルなアウトラインを持っている。
- エンタ－とエグジットのアニメーションが分割され、控えめで、適切な場合に中断可能である。
- ボタンが過度な動きのない触覚的なアクティブ状態を持っている。
transition: allとwill-change: allが存在しない。- 小さなコントロールでも使用可能なヒットエリアがある。