EC siteGSN (Group Project)

ECサイトモックアップ

使用言語・ツール : HTML / CSS / Javascript / PHP / Figma

URL: http://haradakazuyuki.com/work/gsn/

Background - 制作背景

架空のアパレルブランド「GSN」のオンラインショップとして制作。 黒を基調としたモードでスタイリッシュな世界観を軸に、メンズ・レディース両ラインを展開するブランドを想定しました。

実店舗を持たず、オンライン販売のみで完結するECサイトとして、 商品閲覧から購入完了までの一連の体験設計と機能実装を目的としています。

本制作はグループワークで行い、各自が担当ページのデザインおよびコーディングを担当しました。

Objective - 制作目的

  • ECサイトの基本機能（商品一覧〜購入完了）の実装
  • セッション管理を用いたログイン・カート機能の理解
  • データベース連携による動的な商品表示の実現
  • 自社アパレル製品の販売導線設計
  • ユーザーが迷わず購入できる導線設計

単なる紹介サイトではなく､
実際に運用可能なECサイトとして成立することを目標に制作しました。

Role - 担当範囲

  • オンラインショップ機能の設計・実装
  • 商品一覧 / 商品詳細 / カート / 決済フローの実装
  • ログイン / 新規登録画面の修正
  • ログアウト機能の追加

Persona - ペルソナ

20代〜40代の男女。 モード系ファッションを好み、オンラインでの購入に抵抗がない層を想定。 シンプルで直感的に操作できるUIと、 ストレスなく購入まで進める導線を重視しました。

Concept - コンセプト

「ミニマルで直感的な購買体験」

装飾を抑えたデザインの中で、 商品と操作性が際立つ構成を意識。

ユーザーが迷わず購入まで進めることを最優先とし、 視線誘導や情報設計を行いました。

Design - デザイン設計

■ 全体設計

  • 黒を基調としたモードな世界観
  • 余白を活かしたミニマルなレイアウト
  • 商品を主役にしたシンプルなUI設計

■ UI設計

  • 商品一覧はforeachで繰り返し表示し、
    拡張性を確保
  • カテゴリ・性別ごとに分類
  • 視認性と操作性を重視したシンプルな導線

Implementation - 実装内容

  • 商品一覧・詳細・カート・決済までの一連のフローをPHPで実装
  • セッションを用いたログイン管理およびカート管理
  • 未ログイン時のログイン誘導と遷移制御
  • 注文確定時のデータベース登録処理
  • 注文番号の表示（データベースのIDを表示）

■ 商品管理

  • 商品情報（画像・説明文・価格）をDBで管理
  • foreachで一覧表示
  • switch文でカテゴリ・性別ごとの出し分け

■ 商品詳細

  • パンくずリストを動的生成（遷移元に応じて切り替え）
  • sizeflgによるサイズ表示制御（S/M/L・FREE）

■ カート機能

  • 数量変更・削除をリアルタイム反映
  • サイズ違いの商品は別管理
  • 合計金額・送料の自動計算
  • カートアイコンに数量バッジ表示

■ 決済機能

  • 支払い方法に応じた入力フォーム制御（JavaScript）
  • カード入力時のみフォーム表示
  • カード番号の自動整形（4桁ごと）
  • 確認画面でカード番号の一部マスク表示

※カード情報は外部決済サービス連携を想定し、システム内では保持しない設計

■ Reflection - 振り返り

ECサイトにおいては、単一ページの完成度だけでなく、
商品閲覧から購入完了までの一連の流れを通して設計する重要性を実感しました。

特に、セッション管理やログイン状態の制御など、
画面をまたいだデータの扱いについて理解を深めることができました。

また、デザインだけでなく、
ユーザーがストレスなく購入できる体験を実現することを意識して実装を行いました。