Stats
Actions
Tags
From design-plugin
iOS/Androidモバイルアプリのデザインを体系的に行うスキル。Apple HIG・Material Design 3などプラットフォームガイドラインに準拠し、ナビゲーション・レイアウト・コンポーネント・モーション・アクセシビリティを適切に設計する。Use when: 「モバイルアプリをデザインして」「iOSアプリのUIを設計して」「Androidアプリの画面を作って」「モバイルのナビゲーションを設計して」「タッチUIを改善して」「アプリのアクセシビリティを対応して」と言われた時。
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-plugin:mobile-app-designerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
iOS/Androidモバイルアプリのデザインを、プラットフォームガイドラインに準拠して体系的に行う。
iOS/Androidモバイルアプリのデザインを、プラットフォームガイドラインに準拠して体系的に行う。
Phase 1: 要件・プラットフォーム確認
↓
Phase 2: デザイン手法・ガイドラインの選択
↓
Phase 3: デザイン実行
↓
Phase 4: アウトプット生成
ユーザーに以下を確認し、デザインの前提条件を明確化する。
| 確認項目 | 選択肢 | デザインへの影響 |
|---|---|---|
| ターゲットOS | iOS / Android / 両方 / クロスプラットフォーム（Flutter/RN） | 適用ガイドライン決定 |
| デバイス種別 | Phone / Tablet / Foldable / 全対応 | レイアウト戦略決定 |
| 最小OSバージョン | iOS 15+ / iOS 16+ / iOS 26+ / Android 12+ / Android 13+ 等 | 利用可能APIと機能範囲 |
Phase 1の回答に基づき、以下のマトリクスから適用するガイドライン・手法を選定する。
| ユーザーの要求 | 適用ガイドライン | 主要ツール・トークン | 参照 |
|---|---|---|---|
| iOSアプリ | Apple HIG | SF Symbols / Dynamic Type / Safe Area | platform-guidelines.md |
| Androidアプリ | Material Design 3 | Dynamic Color / Material Icons / WindowInsets | platform-guidelines.md |
| iOS 26以降 | Apple HIG + Liquid Glass | 半透明ガラス素材 / 光反射・屈折UI | platform-guidelines.md |
| Android（M3 Expressive） | M3 Expressive | Variable fonts / Spring animation / Shape morphing | platform-guidelines.md |
| 両OS対応 | 共通UI + OS別UI分離 | 下記の分離判断基準を適用 | mobile-components.md |
| ナビゲーション設計 | iOS: Tab Bar / Android: Bottom Navigation | プラットフォーム別パターン | mobile-components.md |
| モーション設計 | iOS: Spring / Android: Material Motion | プラットフォーム別モーション仕様 | mobile-components.md |
| アクセシビリティ | iOS: VoiceOver+Dynamic Type / Android: TalkBack+Font Scale | WCAG AA基準 | platform-guidelines.md |
| タブレット・大画面 | iOS: Sidebar+Split View / Android: Navigation Rail+Canonical Layouts | レスポンシブレイアウト | platform-guidelines.md |
| クロスプラットフォーム（Flutter） | 独自レンダリング（Skia） | ピクセルパーフェクトUI / OS慣習との乖離に注意 | - |
| クロスプラットフォーム（React Native） | ネイティブコンポーネント使用 | .ios.js/.android.jsで分岐 | - |
| ビジュアル方針・コンテンツ戦略 | ミニマルUI + ユーティリティコピー | 表面階層・カード制限・モーション制約・コピー原則 | references/art-direction.md |
| UI要素 | 共通化可能 | OS別にすべき |
|---|---|---|
| カラーパレット基本定義 | ○ | - |
| タイポグラフィ | - | ○（San Francisco vs Roboto） |
| アイコン | 汎用アイコンのみ | ○（SF Symbols vs Material Icons） |
| ナビゲーション構造 | - | ○（Tab Bar vs Bottom Navigation の挙動差） |
| アニメーション | - | ○（Spring vs Material Motion） |
| レイアウト基本構造 | ○ | - |
| システムUI統合 | - | ○（通知・ウィジェット・共有シート） |
| ジェスチャー | - | ○（スワイプバック等の挙動差） |
Phase 2で選定した手法に基づき、以下の各領域を設計する。
コンポーネント設計の前に、アプリ全体のビジュアル方針を定義する。詳細は references/art-direction.md を参照。
| 項目 | 定義する内容 |
|---|---|
| 表面階層 | background → surface → elevated surface の控えめな階層（最大3層） |
| 情報密度方針 | 装飾ではなくタイポグラフィとスペーシングで階層を表現 |
| カード使用基準 | デフォルトはカードなし。インタラクションが必要な場合のみ |
| コピー方針 | ユーティリティコピー（方向付け → ステータス → アクション） |
| モーション制約 | 画面あたり2-3の意図的なモーションに限定 |
共通制約: フォント2種類まで、アクセント色1色、1画面にプライマリCTA1個
Safe Area / WindowInsets対応:
WindowInsets.safeDrawingで描画領域を確保、Edge-to-Edge対応タッチターゲット:
単位系:
レスポンシブ対応:
プラットフォーム別にナビゲーション構造を設計する。
iOS:
Android:
挙動の違いに注意:
references/mobile-components.md のコンポーネント比較表を参照し、プラットフォームに適したコンポーネントを選択する。
ボタン階層の設計:
フォーム・入力フィールド:
iOS:
response / dampingFraction で制御Android Material Motion 4パターン:
Reduce Motion対応:
@Environment(\.accessibilityReduceMotion) で検出、Spring→easeInOutに置換Settings.Global.ANIMATOR_DURATION_SCALE で検出3状態すべてを設計すること:
| 状態 | 設計方針 | パターン |
|---|---|---|
| ローディング | スケルトンスクリーン（スピナーより体感待ち時間が改善） | コンテナ→テキスト→画像の順で表示 |
| Empty State | 次のアクションを明確に提示 | イラスト + 説明テキスト + CTAボタン |
| エラー | 原因と対処法を分かりやすく提示 | エラーメッセージ + リトライボタン |
オプティミスティックUI: 操作が成功すると仮定し期待結果を即座に表示。失敗時はエレガントにロールバック。
プログレッシブローディング: ページ基本構造→テキスト→画像→インタラクティブ要素の順。
iOS:
Android:
contentDescription の設定必須共通基準（WCAG）:
デザイン完了時に以下を確認する。すべてYesであること。詳細は references/art-direction.md を参照。
| # | チェック項目 |
|---|---|
| 1 | アプリの目的が最初の画面で即座に理解できるか？ |
| 2 | 強いビジュアルアンカーまたは明確なCTAが1つ以上あるか？ |
| 3 | ラベル/見出しのスキャンのみで画面の役割が理解できるか？ |
| 4 | 各画面に1つの仕事しかないか？ |
| 5 | カードは本当に必要か？ |
| 6 | モーションは状態変化や操作フィードバックの役割を果たしているか？ |
| 7 | 装飾シャドウ・ボーダーをすべて削除してもUI品質が保たれるか？ |
デザイン結果を以下の形式で出力する。
## 画面名: [画面名]
- プラットフォーム: iOS / Android
- 画面サイズ: [幅]×[高]pt(dp)
- Safe Area: Top [値] / Bottom [値] / Left [値] / Right [値]
- レイアウトタイプ: シングルカラム / Split View / list-detail
### レイアウト構造
[ASCII図またはセクション説明]
### コンテンツ領域
- ヘッダー: [高さ]pt(dp)
- コンテンツ: スクロール可能 / 固定
- フッター: [高さ]pt(dp) / なし
## コンポーネント: [名前]
| 属性 | iOS | Android |
|------|-----|---------|
| SwiftUI/Compose名 | [名前] | [名前] |
| サイズ | [幅]×[高]pt | [幅]×[高]dp |
| タッチターゲット | 44×44pt以上 | 48×48dp以上 |
| 角丸 | [値]pt | [値]dp |
| 状態 | default / pressed / disabled / focused |
### 状態別仕様
- Default: [色・スタイル]
- Pressed: [色・スタイル]
- Disabled: [色・スタイル・opacity]
- Focused: [色・スタイル・ボーダー]
## ナビゲーション構造
### メインナビゲーション
- Tab 1: [名前] → [画面一覧]
- Tab 2: [名前] → [画面一覧]
- Tab 3: [名前] → [画面一覧]
### 画面遷移
[画面A] → push → [画面B] → push → [画面C]
[画面A] → modal → [画面D]（Detent: medium）
### ジェスチャー
- スワイプバック: [画面B] → [画面A]
- スワイプダウン: [画面D] dismiss
## モーション: [名前]
| 属性 | iOS | Android |
|------|-----|---------|
| タイプ | Spring / easeInOut | Container Transform / Shared Axis / Fade Through / Fade |
| Duration | [値]s | [値]ms |
| Easing | spring(response:0.5, dampingFraction:0.8) | emphasizedDecelerate |
| Reduce Motion代替 | easeInOut / dissolve | fade / 即時切替 |
| カテゴリ | チェック項目 | iOS | Android | 状態 |
|---|---|---|---|---|
| スクリーンリーダー | 全要素にラベル設定 | VoiceOver | TalkBack | ☐ |
| スクリーンリーダー | 操作ヒント設定 | accessibilityHint | contentDescription | ☐ |
| テキストスケーリング | Dynamic Type対応 | Dynamic Type | Font Scale (sp) | ☐ |
| テキストスケーリング | レイアウト崩れなし | 最大カテゴリで確認 | 最大スケールで確認 | ☐ |
| コントラスト | WCAG AA準拠（4.5:1） | 全テキスト | 全テキスト | ☐ |
| タッチターゲット | 最小サイズ準拠 | 44×44pt | 48×48dp | ☐ |
| モーション | Reduce Motion対応 | 視差効果を減らす | アニメーション無効 | ☐ |
| カラー | 色以外でも情報伝達 | - | - | ☐ |
| ダークモード | 両モードで正常表示 | - | - | ☐ |
| スキル | 連携タイミング |
|---|---|
/app-idea-workshop | アプリアイデアの具体化・機能定義 |
/spec-gen | デザイン仕様からコード仕様への変換 |
/ai-readability-analysis | 生成コードの可読性検証 |
/systematic-test-design | UIテスト設計 |
npx claudepluginhub caphtech/claude-marketplace --plugin design-pluginUse when asked to design iOS or Android mobile app screens, create mobile UI, spec mobile flows, or produce screen designs for a native app. Examples: "design the onboarding screens", "spec the checkout flow for iOS", "design a home screen for Android", "create mobile UI for this feature".
Designs iOS/Android mobile app screens, UIs, flows via 5-phase process: discovery questions, brief confirmation, specs. Triggers on screen/UI/flow design requests.
Redesigns mobile app UIs to match iOS Human Interface Guidelines using SF Pro typography, translucency, system components, and native patterns.