Mobile Web Domain Knowledge

Name: Mobile Web Domain Knowledge
Author: danhvb

github.com/danhvb開発87 回インストール

リポジトリ

Mobile Web Domain Knowledge について

モバイルおよびWebアプリの要件分析に使うリファレンススキルです。アプリの種類ごとに、プラットフォームの違い、UXパターン、技術上の考慮事項を整理します。

主な機能

01Webとモバイルのアプリ種別を比較
02iOS、Android、Webの要件を確認
03認証とオフライン対応を検討
04パフォーマンスとレスポンシブ設計を網羅
05アクセシビリティ、UX、ストア審査を扱う

活用シーン

01ネイティブ、クロスプラットフォーム、PWAを比較
02認証とオフライン要件を作成
03アクセシビリティと性能基準を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/danhvb/my-ba-skills --skill mobile-web-domain-knowledge

インストール後、Claude Code で/mobile-web-domain-knowledgeを入力して読み込まれたか確認します。

詳細

モバイル／Web ドメイン知識スキル

目的

モバイルおよび Web アプリケーションプロジェクトの要件を分析するため、プラットフォームの違い、UX パターン、技術的な考慮事項に関する包括的な知識を提供します。

アプリケーションの種類

Web アプリケーション

静的 Web サイト：HTML/CSS、サーバー側のロジックなし シングルページアプリ（SPA）：クライアント側レンダリング（React、Vue、Angular） サーバーサイドレンダリング（SSR）：サーバーが HTML をレンダリング（Next.js、Nuxt） プログレッシブ Web アプリ（PWA）：ネイティブアプリのような機能を備えた Web アプリ

モバイルアプリケーション

ネイティブ：プラットフォーム固有（Swift/iOS、Kotlin/Android） クロスプラットフォーム：単一のコードベース（React Native、Flutter） ハイブリッド：ネイティブコンテナー内の Web アプリ（Ionic、Cordova） PWA：モバイルにインストール可能な Web アプリ

比較

項目	ネイティブ	クロスプラットフォーム	PWA
パフォーマンス	最高	良好	良好
デバイスへのアクセス	完全	ほとんど可能	限定的
開発コスト	高（2 つのコードベース）	中	低
アプリストア	必須	必須	任意
更新速度	アプリストアの審査が必要	アプリストアの審査が必要	即時
オフライン	完全	完全	限定的

プラットフォーム要件

iOS に関する考慮事項

Swift/Objective-C または React Native/Flutter
iOS 15 以降をサポート（推奨）
App Store のガイドラインへの準拠
ソーシャルログインを使用する場合、Apple でサインインが必須
認証には Face ID/Touch ID を使用
APNs によるプッシュ通知
Apple によるアプリ内購入（手数料 30%）
プライバシー栄養表示ラベル

Android に関する考慮事項

Kotlin/Java または React Native/Flutter
Android 12 以降をサポート（推奨）
Google Play ストアのガイドライン
Material Design の原則
指紋／生体認証
FCM によるプッシュ通知
複数の画面サイズ／密度
権限モデル

Web に関する考慮事項

ブラウザーとの互換性（Chrome、Safari、Firefox、Edge）
レスポンシブデザイン（モバイルファースト）
アクセシビリティ（WCAG 2.1 AA）
SEO 要件
パフォーマンス（Core Web Vitals）
プログレッシブエンハンスメント

よくある要件パターン

認証

要件：

REQ-AUTH-001: User shall login with email and password
REQ-AUTH-002: User shall login with social accounts (Google, Facebook, Apple)
REQ-AUTH-003: User shall use biometric authentication (Face ID, Touch ID, Fingerprint)
REQ-AUTH-004: Session shall expire after 30 minutes of inactivity
REQ-AUTH-005: User shall reset password via email link

セキュリティに関する考慮事項：

トークンの安全な保存（Keychain/Keystore）
証明書ピンニング
HTTPS のみ
OAuth 2.0/OIDC 標準
レート制限

オフライン機能

オフラインサポートのレベル：

レベル 1：読み取り専用キャッシュ

以前に読み込んだデータを表示
オフラインでの変更は不可
実装が簡単

レベル 2：楽観的更新

キャッシュされたデータを表示
オフラインで変更を実行
オンライン時に同期
競合の解決が必要

レベル 3：完全オフライン

すべての機能をオフラインで利用可能
すべての操作をキューに追加
複雑な同期ロジック
バックグラウンド同期

要件の例：

