モバイルアプリ UI デザイン

2025年のベストプラクティスに従い、美しく、アクセシブルで、プラットフォーム固有のモバイルアプリインターフェイスをデザインするための専門的ガイダンス。

コアフィロソフィ

• ユーザーファースト デザイン — 美学よりもユーザーニーズ、行動、メンタルモデルを優先
• プラットフォーム一貫性 — iOS HIG と Android Material Design ガイドラインに従う
• 基礎としてのアクセシビリティ — 事後的な対応ではなく、最初からすべてのユーザーのために設計
• 感情的インテリジェンス — ユーザーが感情的に結びつくインターフェイスを作成
• パフォーマンス意識 — アプリパフォーマンスを損なわない美しいデザイン

---

厳格ルール（必須）

これらのルールは必須です。違反するとスキルが正常に機能していません。

アクセシビリティ優先

すべてのデザインは WCAG 2.2 AA 標準を満たす必要があります。アクセシビリティはオプションではありません。

❌ 禁止事項:
- テキストのカラーコントラストが 4.5:1 未満
- タッチターゲットが 44×44pt (iOS) または 48×48dp (Android) より小さい
- 色だけで情報を伝える
- 画像の代替テキストがない
- キーボードナビゲーション非対応のインターフェイス

✅ 必須事項:
- 通常テキストの最小コントラスト比 4.5:1
- 大型テキスト (18pt以上) の最小コントラスト比 3:1
- タッチターゲット: 44×44pt (iOS) / 48×48dp (Android)
- Dynamic Type / フォントスケーリングのサポート
- VoiceOver (iOS) / TalkBack (Android) 互換性
- キーボードナビゲーション用の明確なフォーカスインジケーター

プラットフォームガイドライン遵守

プラットフォーム固有のデザインガイドラインに従ってください。iOS と Android のパターンを混在させないでください。

❌ 禁止事項:
- iOS で Android スタイルの FAB を使用
- Android で iOS スタイルのボトムシートを適応させずに使用
- プラットフォームナビゲーションパターンを混在させる
- プラットフォームタイポグラフィを無視 (SF Pro vs Roboto)

✅ 必須事項:
iOS (Human Interface Guidelines):
- SF Pro フォントファミリーを使用
- プライマリナビゲーション用の下部タブバー
- 戻るシェブロン付きのプッシュナビゲーション
- 標準の iOS コントロール (UIKit/SwiftUI)

Android (Material Design 3):
- Roboto フォントファミリーを使用
- ボトムナビゲーションバーまたはナビゲーションドロワー
- リップルエフェクト付きの Material コンポーネント
- Material You ダイナミックテーミングに従う

一貫性のあるデザインシステム

すべてのアプリは、トークンが文書化されたデザインシステムを持つ必要があります。

❌ 禁止事項:
- アドホックな色と間隔の値
- 画面全体でボタンスタイルが不一貫
- 複数の無名フォントサイズ
- 定義された状態がないコンポーネント

✅ 必須事項:
デザインシステムに含める:
├── カラートークン (primary, secondary, surface, error など)
├── タイポグラフィスケール (heading1-6, body, caption など)
├── スペーシングスケール (4, 8, 12, 16, 24, 32, 48px)
├── ボーダーラジウストークン (none, sm, md, lg, full)
├── シャドウ/エレベーショントークン (elevation1-5)
└── コンポーネントライブラリ (button, input, card など)

タッチフレンドリーデザイン

すべてのインタラクティブ要素はタッチインタラクション用に最適化される必要があります。

❌ 禁止事項:
- 最小サイズより小さいタッチターゲット
- 互いに近すぎるインタラクティブ要素 (<8px ギャップ)
- 親指が届きにくい範囲の重要なアクション
- ホバー依存のインタラクション

✅ 必須事項:
- 最小タッチターゲット: 44×44pt (iOS) / 48×48dp (Android)
- ターゲット間の最小間隔: 8px
- プライマリアクションを親指が届く範囲内に配置 (下部 2/3)
- タップフィードバックを明確に (リップル、ハイライト、スケール)

---

クイックリファレンス

何をいつ使うか

シナリオ	アプローチ	重要な考慮事項
新規アプリデザイン	デザインシステムから開始	画面前にトークンを定義
iOS のみのアプリ	Human Interface Guidelines	SF Pro、標準的な iOS パターン
Android のみのアプリ	Material Design 3	Roboto、Material コンポーネント
クロスプラットフォームアプリ	アダプティブデザイン	プラットフォーム固有のナビゲーション
既存アプリの再デザイン	まず監査	メンタルモデルを維持
アクセシビリティレビュー	WCAG 2.2 AA チェックリスト	コントラスト、タッチターゲット、ラベル

