記事詳細 1件表示

スマートフォン版Yahoo!検索の作り方 第1回:UI設計編

2011年6月28日 19:28

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

001.png 改修前

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

002.png 改修後

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


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

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

検索モード

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

01.jpg

検索履歴と検索候補

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

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

02.jpg

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

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

04.jpg

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

05.jpg

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

06.jpg

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

07.jpg

条件指定と検索設定

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

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

08.jpg

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

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

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



スマートフォン版Yahoo!検索 リニューアルのお知らせ
スマートフォン版Yahoo!検索の作り方
第1回:UI設計編
第2回:ビジュアル・デザイン編
第3回:UI実装編 - 共通UIの部品化と再利用
第4回:UI実装編:JavaScript

カテゴリー:Yahoo!検索

当ブログについて

Yahoo!検索スタッフブログは、Yahoo!検索の新しいサービスのお知らせ、検索データの分析レポート、検索関連の読み物コンテンツ情報などをお届けしています。

ブログ内を検索

ページのトップへ

ブログトップ > スマートフォン版Yahoo!検索の作り方 第1回:UI設計編