実績紹介MANIAC④〜BAMBI様ECサイト〜

猫の手で制作したECサイトを詳しく、そしてマニアックに解説します。

今回は、第4回としてBAMBI様ECサイトの後編！

特に検索画面などのUIデザイン視点から、推しポイントを深掘りします。
（前回の記事はこちら）
前回の記事では、BAMBIのTOPページや商品ページについてご紹介しました。
今回はその続編として、「検索まわりのUI」に注目。
MakeShopに慣れた猫の手の工夫やカスタマイズで、
“欲しい商品にたどり着きやすい”検索体験をつくることができるんです。

商品の種類の豊富さが売りなのに⋯ECにそれを活かすには⋯

「うちの商品、多すぎて探しにくいかも…」
「カテゴリ分けはしてるけど、結局一覧でズラッと並ぶだけ…」
「MakeShopの標準機能だと、思ったように検索設計できなくて…」

そんなお悩み、よく聞きます。
そして実際、“商品がたくさんあるサイトほど、検索導線の設計がカギ”になるのも事実です。

「デザインの変更が難しい…」「絞り込みが使いづらい…」と感じているご担当者さまへ。
BAMBI様で実際に行ったカスタマイズ事例をご紹介します。

来た！見た！勝った！勝利確定の検索画面に刮目せよ！

指定の条件で検索を見てみよう！

“探しやすさ”を視覚化する検索画面デザイン

大カテゴリは“ボタンで”見せる

まず注目したいのが、左側に大きく配置されたカテゴリの選択エリア。
「時計バンド」「アップルウォッチ用バンド」「革小物」「ジュエリー」といった大カテゴリをボタンで視認性高く表示することで、
どのカテゴリの商品を見ているのか、迷いにくくなっています。

カテゴリ名をテキストリンクで並べるだけでは、情報として埋もれてしまいがち。
あえて“ボタン風”にすることで、ユーザーの行動を誘導しやすくなっているのがポイントです。

“細かく選べる”が、ここまで親切にできるとは！
左カラムの設計美学

検索結果ページの左側に配置されたこの絞り込みメニュー――
実は、BAMBIの検索体験を支える最重要パーツのひとつです。

✅ カテゴリ別に異なる“意味のある絞り込み”

BAMBIではカテゴリが多岐にわたるため、
単に同じ絞り込みUIを流用しても意味がありません。

そこでカテゴリごとに、

• 取付幅・美錠幅など時計バンド特有のサイズ条件
• 素材／カラー／機能など、見た目や用途に直結する情報

といった意味のあるフィルタだけを見せるよう設計しています。

ユーザーが「選ぶ理由」に近い条件だけを出す。
この“余計な情報を見せない”判断が、UXを大きく左右するのです。

✅ チェックしやすく、目が泳がない

・1行3列で整然と並ぶチェックボックス
・明確なグループ化
・ボタンはそれぞれの項目群ごとに設置（＝まとめて検索しやすい）

など、操作ストレスをとことん減らす配慮も抜かりなし。

✅ 「探す」が「楽しい」に変わる瞬間

たとえば「素材」だけで20項目以上。
それでもストレスなく見られるのは、UIがうまく整っているから。

ECサイトにおいて、「絞り込み機能の精度」と「気持ちよさ」は、
そのまま回遊率と購買意欲に跳ね返ってきます。

検索まわりに課題を感じているご担当者さまにこそ、
ぜひ取り入れてほしい設計の工夫です。

検索が整うと、サイトが「優しく」なる。

ECサイトにおいて、検索体験は「静かだけど、とても大きな存在」です。
どれだけ商品が魅力的でも、探しにくければチャンスを逃してしまう。
逆に、使いやすい検索があるだけで、サイト全体の印象がぐっと良くなる。

猫の手製の検索UIは、MakeShopの標準仕様をベースにしながらも、
ユーザー視点でどこまで親切にできるかを、徹底的に考え抜いた設計です。

「編集できなくて困ってる」「見た目を変えられない」と悩むEC担当者さんにこそ、
「実は、こんなことまでできるんですよ」と伝えたくて、この記事を書きました。

少しでも「うちでもやってみたい」「話を聞いてみたい」と思っていただけたら、
ぜひお気軽にご相談くださいね🐾

次回もお楽しみに！

デザイン・SEO・ECにとにかく強い制作会社

デザインにこだわるのは当たり前！構成にこだわるのも当たり前！猫の手はECサイトの「あれがあったら」を解消します！

ご興味を持たれた方は下記フォームから是非お問い合わせ下さい。