こんにちは、竹内です。
今回は「絞り込みナビ」エクステンションのデザインカスタマイズについてご紹介します。
aheadworks社製のエクステンション Layered Navigation を導入し、サイト全体に合わせてデザイン調整・カスタマイズをしました。
絞り込みナビ デフォルト
上の画像は Layered Navigation エクステンションで表示される「絞り込みナビ」です。
絞り込みナビ カスタマイズ後
上の画像がデザインカスタマイズをした「絞り込みナビ」です。
商品一覧とセットで表示し、ユーザーを迷わせない！
デフォルトではサイドカラムに配置されていますが、この配置場所を商品一覧のすぐ上にすることでユーザーを迷わせることがなくなります。サイドカラムやメインカラムの丈夫にバナーなどを配置しても影響を受けず、ユーザーを戸惑わせることがなくなります。
「削除」リンクはわかりやすいものに！
絞り込んだ項目をクリアする「削除」リンクのデザインを見直し、ボタン風のデザインにしました。ゴミ箱アイコンを使ったことで、テキストリンクだけの状態よりも目につきやすく、クリックしやすくなりました。
絞り込みの表示/非表示を切り替え省スペース化！
絞り込み項目が多くある場合にナビ領域の高さが出てしまい商品一覧が見づらくなってしまうため、絞り込みを表示/非表示にできるボタンを配置しました。
このボタンがあれば無駄にスクロールしなくて済むので、特にタブレットやスマフォなどの表示領域が狭い場合に嬉しいですね（*´∀｀*）
商品数やカテゴリが多い場合、絞り込みナビが商品を探す大きな助けになります。この絞り込みナビのデザインを見直し、より使い勝手の良いECサイトにしていきましょう！