2011年6月の記事一覧

dic_banner_180_120_FIX.png

Yahoo!辞書アプリはこちらからダウンロードいただけます。(外部サイト)
iPhone/iPod touch版(App Store)
Android版(Android Market)


こんにちは。Yahoo!辞書担当の風間です。
Yahoo!辞書のiPhoneアプリが国内累計100万ダウンロードを突破しました!
多くの方にご愛用いただき、心から感謝いたします。

mzl.odvfhfug.320x480-75.jpg mzl.gzsrsjkm.320x480-75.jpg

まだダウンロードしていない方も、ぜひ一度お試しください。
App Storeでアプリをダウンロード(外部サイト)


さて、もはやiPhone/iPod touchでもオンライン辞書の定番といえるYahoo!辞書ですが、先日、Android版も提供を開始しました。Android端末をお使いの方もぜひ、Yahoo!辞書をご活用ください!
Android Marketでアプリをダウンロード(外部サイト)

今後ともYahoo!辞書をよろしくお願いいたします。


こんにちは、スマートフォン版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! 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!検索プロジェクトの竹内&ナカム&佐藤です。

プロジェクトでは、お客様が欲しい情報へより早くアクセスできるようにするにはどうしたらよいか、いくつものライブテストを実施し、結果を分析して日々の改善に役立てています。

今回はパソコンで普段ご覧になっている検索画面を、iPadでより見やすくレイアウト調整を行いました。

1. 拡大縮小の動作をより少なく

検索結果をiPadで表示すると全画面が収まりますが、文字が小さくなってしまい拡大しないと内容が分かりづらくなります。
横幅を固定ではなく、iPadの表示サイズに合わせて伸び縮みさせることで、拡大しなくてもよりコンテンツ全体が見渡せるようにしました。

2. 文字サイズを大きめにして読みやすく

上記と理由は通じるところはありますが、iPadでパソコンのサイトを閲覧すると全体的に文字サイズが小さめに表示されます。
これまでは、見やすい文字サイズになるまで画面の拡大縮小を繰り返す必要がありました。
文字サイズを全体的に大きくすることで、それらが多少解消されたかと思います。

3. リンクをタップしやすく

iPadではリンク先に行く場合、指でタップする必要があります。
タップするときに、パソコンであればマウスでピンポイントにテキストリンクを押せるのですが、指だと間違って他のリンクを押してしまったり、なかなか目当てのリンクを押せない状態になります。
タップのしやすさを考慮し、文字と文字の間(行間)を大きめにしました。
行間以外でもリンクがある部分は余白を調整しています。

iPad向け検索結果画面

今後も改善を続け、よりよい検索結果を提供してまいります。
どうぞご期待ください。

こんにちは、百科事典担当の百戸です。

普遍的な事象を扱うYahoo!百科事典。いつも同じ言葉を調べられているのでは......?
と思われることが多いのですが、実際は世の中の出来事や季節により、調べられる言葉は変化します。

百科事典でよく参照されている項目を振り返ると、その月の出来事がよくわかるといっても過言ではない!?
それでは2011年の5月を振り返ってみましょう。

季節編

まずは季節関連の項目。

・5月1日 メーデー

・5月5日 端午の節供

それぞれ、5月1日、5月5日の当日、参照数がトップになっていました。

時事編

一方で、ニュースの影響で参照回数が多かったと思われる項目もあります。 ※日付は参照数が多かった日です。

一般相対性理論:5月6日~5月8日
航空宇宙局(NASA)の人工衛星により、アインシュタインの一般相対性理論が実証されたというニュースが流れた影響のようです。

チタン(土星の衛星):5月9日
土星最大の衛星である「チタン」別名「タイタン」。
表面の窒素が、40億年前の隕石(いんせき)衝突でできたものである可能性が高いとの研究成果を東京大学が発表しました。

バベルの塔:5月13日
3万冊の本でできた「バベルの塔」が、ブエノスアイレスに登場したそうです。

ピラミッド:5月27日
NASAの人工衛星が撮影した赤外線画像からエジプトの地中に埋もれたピラミッド17基が発見されたそうです。

※ピラミッドについては、先月追加した世界遺産の動画も人気です。


pyramid.PNG


キーウィ:5月28日
ニュージーランドで白いキーウィが誕生。白いキーウィが生まれる確率は、なんと1万分の1!

ル・コルビュジエ:5月28日
国立西洋美術館を設計したフランスの建築家。
世界遺産登録をめざしていたものの、ユネスコの諮問機関から「不記載(世界遺産に登録することはふさわしくない)」とする勧告されたことが報道され、興味を持った方が多かったようです。

ニュースで出てきた言葉が気になったときには、ぜひ百科事典をご利用ください!

これからもYahoo!百科事典をよろしくお願いいたします。


当ブログについて

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

ブログ内を検索

ページのトップへ

ブログトップ > 月別アーカイブの一覧>2011年6月の記事一覧