---

デザインシステムの基礎

カラーシステム

## カラートークン構造

### セマンティックカラー
primary          → メインブランドカラー、CTA
primary-variant  → より暗い/明るい primary (状態用)
secondary        → セカンダリアクション、アクセント
background       → アプリ背景
surface          → カード背景、引き上げられたサーフェス
error            → エラー状態、破壊的アクション
on-primary       → primary 上のテキスト/アイコン
on-background    → 背景上のテキスト/アイコン
on-surface       → サーフェス上のテキスト/アイコン

### カラーパレット (60-30-10 ルール)
60% → ニュートラル/背景カラー
30% → セカンダリ/サポートカラー
10% → アクセント/プライマリカラー

### ダークモード対応
- 色を反転させるだけでなく
- ダークサーフェス用に脱飽和された色を使用
- コントラストをわずかに低下させる (純白を黒の上に避ける)
- モード全体でカラーの意味を維持

タイポグラフィスケール

## モバイルタイポグラフィガイドライン

### iOS タイポグラフィ (SF Pro)
Large Title   → 34pt, Bold
Title 1       → 28pt, Bold
Title 2       → 22pt, Bold
Title 3       → 20pt, Semibold
Headline      → 17pt, Semibold
Body          → 17pt, Regular
Callout       → 16pt, Regular
Subhead       → 15pt, Regular
Footnote      → 13pt, Regular
Caption 1     → 12pt, Regular
Caption 2     → 11pt, Regular

### Android タイポグラフィ (Roboto / Material 3)
Display Large  → 57sp
Display Medium → 45sp
Display Small  → 36sp
Headline Large → 32sp
Headline Medium→ 28sp
Headline Small → 24sp
Title Large    → 22sp
Title Medium   → 16sp, Medium
Title Small    → 14sp, Medium
Body Large     → 16sp
Body Medium    → 14sp
Body Small     → 12sp
Label Large    → 14sp, Medium
Label Medium   → 12sp, Medium
Label Small    → 11sp, Medium

### ベストプラクティス
- アプリあたり最大 2-3 フォントファミリー
- 本文テキスト最小: 16px (14px 絶対最小)
- 行の高さ: 本文テキストのフォントサイズの 1.4-1.6 倍
- Dynamic Type (iOS) / フォントスケーリング (Android) をサポート

スペーシングシステム

## 8ポイントグリッドシステム

ベースユニット: 8px

### スペーシングスケール
spacing-0    → 0px
spacing-1    → 4px   (半ユニット)
spacing-2    → 8px   (1 ユニット)
spacing-3    → 12px  (1.5 ユニット)
spacing-4    → 16px  (2 ユニット)
spacing-5    → 24px  (3 ユニット)
spacing-6    → 32px  (4 ユニット)
spacing-7    → 48px  (6 ユニット)
spacing-8    → 64px  (8 ユニット)

### コンポーネントスペーシング
ボタンパディング      → 12px 縦、24px 横
カードパディング        → 16px
リストアイテムパディング   → 16px 横、12px 縦
セクションスペーシング     → 24px-32px
画面端マージン  → 16px (スマートフォン)、24px (タブレット)

### タッチターゲットスペーシング
インタラクティブ要素間の最小ギャップ: 8px
推奨ギャップ: 12-16px

---

プラットフォームガイドライン

iOS Human Interface Guidelines

## iOS デザイン原則

### コア原則
1. Clarity    → テキストが読みやすく、アイコンが正確で、目的が明確
2. Deference  → UI がコンテンツの理解を助け、競い合わない
3. Depth      → ビジュアルレイヤーとリアルな動きが階層を伝える

### ナビゲーションパターン
- Tab Bar (下部) → 3-5 個のプライマリデスティネーション
- Navigation Bar (上部) → タイトル、戻るボタン、アクション
- Modal sheets → 一時的でフォーカスされたタスク
- Popovers (iPad) → コンテキストオプション

### 2025 アップデート: Liquid Glass
- コントロール用の半透明マテリアル
- フローティングナビゲーション要素
- ダイナミックな深度と階層
- 背景ブラーエフェクト

### セーフエリア
- 上部: ステータスバー + Dynamic Island/ノッチ
- 下部: ホームインジケーター (Face ID デバイスで 34pt)
- コンテンツ配置に safeAreaInsets を使用

