絞り込みUIが優れているサイト｜デザイナーsuit hunt!

こんにちは！
BitBeansでは、毎週デザイン会を開き、現在進行中の案件報告や、デザインに関する課題・疑問を共有し合うようにしています。そして最後に発表するのが「サイト探し」。毎週、それぞれがテーマに合わせて探したサイトを紹介します。

デザイナーの目線で選んだサイトは、ユニークで刺激的。そして毎回、新しい発見もあるのでブログで紹介しています。今週のテーマは、FUさんが提案した 「絞り込みUIが優れているサイト」です。各自が「これはいいデザイン！参考になる！」と思ったサイトを紹介し、各自どんなポイントに注目したかというコメントを添えました。

NOBEL

MAさんが紹介するのは、お菓子メーカーらしい表現が楽しいサイト

MA「お菓子のノーベルの公式サイトですが、特に注目したのは商品情報ページがとっても使いやすいことです。ページ下部の『テーマから探す』エリアでは、『とろ〜り』や『カチカチ』といった『食感』で商品を絞り込むことができます。味やカテゴリではなく、『食感』で探せるという切り口がユニークで、キャンディメーカー・ノーベルらしい発想が表現されていると感じました。右下の怖い顔のアイコンをクリックすると、『ハードモード検索』というページに遷移します。一見すると何のページかわからない不思議な導線ですが、こうした遊び心のある仕掛けが、サイト体験をより楽しくしています。」

JAPAN AIRLINES

TOさんが紹介するのは、TOPページの“検索ファースト”な設計

TO「日本航空の検索サイトです。TOPページのメインビジュアルに食い込むようにレイアウトされた絞り込み検索ブロックが印象的です。『まずここから操作してほしい』という強い意図を感じさせます。国内・国際・ショッピングの各タブごとに、それぞれ固有の絞り込み検索が用意されていますが、情報量が多くてもゴチャついた印象はなく、整理されています。タブによっては項目数に差があるものの、モーダル表示にすることで項目数の違いを自然に見せたり、長くなる項目はアコーディオンで整理したりと、細かな工夫が見られます。」

表参道ヒルズ

NOさんが紹介するのは、カテゴリ分けがひと目でわかる設計のサイト

NO「TOPページから、シンプルで品のよいデザインが印象的です。かわいらしいアイコンでカテゴリ分けされており、直感的にわかりやすく整理されたデザインです。今、自分がどのカテゴリのお店を見ているのかがひと目で把握でき、レストラン・カフェも独立したアイコンになっているため、探しやすさにつながっていると感じました。森ビルの複合施設は数が多いですが、その中でも特に見やすく、情報が整理されたサイトだと思います。」

価格.COM

SHさんが紹介したのは、家電リサーチの王道サイト

SH「家電を買う時は、必ずと言っていいくらい訪れる定番サイトですね。ジャンルを選び、左カラムに並ぶ膨大なカテゴリの中から目的の項目を選べば、大体2〜3手でお目当ての情報にたどり着けるのがすごいと思います。これは普段から自分が利用しているから使いやすいのか、それとも本当に使いやすいのか、みんなの意見を聞いてみたいです。」

ジョブメドレー

YOさんが紹介したのは、迷わず使える絞り込み設計

YO「絞り込み機能にアイコンが付いていることで、カテゴリの内容がひと目で理解しやすく、直感的に操作できると感じます。各項目の間に適度な余白があり、詰め込みすぎていないレイアウトのため、見ていても疲れません。また、都道府県や特徴など細かな条件まで絞り込める点も魅力的です。自分の希望に合った職場をピンポイントで見つけられるうえ、UI全体の構造も分かりやすいため、操作中に迷うこともありません。情報量が多くてもストレスを感じさせない、ユーザーにやさしい設計になっています。」

婦人画報のお取り寄せ

KAさんが紹介するのは、贈り物を探したくなるビジュアル設計のサイト

KA「手土産にいいお菓子を探していた時に、『この絞り込みが欲しかった！』と思う機能があり、使いやすかったです。常温・冷凍便などの配送タイプや価格帯、スイーツのジャンルなど、目的に合わせた細かい条件で探せるのが便利でした。しかも表示される商品写真も上品で、おしゃれな贈り物が多く、掲載されている商品の見せ方も丁寧で魅力的でした。」

サウナイキタイ

KOさんが紹介するのは、ユーザーに合わせた細かな絞り込み

KO「サウナ好きのためのメディア。トップページでは一見、『キーワードから探す』『都道府県から探す』『特徴から探す』といった大枠の絞り込みだけが見え、検索のハードルを下げてくれています。しかし詳細を見ると、このサイトの『サウナ好き』ユーザーに合わせた細やかな絞り込み項目が用意されていることがわかります。
特に施設の詳細ページにある『宿泊』タブは、サウナ施設を見る → 宿泊を考える → 宿泊プランを探す、という一連の導線がとてもよくできていると感じました。」

Kei-Net

FUさんが紹介するのは、自分に合う大学を見つけるための検索設計

FU「河合塾が提供する大学入試情報サイトで、『大学を探す』の項目がとても充実しており、調べやすいと感じました。多くのデータを扱いながらも、条件を組み合わせて“ちゃんと自分に合う大学”を探せるように設計されています。画面デザインではアイコンをレイアウトしつつ、クリック・絞り込み・表示数の制御によって“探しやすさと見やすさ”をうまく両立しており、きちんと絞り込み結果が出るところまで考えられたUIなのだと感じました。件数が多い場合、絞り込み結果が100校以内になるまでは表示させないという条件が設けられている点も、なるほど！と思いました。」

CHAGOCORO

SUさんが紹介するのは、読む・買う・知るをつなぐ設計のサイト

SU「お茶×文化をテーマに、ブランドや産地、スタイル別に『読む・買う・知る』を提供しているメディアとショップを兼ねたサイトです。右側にヘッダーや絞り込み機能がまとめられていて、コンパクトで見やすい構成だと感じました。検索／フィルターの切り口も豊富（カテゴリ・ワード・お茶の種類・場所）なので、ユーザーが自分の興味から自然にたどれる設計になっていると思います。」

voicy

DAさんが紹介するのは、検索しやすさを重視したUI

DA「サイトロゴのすぐ横に設置されている検索窓にカーソルを合わせると、ハッシュタグやボタンが表示され、すぐクリックできるため、目的の情報へアクセスしやすいと感じました。絞り込みやすいサイトというよりは、検索しやすいサイトという印象かもしれません。」

---

今回ご紹介したサイトは、単に絞り込み機能が充実しているだけではなく、「どんな情報を、どんな順番で見せるか」まで丁寧に設計されている点がとても参考になりました。使いやすさだけでなく、楽しさやブランドらしさにつながる工夫も多く、日々の制作にも活かしたいアイデアがたくさんありました。