見出し画像

UI観察 - 検索機能(Instagram)

Instagram(以降インスタ)の検索機能について深堀りしてみました。

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


洗い出してみたところ検索の主としては「キーワード検索」「ハッシュタグ検索」「地図検索」です。様々な角度からの検索を通して、投稿とアカウントを探せて「いいね」「フォロー」を促す流れになっています。

インスタの検索機能の全体

それぞれの画面詳細を見ていきたいと思います。



インスタの検索画面

1. 検索トップ

主に「キーワード検索」「写真一覧」があり、地図画面への遷移ができる。「キーワード検索」と「地図検索」の切り替えをタブも考えられますが、地図画面の優先度を下げているようです。

インスタTOP -> インスタ検索TOP

2. キーワード検索

2-1. キーワード検索(履歴なし)

主は「キーワード検索」。過去に履歴をしたことがあれば、検索窓の下に、検索したキーワードの履歴が表示されます。

インスタTOP -> インスタ検索TOP -> 検索タップ時の履歴なし版


2-2. キーワード検索(履歴あり)

主は「キーワード検索」。過去の履歴が、検索窓の下に、検索したキーワードの履歴が表示されています。履歴を消したり、フォローしているアカウントを確認できます。

インスタTOP -> インスタ検索TOP -> 検索タップ時の履歴あり版

「すべて見る」をタップした画面が下記。スクロールすると過去の検索履歴が確認できます。


2-3. 最近の検索(履歴あり)

インスタTOP -> インスタ検索TOP(すべて見るをタップ)-> 最近の検索


2-4. ダイアログ

すべてクリアを押すとダイアログが挟まり、いきなり削除することを防いでくれます。

インスタTOP -> インスタ検索TOP(すべて見るをタップ)-> 最近の検索(すべてクリアをタップ)-> ダイアログ


2-5. 最近の検索(履歴なし)

「すべてクリア」は非表示でなく非活性。履歴は無いため、「検索履歴がありません。」と文言を表示し、履歴がないことを伝えています。

インスタTOP -> インスタ検索TOP(すべて見るをタップ)-> 最近の検索

3.ハッシュタグ検索

3-1.ハッシュタグ検索(トップ)

トップでは左上の投稿がリール、あとは人気の順番で写真投稿が並んでいる模様。サムネイルが人気投稿となる。サムネイルにしてもらった投稿者から喜びの反応も得られる。

インスタTOP -> インスタ検索TOP -> ハッシュタグ(TOP)


3-2.ハッシュタグ検索(最近)

上から最新の投稿が表示。

インスタTOP -> インスタ検索TOP -> ハッシュタグ(最近)


3-3.ハッシュタグ検索(リール)

リール投稿を増やすためか、下に投稿を促すボタンが表示。

インスタTOP -> インスタ検索TOP -> ハッシュタグ(リール)

4.地図検索

4-1.地図検索(トップ)

地図検索は地図がメインとなるため、マップが画面の半分以上を占めています。

インスタTOP -> インスタ検索TOP -> 地図検索


4-2.地図検索(アカウント選択中)

選択中のお店のアイコンが大きく表示。大きくなったアイコンをタップしてストーリーを見ることもできます。

インスタTOP -> インスタ検索TOP -> 地図検索(アカウント選択中)


4-3.地図検索(近くの場所を見る)

(近くの場所を見る)のボタンを押すと、選択しているアカウントの近くお店が絞り込まれます。

インスタTOP -> インスタ検索TOP -> 地図検索(近くの場所を見る)


4-4.地図検索(このエリアを検索)

(このエリアを検索)のボタンを押すと、地域の近くのお店が表示されます。

インスタTOP -> インスタ検索TOP -> 地図検索(このエリアを検索)


5.音源検索

5-1.音源一覧

入力した音源一覧が表示されます。アーティスト名でも曲名でも検索できます。

インスタTOP -> インスタ検索TOP(音源)


5-2.音源詳細

選択した音源のリールが表示されます。ここから選択した音源のリール投稿ができます。スクロールすると「音源を使う」ボタンの文字が非表示になり、一覧表示を妨げないように配慮されます。

インスタTOP -> インスタ検索TOP(音源) -> 音源詳細


5-3.保存済み音源

音源を保存すると、リール投稿時の音源の選択時に、保存された音源が表示されるようになります。
投稿時の場合、「音源」と呼ばずに「ミュージック」と名称を変えています。

インスタTOP -> インスタ投稿(リール) -> 音源選択

さいごに

インスタのような膨大な投稿を探すとなると、検索するにしても検索方法が多岐に渡っています。
サービスに検索機能を用いる時は参考にしてみてください。


この記事が気に入ったらサポートをしてみませんか?