Website
ECサイト / コーディング
- 概要
- デザインカンプをもとに、陶器ブランドのECサイトを想定した模写コーディング課題です。TOP・商品一覧・商品詳細・会社概要・私たちについての各ページを制作し、ダークトーンの世界観を意識してレスポンシブ対応まで実装しました。
- 制作コンセプト
- 落ち着きと上質さを感じさせる世界観を大切にし、余白とタイポグラフィのバランスを丁寧に再現しました。ダークトーンの背景を活かし、商品の質感が引き立つレイアウト設計を意識しています。
商品一覧では視線誘導を意識したグリッド設計を行い、価格・商品名の視認性を重視しました。
商品詳細ページでは、購入導線を意識したUI設計を実装しています。 - 制作期間
- 約1週間
- 使用ツール
- HTML / CSS / Sass / JavaScript / VS code / Figma（デザイン確認用）
- 制作範囲
- ・HTML / CSS / Sass によるコーディング
・レスポンシブ対応（PC / SP）
・ハンバーガーメニュー実装（JavaScript）
・商品一覧グリッドレイアウト実装
・商品詳細ページUI実装
・hoverエフェクト / フェードアニメーション実装
