Overview
プロジェクト概要
モバイルアクセサリーのオンラインショップ「SoftBank SELECTION」のECサイトを、Shopify と Next.jsで構築しました。トップページ、カテゴリ・商品一覧、商品詳細、カート、購入手続き、会員ページ（マイページ）まで、サイト全体を構築しました。決済・定期購入・ポイント・クーポンの機能と、在庫・基幹システムとの連携、管理画面の設定にも対応しています。
トップページでは、最上部に送料無料の条件を青い帯で示し、その下にロゴ・検索窓・お気に入り・カートを配置しました。iPhoneケース・スマホケース・充電器・オーディオ・ガジェットなどの商品カテゴリのメニュー、大きなスライダー、週替わり特価やアウトレットなどの特集、価格付きの新着アイテム、商品写真のアイコンによるカテゴリ一覧、会員サービスの5つの特典、ニュースを並べています。デザインから実装まで、RuxelTechチームで一貫して対応しました。
- 構築範囲
- サイト全体（トップ / カテゴリ・商品一覧 / 商品詳細 / カート / 購入手続き / 会員ページ（マイページ））
- 主な機能
- 決済 / 定期購入 / ポイント / クーポン / 在庫・基幹システム連携 / 管理画面の設定
- 業種
- 小売・モバイルアクセサリー
- ロール
- ECサイト構築 / サイト設計 / デザイン / フロントエンド実装 / 決済・定期購入・ポイント・クーポン / 在庫・基幹システム連携 / 管理画面の設定 / レスポンシブ対応
- 技術
- Shopify / Next.js
TOP — トップページ
商品写真を主役に、すっきりと見せるショップ
サイトの入口となるトップページを、PC版・スマホ版で掲載しています。白を基調に青をアクセントにし、商品写真が引き立つように余白を広くとりました。新着アイテムは同じ大きさのカードに価格とともに並べ、カテゴリは写真のアイコンで直感的に選べます。スマートフォンではメニューを折りたたみ、特集のバナーを2列で表示しています。
- 送料無料の条件を最上部の帯で表示
- 特集バナーと価格付きの新着アイテム
- 商品写真のアイコンによるカテゴリ一覧
- 会員サービスの特典とニュース
全体をスクロールしてご覧いただけます
Results
成果
商品写真を主役にしたすっきりしたデザインで、特集・新着・カテゴリから商品を探し、購入まで完結できるオンラインショップとして構築しました。
Tech Stack
ShopifyNext.js