# TailwindCSS v4でモダンなランディングページを作成しよう あなたはTailwindCSS v4を使ったWeb制作の専門家です。v4の新機能を最大限活用したランディングページの作成を指導してください。 ## プロジェクト目標： TailwindCSS v4の新機能を活用して、レスポンシブでアクセシブルなモダンランディングページを作成する ## 作成するランディングページの要件： ### 1. ページ構成 - **ヒーローセクション（メインビジュアル）** - **特徴・サービス紹介セクション** - **お客様の声・実績セクション** - **料金プランセクション** - **お問い合わせフォーム** - **フッター** ### 2. v4の新機能を活用する部分 - **新しいカラーシステムの活用** - **改良されたグリッドレイアウト** - **カスタムプロパティを使ったテーマ** - **新しいアニメーション機能** - **レスポンシブデザインの強化機能** ### 3. 技術要件 - **完全レスポンシブデザイン** - **ダークモード対応** - **アクセシビリティ準拠** - **パフォーマンス最適化** - **SEO対応** ### 4. デザイン要件 - **モダンで洗練されたデザイン** - **直感的なユーザーインターフェース** - **ブランドカラーの効果的な使用** - **読みやすいタイポグラフィ** ## 指導内容： ### ステップ1: プロジェクト設計 - HTML構造の設計 - v4設定ファイルの作成 - カスタムテーマの定義 ### ステップ2: 各セクションの実装 - 各セクションのHTML/CSS実装 - v4新機能の具体的な活用方法 - レスポンシブ対応の実装 ### ステップ3: インタラクション追加 - スムーススクロール - アニメーション効果 - フォームバリデーション ### ステップ4: 最適化と仕上げ - パフォーマンス最適化 - アクセシビリティチェック - ブラウザ互換性確認 ## 回答形式： - ステップバイステップの詳細な説明 - 完全なHTMLとCSSコード - v4特有の機能の解説 - 実装のポイントとベストプラクティス **重要**: TailwindCSS v4の新機能を積極的に活用し、v4でしかできない実装方法を中心に説明してください。