make-interfaces-feel-better

インターフェースをより快適にする細部

優れたインターフェースは、単一の要素だけで生まれるものではありません。通常は、小さな工夫が積み重なり、優れた体験につながります。UI コードを作成またはレビューする際は、次の原則を適用してください。

クイックリファレンス

カテゴリ	読むタイミング
タイポグラフィ	テキストの折り返し、フォントのスムージング、等幅数字
サーフェス	角丸、視覚的な位置合わせ、シャドウ、画像の輪郭線、ヒットエリア
アニメーション	中断可能なアニメーション、表示／非表示のトランジション、アイコンアニメーション、押下時の拡大縮小
パフォーマンス	トランジションのプロパティ指定、will-change の使用

基本原則

1. 同心円状の角丸

外側の角丸半径 ＝ 内側の角丸半径 ＋ パディングです。入れ子になった要素の角丸半径が一致しないことは、インターフェースに違和感を生む最も一般的な要因です。

2. 幾何学的な位置合わせより視覚的な位置合わせ

幾何学的に中央揃えしたときに違和感がある場合は、視覚的に調整してください。アイコン付きボタン、再生三角形、非対称なアイコンは、いずれも手動での調整が必要です。

3. ボーダーよりシャドウ

透明度の異なる複数の box-shadow 値を重ねて、自然な奥行きを表現します。シャドウはどの背景にもなじみますが、単色のボーダーはそうではありません。

4. 中断可能なアニメーション

操作に応じた状態変化には CSS トランジションを使います。アニメーションの途中で中断できるためです。キーフレームは、段階的に一度だけ実行するシーケンスに限って使用してください。

5. 表示アニメーションを分割してずらす

単一のコンテナ全体をアニメーションさせないでください。コンテンツを意味のあるまとまりに分割し、それぞれに約 100ms の遅延をつけて順に表示します。

6. 控えめな非表示アニメーション

要素の高さ全体を使うのではなく、小さな固定値の translateY を使います。非表示時の動きは、表示時よりも控えめにします。

7. 状況に応じたアイコンアニメーション

表示状態を切り替える代わりに、opacity、scale、blur を使ってアイコンをアニメーションさせます。値は必ず次のとおりにします。scale は 0.25 から 1、opacity は 0 から 1、blur は 4px から 0px です。プロジェクトの package.json に motion または framer-motion がある場合は、transition: { type: "spring", duration: 0.3, bounce: 0 } を使います。bounce は必ず 0 にしてください。モーションライブラリがインストールされていない場合は、両方のアイコンを DOM に残し（片方は絶対配置）、cubic-bezier(0.2, 0, 0, 1) を使った CSS トランジションでクロスフェードします。これにより依存関係を追加せずに、表示時と非表示時の両方をアニメーションできます。

8. フォントスムージング

macOS では、文字をよりくっきり表示するために、ルートレイアウトに -webkit-font-smoothing: antialiased を適用します。

9. 等幅数字

動的に更新される数字には font-variant-numeric: tabular-nums を使い、レイアウトのずれを防ぎます。

10. テキストの折り返し

見出しには text-wrap: balance を使います。本文では、文末に短い語だけが残るのを防ぐために text-wrap: pretty を使います。

11. 画像の輪郭線

奥行きを一貫して表現するため、画像に不透明度を低くした控えめな 1px の輪郭線を追加します。

12. 押下時の拡大縮小

クリック時に控えめな scale(0.96) を適用すると、ボタンに触覚的なフィードバックを与えられます。必ず 0.96 を使ってください。0.95 未満の値は使わないでください。それより小さい値は大げさに感じられます。モーションが邪魔になる場合に無効化できるよう、static prop を追加します。

13. ページ読み込み時のアニメーションをスキップする

初回のレンダリング時に表示アニメーションが実行されないよう、AnimatePresence に initial={false} を設定します。意図した表示アニメーションが損なわれないことを確認してください。

14. transition: all は使わない

必ずプロパティを個別に指定します。例：transition-property: scale, opacity。Tailwind の transition-transform は、transform, translate, scale, rotate を対象にします。

15. will-change は控えめに使う

GPU で合成できるプロパティである transform、opacity、filter に限って使用します。will-change: all は絶対に使わないでください。最初のフレームでのカクつきに気づいた場合にのみ追加します。

16. ヒットエリアの最小サイズ

インタラクティブな要素には、少なくとも 40×40px のヒットエリアが必要です。表示される要素がそれより小さい場合は、疑似要素で範囲を広げます。2 つの要素のヒットエリアが重ならないようにしてください。

よくある間違い

間違い	修正方法
親要素と子要素で同じ角丸半径を使う	outerRadius = innerRadius + padding として計算します
アイコンが中央からずれて見える	パディングで視覚的に調整するか、SVG を直接修正します
セクション間の境界が目立ちすぎる	透明度を設定したレイヤー状の box-shadow を使います
表示・終了アニメーションが唐突	分割して時間差を付け、終了アニメーションは控えめにします
数値によってレイアウトがずれる	tabular-nums を適用します
macOS で文字が太く見える	ルート要素に antialiased を適用します
ページ読み込み時にアニメーションが再生される	AnimatePresence に initial={false} を追加します
要素に transition: all を指定する	対象のプロパティを明示します
アニメーションの最初のフレームがカクつく	will-change: transform を（控えめに）追加します
小さなコントロールのヒット領域が狭い	疑似要素を使って 40×40px まで広げます

レビューチェックリスト

• 入れ子になった角丸要素に同心円状の角丸半径を使用している
• アイコンが幾何学的にではなく、視覚的に中央に配置されている
• 適切な箇所で境界線の代わりに影を使用している
• 表示アニメーションを分割し、時間差を付けている
• 終了アニメーションが控えめである
• 動的な数値に tabular-nums を使用している
• フォントスムージングを適用している
• 見出しに text-wrap: balance を使用している
• 画像に控えめな輪郭線を付けている
• 適切な箇所でボタンを押したときに縮小する
• デフォルト状態の要素で AnimatePresence に initial={false} を使用している
• transition: all を使わず、対象のプロパティのみを指定している
• will-change は transform／opacity／filter のみに使用し、all には使用していない
• インタラクティブ要素のヒット領域が 40×40px 以上ある