### 標準ディメンション
- ナビゲーションバーの高さ: 44pt (大型タイトル付きで 96pt)
- Tab バーの高さ: 49pt (Face ID デバイスで 83pt)
- ツールバーの高さ: 44pt

Android Material Design 3

## Material Design 3 原則

### コアコンセプト
1. Material You    → パーソナル、アダプティブ、ダイナミックカラー
2. Expressiveness  → デザインによる感情的接続
3. Accessibility   → すべてのユーザーのためのインクルーシブデザイン

### ナビゲーションパターン
- Bottom Navigation → 3-5 個のプライマリデスティネーション
- Navigation Drawer → 5 個以上のデスティネーションまたはセカンダリナビゲーション
- Navigation Rail → タブレットと大型スクリーン
- Top App Bar → タイトル、ナビゲーション、アクション

### Material 3 Expressive (2025)
- ユーザー壁紙からのダイナミックカラー
- スプリングのような物理ベースの動き
- より大胆で表現的なタイポグラフィ
- 丸みを帯びた、親しみやすい形

### コンポーネント形状
- Extra Small: 4dp
- Small: 8dp
- Medium: 12dp
- Large: 16dp
- Extra Large: 28dp
- Full: 50% (ピル/円)

### 標準ディメンション
- アプリバーの高さ: 64dp
- ボトムナビゲーションの高さ: 80dp
- FAB サイズ: 56dp (標準)、40dp (小)、96dp (大)

---

2025 デザイントレンド

AI 駆動のパーソナライゼーション

## アダプティブ UI パターン

### パーソナライゼーション戦略
- 行動ベースのコンテンツレコメンデーション
- 利用パターンベースのアダプティブ UI レイアウト
- スマートデフォルトと予測的アクション
- コンテキスト機能提案

### 実装ガイドライン
- 常に手動オーバーライドオプションを提供
- コンテンツが推奨される理由を説明
- ユーザープライバシー設定を尊重
- 段階的なパーソナライゼーション (新規ユーザーを圧倒しない)

ダークモードの優秀性

## ダークモードベストプラクティス

