make-interfaces-feel-better

インターフェースをより使いやすくする細部

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

クイックリファレンス

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

基本原則

1. 同心円状のボーダー半径

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

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

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

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

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

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

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

5. 表示アニメーションは分割して時間差をつける

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

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

高さ全体を使うのではなく、小さな固定値の translateY を使用してください。非表示アニメーションは表示アニメーションよりも控えめにします。

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

表示状態を切り替えるのではなく、opacity、scale、blur でアイコンをアニメーションさせてください。値は必ず次のとおりにします。0.25 から 1 への拡大、0 から 1 への不透明度の変化、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 のアウトラインを追加してください。色はライトモードでは純粋な黒（rgba(0, 0, 0, 0.1)）、ダークモードでは純粋な白（rgba(255, 255, 255, 0.1)）にしてください。スレート、ジンク、その他の色味を帯びたニュートラルカラーのような、黒に近い色は絶対に使用しないでください。色味のあるアウトラインは下地のサーフェスカラーを拾い、画像の縁が汚れているように見えます。

12. 押下時の拡大縮小

クリック時に控えめな scale(0.96) を適用すると、ボタンに触覚的な反応を与えられます。必ず 0.96 を使用してください。0.95 より小さい値は絶対に使用しないでください。それ以下では大げさに感じられます。アニメーションが気を散らす場合に無効化できるよう、static プロパティを追加してください。

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まで広げます

レビュー結果の形式

変更内容は必ず、変更前と変更後の列を持つMarkdown表で示してください。行った変更をすべて含め、一部だけを記載しないでください。表の外に「変更前：」「変更後：」という個別の行で指摘事項を列挙しないでください。原則ごとに見出しを付けて表を分け、一覧をすばやく確認できるよう、各行の変更点は1つに絞ってください。

例

同心円状の境界半径

変更前	変更後
カードと内側のボタン（p-2）に rounded-xl	カードは rounded-2xl（12 + 8）、内側のボタンは rounded-lg
入れ子になった両方の要素に border-radius: 16px	外側は 24px、内側はパディング 8px で 16px

等幅数字

変更前	変更後
アニメーションするカウンターに <span>{count}</span>	<span className="tabular-nums">{count}</span> を追加
タイマーにデフォルトの数字を使用	ルート要素に font-variant-numeric: tabular-nums を追加

押下時の拡大縮小

変更前	変更後
<button className="...">	active:scale-[0.96] transition-transform を追加
押下時に scale(0.9)	scale(0.96) に引き上げます。0.95 未満は誇張された印象になります

コード片から明らかでない場合は、変更したファイルとプロパティを具体的に記載してください。原則を確認した結果、変更が不要だった場合は、その表を省略してください。空の表は余計な情報になります。

レビューチェックリスト

• 入れ子になった角丸要素で同心円状の境界半径を使用している
• アイコンを幾何学的な中心ではなく、視覚的な中心に配置している
• 適切な箇所で境界線の代わりにシャドウを使用している
• 表示アニメーションを分割し、時間差をつけている
• 非表示アニメーションが控えめである
• 動的な数値に 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 の使用方法