20店舗以上でも迷わせない！店舗一覧UIの整理術と設計のコツ

はじめに

「店舗を増やすたびに、サイトの店舗一覧が見づらくなってきた」——20店舗以上を展開される企業のWeb担当者さまから、こうしたお声をよくいただきます。

店舗が5つ10つのうちは、ただ縦に並べるだけでも十分に機能します。ところが20を超えたあたりから、同じ作り方では一気に「探しにくいページ」へと変わってしまうのです。お客様が目的の店舗にたどり着けなければ、来店や予約、問い合わせといった大切な機会を取りこぼしてしまいます。

この記事では、多店舗展開企業向けに「見やすい店舗一覧ページのUI設計」を、具体的な整理術とともに解説します。なぜ店舗が増えると探しにくくなるのかという原因から、改善のための4つの設計原則、スマホ対応の勘所、そして自社で見直すときの手順まで、順を追ってご紹介します。読み終えるころには、自社の店舗一覧をどう整理すればよいか、その判断基準が手に入るはずです。

なぜ店舗が増えると一覧は「探しにくく」なるのか

店舗一覧が見づらくなる原因は、デザインのセンスではなく「規模に合わない設計のまま使い続けていること」にあります。まずはなぜそうなるのかを整理しましょう。

20店舗が分岐点になる理由

結論から言うと、店舗が20を超えると「ただ縦に並べる方式」は限界を迎えます。

理由は、人が一画面でざっと見渡して比較できる情報量に限りがあるからです。店舗をすべて縦に並べると、目的の店舗にたどり着くまで延々とスクロールが必要になります。さらに表示件数を区切ってページを分けると、今度は何ページもめくらなければならず、一覧としての見渡しやすさが失われてしまいます。

これは、家を建てるときの収納に似ています。荷物が少ないうちは「とりあえず一つの押し入れに全部入れる」で困りません。けれど物が増えてくると、押し入れに詰め込むだけでは目的の物が取り出せなくなり、「ジャンルごとの棚」や「ラベル」が必要になります。店舗一覧も同じで、数が増えたら「探すための仕組み」を足してあげる必要があるのです。

つまり、20店舗という規模は「並べる設計」から「探させる設計」へ切り替えるべき分岐点だと考えてください。

都道府県別だけでは解決しない

「探しやすくするなら都道府県で分ければいい」と考えがちですが、それだけでは解決しないことも多いです。

理由は、分類を細かくしすぎると、かえって探す手間が増えてしまうからです。実際にある調査でも、都道府県別の店舗一覧は「一度に表示される店舗数が少なく、複数ページにまたがってしまうため一覧性がない」という問題が指摘されています。47都道府県すべてにリンクが並んでいても、自分の地域を探し当てて、クリックして、さらにその先で店舗を選ぶ——という手数の多さは、お客様にとって負担です。

例えるなら、レストランのメニューが「料理名の五十音順」だけで並んでいるようなものです。間違いではありませんが、「今日は和食が食べたい」というお客様の探し方には合っていません。大事なのは、お店側の管理しやすさではなく、お客様の探し方に沿った分け方をすることなのです。

ですから、都道府県別はあくまで一つの軸として用意しつつ、後述する「絞り込み」や「地図」と組み合わせることが大切になります。

見やすい店舗一覧をつくる4つのUI設計原則

ここからは、20店舗以上でも探しやすい一覧をつくるための具体的な設計原則を4つご紹介します。

①「探す」入口を画面上部に置く

最初の原則は、検索や絞り込みの入口を画面の上部に置くことです。

理由は、お客様がページを開いて最初に視線を向けるのが上部だからです。UIの研究でも、検索フィールドは画面上部、とりわけ左上や右上に配置するのが最も見つけやすいとされています。一覧を延々スクロールした先にようやく検索窓がある、という作りでは、せっかくの機能に気づいてもらえません。

これは、大型スーパーの入口に「フロアガイド」があるのと同じ発想です。入ってすぐに案内図があるから、目的の売り場へ迷わず向かえます。店舗一覧でも、ページを開いた瞬間に「ここで探せますよ」と示してあげることが大切です。

まずは「探す入口を最初に見せる」。これが見やすい一覧の土台になります。

② 絞り込みは「型」を選んで設計する

二つ目は、絞り込み機能を「型」から選んで設計することです。

理由は、絞り込みの見せ方にはいくつかの定番パターンがあり、サイトの用途や項目数に応じて最適なものが変わるからです。代表的なのは、プルダウンメニュー、サイドメニュー、半分だけせり出すモーダル、全画面モーダルの4つです。項目が少なければプルダウンで十分ですし、エリア・営業時間・サービス内容など条件が多ければサイドメニューや全画面モーダルが向いています。

