UI観察 - カテゴリ検索

今回のUI観察は、カテゴリ検索です。

YouTubeの検索ボックス下に、角丸のボタンが並んでいるのを見かけたことはありますでしょうか。2021年の終わり頃から実装された機能だと思いますが、今回はこちらについて紹介していきます。

（その他のUI観察記事はマガジンはこちら ↓）

UI観察マガジン｜MAKOTO｜Designer｜note

各サービスの画面

■ Youtubeのカテゴリ検索

挙動のパターンを試してみましたが、Youtubeの角丸ボタンはフィルタの役割を果たしています。（URLは変わらない）

YouTubeのPC画面。
検索ボックスの下に角丸ボタンが横に並ぶ。横にスクロールできる。

角丸ボタンをクリックしたときの表示。
クリックしたカテゴリの動画が表示される。

角丸ボタンをクリック後、検索ボックスで「イチロー 大谷」と検索した画面。
角丸ボタンの表示はなくなり、「イチロー 大谷」と検索した結果のみが適用されている。

■ Googleマップのカテゴリ検索

Googleマップの場合は、角丸ボタンをタップ時は、検索ボックスにキーワードが挿入されます。フィルタではなく、検索入力の補助としての役割をしています。（URLは変わらない）（PC・SP （アプリ）での表示ともに同じ挙動）

Googleマップのトップ画面。検索ボックスの下にカテゴリが表示。
横スクロールが可能。

レストランをタップした場合。
検索ボックスにタップした文言が挿入され検索される。
そして検索ボックス下に、さまざまなフィルタが表示。

カテゴリの一番右にある「もっと見る」をタップするとカテゴリ一覧が表示。

■ noteのカテゴリ

・note（PC画面）

noteには、フィルタの役割や検索入力補助をする角丸ボタンなく、画面左にカテゴリナビゲーションがテキストで表示されています。
クリックすると各カテゴリページへ遷移する仕様となっています（URLが変わる）。

noteのホーム画面。左側にカテゴリが並んでいる。

カテゴリから「家庭」をクリックした時の画面。ヘッダー下にパンくずリストが表示。

・note（アプリ画面）

アプリでは見た目として、Youtubeに近い角丸ボタンが検索ボックスの下に表示。このボタンからカテゴリ検索ができます。

noteのアプリ（みつける画面）

タップすると画面遷移。カテゴリに合った記事が表示されます。

「すべてみる」ボタンを押すとカテゴリ一覧が表示。
Googleマップと同様の挙動でした。

■ Twitterのカテゴリ検索

話題を検索画面にて、検索ボックスの下にタブが横並びで表示。noteと同様にクリックした箇所にページ遷移する（URLが変わる）。

Twitterの「話題を検索画面」
「おすすめ・COVID 19・トレンド・ニュース・スポーツ・エンターテイメント」が並ぶ。

スポーツタブを選択した時の画面。選択したカテゴリに関するニュースが表示される。

さいごに

各サービスのカテゴリ検索方法についてまとめました。

各サービスのカテゴリ検索の違い

膨大な情報を取り扱いユーザーに目的のキーワードを検索 & 興味のある検索をしてもらうには、手入力だけではなく補助機能を設けて手助けをしてあげる必要があります。

サービス開発する際は、各サービスに合った検索補助を考えてみましょう。