Mobile App Design Standards

モバイルアプリのデザイン標準

プラットフォームの慣習、アクセシビリティ標準、最新の UX のベストプラクティスに従ったモバイルアプリケーションを設計するための包括的なガイダンスです。

目的

モバイルアプリケーションのインターフェースを設計、レビュー、改善する際に、プラットフォーム固有のデザインガイドライン、インタラクションパターン、アクセシビリティ標準を適用します。デザインの一貫性とアクセシビリティ、パフォーマンスを確保し、2026 年の業界のベストプラクティスに従います。

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• モバイルアプリの新しい画面や機能を設計するとき
• 既存の UI/UX 実装をレビューするとき
• インタラクションフローやナビゲーションを計画するとき
• デザインシステムやスタイルガイドを策定するとき
• プラットフォーム固有のデザインを決定するとき
• アクセシビリティやパフォーマンスを最適化するとき
• レガシーなモバイルインターフェースを最新化するとき

デザインの基本原則

プラットフォームに準拠した慣習

iOS（Human Interface Guidelines）：

• ナビゲーション：戻るボタンは左上、主要アクションは右上
• 画面下部に 3〜5 個の項目を配置したタブバー
• 階層を示す大きなタイトル
• システムフォント：San Francisco（小さいサイズ向けに設計）
• 確認操作に対する触覚フィードバック
• ナビゲーション用のスワイプジェスチャー

Android（Material Design）：

• ナビゲーション：戻るボタンは左上、オーバーフローメニューは右上
• 画面下部のナビゲーションまたはナビゲーションドロワー
• 主要アクション用のフローティングアクションボタン（FAB）
• システムフォント：Roboto
• タッチ操作へのフィードバックとしてのリップルエフェクト
• 階層構造のコンテンツ用のナビゲーションドロワー

React Native クロスプラットフォーム：

• 動作が異なる場合はプラットフォーム固有のコンポーネントを使用する
• ナビゲーションパターンでプラットフォームの慣習を尊重する
• iOS と Android の両方のデバイスでテストする
• プラットフォームに対応したナビゲーションには React Navigation の利用を検討する
• 条件付きレンダリングには Platform API を使用する

タッチ領域と間隔

最小サイズ：

• iOS：すべてのインタラクティブ要素で最小 44 × 44 ポイント
• Android：すべてのタッチ領域で最小 48 × 48 dp
• タッチ領域間の間隔：最小 8dp/pt

ベストプラクティス：

• 主要アクションにはより大きなタッチ領域を設ける（Android の FAB は 56dp）
• 適切な間隔を設け、誤タップを防ぐ
• 大画面では親指が届く範囲を考慮する
• マウスクリックではなく、実際の指でテストする

タイポグラフィ標準

最小サイズ：

• 本文：最小 16sp/pt（絶対最小値は 14sp）
• ラベル：最小 11〜12pt
• 読みやすさを保つため、11pt 未満のテキストは避ける

階層構造：

• サイズ、ウェイト、色によって明確な視覚的階層を設ける
• アプリ全体で一貫したスケールを使用する（例：12/14/16/20/24/32pt）
• ブランド要件でカスタムフォントが必要な場合を除き、プラットフォームのシステムフォントを使用する
• ダイナミックタイプ（iOS）とフォントスケーリング（Android）に対応する

色とコントラスト

WCAG 標準：

• 通常のテキスト：最小コントラスト比 4.5:1
• 大きなテキスト（18pt 以上）：最小コントラスト比 3:1
• UI コンポーネント：境界線のコントラスト比 3:1

色の使用：

• 情報を色だけで伝えない
• 代替の視覚的な手がかり（アイコン、ラベル、パターン）を用意する
• 該当する場合はダークモードに対応する
• 色覚特性の違いを考慮した状況でテストする

コンポーネントアーキテクチャ

コンテナー／プレゼンテーショナルパターン

プレゼンテーショナルコンポーネント：

• UI 要素のレンダリングに集中する
• props 経由でデータを受け取る
• 状態管理やビジネスロジックを持たない
• 高い再利用性とテスト容易性を備える

コンテナーコンポーネント：

• データ取得と状態を処理する
• ビジネスロジックを管理する
• プレゼンテーショナルコンポーネントにデータを渡す
• アプリの状態／コンテキストに接続する

アトミックデザインの手法

アトム： 基本的な構成要素（ボタン、入力欄、アイコン）

