# レスポンシブWebサイト総合プロジェクトを完全実装 あなたはレスポンシブWebデザインの専門家です。厳密な要件に基づいて、プロフェッショナルレベルのレスポンシブWebサイトを作成してください。 ## 学習目標： レスポンシブデザインの全技術を統合し、実用的で高品質なレスポンシブWebサイトを完全に実装できるようになる ## プロジェクト仕様： ### 1. サイト構成（必須要件） - **ランディングページ**の完全実装 - **3つのメインセクション**を含む構成： 1. **ヒーローセクション**：メインビジュアルとキャッチコピー 2. **特徴セクション**：3つの特徴をカード形式で表示 3. **お問い合わせセクション**：フォームとコンタクト情報 - **ナビゲーションヘッダー**とフッターを含む ### 2. レスポンシブ対応（厳密な要件） - **モバイル**：320px - 767px - 1カラムレイアウト - ハンバーガーメニュー実装 - タッチ操作に最適化されたボタンサイズ（最小44px） - **タブレット**：768px - 1023px - 2カラムレイアウト（特徴セクション） - 適切な余白とスペーシング - **デスクトップ**：1024px以上 - 3カラムレイアウト（特徴セクション） - 最大幅1200pxでセンタリング ### 3. 技術実装要件（必須） #### A. メディアクエリ - **モバイルファースト**アプローチで実装 - **min-width**を使用したブレークポイント設定 - **768px**と**1024px**の2つのブレークポイントを使用 - **print**メディア用のスタイルも含める #### B. レスポンシブ画像 - **srcset属性**を使用した解像度対応（1x, 2x） - **sizes属性**でビューポート幅に応じた画像サイズ指定 - **picture要素**でアートディレクション対応 - **CSS**：max-width: 100%, height: auto の適用 #### C. レスポンシブタイポグラフィ - **clamp()関数**を使用した流動的フォントサイズ - **rem単位**をベースとした一貫したスケール - **line-height**の適切な設定（1.4-1.6） - **デバイス別**の読みやすさを考慮した調整 #### D. レイアウト技術 - **CSS Grid**：メインレイアウト構造 - **Flexbox**：コンポーネント内の配置 - **適切なgap**プロパティの使用 ### 4. デザイン要件（品質基準） #### A. 視覚的階層 - **明確な見出し構造**（h1-h3の適切な使用） - **コントラスト比**：最低4.5:1を確保 - **一貫した色彩設計**：メイン3色 + アクセント1色 #### B. ユーザビリティ - **ナビゲーション**：現在位置の明示 - **フォーカス表示**：キーボード操作対応 - **エラー状態**：フォームバリデーション表示 #### C. パフォーマンス - **効率的なCSS**：不要なスタイルの排除 - **画像最適化**：適切なフォーマットとサイズ ### 5. 必須実装コンポーネント #### A. ヒーローセクション - **背景画像**：レスポンシブ対応 - **オーバーレイ**：テキストの可読性確保 - **CTA（Call to Action）ボタン**：目立つデザイン #### B. 特徴セクション - **3つのカード**：アイコン + タイトル + 説明文 - **ホバーエフェクト**：デスクトップ用 - **グリッドレイアウト**：レスポンシブ対応 #### C. お問い合わせフォーム - **必須項目**：名前、メール、メッセージ - **バリデーション表示**：エラーメッセージ - **送信ボタン**：状態変化の表現 ### 6. コード品質要件 #### A. HTML - **セマンティックHTML5**要素の適切な使用 - **アクセシビリティ**：alt属性、aria-label等 - **構造化データ**：適切な見出し階層 #### B. CSS - **BEM命名規則**またはコンポーネントベース - **CSS変数**：色とサイズの一元管理 - **効率的なセレクタ**：詳細度の適切な管理 ## 提供してほしい成果物： ### 1. 完全なコード - **HTML**：完全に動作するマークアップ - **CSS**：全ての要件を満たすスタイル - **コメント**：重要な実装箇所の説明 ### 2. 技術解説書 - **使用技術の詳細説明**：なぜその技術を選択したか - **レスポンシブ戦略**：ブレークポイントの設定理由 - **パフォーマンス考慮点**：最適化のポイント ### 3. テスト確認項目 - **各ブレークポイント**での表示確認方法 - **アクセシビリティ**チェックポイント - **パフォーマンス**測定方法 ## 重要な制約条件： - **JavaScript**は最小限に留める（ハンバーガーメニューのみ許可） - **外部フレームワーク**は使用禁止（純粋なHTML/CSS実装） - **すべてのブレークポイント**で完璧に動作すること - **実際のデバイス**での動作を想定した実装 ## デザインガイドライン： - **モダンで洗練された**ビジュアルデザイン - **ユーザビリティ**を最優先に考慮 - **ブランド一貫性**のある色彩設計 - **アクセシビリティ**基準の遵守