01
色3 items
3 items 02
タイポ5 items
5 items 03
余白3 items
3 items 04
モーション8 items
8 itemsボーダー半径の階層
rounded は3段階(小: 4px / 中: 8px / 大: 16px)に統一。
スケルトン + シマー
ローディング中はスケルトン(薄灰のブロック)+ シマー(光が流れる)。
アニメは速く(200-400ms)
UI のアニメは 200-400ms。500ms 超は「遅い」と感じる。
イージングは ease-out が基本
要素の出現は ease-out(最初速く、後ゆっくり)。消失は ease-in。
モーションには「意味」を持たせる
装飾のためでなく、UI の状態変化を伝えるために動かす。
prefers-reduced-motion 対応
OSのアニメ抑制設定を尊重。乗り物酔いユーザーへの配慮。
ページ遷移はフェード or スライド
ページ間遷移を瞬間切替でなく 200ms フェードで滑らかに。
シャドウは奥行きの階層を表す
シャドウの強さで「浮いている度合い」を表現。常に同じ強度はNG。
05
フィードバック7 items
7 items危険操作は文字入力で確認
完全削除など取り返せない操作は、対象名を手入力させて確認。
危険操作は確認 + 取消可能
削除・全消去は2段階確認 or Undo 5秒。誤操作で泣かない設計。
操作には即時フィードバック
クリック・タップ・ホバーには 100ms 以内に何か反応する。
ホバー状態を明確に
クリック可能要素はホバーで色変化・カーソル変化。「押せる」を伝える。
インラインバリデーションアイコン
入力欄の右に ✓ or ✗ アイコン(色付き)で OK/NG を即時表示。
3秒ルール(読込時間)
0-1秒: 即時 / 1-3秒: スピナー / 3-10秒: 進捗バー / 10秒+: 完了通知。
成功通知に次のアクションを
「保存しました」だけでなく「もう1件作る/一覧に戻る」を提示。
06
情報設計6 items
6 items 07
トーン5 items
5 items 08
マイクロインタラクション8 items
8 itemsフォーカスリングを見える化
Tab キーで移動した要素にフォーカスリングが出る。
ホバー時に詳細を覗かせる
一覧の行にホバーで「展開アイコン」「クイックアクション」を表示。
キーボードショートカット標準装備
主要操作は ⌘+K(コマンドパレット)/ ⌘+S(保存)/ Esc(閉じる)等で対応。
ボタン押下の触感
ボタンを押した瞬間、僅かに沈む(scale .97-.98)。
カードのホバー浮き上がり
カードホバー時にわずかに浮く(translateY -2px + shadow強化)。
入力欄の光るボーダー
フォーカス時のボーダーをアクセント色 + わずかなグロー。
スケルトンのシマー(光る)
スケルトンに左→右へ流れる光のグラデで「読込中」を伝える。
トーストの滑らかな出現
トーストは下から ease-out で滑らかに出現。
09