たとえるなら、お店の試着室の作り方に似ています。商品が少なければカーテン一枚で足りますが、品数が多いお店では個室や鏡の配置までしっかり設計しますよね。絞り込みも、扱う条件の多さに合わせて「器」を選ぶことが大切です。

自社の店舗をどんな条件で探されることが多いかを洗い出し、それに合った型を選びましょう。

③ 一覧と地図を連携させる

三つ目は、店舗一覧と地図を連携させることです。

理由は、「近くのお店を探したい」というニーズに、文字の一覧だけでは応えきれないからです。優れた店舗検索では、パソコンでは条件を入力すると広い地図に切り替わり、スマホではまずテキストの店舗一覧が出て、店舗を選ぶと地図に移動する、というようにデバイスごとに動線を変えています。

これは、観光案内所で「一覧パンフレット」と「大きな地図」の両方が置いてあるのと同じです。名前から探したい人はパンフレットを、位置から探したい人は地図を使う。人によって探し方が違うからこそ、両方の入口を用意しておくと親切なのです。

一覧と地図、それぞれの良さを組み合わせることで、どんな探し方のお客様も取りこぼしません。

④ 写真と常時表示アクションで迷いを消す

四つ目は、店舗写真と「常に押せるボタン」で、お客様の迷いをなくすことです。

理由は、文字情報だけの一覧は、お客様が一目で違いを判断しづらいからです。各店舗にお店の写真を添えるだけで、雰囲気が伝わり選びやすくなります。さらに「電話する」「予約する」「地図を見る」といった重要なアクションのボタンを常に見える位置に置いておくと、気になった瞬間に行動へ移せます。

これは、飲食店のメニューに料理写真があると注文しやすいのと同じです。文字だけの品書きより、写真があったほうが「これにしよう」と決めやすいですよね。

写真で選びやすく、ボタンですぐ動ける。この二つで、見るだけで終わらせない一覧になります。

スマホでの店舗一覧で押さえるべきこと

ここまでの原則は、特にスマホで効果を発揮します。その理由を確認しておきましょう。

来店検索はスマホが主戦場

結論として、店舗一覧はスマホ画面を第一に考えて設計すべきです。

理由は、「近くのお店はどこ?」と調べるとき、多くの人が外出先のスマホで検索するからです。実際、優れた店舗検索はスマホでの動線を丁寧に作り込んでいます。パソコンの画面で整って見えても、スマホで文字が小さすぎたり、ボタンが指で押しにくかったりすると、その時点で離脱されてしまいます。

たとえば、駅で電車を待ちながら「この近くにお店ないかな」と片手でスマホを操作する場面を想像してみてください。小さな文字を拡大したり、細かいリンクを狙ってタップするのは大きなストレスです。だからこそ、文字は読みやすい大きさにし、ボタンは指で押しやすい余白をもたせることが欠かせません。

スマホでストレスなく探せること。これが多店舗サイトの店舗一覧では最優先事項になります。

自社で改善する前に決めておく3ステップ

最後に、いきなりデザインに手をつける前に踏んでおきたい手順をお伝えします。

現状の離脱ポイントを洗い出す

まず、お客様が「どこで探すのをやめているか」を把握しましょう。

理由は、原因が分からないまま見た目だけ整えても、根本的な改善にならないからです。アクセス解析を見れば、店舗一覧ページでどれくらいの人が離脱しているか、どのページまで進んで止まっているかが分かります。

これは、雨漏りの修理で、まず「どこから漏れているか」を突き止めるのと同じです。場所を特定せずに天井全体を塗り直しても、また漏れてしまいます。まずは弱点を見つけることから始めましょう。

分類軸を「ユーザー目線」で再設計する

次に、店舗の分類軸をお客様の探し方に合わせて見直します。

理由は、多くの一覧が「管理する側の都合」で分けられているからです。お客様は「家から近い順」「夜遅くまで開いている店」「駐車場のある店」といった条件で探します。その探し方に分類軸を寄せることで、ぐっと使いやすくなります。

家の間取りを考えるときに、住む人の生活動線から決めていくのと同じです。作り手の都合ではなく、使う人の動きを起点にすることが、見やすい店舗一覧への近道になります。

まとめ

店舗が20を超えたら、一覧は「並べる設計」から「探させる設計」へ切り替えることが大切です。本記事のポイントを振り返ります。

まずは自社の店舗一覧を、お客様の目線で一度開いてみてください。「探しにくい」と感じた箇所こそが、改善の出発点です。どこから手をつければよいか迷ったときは、店舗数や業種に合わせた設計をプロと一緒に整理していくことで、来店や予約の取りこぼしを着実に減らしていけます。