Baby Studio — Mega Menu、Slide Menu、Tab Bar で、ベビー＆マタニティのカタログを Shopify でもっと探しやすく

お客様の問題

Baby Studio は、とても特徴的なお客様層に向けてサービスを提供しています。親御さん、若いご家族、そしてお子様への贈り物を探す方々です。 こうしたお客様は、ニーズ自体ははっきりしていることが多い一方で、 商品にたどり着くまでの道のりはいくつもの枝に分かれます。ベビーカー、チャイルドシート、ナーサリー、授乳用品、 ベビーケア、おもちゃ、アクセサリー、さらには年齢別や利用シーン別の商品グループまであります。

カタログにこれだけ多くのグループがあると、テーマ標準のメニューでは次第にスペースが足りなくなってきます。 デスクトップでは、フラットなメニューバー1本ではストアの幅広さを表現しきれません。 モバイルでは、すべてがハンバーガーメニューの奥に隠れていると、お客様は自分で一段ずつ開いては、 どのグループに目当ての商品が入っているのかを推測しなければなりません。

問題は、商品が足りないことではありません。商品は良いのに、ナビゲーションの構造が ストアの品揃えをお客様に見せきれておらず、目当てのエリアにたどり着くまで余計な手間がかかってしまうことです。 モバイルでは、わずかな余計なステップだけで、お客様が大切な商品グループを見過ごしてしまうのに十分です。

Navi+ で解決したこと

ふさわしいアプローチは、テーマを変えることでも、ストア全体を作り直すことでもありません。 Navi+ は、追加のナビゲーションレイヤーとして使い、それぞれの状況に応じて役割をはっきりと分けます。 デスクトップでは広く見渡せること、モバイルではすばやく操作できること、そして買い物中のお客様には 重要なポイントへのショートカットが必要です。

結果 — Navi+ を導入した後

Navi+ でナビゲーションを整理し直したことで、Baby Studio は実際の買い物行動により近い形で カタログを見せられるようになりました。デスクトップではより多くの商品グループが見え、 モバイルでは道のりがはっきりし、主要な操作はお客様がタップしやすい位置に収まっています。

目指すべき結果は、単に「より見栄えの良い」メニューではありません。目指すのは、初めてのお客様が ストアに何があるのかをすばやく理解でき、モバイルのお客様が少ない遠回りで目当てのエリアにたどり着けること、そして 検索・カート・メニューといった重要な機能を失うことなく、ヘッダーをすっきりさせられることです。

• Mega Menu によって、デスクトップでカタログの幅広さをより良く表現できます。
• Slide Menu によって、モバイルの道のりがよりはっきりします。
• Tab Bar によって、検索・カート・メニューが親指の近くに収まります。
• 初めてのお客様が、ストアに何があるのかをよりすばやく理解できます。
• 商品グループの多いカタログが、テーマを変えずともより探しやすくなります。