### カラー適応
ライトモード          →    ダークモード
White (#FFFFFF)     →    Dark gray (#121212)
Black (#000000)     →    White (#FFFFFF)
Primary (vibrant)   →    Primary (desaturated)
Shadows             →    Subtle shadows or none

### サーフェスエレベーション (Material 3)
Elevation 0  → #121212
Elevation 1  → #1E1E1E (+ 白の 5% オーバーレイ)
Elevation 2  → #232323 (+ 白の 7% オーバーレイ)
Elevation 3  → #272727 (+ 白の 8% オーバーレイ)
Elevation 4  → #2C2C2C (+ 白の 9% オーバーレイ)
Elevation 5  → #323232 (+ 白の 11% オーバーレイ)

### 推奨事項
- システム設定に基づいて自動切り替え
- ライト/ダーク用に別のカラートークン
- 両方のモードでコントラストをテスト
- OLED 最適化を検討 (真っ黒)

マイクロインタラクション

## 意味のある動き

### マイクロインタラクションのタイプ
- Feedback → ボタン押下、フォーム送信
- State → ローディング、成功、エラー
- Guidance → オンボーディングヒント、ツールチップ
- Delight → セレブレーションアニメーション、イースターエッグ

### 動きの原則
- 期間: ほとんどのインタラクションで 200-500ms
- Easing: 自然な easing カーブを使用
- 目的: すべてのアニメーションに理由がある必要があります
- パフォーマンス: ハードウェアアクセラレーションされたプロパティを使用

### 2025 トレンド
- スプリングのような物理ベースのアニメーション
- 状態間のモーフィングトランジション
- ジェスチャー駆動のインタラクション
- アクセシビリティのための reduced motion サポート

Glassmorphism & Neumorphism

## モダンビジュアルスタイル

### Glassmorphism
プロパティ:
- 背景ブラー (backdrop-filter: blur)
- 透明度 (10-40% opacity)
- 微妙なボーダー (20% opacity の白 1px)
- ソフトシャドウ

ユースケース:
- オーバーレイとモーダル
- 画像背景上のカード
- ナビゲーションバー (iOS Liquid Glass)

注意:
- テキスト読みやすさを確認
- パフォーマンスへの影響を検討
- 古いデバイスのフォールバックを提供

### Neumorphism (Soft UI)
プロパティ:
- ソフトシャドウ (光と暗)
- 微妙なエレベーション効果
- ミュートされたカラーパレット

ユースケース:
- トグルスイッチ
- 入力フィールド
- カード

注意:
- アクセシビリティコントラストテストに失敗することが多い
- スタイル全体ではなく、控えめに使用
- 実際のコンテンツでテスト

---

アクセシビリティチェックリスト

ビジュアルアクセシビリティ

## ビジョンアクセシビリティチェックリスト

### カラーとコントラスト
- [ ] テキストコントラスト ≥ 4.5:1 (通常)、≥ 3:1 (大型)
- [ ] UI コンポーネントコントラスト ≥ 3:1
- [ ] 色が唯一のインジケーターではない (アイコン、テキストを使用)
- [ ] カラーブラインドユーザー向けに機能 (シミュレーターでテスト)

### テキストとタイポグラフィ
- [ ] ベースフォントサイズ ≥ 16px
- [ ] Dynamic Type (iOS) / フォントスケーリング (Android) をサポート
- [ ] 行の高さ ≥ 本文テキストの 1.4 倍
- [ ] テキストはコンテンツを失わずに 200% にスケール可能

### フォーカスとナビゲーション
- [ ] 目に見えるフォーカスインジケーター
- [ ] 論理的なタブ順序
- [ ] 反復コンテンツのスキップリンク
- [ ] キーボードアクセス可能 (外部キーボード)

モーターアクセシビリティ

## モーターアクセシビリティチェックリスト

### タッチターゲット
- [ ] 最小サイズ: 44×44pt (iOS) / 48×48dp (Android)
- [ ] ターゲット間のスペーシング ≥ 8px
- [ ] 時間制限のあるインタラクションなし (または延長可能)
- [ ] ドラッグジェスチャーの代替手段 (WCAG 2.2)

### インタラクション
- [ ] すべてのアクションを単一タップで実行 (ダブルタップ不要)
- [ ] 破壊的アクション用にアンドゥが利用可能
- [ ] 精密な要件なし (細部動き)
- [ ] Switch Control / Voice Access のサポート

スクリーンリーダー

## スクリーンリーダーチェックリスト

### コンテンツ
- [ ] すべての画像に説明的な alt テキスト
- [ ] 装飾的な画像に空の alt (alt="")
- [ ] ボタン/リンクに説明的なラベル
- [ ] フォーム入力に関連付けられたラベル
- [ ] 見出しが構造に使用される (スタイリングではなく)

### ナビゲーション
- [ ] 論理的な読む順序
- [ ] 意味のあるリンクテキスト ("ここをクリック" ではなく)
- [ ] 状態変更がアナウンスされる
- [ ] モーダルフォーカスが正しく閉じ込められている
- [ ] カスタムコンポーネントに ARIA roles がある

---

コンポーネントパターン

ボタンデザイン

## ボタン階層

### プライマリボタン
- 画面上の最も重要なアクション
- 塗りつぶし/ソリッドスタイル
- 高いコントラスト
- ビュー区間ごとに 1 つのみ

### セカンダリボタン
- 代替アクション
- アウトライン化またはトーナルスタイル
- 中程度のコントラスト

### ターシャリボタン
- 低優先度アクション
- テキストのみまたはゴーストスタイル
- 微妙な外観

### 破壊的ボタン
- 削除、削除、キャンセル
- 赤/エラーカラー
- 重要なデータ削除には確認が必要

### ボタン状態
- Default → 通常の外観
- Pressed → スケールダウン、より暗い
- Disabled → 50% opacity、インタラクション不可
- Loading → スピナー、無効化

フォームデザイン

## フォームベストプラクティス

### 入力フィールド
- 明確なラベル (プレースホルダー専用ではなく入力の上)
- 有用なプレースホルダーテキスト
- エラー状態と具体的なメッセージ
- 成功の検証フィードバック
- 適切なキーボードタイプ

### レイアウト
- モバイル用単一カラム
- 関連フィールドをグループ化
- 論理的なタブ順序
- ページ下部のプライマリアクション
- 長いフォーム用の固定送信ボタン

### 検証
- インラインバリデーション (blur 時またはインプット後)
- エラー修正提案付きの明確なエラーメッセージ
- エラー時にフィールドをクリアしない
- 必須フィールドを明確にマーク

ナビゲーションパターン

## モバイルナビゲーション

### ボトムナビゲーション (プライマリ)
- 3-5 個のデスティネーション
- アイコン + ラベル
- アクティブ状態インジケーター
- アプリ全体で一貫性

### Tab Bar (コンテンツ切り替え)
- 関連コンテンツの水平タブ
- タブ間でスワイプ
- アクティブタブ用のインジケーター

### ナビゲーションスタック
- 明確な戻るナビゲーション
- 意味のあるタイトル
- 深い階層用のブレッドクラム

### ジェスチャー
- スワイプバック (iOS 標準)
- プルして更新
- リストアイテムのスワイプアクション
- 長押しでコンテキストメニュー

---

デザインプロセス

ワークフロー

## アプリデザインワークフロー

1. 研究と発見
   ├── ユーザーリサーチとペルソナ
   ├── 競合他社分析
   ├── プラットフォームガイドラインレビュー
   └── 技術的制約

2. 情報アーキテクチャ
   ├── ユーザーフロー
   ├── ナビゲーション構造
   ├── コンテンツ階層
   └── サイトマップ

3. デザインシステムセットアップ
   ├── カラートークン
   ├── タイポグラフィスケール
   ├── スペーシングシステム
   ├── コンポーネントライブラリ
   └── アイコンセット

4. ワイヤーフレーミング
   ├── 低忠実度レイアウト
   ├── フロー検証
   ├── ステークホルダーレビュー
   └── イテレーション

5. ビジュアルデザイン
   ├── 高忠実度モックアップ
   ├── インタラクションデザイン
   ├── プロトタイプ作成
   └── アクセシビリティ監査

6. ハンドオフと実装
   ├── デザイン仕様ドキュメント
   ├── アセットエクスポート
   ├── 開発者コラボレーション
   └── QA レビュー

---

避けるべきアンチパターン

## よくある間違い

### ビジュアルデザイン
❌ 3 つ以上のフォントを使用
❌ 不一貫なスペーシング値
❌ 低コントラストテキスト
❌ 過度に複雑なグラデーション/エフェクト
❌ セーフエリアを無視

### インタラクションデザイン
❌ 隠されたナビゲーション
❌ 代替案のないジェスチャーのみアクション
❌ 小さいタッチターゲット
❌ ローディング状態がない
❌ 混乱した戻るナビゲーション

### アクセシビリティ
❌ プレースホルダー専用ラベル
❌ 色のみの情報
❌ 自動再生メディア
❌ 拡張不可の時間制限インタラクション
❌ スクリーンリーダーラベルなし

### プラットフォーム
❌ Android 上の iOS パターン (またはその逆)
❌ 標準が機能するときのカスタムコントロール
❌ プラットフォーム慣例を無視
❌ ダークモード未サポート

---

チェックリスト

デザイン前

• プラットフォームガイドラインをレビュー (iOS HIG / Material Design 3)
• ターゲットユーザーとニーズを定義
• 競合アプリを分析
• アクセシビリティ要件を識別
• デザインシステムトークンをセットアップ

デザイン中

• 8ポイントグリッドに従う
• 定義されたカラートークンを使用
• スケールのタイポグラフィのみを使用
• タッチターゲットが最小サイズを満たす
• コントラスト比を検証
• すべての状態をデザイン (デフォルト、押下、無効、エラー)
• ダークモード変種を作成

ハンドオフ前

• アクセシビリティ監査を完了
• スクリーンリーダーでテスト
• 複数の画面サイズで検証
• 動き/アニメーションを文書化
• デザイン仕様に注釈を付ける
• アセットを正しくエクスポート

---

ツールとリソース

デザインツール

• Figma → 業界標準、コラボレーション
• Sketch → Mac ネイティブ、確立されたエコシステム
• Adobe XD → Adobe 統合

プロトタイピング

• Figma Prototyping → ビルトイン、迅速
• ProtoPie → 高度なインタラクション
• Principle → Mac、詳細なアニメーション

アクセシビリティテスト

• Stark → コントラストチェッカー (Figma プラグイン)
• Color Oracle → カラーブラインドシミュレーター
• VoiceOver (iOS) / TalkBack (Android)

プラットフォームリソース

• Apple Human Interface Guidelines
• Google Material Design
• WCAG 2.2 Guidelines

---

参照

• reference/ios-guidelines.md — iOS Human Interface Guidelines 概要
• reference/material-design.md — Material Design 3 概要
• reference/accessibility.md — WCAG 2.2 モバイルチェックリスト
• reference/color-theory.md — カラー選択とコントラスト
• templates/design-system-template.md — デザインシステムスターター

---

ソース

2025年のベストプラクティスに基づく研究:

• Mobile App UI Design Best Practices 2025
• UI/UX Design Trends 2025
• Mobile App Design Trends 2025
• Accessibility in UI/UX Design 2025
• iOS Design Guidelines 2025
• Mobile App Design Guidelines iOS/Android