SCALE
SCALE Build Hub
大
Tips集
Tier 2 デザイン

UI/UXデザイン原則

3秒ルール・F型読み・WCAG準拠・タップエリア44px等、実装で即効く5原則。Claude Codeで実装する際の判断材料。

効果
UI実装時の手戻りを50%削減。

Vault本文を Obsidian で開く

最新版・編集は Vault が正本。下記リンクをコピペするか、Bash 実行で即起動。

obsidian://open?vault=SCALE-Brain&file=21_%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%E3%83%99%E3%83%BC%E3%82%B9%2F%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E9%96%8B%E7%99%BA%2FUI%20UX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%8E%9F%E5%89%87 open "obsidian://open?vault=SCALE-Brain&file=21_%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%E3%83%99%E3%83%BC%E3%82%B9%2F%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E9%96%8B%E7%99%BA%2FUI%20UX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%8E%9F%E5%89%87"

Vault パス: 21_ナレッジベース/プロダクト開発/UI UXデザイン原則.md

要点（5）

  • 3秒ルール（最初の3秒で価値を伝える）
  • F型読みパターンの活用
  • WCAG準拠（コントラスト比・キーボード操作）
  • タップエリア最小44×44px
  • モーション最小化原則

対象読者

  • 実装担当
  • デザイン経験の浅いエンジニア

UI/UXデザイン原則

:LiTarget: 概要

3秒ルール・F型読み・WCAG準拠・タップエリア44px等、実装で即効く5原則。Claude Codeで実装する際の判断材料。

:LiKey: 要点

:LiUsers: 対象読者

:LiTrendingUp: 効果

UI実装時の手戻りを50%削減。

:LiBookOpen: Vault本文より抜粋

[!quote] 3秒で「使えるか」が判断される。コントラスト・読み込み速度・タップエリアが命。

観点一言
:LiGem: 核心3秒ルール × F/Z型読み × WCAG準拠 × 高速読み込みが基本
:LiKey: キーワード3秒ルール / コントラスト4.5:1 / タップ44px / Material / HIG
:LiUserCheck: 使う人デザイナー / PM / フロントエンドエンジニア
:LiClock: 読了目安6-8分
原則内容
:LiTimer: 3秒ルールユーザーは3秒で「使えるか」判断する
:LiEye: F型 / Z型読み視線移動パターンを意識した配置
:LiContrast: コントラスト比4.5:1以上（WCAG AA準拠）
:LiSmartphone: タップエリア最小 44x44px（モバイル）
:LiRocket: 読み込み時間< 3秒（超えると離脱率激増）

[!info] 長文・記事系のページに適用 ユーザーは左上から「F」の形に視線を動かす。

  • 横方向の最初の動き（タイトル）
  • 短い横動き（サブタイトル）
  • 縦に流し読み :LiTip: 重要情報は左側 × 上部に配置 [!info] シンプルなページ・LPに適用 ユーザーは「Z」の形に視線を動かす。
  • 左上から右上（ロゴ・ナビゲーション）
  • 右上から左下に斜め（ヒーローイメージ）
  • 左下から右下（CTA）

:LiInfo: このノートは Vault が正本。最新の編集は Obsidian 側で行うこと。