# mobile-ui-design

> モバイルアプリUI/UXデザインの包括的原則と品質基準を提供します。タイポグラフィ、レイアウト、色彩設計、ダークモード、アクセシビリティについてアドバイスが必要な場合に使用してください。デザインレビュー、UIの改善提案、「ダサい」デザインの修正時に活用します。

- Author: tubasasakunn
- Repository: tubasasakunn/claude-code-marketplace
- Version: 20260125182651
- Stars: 1
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/tubasasakunn/claude-code-marketplace
- Web: https://mule.run/skillshub/@@tubasasakunn/claude-code-marketplace~mobile-ui-design:20260125182651

---

---
name: mobile-ui-design
description: モバイルアプリUI/UXデザインの包括的原則と品質基準を提供します。タイポグラフィ、レイアウト、色彩設計、ダークモード、アクセシビリティについてアドバイスが必要な場合に使用してください。デザインレビュー、UIの改善提案、「ダサい」デザインの修正時に活用します。
---

# モバイルアプリUI/UXデザイン原則

人間工学、認知心理学、Apple HIG / Material Design 3に基づくデザイン基準。

## 核心原則

**機能美**: 美しさと使いやすさは不可分。直感的なUIには必ず認知特性・物理動作・視覚階層に基づく厳密な規則が存在する。

## タイポグラフィ

### フォントサイズ基準

| 要素 | iOS (HIG) | Android (M3) | 備考 |
|------|-----------|--------------|------|
| Display/H1 | 34pt | 32-57sp | 主要タイトル |
| Headline/H2 | 22-28pt | 24-32sp | セクション区切り |
| **Body/本文** | **17pt** | **16sp** | **絶対基準（16px未満は不可）** |
| Caption | 12-13pt | 11-12sp | メタデータ（12px未満は困難） |

### 行間設定

- **欧文**: 1.2〜1.5倍
- **和文**: **1.5〜1.8倍**（2.0倍も可）
  - 和文は仮想ボディ内に余白がないため、欧文より広い行間が必要

### ジャンプ率（見出し/本文比）

- **高（2.0倍以上）**: エネルギッシュ、若々しい（EC、ニュース）
- **低（1.2〜1.5倍）**: 知的、高級感（銀行、専門書）

## レイアウト

### 8ptグリッドシステム

すべてのサイズ・余白を**8の倍数**で設計:

```
4-8px   : アイコン-ラベル間（極小）
16px    : 標準パディング、リスト間
24-32px : セクション区切り
48-64px : 大きな場面転換
```

### タッチターゲット

- **iOS**: 44pt × 44pt 以上
- **Android**: 48dp × 48dp 以上
- 視覚的に小さくても、Hit Areaは透明パディングで確保

### マージン

- 画面端余白: **16-24dp**（モバイル標準）
- カラム: モバイル4列 / タブレット8列 / デスクトップ12列

## 整列と視覚階層

### 左揃えを優先

- 視線は左上→右下へF字/Z字移動
- **中央揃えは短文（2-3行）のみ**
- 両端揃えは禁止（「川」現象発生）

### 近接の法則

**内部余白 < 外部余白** を厳守:
- カード内8px → カード間16px以上

## iOS意思決定フレームワーク

iOSアプリ固有の設計判断（Sheet vs Push、ボタン配置、タブ構成等）は[iOS-DECISION-FRAMEWORK.md](iOS-DECISION-FRAMEWORK.md)を参照。

## アンチパターン（回避必須）

詳細は[REFERENCE.md](REFERENCE.md)を参照。

| 問題 | 解決策 |
|------|--------|
| 純黒(#000000)使用 | #121212等のダークグレー |
| デフォルトシャドウ | Blur = Y軸の2〜4倍、不透明度10-15% |
| 角丸の不一致 | 外側 = 内側 + パディング |
| アイコン混在 | Outline/Filledを統一、線幅統一 |

## 色彩設計

### 60-30-10の法則

- **60%**: ベース（背景、ニュートラル）
- **30%**: セカンダリ（ヘッダー、カード）
- **10%**: アクセント（CTA、通知）

### ダークモード

- 影ではなく**表面色の明るさ**で深度表現
- 高い要素ほど明るい（#121212 → #1E1E1E → #2C2C2C）
- 高彩度色は避け、パステル調に調整

### コントラスト比（WCAG）

- 通常テキスト: **4.5:1以上**
- 大型テキスト/アイコン: **3.0:1以上**

## 致命的エラーパターン（即時修正必須）

デザインレビュー時、以下のパターンは最優先で指摘すること:

### レイアウト崩壊
- **はみ出し**: テキスト/要素が親コンテナからはみ出している
- **重なり**: 要素同士が意図せず重なっている
- **切れ**: テキストや画像が途中で切れている（ellipsisなし）
- **空白崩壊**: 意図しない巨大な空白、または余白がゼロ

### コンテンツエラー
- **文言重複**: 同じテキストが複数箇所に表示されている
- **プレースホルダー残存**: "Lorem ipsum"、"テスト"、"XXX"等が残っている
- **データ不整合**: 同じ情報が異なる値で表示（価格、日付等）
- **言語混在エラー**: 意図しない言語の混在（未翻訳テキスト）

### インタラクション不整合
- **状態の矛盾**: 選択中なのに非選択スタイル、無効なのにタップ可能に見える
- **フィードバック欠如**: ボタンにタップ状態がない、ローディング表示がない
- **ナビゲーション断絶**: 戻る手段がない、行き止まり画面

### 視覚的破綻
- **極端なサイズ差**: 同種の要素間で説明不能なサイズ差
- **整列崩れ**: 明らかに揃っていない要素群
- **色の衝突**: 背景と前景が同色で読めない

## クイックチェック

デザインレビュー時は[CHECKLIST.md](CHECKLIST.md)を使用。

## プラットフォーム参照

- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
- [Material Design 3](https://m3.material.io/)