【Shopify制作実績】Apple Watchバンド専門店をフルカスタマイズで構築しました

こんにちは。Shopifyパートナーとしてストア制作を行っているEC MAKEです。

今回は、Apple Watch用のバンド・ケースの専門店「VOULT」様のストア制作をご紹介します。

■ ご依頼の内容

ご依頼主様から、黒を基調にゴールドを効かせた、高級感のあるデザインの参考イメージをご用意いただきました。

このイメージを崩さずに、商品を販売できるShopifyストアとして形にすることが今回のご依頼です。

Shopifyのテーマ（デザインのひな形）をそのまま使うと、見た目がテーマ寄りになってしまいます。

そこで、Shopify公式の無料テーマ「Dawn」を土台に、トップページから商品ページ、各種案内ページまで、見た目と動きを参考イメージに合わせて一から作り込みました。

■ 制作のねらい

1. どのページを開いても、同じ世界観に

商品一覧やカート、返品・配送の案内ページ、公開前のパスワード画面まで、黒×ゴールドのデザインで統一しました。

印象がぶれないことが、ブランドへの信頼につながります。

2. サイズ選びで迷わせない

Apple Watchのバンドは、本体のサイズに合うかどうかが購入の決め手です。

サイズや素材から探せる入口と、商品ページからすぐ開けるサイズの確認方法を用意しました。

3. 公開後もご自身で更新できる

文章や画像は、できるだけShopifyの管理画面から差し替えられる作りにしています。

■ Shopifyの標準機能にはなかったけれど、こうして実現しました

標準機能では難しかった部分をどう形にしたかを、その効果とあわせてご紹介します。

1. 商品ごとに内容が変わる商品ページ

参考イメージの商品ページには、商品ごとに異なる「特徴の解説」「着用前と着用後の比較」「着用イメージ」「シーン別のコーディネート」が並んでいました。

Shopifyの商品ページは全商品で同じひな形を使うため、そのままではどの商品にも同じ写真と文章が出てしまいます。

そこで、写真や文章を商品ごとのデータとして持たせ、ひな形がそれを読み込んで表示する作りにしました。

ひな形は1つのまま、20商品それぞれに違う内容を表示でき、データのない項目は自動で非表示になります。

お客様は着けたときのイメージを写真で確かめてから購入できるため、「思っていたのと違った」というすれ違いを減らせます。

ストア側も、新しい商品は写真と文章を入れるだけで同じ見せ方ができます。

2. アプリを使わずに、バンドとケースの「あわせ買い」を案内

バンドとケースを組み合わせて買える仕組みもご相談いただきましたが、アプリや大規模な開発には月額費用や開発費がかかります。

ご依頼主様と相談のうえ、費用をかけずに次の形で案内することにしました。

・バンドの商品ページに「ベルトのみの販売です」の注意書きと「ケースはこちら」のボタン

・ケースの商品ページに「ケースのみの販売です」の注意書きと「ベルトはこちら」のボタン

・ページ下部に、組み合わせて使える商品を「あわせていかがですか？」として表示

「ケースも付いてくると思っていた」という勘違いによるトラブルを防ぎながら、もう一方の商品へ自然に案内できます。

ご要望をそのまま形にするだけでなく、費用と効果のバランスを見てご提案しています。

3. スクロールしても消えない購入ボタン

商品ページを下へ読み進めると、画面下に商品名・価格・「カートに追加」のボタンが現れます。

選んだカラーやサイズ、価格も、上の購入エリアと連動します。

説明を読み終えて「買おう」と思ったその場で、ページの上に戻らずにカートへ入れられます。

縦に長くなりがちなスマホでは、とくに購入までの手間が減ります。

4. 「サイズから選ぶ」「素材から選ぶ」の入口

メニューに「サイズから選ぶ」「素材から選ぶ」を設けました。

素材は各商品の仕様をもとに9種類に分け、それぞれ一覧ページを用意しています。

お客様は、ご自分のApple Watchのサイズや好みの素材から、合う商品だけをすぐに絞り込めます。

5. 購入前に知りたい情報を、ひとつの枠に

公開後の追加のご依頼で、商品ページの購入エリアも改善しました。

・価格・送料・発送までの目安・付属品を、ひとつの枠にまとめて表示（発送の目安は、お取り寄せ商品かどうかで自動で切り替え）

・サイズの選択ボタンのすぐ下に、サイズガイドへのリンク

・商品画像の下に「正面」「背面」「着用イメージ」の切り替えボタン

「いくらで、いつ届き、何が入っているのか」をひと目で確認でき、サイズに迷ってもその場で確認方法を開けます。

見たい角度の写真もすぐに見られるので、サイズ違いや「イメージと違った」による返品を防ぐことにもつながります。

6. 管理画面で画像を選ぶだけで、ボタンが増やせる

「正面」「背面」「着用イメージ」のボタンは、ほかの商品にも付けられます。

管理画面の商品ページに専用の欄を用意したので、画像を選んで保存するだけで表示されます。

画像が未設定の商品にはボタンが出ないため、見た目も崩れません。

制作会社に頼まなくても、簡単な操作で商品ページを充実させられます。

■ まとめ

デザインのイメージをお持ちの方や、テーマのままでは物足りない方にも、Shopifyの土台を活かしながら、見た目と使いやすさを両立したストアをお作りします。

「このデザインをShopifyで実現できるか知りたい」「今のストアの一部だけ作り込みたい」といったご相談も承っております。

お気軽にご相談ください。