SCALE — Build Lab
ホーム

UI/UX集

36 件

「使いたくなる」システムを作るためのデザイン原則。機能性 × デザイン × 使いやすさ の最後の一押し。

色 3 タイポ 5 余白 3 モーション 4 フィードバック 4 情報設計 4 トーン 3 マイクロインタラクション 5 印象 5
01

色3 items

3 items
アクセント色は「たまに使う」
アクセント色は全画面の 5% 以下。多用すると目印にならない。
3層カラーパレット（背景/前景/アクセント）
背景3段階・前景3段階・アクセント1色 = 7色で全体を構成。
コントラスト比 4.5:1 以上（WCAG AA）
本文と背景のコントラスト比は最低 4.5:1、見出しは 3:1。
02

タイポ5 items

5 items
フォントは最大2種類
見出し用 + 本文用の2種類まで。多すぎると洗練感↓。
フォントウェイトは意味を持たせる
300/400/500/700 だけ使う。すべてのウェイトを使わない。
大文字英字は letter-spacing を空ける
大文字英字は通常文字より広い間隔（0.1em-0.3em）が読みやすい。
日本語の行高は 1.7-1.95
日本語本文の line-height は 1.7〜1.95。英語より広め。
モジュラースケール（1.25倍）
本文を 1rem として、各見出しは 1.25 / 1.5 / 1.875 / 2.25 / 3rem。
03

余白3 items

3 items
余白は 4 or 8 の倍数で統一
margin/padding は 4px or 8px の倍数。任意ピクセルは禁止。
視覚階層（Visual Hierarchy）
大事なものから順に、サイズ・色・余白・位置で目立たせる。
「呼吸する」余白を取る
要素同士は触れさせず、十分な余白で「息継ぎ」させる。
04

モーション4 items

4 items
アニメは速く（200-400ms）
UI のアニメは 200-400ms。500ms 超は「遅い」と感じる。
イージングは ease-out が基本
要素の出現は ease-out（最初速く、後ゆっくり）。消失は ease-in。
モーションには「意味」を持たせる
装飾のためでなく、UI の状態変化を伝えるために動かす。
prefers-reduced-motion 対応
OSのアニメ抑制設定を尊重。乗り物酔いユーザーへの配慮。
05

フィードバック4 items

4 items
危険操作は確認 + 取消可能
削除・全消去は2段階確認 or Undo 5秒。誤操作で泣かない設計。
操作には即時フィードバック
クリック・タップ・ホバーには 100ms 以内に何か反応する。
ホバー状態を明確に
クリック可能要素はホバーで色変化・カーソル変化。「押せる」を伝える。
3秒ルール（読込時間）
0-1秒: 即時 / 1-3秒: スピナー / 3-10秒: 進捗バー / 10秒+: 完了通知。
06

情報設計4 items

4 items
Fitts's Law（押しやすい場所・大きさ）
ターゲットの「サイズ」と「距離」が操作時間を決める。重要ボタンは大きく・近くに。
Hick's Law（選択肢を減らす）
選択肢が多いほど決定に時間がかかる。重要なものに絞る。
段階的開示（Progressive Disclosure）
最初は最重要情報のみ。詳細は「もっと見る」で展開。
記憶より認識
ユーザーに思い出させるな、思い出させずに見せろ。
07

トーン3 items

3 items
エラーは「あなたが悪い」と言わない
エラーメッセージは「システム側の問題」として書く。ユーザーを責めない。
プレースホルダーをラベル代わりにしない
プレースホルダーは「例」。ラベルは別途必須。
フレンドリーだが幼稚にならない
親しみは大事だが、絵文字や砕けすぎる表現はビジネス用途で逆効果。
08

マイクロインタラクション5 items

5 items
ボタン押下の触感
ボタンを押した瞬間、僅かに沈む（scale .97-.98）。
カードのホバー浮き上がり
カードホバー時にわずかに浮く（translateY -2px + shadow強化）。
入力欄の光るボーダー
フォーカス時のボーダーをアクセント色 + わずかなグロー。
スケルトンのシマー（光る）
スケルトンに左→右へ流れる光のグラデで「読込中」を伝える。
トーストの滑らかな出現
トーストは下から ease-out で滑らかに出現。
09

印象5 items

5 items
デザインシステムの一貫性
全ページで同じカード・同じボタン・同じ色・同じ余白を使う。
Delight Moments（小さな喜び）
達成時の confetti・初回チュートリアルでの褒め言葉等、小さな感動を仕込む。
細部に手を抜かない
エラー画面・404・ローディング・空状態も丁寧に作る。
ヒーローエリアで一目惚れ
最初の3秒で「うわっカッコいい」と感じさせる。タイポ・余白・色で勝負。
本気のモバイルファースト
デスクトップを縮めるな。モバイル→デスクトップの順で設計。