検索ボックスはもっと目立つ位置にあっていい

2009年5月12日

Yahoo!ニュースで先日、検索ボックスがWebページの目立つ位置に移動するという大胆なリニューアルが行われました。

検索ボックスは多くのサイトで、比較的邪魔にならないところに配置されていることが多いものです。ところが先日、「Yahoo! Japan Tech Blog」にYahoo!ニュースの検索ボックス位置が変更になったというエントリ「Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ (Yahoo! JAPAN Tech Blog)」が掲載され、左上の目立つところに移動したことが報告されました。

検索ボックスは、リニューアル前はページの右側にありましたが、アメリカのYahoo!が行ったアイトラッキングの調査で、利用者がニュースを読むときには逆N字型の目線でニュースを読んでいることが分かったので、この調査結果を参考にし、より存在に気づきやすい左側に移動しました。

上記のエントリから図を引用します。左が変更前、右が変更後です。

fig 左が以前のYahoo!ニュース。検索ボックスが右上にあった。右が新しいレイアウトになったYahoo!ニュース。ロゴの下の目立つところに検索ボックスが移動している

僕自身、Webページのどの位置に検索ボックスを置くのかは、Webサイトを設計するたびに悩んでいます。便利な位置に置いた方がいいのではないか、と思う半面、使わない人にとっては目立つところに置いても邪魔になるだけです。それに、Webページごとに検索ボックスの位置が変わってしまうとユーザーインターフェイスの統一性に欠けてしまいます。

多くのサイトを見てみても、検索ボックスは右上やサイドバーの中など、比較的無難な場所に収まりがちです。このPublickeyでも検索ボックスをもっと使いやすいものにしたいと考え実験的にインクリメンタルサーチ機能を組み込んでいますが、それでも位置はいろいろ考えて右上になってしまいました。

それだけに、今回のYahoo!ニュースが目立つ位置に検索ボックスを持ってきたことは大胆なレイアウト変更のように感じています。と同時に、検索ボックスはもっと利用者に使ってもらっていいものとして積極的に前面にだしてもいいのだというYahoo!のオピニオンのようなものを感じました。次回、Publickeyのリニューアルの時にも検索ボックスを大胆な位置に移動するよう検討してみたいと考えています。

関連記事 on Publickey

あわせて読みたい

編集後記



タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本