フルスタックEコマースウェブサイトをゼロから構築する

プロフェッショナルなフルスタックWeb開発者およびUI/UXデザイナーとして行動してください。 ゼロからモダンでプロフェッショナル、完全レスポンシブなEコマースウェブサイトを構築してほしい。 ### 目標 実際のビジネスに適した、クリーンで魅力的なオンラインショッピングウェブサイトを作成する。ウェブサイトはモバイル、タブレット、デスクトップでスムーズに動作する必要がある。 ### 技術 以下を使用する： * HTML5 * CSS3 * JavaScript * CSSとJavaScriptを内部に含む単一のHTMLファイルを使用する。 * 絶対に必要でない限り、バックエンドは使用しない。 * クリーンで整理された、初心者にもわかりやすいコードを使用する。 ### ウェブサイトの機能 1. **ヘッダー/ナビゲーションバー** * プロフェッショナルなロゴ/ストア名 * ホーム * ショップ * カテゴリー * アバウト * コンタクト * 検索アイコン/バー * アイテム数付きのショッピングカートアイコン * ログイン/登録ボタン 2. **ヒーローセクション** * 大型プロモーションバナー * 魅力的な見出し * 短い説明 * 「今すぐ購入」ボタン * モダンなEコマースデザイン 3. **カテゴリー** 以下のような魅力的なカテゴリーカードを作成する： * エレクトロニクス * ファッション * シューズ * アクセサリー * ビューティー * ホーム＆リビング 4. **商品セクション** 以下の内容を含む複数の商品カードを表示する： * 商品画像 * 商品名 * 評価 * 元の価格 * 割引後の価格 * 割引率 * 「カートに追加」ボタン * 「今すぐ購入」ボタン * ウィッシュリスト/ハートボタン 5. **商品検索とフィルター** 以下の機能的なJavaScriptを追加する： * 商品検索 * カテゴリーフィルタリング * 価格ソート * 評価ソート 6. **ショッピングカート** ユーザーが以下の操作を行える機能的なカートを作成する： * 商品を追加 * 商品を削除 * 数量を増やす/減らす * 小計を表示 * 合計金額を表示 * カートをクリア 7. **チェックアウト** 以下の内容を含むプロフェッショナルなチェックアウトページ/セクションを作成する： * 顧客名 * メールアドレス * 電話番号 * 住所 * 市区町村 * 都道府県 * 郵便番号 * 支払い方法 * 注文概要 * 注文を確定するボタン 8. **特別セクション** 以下を追加する： * フラッシュセール * ベストセラー * 新着商品 * カスタマーレビュー * ニュースレター購読 9. **フッター** 以下を含める： * ストアについて * クイックリンク * カスタマーサポート * プライバシーポリシー * 利用規約 * ソーシャルメディアアイコン * 著作権 ### デザイン要件 * プレミアムでモダンなUI * クリーンなタイポグラフィ * 魅力的な商品カード * スムーズなホバーアニメーション * レスポンシブレイアウト * モバイル対応のハンバーガーメニュー * 適切なスペーシングと配置 * プロフェッショナルなカラースキーム * スムーズなスクロール * アクセシブルなボタンとフォーム * ウェブサイトを遅くしない、さりげないアニメーションを追加 ### JavaScript要件 以下の機能を実際に動作させる： * 検索 * カテゴリーフィルタリング * ソート * カートに追加 * カートから削除 * 数量コントロール * カート合計計算 * ウィッシュリストボタン * モバイルナビゲーション * チェックアウトフォーム検証 * 注文確認メッセージ 公開アクセス可能な画像URLからサンプル商品と現実的な商品画像を使用する。 ### 重要 説明だけを提供しないでください。**完全に動作するウェブサイトコードを構築してください。** `index.html`として保存してブラウザで直接開けるように、完全なコードを1つのHTMLファイルで返してください。 最終結果は基本的なデモではなく、プロフェッショナルな実世界のEコマースウェブサイトのように見えるようにしてください。