色んなサイトの検索ボックスのUI/UXを本格的に調査してみる②

概要

前回の、こちらの記事に引き続き第2弾です。

様々なWEBサイトにおいて、検索ボックスのUI/UXについて調査を行い、WEBサイト作成のためのUI検討の参考になる様にまとめていきます。

注意点として、2023年8月時点の調査のため、今後機能が追加されたりUIが大きく変わる可能性はあります。

制限

• 調査で使用する端末はPCで統一します。（スマホやタブレットによるUI/UXの観点は、PCとは意図が変わってくるのため考慮しません。）
• 同サイト内に検索ボックスがある場合は、1つに絞り調査します。
• 検索ボックスは、キーワード検索の部分だけを調査対象とします。（フィルター機能などは考慮しません）

ニュース系

1. Yahoo!ニュース

URL: https://news.yahoo.co.jp/

読み取れるUI/UXの内容としては以下の通りです。

UI/UX	詳細
虫メガネアイコン	あり
プレースホルダ	あり
選択時	特になし
入力中	サジェストが表示、選択することができる
検索実行	Enterキー または　虫眼鏡アイコン
ブラウザバック	前回の検索に戻れる
検索内容	タイトルと記事の文章
表記ゆれ	対応している。例）「たいふう」→「台風」

調査結果

全文検索機能やサジェスト機能はありましたが、今まで調査したサイトの中では機能が少なめでした。
たまに何年か前のニュース記事を見たくなりますが、ニュースサイトとしては、最新の記事を見せたいのと、万人うけするシンプルなUIになっているのかと予想します。

2. livedoor NEWS

URL：https://news.livedoor.com/

読み取れるUI/UXの内容としては以下の通りです。

UI/UX	詳細
虫メガネアイコン	あり
プレースホルダ	あり
選択時	検索履歴を表示？
入力中	特になし
検索実行	Enterキー
ブラウザバック	前回の検索に戻れる
検索内容	全文検索
表記ゆれ	対応していない

調査結果

やはり、Yahoo!ニュースと同様に検索ボックスの機能が少なめでした。
ニュースサイトの検索ボックスの特色なんでしょうか。

音楽系

3. レコチョク

URL：https://tabelog.com/

読み取れるUI/UXの内容としては以下の通りです。

UI/UX	詳細
虫メガネアイコン	あり
プレースホルダ	あり
選択時	特になし
入力中	サジェストが表示され、選択することができる
検索実行	検索ボタンとEnterキー
ブラウザバック	前回の検索に戻れる
検索内容	アーティスト、商品、番組名
表記ゆれ	対応している。例）「あど」→「Ado」
検索ボックスのクリア	×アイコンでクリアできる

調査結果

音楽系のサイトなのでアイコンもやデザインなど、オシャレでした。
サジェスト表示は、2列で表示される特殊なものでした。使い勝手としては、表示されたサジェストに対してもうちょっと情報が欲しいと感じました。（曲名なのかアーティストなのか、アーティストは誰なのかなど）

販売系

4. Amazon

URL: https://www.amazon.co.jp/

読み取れるUI/UXの内容としては以下の通りです。

UI/UX	詳細
虫メガネアイコン	あり
プレースホルダ	あり
ホバー時	検索履歴のツールチップが表示され、履歴から選択可能
選択時	枠線協調、検索履歴を表示
検索履歴削除	×アイコンで削除可能
入力中	サジェストが表示され、選択することができる
検索実行	Enterキー
ブラウザバック	前回の検索に戻れる
検索内容	不明。タイトルやカテゴリ？

調査結果

検索機能は、検索履歴やサジェストを使っていて分かりやすく使いやすいUI/UXでした。漢字・ひらがな・ローマ字で入力しても、サジェストが機能してとても使いやすいと感じました。
また、プレースホルダに「検索 Amazon.co.jp」と表示されていたのですが、何か戦略があるのでしょうか。分かる方教えていただきたいです。

5. 楽天市場

URL：https://www.rakuten.co.jp/

読み取れるUI/UXの内容としては以下の通りです。

UI/UX	詳細
虫メガネアイコン	あり
プレースホルダ	あり
選択時	特になし
入力中	サジェストが表示され、選択することができる
検索実行	Enterキー
大文字小文字の判別	区別しない
ブラウザバック	前回の検索に戻れる
検索内容	不明。タイトルやカテゴリ？

調査結果

楽天の特徴はサジェスト表示が少し特殊で、通常のサジェスト機能のほかに、同一キーワードでジャンル別に何件か表示されていました。（靴の場合は、「すべてのジャンル」「レディース靴」「メンズ靴」「靴」を表示）

サジェストにPRが表示されていて、そんな使い方があるのかと驚きました。

気になる点としては、「検索履歴がない」「検索ボックスを選択しても強調表示がない」という点です。実際のPV数や検索実行数は、意外と変わらないのでしょうか。気になります。

まとめ

「ニュース系」と「音楽系」と「販売系」の5サイトについて検索ボックスのUI/UXについてまとめてみました。やはり、業種によって特色があるのは面白いですね。

今度、検索ボックスを自作する場合にどのようなことを考慮すればいいかまとめみたいなと思いました。

以上です。ここまで見ていただきありがとうございました。