Sociomedia UI/UX デザインガイド
Sociomedia が提唱する 24 の UI/UX 原則に基づく実践的設計ガイド。
24 原則クイックリファレンス
| # | 原則 | 優先度 | 概要 |
|---|---|---|---|
| 1 | シンプル | P0 | 必要最小限の情報と機能 |
| 2 | 簡単 | P0 | 認知・学習・操作の負担最小化 |
| 3 | 一貫性 | P0 | 視覚・動作・概念の統一 |
| 4 | メンタルモデル | P1 | ユーザーの既存知識活用 |
| 5 | シグニファイア | P1 | 操作可能性の明示 |
| 6 | マッピング | P1 | 操作と結果の対応関係 |
| 7 | 直接操作 | P1 | 対象への直感的働きかけ |
| 8 | 視覚ゲシュタルト | P1 | 知覚原理による情報整理 |
| 9 | ユーザーの主導権 | P0 | 自由な操作と取り消し |
| 10 | モードレス | P1 | 状態に依存しない一貫動作 |
| 11 | ユーザーの言葉 | P1 | 利用者視点の用語使用 |
| 12 | 記憶に頼らない | P1 | 認識>想起の設計 |
| 13 | エラー回避 | P0 | 予防的設計とリカバリー |
| 14 | コンストレイント | P1 | 適切な制約による誘導 |
| 15 | プリコンピュテーション | P1 | 事前計算による負担軽減 |
| 16 | フィッツの法則 | P2 | ターゲットサイズと距離 |
| 17 | ヒックの法則 | P2 | 選択肢数と決定時間 |
| 18 | 複雑性保存 | P2 | 本質的複雑性の適切配置 |
| 19 | タスクコヒーレンス | P1 | タスク集中と中断防止 |
| 20 | メジャータスク最適化 | P1 | 主要タスクの効率最大化 |
| 21 | ショートカット | P2 | 熟練者向け効率化手段 |
| 22 | パースエージョン | P2 | 行動促進と継続支援 |
| 23 | オブジェクトベース | P1 | OOUI 設計手法 |
| 24 | ビュー表象 | P2 | 視点と表現の分離 |
優先度: P0=必須、P1=推奨、P2=理想
カテゴリ別リファレンス
設計タスクに応じて以下を参照:
基本設計時
- •基本原則.md - 原則 1-3: シンプル、簡単、一貫性
認知設計時
- •認知とインタラクション.md - 原則 4-8: メンタルモデル、シグニファイア、マッピング、直接操作、視覚ゲシュタルト
ユーザー体験設計時
- •ユーザー中心設計.md - 原則 9-13: 主導権、モードレス、ユーザーの言葉、記憶、エラー回避
最適化設計時
- •制約と最適化.md - 原則 14-17: コンストレイント、プリコンピュテーション、フィッツ、ヒック
効率化設計時
- •タスク効率化.md - 原則 18-22: 複雑性保存、コヒーレンス、メジャータスク、ショートカット、パースエージョン
高度な設計時
- •高度な設計思想.md - 原則 23-24: OOUI、ビュー表象
レビュー・検証時
- •チェックリスト.md - フェーズ別・コンポーネント別チェックリスト
設計フロー
text
1. 要件理解 → 基本原則 (1-3) 確認 2. 情報設計 → 認知原則 (4-8) 適用 3. インタラクション設計 → ユーザー中心原則 (9-13) 適用 4. 詳細設計 → 制約・最適化原則 (14-17) 適用 5. 効率化 → タスク効率化原則 (18-22) 適用 6. 高度化 → OOUI 原則 (23-24) 検討 7. 検証 → チェックリストでレビュー
よくある設計課題への対応
| 課題 | 参照すべき原則 |
|---|---|
| フォームが使いにくい | 2 簡単, 12 記憶, 13 エラー回避, 15 プリコンピュテーション |
| ナビゲーションが分かりにくい | 3 一貫性, 4 メンタルモデル, 8 視覚ゲシュタルト |
| 操作ミスが多い | 9 主導権, 13 エラー回避, 14 コンストレイント |
| 情報過多で見づらい | 1 シンプル, 8 視覚ゲシュタルト, 17 ヒックの法則 |
| 主要機能が見つけにくい | 5 シグニファイア, 16 フィッツの法則, 20 メジャータスク |
| モード切替が混乱する | 10 モードレス, 6 マッピング |
| 複雑な業務画面 | 18 複雑性保存, 23 オブジェクトベース, 24 ビュー表象 |