ノベルティ通販ECサイト構築

フロントエンド開発

通販ECサイトのフロントエンド開発を担当しました。EC-CUBE 4.3をベースに、Gulp(ESM) + Sass + Twigでテーマをカスタマイズし、商品の魅力を伝えるデザインと使いやすい購入導線を実装しています。

主な実装内容

  • トップページ — 商品カテゴリの訴求と季節ごとのおすすめ表示
  • 商品詳細ページ — 名入れオプションを含む商品情報の見やすい表示
  • カテゴリ一覧 — 商品を探しやすい一覧レイアウト
  • 注文手続き — カートから決済までのスムーズな購入フロー
  • レビュー機能 — 購入者の声を商品ページに表示

商品選びから注文までの流れを分かりやすく案内するコンテンツを構築しました。

課題

名入れギフトという特殊な商材を扱うため、通常のECサイト以上に商品の魅力や名入れオプションを分かりやすく伝えるUIが求められた。また、ギフト選びに不慣れなユーザーへのガイド機能も必要だった。

アプローチ

EC-CUBE 4.3のテーマをGulp(ESM) + Sassでカスタマイズし、商品詳細ページでは名入れオプションを視覚的に分かりやすく配置。「はじめての方へ」ページや名入れガイドで、初めてのユーザーも安心して注文できる導線を設計。Docker環境で開発効率を確保。

成果

約8ヶ月の開発で、トップページから注文完了まで一貫した購入体験を構築。レビュー機能による信頼性向上と、初心者向けガイドコンテンツにより、幅広いユーザー層に対応できるECサイトを実現。
Outcome: 名入れギフト専門ECサイトのフロントエンドを構築。商品の魅力を伝えるデザインと、初心者でも迷わない購入導線を実現。