記事詳細 1件表示

iPhone版Yahoo!検索のUIをリニューアルしました。

2009年4月20日 20:05

こんにちは。Yahoo!検索 制作チームのN.K.です。
昨年リリースしたiPhone版Yahoo!検索が、
このたび1年ぶりにフルリニューアルされました。
この機会に、ぜひご利用ください。

Yahoo!検索
http://search.yahoo.co.jp/

※iPhohe/iPod touchでアクセスしてください。最適化された画面が表示されます。
※この画面をブックマーク、あるいはホーム画面に追加しておくと便利です。

各制作担当から、今回の改善点や、裏話をご紹介させていただきます。

設計・ビジュアルデザイン

情報設計担当のS.S.です。
ビジュアルデザイン担当のK.M.です。

今回のリニューアルでは以下のポイントを重視してデザインをおこないました。

1.表示要素の最適化
パソコンのブラウザと、iPhoneでウェブ検索を利用するシーンの状況はかなり異なります。
さまざまな場所でサッとiPhoneを取り出し、パッと探すというような使い方が多いのではないでしょうか?
欲しい情報がサッと閲覧できるよう、表示要素をよりシンプルにしiPhoneに最適化しました。
その結果、スクロールなしの状態で以前のデザインよりも無駄のない情報の表示になっています。

iPhone版Yahoo!検索iPhone版Yahoo!検索

2. 操作性
今回のリニューアルではタッチインターフェースに、より特化したデザインをおこなっています。
リンクやボタンなどタッチする部分の大きさ、幅を調整し、スムーズな操作性を実現しました。

3. 可読性
ウェブ検索結果のデザインでは、テキストの読みやすさがとても重要です。
今回は、iPhoneの表示幅に合う読みやすい文字の大きさと余白の改善をおこないました。

ウェブデベロップメント

ウェブデベロップメント担当のM.T.です。

ウェブデベロップメントとは、インターフェース設計に基づいてブラウザで表示させるためのコードをHTMLとCSS、JavaScriptなどで書くことです。

ウェブデベロップメントにおいて、特にがんばった2点を以下にあげたいと思います。

1. コードの簡易・軽量化
コーディングの動作確認の対象が、iPhone/iPod touchに搭載されているsafariブラウザのみになります。
よって、複数のブラウザに対応しなくてよい、safariで使用できる進んだ技術であるCSS3を使うことによって以下を実現することができました。

表示速度アップ...CSSでの装飾用のHTMLタグの削除
技術的な出しわけをし易く...CSS3の採用

2. テキストフィールドのクリアボタン機能の実装
検索したいテキストを入力すると、テキストフィールドの右端に「X」ボタンが表示されます。これを押すと中のテキストを消去できます。
テキストを全選択してdeleteボタンで消せないiPhone/iPod touchでは、便利な機能になるのではないでしょうか。
この機能はJavaScriptで組んであるのですが、自分で作成したものがリリースされるのは初めてなので気合をいれて書きました。:)

iPhone版Yahoo!検索

ポイントとしては下記のようになります。

使いやすさを考慮...アクションに対する挙動を細かく検討
ほかの機能のJavaScriptと競合しないように対応...名前空間、クラス化の採用

iPhone/iPod touchを持っている方は、ぜひYahoo!検索を使ってみてください!

最後に、コーディングは目に見えない部分なので地味な印象がありますが、Yahoo!検索が多くの皆様に気持ちよく使っていただけるように、ウェブデベロップメントの面からよりよいものにしていきたいと思っています!

用語説明(Yahoo!辞書)
HTML
CSS
JavaScript
タグ


いかがでしたか?

今後も改善を加えて、iPhoneで一番使いやすい検索結果を提供していきます。
ご期待ください!

スタッフ募集
Yahoo!検索では、さまざまなデバイスで、使いやすい検索結果をご提供すべく、現在スタッフを大募集中です。Yahoo!検索のようなサービスを、一緒に作っていきませんか?

Yahoo! JAPAN - スタッフ募集情報
http://hr.yahoo.co.jp/

職種は「ウェブデザイナー」になります。「希望サービス」欄に「Yahoo!検索希望」とご記入ください。

カテゴリー:Yahoo!検索

当ブログについて

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

ブログ内を検索

ページのトップへ

ブログトップ > iPhone版Yahoo!検索のUIをリニューアルしました。