REQ-OFFLINE-001: App shall cache last 50 orders for offline viewing
REQ-OFFLINE-002: App shall indicate offline status to user
REQ-OFFLINE-003: App shall queue actions when offline
REQ-OFFLINE-004: App shall auto-sync when connection restored
REQ-OFFLINE-005: App shall notify user of sync conflicts

プッシュ通知

種類：

トランザクション通知：注文の更新、パスワードのリセット
マーケティング通知：プロモーション、おすすめ
再エンゲージメント通知：カートの放棄、非アクティブなユーザー

要件：

REQ-PUSH-001: User shall receive order status notifications
REQ-PUSH-002: User shall opt-in to marketing notifications
REQ-PUSH-003: Notification shall deep-link to relevant screen
REQ-PUSH-004: User shall manage notification preferences in settings

技術：

iOS：APNs（Apple プッシュ通知サービス）
Android：FCM（Firebase Cloud Messaging）
Web：Web Push API

パフォーマンス要件

モバイルのパフォーマンス：

REQ-PERF-001: App shall launch in < 2 seconds (cold start)
REQ-PERF-002: Screen transitions shall complete in < 300ms
REQ-PERF-003: API responses shall complete in < 2 seconds
REQ-PERF-004: App shall maintain 60 fps during scrolling
REQ-PERF-005: Crash rate shall be < 1%

Web のパフォーマンス（Core Web Vitals）：

REQ-PERF-010: LCP (Largest Contentful Paint) < 2.5 seconds
REQ-PERF-011: FID (First Input Delay) < 100ms
REQ-PERF-012: CLS (Cumulative Layout Shift) < 0.1
REQ-PERF-013: TTI (Time to Interactive) < 3.8 seconds

レスポンシブデザイン

ブレークポイント：

モバイル：< 768px
タブレット：768px - 1024px
デスクトップ：> 1024px

要件：

REQ-RESP-001: Layout shall adapt to screen sizes 320px to 2560px
REQ-RESP-002: Touch targets shall be minimum 44x44 pixels on mobile
REQ-RESP-003: Content shall be readable without horizontal scroll
REQ-RESP-004: Images shall use responsive sizing (srcset)

アクセシビリティ（WCAG 2.1）

要件：

REQ-A11Y-001: All images shall have alt text
REQ-A11Y-002: Color contrast ratio shall be 4.5:1 minimum
REQ-A11Y-003: All interactive elements shall be keyboard accessible
REQ-A11Y-004: Form fields shall have visible labels
REQ-A11Y-005: Error messages shall be associated with fields
REQ-A11Y-006: App shall support screen readers (VoiceOver, TalkBack)

主な UX パターン

フォーム

単一カラムのレイアウト（モバイル）
入力内容に合ったキーボードの種類
インライン検証
分かりやすいエラーメッセージ
複数ステップのフォームには進行状況インジケーターを表示

読み込み状態

スケルトン画面
引っ張って更新
無限スクロールとページネーションの使い分け
楽観的 UI 更新

ジェスチャー（モバイル）

タップ：主な操作
長押し：二次メニュー
スワイプ：リスト操作、ナビゲーション
ピンチ：ズーム

アプリストアに関する考慮事項

App Store (iOS)

審査時間：24～48 時間
初回申請時は人による審査
却下理由：バグ、クラッシュ、ガイドライン違反
必須：プライバシーポリシー、年齢レーティング
アプリ内課金：手数料 15～30％

Google Play (Android)

審査時間：数時間～数日
自動審査と人による審査
必須：プライバシーポリシー、年齢レーティング
アプリ内課金：手数料 15～30％

よくある却下理由

クラッシュやバグ
機能の未完成
プライバシーに関する問題
ガイドライン違反
誤解を招くメタデータ
リンク切れ

アナリティクスとトラッキング

主なイベント：

アプリのインストール／起動
画面表示
機能の利用
コンバージョンイベント
エラー／クラッシュ

ツール：

Firebase Analytics
Mixpanel
Amplitude
App Store Connect / Google Play Console

ステークホルダーへの質問

ネイティブ、クロスプラットフォーム、PWA のどれにしますか？
どのプラットフォームとバージョンをサポートしますか？
オフライン機能は必要ですか？
プッシュ通知のユースケースはありますか？
パフォーマンスに関する期待値はありますか？
アクセシビリティ要件はありますか？
アプリストアへの掲載は必要ですか？
アナリティクスの要件はありますか？

参考資料

Apple Human Interface Guidelines
Material Design Guidelines
Web Content Accessibility Guidelines (WCAG)
Core Web Vitals Documentation

Markdown 対応

ログインしてコメント

基本情報

作者: danhvb
リポジトリ: danhvb/my-ba-skills
カテゴリ: 開発
インストール数: 87

問題を報告