Overview
プロジェクト概要
日用品・生活雑貨の総合通販サイト「LOHACO」のECサイトを、Shopify と Next.jsで構築しました。トップページ、カテゴリ・商品一覧、商品詳細、カート、購入手続き、会員ページ（マイページ）まで、サイト全体を構築しました。決済・定期購入・ポイント・クーポンの機能と、在庫・基幹システムとの連携、管理画面の設定にも対応しています。
トップページでは、上部に大きな検索窓とカゴ・お気に入り・注文履歴のアイコンを置き、その下にキャンペーンのスライダーを配置しました。左側にはコスメ・食品・飲料・洗剤・家電など約20のカテゴリを縦に並べ、中央にはポイント特典の条件を選んで確認できる欄、限定商品、アウトレット、人気ランキング、人気ブランド、季節のおすすめ、人気のクーポンを順に並べています。商品は横にスクロールできる一覧にして、1画面で多くの商品を見られるようにしました。デザインから実装まで、RuxelTechチームで一貫して対応しました。
- 構築範囲
- サイト全体（トップ / カテゴリ・商品一覧 / 商品詳細 / カート / 購入手続き / 会員ページ（マイページ））
- 主な機能
- 決済 / 定期購入 / ポイント / クーポン / 在庫・基幹システム連携 / 管理画面の設定
- 業種
- 小売・総合通販
- ロール
- ECサイト構築 / サイト設計 / デザイン / フロントエンド実装 / 決済・定期購入・ポイント・クーポン / 在庫・基幹システム連携 / 管理画面の設定 / レスポンシブ対応
- 技術
- Shopify / Next.js
TOP — トップページ
商品数の多いサイトを、探しやすく整理
サイトの入口となるトップページを、PC版・スマホ版で掲載しています。白を基調に、木目のヘッダーで生活雑貨らしい温かみを加えました。左のカテゴリ一覧と上部の検索窓という2つの入口を常に見せ、中央は「限定・お買い得・人気・季節」の順に並べています。スマートフォンでは検索窓とログイン案内を上部にまとめました。
- 検索窓と約20のカテゴリ一覧を常に表示
- 限定商品・アウトレット・ランキングの横スクロール一覧
- ポイント特典の条件を選んで確認できる欄
- 季節のおすすめとクーポンの特集
全体をスクロールしてご覧いただけます
Results
成果
扱う商品とカテゴリが多い総合通販サイトを、検索・カテゴリ・特典情報から目的の商品へ迷わず進め、購入まで完結できるECサイトとして構築しました。
Tech Stack
ShopifyNext.js