• 単一の目的を持つコンポーネント
• 高い再利用性
• 一貫したスタイル

モレキュール： シンプルなコンポーネントのグループ（フォームフィールド、検索バー）

• アトムを組み合わせて機能単位を構成する
• 単一責任を維持する

オーガニズム： 複雑なコンポーネントの集合体（ヘッダー、カード、フォーム）

• モレキュールとアトムを組み合わせる
• 明確に区別されたセクションを表現する

テンプレート： ページレベルのレイアウト

• 構造と配置を定義する
• 実際のコンテンツは含まない

ページ： 具体的なインスタンス

• テンプレートに実際のコンテンツを適用する
• アプリ内の実際の画面

アクセシビリティ（a11y）

スクリーンリーダーのサポート

ラベルとヒント：

• すべてのインタラクティブ要素に、アクセシブルなラベルを設定します
• accessibilityLabel（React Native）またはcontentDescription（Android）を使用します
• 複雑な操作にはヒントを設定します
• 動的なコンテンツの変更を通知します

ナビゲーション：

• フォーカス順序を論理的にします（上から下、左から右）
• 繰り返し表示されるコンテンツをスキップできるようにします
• 見出しの階層を明確にします
• 画面の切り替わりを通知します

認知アクセシビリティ

認知負荷の軽減：

• 明確で簡潔なラベルを使用します（専門用語は避けます）
• アプリ全体で一貫したパターンを使用します
• プログレッシブディスクロージャーを採用します（必要な情報を表示します）
• 復旧手順を含む、明確なエラーメッセージを表示します

フォーカス管理：

• フォーカス中の要素を明確に強調表示します
• 該当する場合は、キーボードナビゲーションをサポートします
• ナビゲーション中もフォーカスのコンテキストを維持します

パフォーマンスの最適化

体感パフォーマンス

読み込み状態：

• コンテンツの読み込み中はスケルトンスクリーンを表示します
• 1 秒を超える操作には進捗インジケーターを表示します
• 楽観的 UI 更新を行います（操作をすぐに画面に反映します）
• 読み込み中のレイアウトシフトを防ぎます

応答性：

• 100ms 以内にタッチへのフィードバックを返します
• すべての操作に視覚的なフィードバックを表示します
• 滑らかなアニメーションを実現します（目標は 60fps）
• 連続する入力にはデバウンスを適用します

React Native のベストプラクティス

コンポーネントの最適化：

• 負荷の高いコンポーネントにはReact.memoを使用します
• shouldComponentUpdateまたはuseMemoを実装します
• 負荷の高いコンポーネントを遅延読み込みします
• 長いリストを仮想化します（FlatList、SectionList）

バンドルの最適化：

• 大規模なアプリにはコード分割を適用します
• 未使用の依存関係を削除します
• 画像のサイズと形式を最適化します
• Hermes エンジンを使用します（Android）

デザインシステムの基本

一貫性チェックリスト

視覚的な一貫性：

• 統一されたカラーパレット（プライマリ、セカンダリ、アクセント、ニュートラル）
• タイポグラフィのスケールを定義する（フォントサイズ、ウェイト、行の高さ）
• スペーシングシステム（4pt／8pt グリッド、または同様のもの）
• コンポーネントライブラリを文書化する
• アイコンセットのスタイルとサイズを統一する

動作の一貫性：

• ナビゲーションパターンを統一する
• ボタンの動作を予測しやすくする
• フォームのバリデーションを統一する
• エラー処理を標準化する
• 読み込み状態を統一する

コンポーネントのドキュメント

各コンポーネントについて、以下を文書化します。

• 目的とユースケース
• Props とその型
• 視覚的なバリエーション（状態、サイズ、スタイル）
• アクセシビリティ要件
• プラットフォーム固有の考慮事項
• 使用例

2026 年のデザイントレンド（任意の拡張）

AI 主導のインタラクション

予測型 UI：

• コンテキストに基づいてユーザーのニーズを予測します
• フォームでスマートなデフォルト値を使用します
• コンテンツの表示順をパーソナライズします
• コンテキストに応じた提案を行います

会話型インターフェース：

• 音声インタラクションをサポートします
• 自然言語入力を可能にします
• 会話を通じたプログレッシブディスクロージャーを採用します

高度なビジュアルデザイン

空間コンピューティング：

