記事詳細 1件表示

スマートフォン版Yahoo!検索の作り方 第2回:ビジュアル・デザイン編

2011年6月30日 11:50

こんにちは、スマートフォン版Yahoo!検索 ビジュアルデザイン担当のツダとイケムラです。
スマートフォン版Yahoo!検索の作り方 第1回:UI設計編」に続き、「第2回:ビジュアル・デザイン編」では、ビジュアル・デザインの観点から、スマートフォン版Yahoo!検索の裏側についてご紹介したいと思います。


今回のリニューアルでは、次の方針を定め、ビジュアルを設計しました。

  1. 検索結果画面としての機能性
    検索結果の中で見た目、機能が統一されることにより、見つけやすく使いやすい、共通化されたビジュアル
  2. 各サービスとの親和性
    Yahoo! JAPANの多種多様なサービスの検索結果画面でも、画面の中で違和感を感じさせずに自然になじむビジュアル

このように、どのサービスで検索したときも同じような使用感で検索していただけるように、共通した見た目や挙動でありつつも、使いやすく違和感を感じさせない検索結果共通のビジュアルを目指しています。

それでは、検索結果でみかけることの多い、スペル訂正機能を例に、今回のビジュアル改善内容を詳しくご紹介していきたいと思います。
キーワードを間違えて入力した際の「○○ではありませんか?」と表示される機能

スペル訂正機能

speller.png


リニューアル前のスペル訂正機能

まずは、リニューアル前のスペル訂正機能をご覧ください。
(左からYahoo!検索(ウェブ)、Yahoo!検索(画像)、Yahoo!ニュース ニュース検索結果)

speller01.png

同じ機能であるにも関わらず、サービスによってバラバラな表現となっています。
そこで、「検索結果画面としての機能性」と「各サービスとの親和性」を併せ持ったビジュアルにするため、すでに多くの方にご利用いただいているウェブ検索結果でのスペル訂正機能をベースとして、新しいビジュアル作成を行うことにしました。

リニューアル前の、ウェブ検索結果でのスペル訂正機能

speller_org.png

リニューアル前のスペル訂正機能には、次のような問題点もあったため、その点もふまえ、共通となるビジュアルを検討を行いました。

問題点

  • 一番見せるべき検索結果本体よりも、スペル訂正機能のほうが目立ってしまっている。(機能性の問題
  • 色味がウェブ検索結果の背景色に合わせた薄い青色になっており、他サービスに導入した際に違和感が生じるおそれがある。(親和性の問題

検討を重ね、いくつかのビジュアル・モックアップを試作し、最終的に次のような形になりました。

リニューアル後のスペル訂正機能

speller_renew.png

改善点

  • サイズを小さくし、下に表示される検索結果との区別をつける事で、検索結果画面をより見やすくする。(機能性の改善
  • 無彩色のグレーを使うことで、多種多様などのサービスに配置しても主張しずぎず、なじみやすくする。(親和性の改善

それでは、各サービスのリニューアルした検索結果をご覧ください。

web_chie.png

スペル訂正機能は同じ見た目で、かつ、サービスに違和感を与えないようなビジュアルになりました。

もちろん、今回挙げたスペル訂正機能以外にも、検索結果画面に登場する多くの要素に対して検討を重ね、共通のビジュアルを作成し、今回のリニューアルとなっています。

みなさまが、新しくなったスマートフォン版Yahoo!検索を、少しでも使いやすくなったと感じていただければ幸いです。
これからも、Yahoo!検索をよろしくお願いします!



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

カテゴリー:Yahoo!検索

当ブログについて

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

ブログ内を検索

ページのトップへ

ブログトップ > スマートフォン版Yahoo!検索の作り方 第2回:ビジュアル・デザイン編