レスポンシブWebアプリ開発計画ジェネレーター

## エグゼクティブサマリー 本計画は、モバイルファーストのレスポンシブWebアプリケーションを構築するための包括的なロードマップです。8pxベースのスペーシングスケール、CSSカスタムプロパティによるデザイントークン、Atomic Designによるコンポーネント設計を採用し、Core Web Vitals（LCP <2.5s、INP <100ms、CLS <0.1）を達成します。React + TypeScript + Tailwind CSSを基盤とし、60fpsのアニメーション、オフライン対応、WCAG 2.1 AA準拠のアクセシビリティを保証します。開発はMVP→機能拡張→最適化の3フェーズで進行し、各フェーズでクロスデバイステストを実施します。 --- ## 1. レスポンシブ戦略 ### ブレークポイント戦略 | ブレークポイント | 適用範囲 | レイアウト特性 | |---|---|---| | `base`（0px〜） | モバイル（320px〜） | シングルカラム、ボトムナビゲーション | | `sm`（640px〜） | 大型モバイル | 2カラムグリッド開始、ハンバーガーメニュー維持 | | `md`（768px〜） | タブレット | サイドバー導入、タッチターゲット縮小（44px→40px） | | `lg`（1024px〜） | デスクトップ | フルレイアウト、ホバー状態有効化 | | `xl`（1440px〜） | 大型スクリーン | コンテンツ最大幅1280px、余白拡大 | **根拠**: コンテンツ密度と操作方式の変化点に基づく。モバイルは親指操作、デスクトップはマウス操作という根本的な違いを境界とする。 ### アプローチ: モバイルファースト **理由**: - トラフィックの60%以上がモバイル経由 - CSSの記述量が最小限で済む（拡張はメディアクエリの追加のみ） - パフォーマンス最適化が自然と優先される ### 流体スケーリング ```css :root { --fluid-min: 16px; --fluid-max: 20px; --fluid-viewport-min: 320px; --fluid-viewport-max: 1440px; } html { font-size: clamp( var(--fluid-min), var(--fluid-min) + (var(--fluid-max) - var(--fluid-min)) * (100vw - var(--fluid-viewport-min)) / (var(--fluid-viewport-max) - var(--fluid-viewport-min)), var(--fluid-max) ); } ``` ### デバイス対応詳細 - **タッチターゲット**: モバイル44×44px、タブレット40×40px、デスクトップ32×32px（ホバーあり） - **セーフエリア**: `env(safe-area-inset-*)` をボトムナビゲーションとヘッダーに適用 - **動的ビューポート**: `100dvh` をメインレイアウトに、`100svh` をモーダルに使用 - **画像最適化**: `srcset` + `sizes` 属性で解像度別に配信、`<picture>` 要素でアートディレクション --- ## 2. パフォーマンス設計 ### 目標値 | 指標 | 目標 | 測定ツール | |---|---|---| | LCP | <2.5s（モバイル3G） | Lighthouse, WebPageTest | | INP | <100ms | Chrome DevTools Performance | | CLS | <0.1 | Lighthouse, CrUX | | FPS | 60fps（アニメーション中） | Chrome DevTools Rendering | ### 最適化戦略 **1. コード分割** - React.lazy + Suspense でルートベース分割 - 重要コンポーネントはプリロード、非重要はアイドル時に読み込み - ベンダーパッケージは手動チャンク分割（`splitChunks`） **2. アセット最適化** - 画像: WebP/AVIF形式、遅延読み込み（`loading="lazy"`）、`fetchpriority="high"` をLCP要素に - フォント: `font-display: swap`、サブセット化、`preload` で主要フォント - SVG: インライン化（アイコン）、スプライトシート **3. CSSパフォーマンス** - `contain: layout paint` をカードやリスト項目に適用 - `will-change: transform` はアニメーション開始前のみ付与 - GPUコンポジット: `transform` と `opacity` のみでアニメーション **4. オフライン対応** - Service Worker + Workbox でシェルキャッシュ - データはIndexedDBにキャッシュし、オンライン復帰時に同期 - オフライン時は専用UI（バナー + キャッシュデータ表示） --- ## 3. デザインシステム仕様 ### デザイントークン ```css :root { /* カラーパレット */ --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-secondary: #7C3AED; --color-success: #16A34A; --color-warning: #D97706; --color-error: #DC2626; --color-bg: #FFFFFF; --color-bg-alt: #F9FAFB; --color-text: #111827; --color-text-muted: #6B7280; --color-border: #E5E7EB; /* ダークモード */ --color-bg-dark: #111827; --color-bg-alt-dark: #1F2937; --color-text-dark: #F9FAFB; --color-text-muted-dark: #9CA3AF; --color-border-dark: #374151; /* スペーシング（8pxベース） */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; /* タイポグラフィ */ --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --text-4xl: 48px; /* エレベーション */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.15); /* モーション */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; } ``` ### カラーパレット戦略 - **ライト/ダークモード**: `prefers-color-scheme` メディアクエリ + 手動トグル（`data-theme` 属性） - **コントラスト比**: 本文テキスト4.5:1以上、ラージテキスト3:1以上を保証 - **アクセントカラー**: プライマリ1色 + セカンダリ1色に限定し、ブランド認知を強化 ### フォントペアリング - **見出し**: Inter（ジオメトリックサンセリフ、数値表現に優れる） - **本文**: Inter（同じファミリーで一貫性を維持） - **コード/データ**: JetBrains Mono（等幅、視認性重視） ### ボーダーラジアス - 小要素（ボタン、入力）: 6px - 中要素（カード、モーダル）: 12px - 大要素（シート、ダイアログ）: 16px - 完全な円形: アバター、バッジのみ ### アイコンとイラスト - アイコン: Lucide（ストロークベース、一貫した線幅1.5px） - イラスト: フラット + 微妙なグラデーション、ブランドカラーに制限 - 画像: 実写は避け、スクリーンショットや図解を優先 --- ## 4. UX/UIパターンライブラリ計画 ### 主要パターン **1. ナビゲーション** - モバイル: ボトムナビゲーション（最大5項目）+ ハンバーガーで追加項目 - タブレット: ハンバーガー + オーバーレイサイドバー - デスクトップ: 固定サイドバー（240px）+ パンくずリスト - アクティブ状態: アイコン + テキストの色変更、インジケーターバー **2. フィードバック状態** - ローディング: スケルトンスクリーン（コンテンツ形状を模したグレーのパルス） - エラー: インラインエラーメッセージ + リトライボタン - 空状態: イラスト + 説明文 + アクション（CTA） - 成功: トースト通知（3秒自動消滅、`role="status"`） **3. フォームUX** - バリデーション: 入力中は非表示、フォーカスアウト時にインラインエラー表示 - 入力タイプ: 電話番号は`tel`、メールは`email`、数値は`number`（モバイルキーボード最適化） - オートフィル: `autocomplete` 属性を全フィールドに設定 - エラー表示: フィールド境界線を赤色 + アイコン + テキスト **4. モーション設計** - モーダル: フェードイン + スケール（200ms、`--ease-out`） - ページ遷移: フェード（150ms） - リスト項目: スタッガードフェードイン（各項目50ms遅延） - `prefers-reduced-motion: reduce` 時は全アニメーション無効化 ### アクセシビリティチェックリスト - [ ] 全インタラクティブ要素にフォーカスリング（2px、オフセット2px） - [ ] ARIAラベル: アイコンボタン、ナビゲーション、モーダル - [ ] フォーカストラップ: モーダル内でTabキー循環 - [ ] スキップリンク: メインコンテンツへ移動 - [ ] スクリーンリーダー: 見出し階層（h1→h2→h3）を厳守 - [ ] キーボード: 全操作をTab + Enter + Space + 矢印キーで実行可能に --- ## 5. 技術アーキテクチャ ### 推奨スタック | レイヤー | 技術 | 理由 | |---|---|---| | フレームワーク | React 18 + TypeScript | エコシステムの成熟度、型安全性 | | ビルド | Vite | 高速HMR、最適化されたプロダクションビルド | | CSS | Tailwind CSS v3 + CSS Modules | ユーティリティの効率性 + コンポーネントスコープ | | 状態管理 | Zustand（グローバル）+ React Query（サーバー状態） | ボイラープレート最小化、キャッシュ管理 | | ルーティング | React Router v6 | 標準的、コード分割と相性良好 | | テスト | Vitest + Testing Library + Playwright | ユニット + E2E + ビジュアルリグレッション | ### コンポーネントアーキテクチャ ``` src/ ├── components/ │ ├── atoms/ # ボタン、入力、ラベル、アイコン │ ├── molecules/ # 検索バー、フォームフィールド、カード │ ├── organisms/ # ヘッダー、サイドバー、データテーブル │ ├── templates/ # ページレイアウト（ダッシュボード、リスト） │ └── pages/ # ルートに対応するページコンポーネント ├── hooks/ # カスタムフック（useMediaQuery, useLocalStorage） ├── utils/ # フォーマット、バリデーション関数 ├── styles/ # グローバルCSS、トークン定義 ├── types/ # TypeScript型定義 └── constants/ # アプリケーション定数 ``` ### テーマ実装 ```typescript // ThemeContext.tsx type Theme = 'light' | 'dark' | 'system'; const ThemeContext = createContext<{ theme: Theme; setTheme: (t: Theme) => void; }>({ theme: 'system', setTheme: () => {} }); // 実装: localStorageに保存、`data-theme`属性をhtml要素に設定 // システム設定は`prefers-color-scheme`メディアクエリで検出 ``` ### テスト戦略 - **ユニット**: Vitest + Testing Library（コンポーネントの状態、イベント処理） - **E2E**: Playwright（主要ユーザーフロー、クロスブラウザ） - **レスポンシブテスト**: Playwrightのビューポート設定で320px、768px、1024px、1440pxをテスト - **ビジュアルリグレッション**: Storybook + Chromatic（コンポーネント単位の見た目差分検出） - **アクセシビリティ**: axe-coreをCIに統合 --- ## 6. 段階的展開計画 ### フェーズ1: MVP（2週間） **目標**: コア機能が全デバイスで動作 - [ ] デザイントークンと基本コンポーネント（ボタン、入力、カード） - [ ] レスポンシブレイアウト（ヘッダー、ナビゲーション、メインコンテンツ） - [ ] 主要ページ（ダッシュボード、リスト、詳細）の静的実装 - [ ] モバイルファーストのブレークポイント実装 - [ ] 基本アクセシビリティ（ARIA、キーボード操作） ### フェーズ2: 機能拡張（2週間） **目標**: インタラクションと状態管理の完成 - [ ] フォーム実装 + バリデーションUX - [ ] ローディング、エラー、空状態の実装 - [ ] モーダル、トースト、ドロップダウンのモーション - [ ] ダークモード対応 - [ ] オフライン対応（Service Worker） ### フェーズ3: 最適化（1週間） **目標**: パフォーマンスと品質の最終調整 - [ ] コード分割と遅延読み込みの最適化 - [ ] 画像最適化（WebP、srcset、遅延読み込み） - [ ] Core Web Vitalsの測定と改善 - [ ] クロスブラウザ/デバイステストの完了 - [ ] アクセシビリティ監査と修正 --- ## 7. 品質チェックリスト ### リリース前検証 **レスポンシブ** - [ ] 320px、375px、768px、1024px、1440pxでレイアウト崩れなし - [ ] タッチターゲットが全デバイスで最小サイズ以上 - [ ] セーフエリア（ノッチ）でコンテンツが隠れない - [ ] 横向き/縦向きでレイアウトが適切に調整 **パフォーマンス** - [ ] LCP < 2.5s（モバイル3Gエミュレーション） - [ ] INP < 100ms（スクロール、クリック操作） - [ ] CLS < 0.1（フォント読み込み、画像読み込み時） - [ ] アニメーションが60fpsを維持 **アクセシビリティ** - [ ] WCAG 2.1 AA準拠（自動テスト + 手動テスト） - [ ] キーボードのみで全機能を操作可能 - [ ] スクリーンリーダーで全コンテンツを読み上げ可能 - [ ] コントラスト比が全テキストで基準を満たす **ブラウザ互換性** - [ ] Chrome、Firefox、Safari、Edgeの最新版で動作 - [ ] iOS Safari 15+、Android Chrome 90+ で動作 - [ ] ダークモードがOS設定と連動 **オフライン** - [ ] オフライン時にシェルが表示される - [ ] キャッシュデータが表示され、オンライン復帰時に同期 - [ ] オフライン時のエラーメッセージが明確 --- ## 主要な落とし穴と回避策 1. **ブレークポイント過多**: 5つ以上に分割すると保守が困難。上記5つのみに厳守 2. **フォントサイズの固定値**: `px` ではなく `rem` を使用し、ユーザーのブラウザ設定を尊重 3. **モバイルでのホバー依存**: ホバーはデスクトップのみとし、モバイルではタップで代替アクションを提供 4. **画像のCLS**: 全画像に `width` と `height` 属性を明示、または `aspect-ratio` を設定 5. **アニメーションの過剰使用**: モーションは機能的な意味がある場合のみ。`prefers-reduced-motion` を必ず尊重 6. **ダークモードのコントラスト不足**: ダークモードでは特にコントラスト比を再検証（背景が明るい場合と異なる）