📚 ナレッジベース

UI UXデザイン原則

最終更新 2026年04月26日／ 21_ナレッジベース/プロダクト開発/UI UXデザイン原則.md

UI/UX デザイン原則

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

30秒で全体像

観点	一言
核心	3秒ルール × F/Z型読み × WCAG準拠 × 高速読み込みが基本
キーワード	3秒ルール / コントラスト4.5:1 / タップ44px / Material / HIG
使う人	デザイナー / PM / フロントエンドエンジニア
読了目安	6-8分

UI/UX の5原則

原則	内容
3秒ルール	ユーザーは3秒で「使えるか」判断する
F型 / Z型読み	視線移動パターンを意識した配置
コントラスト比	4.5:1以上（WCAG AA準拠）
タップエリア	最小 44x44px（モバイル）
読み込み時間	< 3秒（超えると離脱率激増）

F型 / Z型読みの活用

F型読み

長文・記事系のページに適用
ユーザーは左上から「F」の形に視線を動かす。
- 横方向の最初の動き（タイトル）
- 短い横動き（サブタイトル）
- 縦に流し読み

重要情報は左側 × 上部に配置

Z型読み

シンプルなページ・LPに適用
ユーザーは「Z」の形に視線を動かす。
- 左上から右上（ロゴ・ナビゲーション）
- 右上から左下に斜め（ヒーローイメージ）
- 左下から右下（CTA）

CTAは右下に配置

アクセシビリティ：WCAG AA準拠

項目	基準
通常テキスト	コントラスト比 4.5:1 以上
大きいテキスト	コントラスト比 3:1 以上（18pt以上）
UI コンポーネント	コントラスト比 3:1 以上
フォーカス表示	視覚的に明確

コントラスト不足は離脱の主因
Chrome DevTools の Lighthouse でチェック可能。

モバイル UX の鉄則

項目	ルール
タップエリア	最小 44x44px
テキストサイズ	最小 16px（ズームを避ける）
スクロール	縦スクロール優先、横スクロール回避
親指リーチ	重要要素は画面下部
読み込み	< 3秒（できれば < 1秒）

参考デザインシステム

デザインシステム	提供元	特徴
Material Design	Google	マテリアル感・モバイルファースト
Apple HIG	Apple	直感的・iOS/macOS基準
SmartHR Design System	SmartHR	BtoB SaaS の日本語実例
Vercel Geist	Vercel	モダン・ミニマル

BtoB SaaS は SmartHR DS が最も参考になる。

ユーザビリティテストの基本

項目	内容
テスター数	5人で 85% の問題を発見
テスト時間	30-60分 / 人
タスク数	5-7個
録画	表情・操作を全記録

「言ってること」より「やってること」を観察する。

離脱率の改善ポイント

離脱原因	対策
読み込み遅い	画像最適化、CDN、レイジーロード
コントラスト不足	WCAG AA準拠
フォーム長すぎる	入力項目を最小化
CTA が不明瞭	ボタンサイズ↑ × コントラスト↑
モバイル非対応	レスポンシブ × タップエリア

今日からやるアクション

[ ] 全画面の Lighthouse スコア90+ を目標
[ ] コントラスト4.5:1 をデザイン規約に
[ ] モバイルタップエリアを 44px最小 で統一
[ ] 5人ユーザビリティテスト を月次実施
[ ] F/Z型読み を意識した情報配置
[ ] SmartHR DS を 参考実装ガイド として活用

関連ノート