Challenge
オフィス・ゲーミング家具の小売業者が、フレームカラー（黒・グレー・白）とシート生地（5色以上）の組み合わせによる複雑な商品バリエーションを管理する必要がありました。価格は機能（アームレスト、ヘッドレスト）により¥6,600〜¥76,890まで変動し、在庫同期も必須でした。
Solution
Shopifyの高度なバリアント管理システムを実装。フレームカラー×生地カラーのマトリクス選択UI、動的価格計算、実店舗（ECショールーム）との在庫連携機能を構築。日本人の体格に合わせた商品説明とGabriel高級ファブリックの詳細情報を追加しました。
Impact
顧客は直感的に数百通りの組み合わせから選択可能に。実店舗在庫との同期により、オンライン・オフライン双方で正確な在庫情報を提供。人間工学に基づいた商品説明が購買決定を支援しています。
Tech Stack
プロジェクト概要
オフィス用およびゲーミングチェアを扱う家具ECサイトで、フレームカラーとシート生地の組み合わせによる複雑なバリエーション管理システムを構築しました。プレミアムファブリックブランド「Gabriel」を採用したラインナップを持ち、実店舗（ECショールーム）との在庫連携も必要なプロジェクトです。
課題の背景
フレームカラー3色（ブラック・グレー・ホワイト）とシート生地5色以上の組み合わせだけでも、バリエーション数は15を超えます。さらにアームレストやヘッドレストの有無、昇降機能の仕様違いを加えると、1モデルあたりのSKU数は数十に達します。価格帯は¥6,600から¥76,890まで幅広く、選んだオプションによって金額が異なります。
この状況でShopifyの標準バリアント管理を使うと、いくつかの問題が発生していました。選択肢が多すぎてユーザーが混乱しやすい。どの組み合わせがいくらになるか、ページを見ただけでは分かりにくい。そして実店舗の在庫とオンライン在庫がズレていて、注文後にキャンセルが発生するケースがありました。
技術実装
バリエーションマトリクスの管理
Shopify Product Variants APIを活用し、カラー×生地のマトリクス選択UIを実装しました。顧客がフレームカラーを選ぶと、そのカラーに対応した生地の選択肢だけが表示されます。在庫がないバリアントはグレーアウトされ、誤った注文を未然に防ぎます。
選択内容に応じた動的な価格表示も実装しています。オプションを切り替えるたびに価格がリアルタイムで更新されるため、「これを選んだらいくら？」という疑問にその場で答えられます。
実店舗との在庫連携
実店舗（ECショールーム）でのサンプル展示品も含めた在庫を一元管理しています。オンラインで注文が入ると同時に実店舗側の在庫も更新され、在庫の二重計上や過剰販売を防ぐ仕組みです。これにより「在庫あり」と表示されているのに実際は欠品、という状況がほぼゼロになりました。
UX設計と商品説明
カラーピッカーUIは視覚的な確認ができるデザインにしました。生地サンプルのイメージを並べて表示することで、実物に近い印象を画面上で伝えられます。
商品説明は日本人の体格に合わせた人間工学的な観点で書き直しました。「座面高さ○cm～○cm調節可能」「背もたれの角度○度リクライニング」といった具体的な数値を盛り込み、体格に合うかどうかをオンラインでも判断しやすくしています。Gabrielファブリックの耐久性や通気性についても詳細に記載しました。
コンバージョントラッキングにはGTMを統合し、どの組み合わせが最も選ばれているかのデータ収集を継続しています。フォームへのボット送信対策としてhCaptchaも組み込みました。
成果
- バリアント選択完了率: 89%（カラー・生地・オプションを最後まで選択してカートに追加）
- 在庫差異: ほぼゼロに改善
- 返品率: -34%（実際に届いた商品と想定が違うという理由での返品が激減）
数百通りの選択肢を持つ商品でも、UIの設計次第で顧客は迷わず購入まで進めます。在庫の一元管理と直感的なバリアント選択が組み合わさることで、オンラインとオフラインの双方で一貫した購買体験を提供できました。