SCALE — Build Lab
ホーム

UI/UX集

55 件

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

色 3 タイポ 5 余白 3 モーション 8 フィードバック 7 情報設計 6 トーン 5 マイクロインタラクション 8 印象 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

モーション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
Fitts's Law（押しやすい場所・大きさ）
ターゲットの「サイズ」と「距離」が操作時間を決める。重要ボタンは大きく・近くに。
フィッツの法則：重要ボタンは大きく近く
主要操作のボタンは大きく、近くに配置する。クリック時間を短縮。
ゲシュタルト原則で関連項目を近づける
関連する情報は物理的に近く、無関係なものは離して配置。
Hick's Law（選択肢を減らす）
選択肢が多いほど決定に時間がかかる。重要なものに絞る。
1画面1プライマリアクション
1画面に「主役のボタン」は1つ。複数あると目線が分散する。
記憶より認識
ユーザーに思い出させるな、思い出させずに見せろ。
07

トーン5 items

5 items
エラー文は共感 + 解決策
エラー時こそ温かい言葉。「ごめんなさい」+ 具体的解決策。
エラーは「あなたが悪い」と言わない
エラーメッセージは「システム側の問題」として書く。ユーザーを責めない。
プレースホルダーをラベル代わりにしない
プレースホルダーは「例」。ラベルは別途必須。
フレンドリーだが幼稚にならない
親しみは大事だが、絵文字や砕けすぎる表現はビジネス用途で逆効果。
硬すぎない・砕けすぎない
ですます調 + 親しみある言い回し。「致します」「お客様」は重い。
08

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

8 items
フォーカスリングを見える化
Tab キーで移動した要素にフォーカスリングが出る。
ホバー時に詳細を覗かせる
一覧の行にホバーで「展開アイコン」「クイックアクション」を表示。
キーボードショートカット標準装備
主要操作は ⌘+K（コマンドパレット）/ ⌘+S（保存）/ Esc（閉じる）等で対応。
ボタン押下の触感
ボタンを押した瞬間、僅かに沈む（scale .97-.98）。
カードのホバー浮き上がり
カードホバー時にわずかに浮く（translateY -2px + shadow強化）。
入力欄の光るボーダー
フォーカス時のボーダーをアクセント色 + わずかなグロー。
スケルトンのシマー（光る）
スケルトンに左→右へ流れる光のグラデで「読込中」を伝える。
トーストの滑らかな出現
トーストは下から ease-out で滑らかに出現。
09

印象5 items

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