mobile-app-design-mastery

モバイルアプリデザインを極める

Refactoring UI を Flutter／ネイティブアプリ向けに応用した、本番環境に対応するモバイル UI デザインの原則です。

---

モバイルデザインの基本ワークフロー

1. シェルではなく、画面から始める

• まず、1 つの画面の中核となる機能をデザインします
• ナビゲーション、タブバー、アプリの外枠から始めないでください
• まずグレースケールで作業し、階層が明確になってから色を加えます
• 主要なデバイスサイズ向けにデザインし、その後、ほかのサイズに合わせて調整します

2. モバイル向けのシステムを確立する

スペーシングスケール（dp／論理ピクセル）：

トークン	サイズ	用途
xs	4	ごく小さな間隔、アイコンのパディング
sm	8	狭い間隔、コンポーネント内
md	12	関連する要素
base	16	標準のパディング
lg	24	セクション間
xl	32	大きく離す場合
2xl	48	タブレットの画面余白

タッチターゲット：

プラットフォーム	最小サイズ
iOS	44×44 pt
Android	48×48 dp
快適なサイズ	56×56

文字サイズのスケール（sp／pt）：

サイズ	用途
11-12	キャプション、ラベル
14	本文、標準サイズ
16	強調する本文
18-20	小見出し
24	画面タイトル
28-34	大きなタイトル（iOS スタイル）

シャドウ／エレベーションスケール（dp）：

レベル	エレベーション	用途
0	0	フラットな面
1	1-2	カード、タイル
2	4	浮き上がったボタン、アプリバー
3	8	ボトムシート、ダイアログ
4	16	ナビゲーションドロワー
5	24	モーダル

3. モバイル向けの視覚的階層を構築する

モバイル画面は使えるスペースが限られているため、視覚的階層がより重要になります。

• プライマリ：主要なアクション／コンテンツ（画面ごとに 1 つ）
• セカンダリ：補足情報（表示しつつ、主役と競合させない）
• ターシャリ：メタデータ、タイムスタンプ（最も小さく、最も淡く）

主な原則：

• モバイルではサイズがより重要ですが、大きくしすぎないでください
• サイズを大きくする前に、ウェイトや色を使います
• 競合する要素を目立たなくして、重要な要素を強調します
• アイコンは、テキストとのバランスを取るため、より控えめな色にします

4. タッチ操作を前提にデザインする

• ゆとりのあるタッチターゲット（最小 44pt／48dp）
• インタラクティブ要素の間に十分な間隔を確保します
• 押したときに視覚的なフィードバックを返します（リップル、拡大縮小、不透明度の変化）
• よく使う操作にはスワイプアクションを用意します

5. プラットフォームに合わせた奥行きを適用する

• iOS：控えめなシャドウ、ぼかし／すりガラス効果、低めのエレベーション
• Android：Material のエレベーションシステム、レイヤー化された面
• 奥行きを使って、操作可能な要素やフォーカス状態を示します

---

モバイルデザインのアンチパターン

絶対に避けること：

• 44×44 未満のタッチターゲット
• 11sp 未満のテキスト（判読困難）
• 色付きの背景にグレーのテキストを配置する
• グループ間の間隔を曖昧にする
• パディングなしで画面端まで広がるボタンを配置する
• 意味を色だけで伝える
• セーフエリア（ノッチ、ホームインジケーター）を無視する

---

参考ファイル

トピック	ファイル	読むタイミング
視覚的階層、ラベル、強調	mobile-hierarchy.md	要素の重要度のバランスを取るとき
スペーシング、タッチターゲット、レイアウト	mobile-spacing.md	レイアウトを決めるとき
タイポグラフィ、フォント、読みやすさ	mobile-typography.md	テキストのスタイルを決めるとき
色、テーマ、ダークモード	mobile-color.md	カラーシステムを決めるとき
シャドウ、エレベーション、レイヤー	mobile-depth.md	奥行きを加えるとき
コンポーネント、ナビゲーション、パターン	mobile-patterns.md	プラットフォーム固有のパターンを確認するとき