![見出し画像](https://assets.st-note.com/production/uploads/images/89388166/rectangle_large_type_2_05d62c12d9413cfcb583b5a60df5f412.png?width=800)
UI観察 - カテゴリ検索
今回のUI観察は、カテゴリ検索です。
YouTubeの検索ボックス下に、角丸のボタンが並んでいるのを見かけたことはありますでしょうか。2021年の終わり頃から実装された機能だと思いますが、今回はこちらについて紹介していきます。
(その他のUI観察記事はマガジンはこちら ↓)
各サービスの画面
■ Youtubeのカテゴリ検索
挙動のパターンを試してみましたが、Youtubeの角丸ボタンはフィルタの役割を果たしています。(URLは変わらない)
![](https://assets.st-note.com/img/1651977876339-A7ra8LBasW.png?width=800)
検索ボックスの下に角丸ボタンが横に並ぶ。横にスクロールできる。
![](https://assets.st-note.com/img/1652267366759-x5nPgeGiVd.png?width=800)
クリックしたカテゴリの動画が表示される。
![](https://assets.st-note.com/img/1652267528852-eTu578XIED.png?width=800)
角丸ボタンの表示はなくなり、「イチロー 大谷」と検索した結果のみが適用されている。
■ Googleマップのカテゴリ検索
Googleマップの場合は、角丸ボタンをタップ時は、検索ボックスにキーワードが挿入されます。フィルタではなく、検索入力の補助としての役割をしています。(URLは変わらない)(PC・SP (アプリ)での表示ともに同じ挙動)
![](https://assets.st-note.com/img/1651977351952-SEDHnb1szg.png?width=800)
横スクロールが可能。
![](https://assets.st-note.com/img/1651977427666-U9K4etFREM.png?width=800)
検索ボックスにタップした文言が挿入され検索される。
そして検索ボックス下に、さまざまなフィルタが表示。
![](https://assets.st-note.com/img/1651977351686-c6Xj2P1MzA.png?width=800)
■ noteのカテゴリ
・note(PC画面)
noteには、フィルタの役割や検索入力補助をする角丸ボタンなく、画面左にカテゴリナビゲーションがテキストで表示されています。
クリックすると各カテゴリページへ遷移する仕様となっています(URLが変わる)。
![](https://assets.st-note.com/img/1652269372272-FvUbcchcSi.png?width=800)
![](https://assets.st-note.com/img/1652269439820-bFBlhgRyPR.png?width=800)
・note(アプリ画面)
アプリでは見た目として、Youtubeに近い角丸ボタンが検索ボックスの下に表示。このボタンからカテゴリ検索ができます。
![](https://assets.st-note.com/img/1652281065622-xVaCxGl8Ra.png?width=800)
![](https://assets.st-note.com/img/1652281196195-kshzkb7Ca1.png?width=800)
![](https://assets.st-note.com/img/1652281503449-ppTR4BzlWo.png?width=800)
Googleマップと同様の挙動でした。
■ Twitterのカテゴリ検索
話題を検索画面にて、検索ボックスの下にタブが横並びで表示。noteと同様にクリックした箇所にページ遷移する(URLが変わる)。
![](https://assets.st-note.com/img/1652270708812-RL821EYt9k.png?width=800)
「おすすめ・COVID 19・トレンド・ニュース・スポーツ・エンターテイメント」が並ぶ。
![](https://assets.st-note.com/img/1652270969769-69w57RkUtF.png?width=800)
さいごに
各サービスのカテゴリ検索方法についてまとめました。
![](https://assets.st-note.com/img/1652272528365-bDZyO3RUsj.png?width=800)
膨大な情報を取り扱いユーザーに目的のキーワードを検索 & 興味のある検索をしてもらうには、手入力だけではなく補助機能を設けて手助けをしてあげる必要があります。
サービス開発する際は、各サービスに合った検索補助を考えてみましょう。
この記事が気に入ったらサポートをしてみませんか?