こんにちは、スマートフォン版Yahoo!検索 制作チームのキムラナオタカです。本日リリースされた、スマートフォン版Yahoo! JAPANにあわせ、6月14日にリリースしたスマートフォン版Yahoo!検索を改修しました。

改修前

今回の改修では、検索窓のデザインを統一しています。

改修後

さて、これから数回にわたり、「スマートフォン版Yahoo!検索の作り方」というタイトルで、実際の制作・開発に携わったメンバーが、それぞれの領域で、スマートフォン版Yahoo!検索の裏側をご紹介します。第1回は、UI設計編です。

こんにちは、スマートフォン版Yahoo!検索のUI設計を担当したルノミ マヤタです。

先日こちらのブログで紹介した「スマートフォン版Yahoo!検索　リニューアルのお知らせ」に関して、キーワードを入力して検索する部分を図も交えて詳しく説明させていただきます。

検索モード

まず、検索窓をタップしてすると下の図のように画面が切り替わり、ここでキーワードを入力することができます。この画面を私たちは「検索モード」と呼んでいます。検索モードで提供している主な機能は検索履歴、検索候補、条件指定、検索設定です。

検索履歴と検索候補

検索履歴は検索窓にキーワードを入力されてない状態の時、過去に検索したキーワードが最大10件表示されます。

検索候補はキーワード入力を開始すると、これまで表示されていた検索履歴にかわってキーワードに対する候補が表示されます。

検索履歴と検索候補は表示件数が多いとキーボードに隠れている場合がありますがスクロールすることで全体を見ることができます。
キーワードはタップと長押しの2つの入力を受け付けます。タップすると検索結果が表示され、長押しした場合は検索窓へ追加されますので、引き続きキーワードを入力することができます。

隠れているキーワードを見る

タップして検索結果を表示

プレスして検索窓にキーワードをセットする

この検索候補はリニューアルする前は背景色が黒で白文字、1行に2つずつ並べて最大6つのキーワードを表示していました 。
この見慣れないUIはお客様にわかっていただけているのだろうか？　プロジェクト内で検討した結果、PCに寄せたUIにすることにしました。PCで見る検索は検索窓の下に候補などのキーワードが出るのが今では当たり前のUIだと思います。スマートフォン向けに最適化しつつも、こういった学習効果をねらっています。

条件指定と検索設定

さらに条件指定と検索設定を利用する場合は検索窓上のボタンをタップしてください。下からスライドして画面が表示されます。

条件指定ではキーワードに対する条件の指定や対象とする言語を指定したり各種絞り込みなどができます。
検索設定では検索履歴や候補の利用する、しないの制御や検索結果の表示件数の変更、アダルトフィルターの設定などができます。

リニューアルする前のウェブ検索では「検索設定」を検索結果ページの下部に配置していました 。
しかしこの2つの機能は検索という行動をしている時に近くにあったほうがより便利ではないかということで検索モードの中に配置することになりました。リニューアルを行った8サービスでは同じ場所にボタンが表示されます。

検索モードの主な流れは以上となります。
今回のリニューアルでは検索モード以外のさまざまな機能においてもUIの改善を行いました。新しい機能はスマートフォン向けに最適化を行い、既存の機能はさらに使いやすくなるように検討し、さらにこれらの機能のおもてなしを統一化することによってヤフーが提供するさまざまな検索結果においてお客様に一貫した操作性を提供することを目指しております。

今回、自信を持って皆様に新しいYahoo!検索をお届しましたが、もっと改善して便利な検索をお届したいとプロジェクト一同考えております。 そのためには皆様の声が必要です。これからもYahoo!検索をよろしくおねがいします！

Tweet

スマートフォン版Yahoo!検索　リニューアルのお知らせ

スマートフォン版Yahoo!検索の作り方

第1回：UI設計編

第2回：ビジュアル・デザイン編

第3回：UI実装編 - 共通UIの部品化と再利用

第4回：UI実装編：JavaScript