UI/UXデザイン原則

概要

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

要点

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

対象読者

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

効果

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

Vault本文より抜粋

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

観点	一言
核心	3秒ルール × F/Z型読み × WCAG準拠 × 高速読み込みが基本
キーワード	3秒ルール / コントラスト4.5:1 / タップ44px / Material / HIG
使う人	デザイナー / PM / フロントエンドエンジニア
読了目安	6-8分
---
原則	内容
---	---
3秒ルール	ユーザーは3秒で「使えるか」判断する
F型 / Z型読み	視線移動パターンを意識した配置
コントラスト比	4.5:1以上（WCAG AA準拠）
タップエリア	最小 44x44px（モバイル）
読み込み時間	< 3秒（超えると離脱率激増）
---
> 長文・記事系のページに適用
> ユーザーは左上から「F」の形に視線を動かす。
> - 横方向の最初の動き（タイトル）
> - 短い横動き（サブタイトル）
> - 縦に流し読み
> 重要情報は左側 × 上部に配置
> シンプルなページ・LPに適用
> ユーザーは「Z」の形に視線を動かす。
> - 左上から右上（ロゴ・ナビゲーション）
> - 右上から左下に斜め（ヒーローイメージ）
> - 左下から右下（CTA）

フル本文を開く

• Obsidianで開く: 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

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