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以上ある

参考ファイル

• typography.md — テキストの折り返し、フォントのスムージング、等幅数字
• surfaces.md — 境界線の角丸、視覚的な位置合わせ、影、画像の輪郭線
• animations.md — 割り込み可能なアニメーション、出現・退出時のトランジション、アイコンのアニメーション、押したときの拡大縮小
• performance.md — トランジションの対象指定、will-changeの使い方