HCI & UXデザイン原則
概要
モバイルアプリケーションのヒューマンコンピュータインタラクションとユーザーエクスペリエンスデザインに関する専門知識。
核心原則
ユーザー中心設計
- •ユーザーゴール優先: 機能ではなくユーザー目標から設計
- •タスク分析: ユーザータスクをステップに分解
- •メンタルモデル: インターフェースをユーザー期待と整合
- •フィードバック: アクションへの即座で明確な応答を提供
モバイルインタラクションパターン
タッチターゲット
- •最小サイズ: 48x48dp（Android）、44x44pt（iOS）
- •間隔: ターゲット間に最低8dp
- •親指ゾーン: 頻繁なアクションを到達しやすいエリアに配置
ジェスチャー
- •タップ: プライマリアクション
- •長押し: セカンダリアクション、コンテキストメニュー
- •スワイプ: ナビゲーション、却下、アクション表示
- •ピンチ/ズーム: コンテンツのスケーリング（関連する場合）
- •プルしてリフレッシュ: コンテンツ更新
ナビゲーション
- •ボトムナビゲーション: 3-5のトップレベル目的地
- •タブバー（iOS）: プライマリナビゲーション
- •アプリバー: コンテキスト、アクション
- •戻るボタン: 一貫したナビゲーション階層
情報アーキテクチャ
階層
- •漸進的開示: 基本 → 高度を必要に応じて表示
- •チャンキング: 関連情報をグループ化
- •優先順位付け: 最も重要なコンテンツを最初に
- •スキャン可能性: 見出し、リスト、余白を使用
コンテンツ戦略
- •明確性: シンプルで直接的な言葉を使用
- •簡潔性: テキストを最小限に、意味を最大限に
- •一貫性: 同じ概念には同じ用語
- •有用なエラー: 何が問題で、どう修正するか説明
ビジュアルデザイン
タイポグラフィ
- •階層: 見出しと本文の明確な区別
- •可読性: 本文テキストは最低16sp
- •行の長さ: 50-75文字が最適
- •コントラスト: 通常テキストは最低4.5:1
色
- •コントラスト: WCAG AA最低基準（4.5:1）
- •意味: 色だけに頼らない
- •一貫性: テーマカラーを一貫して使用
- •状態: 異なる状態には異なる色
レイアウト
- •整列: 一貫したグリッドシステム
- •余白: 要素の周りに呼吸スペース
- •バランス: 視覚的重量の分布
- •リズム: 一貫した間隔、サイズ
アクセシビリティ
スクリーンリーダー
- •セマンティックラベル: 意味のある説明
- •アナウンス順序: 論理的な読み上げ順序
- •カスタムアクション: 支援技術にアクションを公開
ビジュアルアクセシビリティ
- •色のコントラスト: WCAG AA（4.5:1）またはAAA（7:1）
- •テキストスケーリング: ダイナミックタイプをサポート
- •フォーカスインジケータ: 可視的なキーボードフォーカス
インタラクションアクセシビリティ
- •キーボードナビゲーション: 完全なキーボードサポート
- •タッチターゲット: 最低44x44pt
- •タイミング: 時間ベースのインタラクションを避ける
パフォーマンスと知覚されるパフォーマンス
ローディング状態
- •スケルトンスクリーン: 予測可能なレイアウト用
- •スピナー: 予測不可能な待機用
- •プログレスバー: 測定可能な進行用
- •プレースホルダー: 画像、コンテンツ用
フィードバック
- •即座: 100ms以内にタップを確認
- •情報的: 何が起きているか表示
- •安心: 成功を明確に確認
Spotify Albumerのパターン
アルバムブラウジング
- •グリッドレイアウト: 2-3列、視覚的スキャン
- •カバーアート: 目立つ、高品質
- •必須情報: アーティスト、アルバム名（長い名前は省略）
- •クイックアクション: 保存、再生、共有（スワイプまたは長押し）
検索
- •オートコンプリート: ユーザー入力時に提案
- •最近の検索: 履歴への素早いアクセス
- •クリアボタン: やり直しが簡単
- •空状態: 結果がないときに有用
プレイリスト
- •ドラッグで並べ替え: 長押し時
- •スワイプアクション: 削除、キューに追加
- •一括選択: 一括操作用のマルチ選択モード
- •明確な階層: プレイリスト → アルバム → トラック
エラーハンドリング
- •ネットワークエラー: 「接続を確認」+ リトライボタン
- •認証エラー: 「セッション期限切れ」+ 再ログインボタン
- •レート制限: 「リクエスト過多」+ カウントダウン
- •空状態: 有用なイラスト + アクション誘導
オンボーディング
- •価値提案: なぜこのアプリを使うのか（1画面目）
- •認証: Spotifyログイン（2画面目）
- •パーミッション: なぜ必要か説明
- •オプションのツアー: スキップ可能、短い（最大3-5画面）
マイクロインタラクション
状態
- •デフォルト: 静止状態
- •ホバー: デスクトップ/Webのみ
- •押下: アクティブなタップ
- •無効: 利用不可（50%不透明度）
- •ローディング: 進行中
トランジション
- •期間: ほとんどは200-300ms
- •イージング: 入る時はease-out、出る時はease-in
- •共有要素: ナビゲーションの連続性
- •フェード: オーバーレイ、モーダル用
アニメーション
- •目的: 注意を誘導、フィードバックを提供
- •繊細さ: 強化する、気を散らさない
- •パフォーマンス: 最低60fps
- •モーションを尊重: 減速モーション設定を尊重
UXのテスト
ユーザビリティテスト
- •タスクシナリオ: 「[アーティスト]のアルバムを見つけて保存」
- •シンクアラウド: ユーザーが考えを語る
- •観察: ユーザーがどこで苦労するか？
- •メトリクス: タスク完了率、タスク時間
ヒューリスティック評価
- •可視性: システム状態は常に明確？
- •マッチ: 現実世界の概念を使用？
- •コントロール: ユーザーは取り消し、終了が簡単？
- •一貫性: パターンが繰り返される？
- •エラー防止: ガードレールが設置？
- •認識: 記憶を強制しない
- •柔軟性: エキスパート用のショートカット？
- •美学: ミニマリスト、焦点を絞った？
- •回復: 有用なエラーメッセージ？
- •ヘルプ: ドキュメントが必要？（理想は不要）
A/Bテスト
- •1変数: 一度に1つの変更をテスト
- •メトリクス: 成功基準を定義（例: セッションあたりの保存数）
- •サンプルサイズ: 統計的有意性のため十分
- •期間: パターンを捕捉するのに十分な長さ
モバイル固有の考慮事項
使用コンテキスト
- •外出中: 一目でわかる、素早いインタラクション
- •片手操作: 到達可能なコントロール
- •中断: 状態を保存、優雅に再開
- •接続性: オフライン、低速ネットワークに対応
プラットフォーム規約
- •iOS: SF Symbols、タブバー、スワイプバック
- •Android: Materialアイコン、ボトムナビゲーション、戻るボタン
- •尊重: プラットフォームガイドラインに従う（ほぼ）
バッテリーとデータ
- •画像を最適化: 正しいサイズ、圧縮済み
- •キャッシュ: ネットワーク呼び出しを削減
- •バックグラウンド: バックグラウンドアクティビティを最小限に
デザイン成果物
実装用
- •ユーザーフロー: タスクパスの図
- •ワイヤーフレーム: 低忠実度レイアウト
- •モックアップ: 高忠実度ビジュアル
- •プロトタイプ: インタラクティブフロー
- •仕様: 間隔、色、タイポグラフィの値
検証用
- •ユーザーペルソナ: 軽量（名前、目標、コンテキスト）
- •シナリオ: 「[ペルソナ]として、[目標]したい、そうすれば[理由]」
- •受入基準: 「ユーザーは[ステップ]で[アクション]できる」
よくある落とし穴
- •❌ 隠れたナビゲーション（プライマリナビゲーション用ハンバーガーメニュー）
- •❌ 色だけに頼る
- •❌ 小さなタッチターゲット
- •❌ アクションへのフィードバックなし
- •❌ 専門用語や不明確なラベル
- •❌ ユーザーをモードに強制
- •❌ 取り消し不可能な破壊的アクション
- •❌ すべてをアニメーション化
ツール
- •Figma: デザイン、プロトタイピング
- •Adobe XD: デザイン、プロトタイピング
- •Sketch: macOSデザインツール
- •Miro/FigJam: ユーザーフロー、ブレインストーミング
- •UserTesting: リモートユーザビリティテスト
- •Hotjar: アナリティクス、ヒートマップ