• 奥行きとレイヤーを考慮します
• 控えめな視差効果を取り入れます
• 適切な場合は 3D 要素を使用します
• 没入感のある体験を提供します

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

• 楽しさを感じさせるアニメーションの細部を加えます
• ハプティックフィードバックを連携させます
• 操作に合わせたサウンドデザインを取り入れます
• 感情的なエンゲージメントを高めます

ワークフローとの統合

デザインフェーズ

1. 要件を定義する - ユーザーのニーズとビジネス目標を把握します
2. パターンを調査する - プラットフォームのガイドラインや競合製品を確認します
3. ワイヤーフレームをスケッチする - まずは低忠実度のレイアウトを作成します
4. プロトタイプを作成する - テスト用のインタラクティブなモックアップを作成します
5. デザインを検証する - ユーザーテストとアクセシビリティチェックを行います

レビューフェーズ

デザインまたは実装をレビューするときは、以下を行います。

1. プラットフォームの慣習を確認します（iOS と Android の違い）
2. タッチターゲットのサイズが最小値（44pt／48dp）を満たしていることを確認します
3. 色のコントラスト比が最低基準（WCAG AA）を満たしていることをテストします
4. アクセシビリティラベルを検証します
5. デザインシステムとの一貫性を確認します
6. パフォーマンスに関する考慮事項を確認します

実装フェーズ

1. プレゼンテーション／コンテナパターンを使用します
2. アトミックコンポーネントを最下層から構築します
3. 最初からアクセシビリティを実装します
4. 実機（両プラットフォーム）でテストします
5. パフォーマンスを最適化します
6. コンポーネントの使用方法を文書化します

その他のリソース

リファレンスファイル

プラットフォーム固有の詳細なガイダンスについては、以下を参照してください。

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

• references/ios-guidelines.md - iOS HIG の包括的な概要（SF フォント、ナビゲーション、VoiceOver、触覚フィードバック）
• references/android-guidelines.md - Material Design 3 の基本事項（コンポーネント、モーション、TalkBack）
• references/platform-differences.md - iOS と Android のクイックリファレンス（ナビゲーション、ジェスチャー、コンポーネント）

実装ガイド：

• references/accessibility-checklist.md - WCAG 2.1 AA の完全なテストガイド（スクリーンリーダー、コントラスト、タッチターゲット）
• references/performance-patterns.md - React Native の最適化（FlatList、アニメーション、バンドルサイズ、メモリ）
• references/common-mistakes.md - よくあるデザイン上の誤りと修正方法（タッチターゲット、タイポグラフィ、アクセシビリティ、フォーム）
• references/ui-libraries.md - React Native UI ライブラリの比較（Paper、Elements、Tamagui、NativeBase）

サンプルファイル

examples/ にある動作するコード例：

• profile-screen-example.tsx - Atomic Design、アクセシビリティラベル、パフォーマンス最適化を取り入れた、完全なプロフィール画面
• form-validation-example.tsx - リアルタイム検証、適切なキーボードタイプ、エラー処理を備えた、アクセシブルなフォーム
• optimized-list-example.tsx - 仮想化、React.memo、スケルトンローディング、プル・トゥ・リフレッシュを使用した FlatList
• design-system-config.ts - 完全なデザイントークン（色、タイポグラフィ、間隔、シャドウ、コンポーネントのバリアント）

ユーティリティスクリプト

‌scripts/ にある開発ツール：

• check-contrast.py - WCAG コントラスト比検証ツール（使用方法：python check-contrast.py "#FFFFFF" "#000000"）
• validate-touch-targets.sh - 最小 44pt/48dp のタッチターゲットを検証（使用方法：./validate-touch-targets.sh src/）
• accessibility-audit.sh - ラベル、ロール、a11y の問題の不足を監査（使用方法：./accessibility-audit.sh src/）

クイックリファレンス

タッチターゲット

• iOS：最小 44×44pt
• Android：最小 48×48dp

タイポグラフィ

• 本文：最小 16sp/pt
• ラベル：最小 11pt

コントラスト

• テキスト：最小 4.5:1
• 大きなテキスト：最小 3:1
• コンポーネント：最小 3:1

ナビゲーション

• iOS：戻るボタンは左上、アクションは右上、タブは下部
• Android：戻るボタンは左上、メニューは右上、FAB は右下

パフォーマンス

• タッチフィードバック：<100ms
• アニメーション：60fps を目標
• ローディングインジケーター：1 秒を超える操作で表示