記事詳細 1件表示

スマートフォン版Yahoo!検索の作り方 第3回:UI実装編 - 共通UIの部品化と再利用

2011年7月 5日 11:45

こんにちは、Yahoo!検索 制作チーム 実装担当の古市です。

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

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

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

に続きまして、今回は実装編になります。


以下の検索窓をご覧ください。

いかがでしょうか?

デザインに統一感があり、さほど違和感を感じずに利用できそうではありませんか?

このように、スマートフォン版Yahoo!検索では「見た目大体おなじ、使い方大体わかる」を目指しています。

Yahoo! JAPANは多種多様なサービスがあるため、検索機能のみに着目した統一化はできません。ビジュアル・デザイン編で説明したように、機能統一を図りつつも、サービス独自のコンテンツ表現が生かせるよう、機能と表現のバランスを考慮し、使い勝手を最大限に保てる「標準仕様」を設けています。

今回は実装編ということで、「いかに標準仕様を守りつつ、効率的に実装を行えるか」という視点でお届けします。

ポイントは「再利用」です。

部品化して再利用

「標準仕様」はUI設計、ビジュアル・デザインだけでなく、実装工程にも存在します。

HTMLのマークアップであったり、CSSのスタイリングであったり、はたまたアニメーションや、触った感じの感覚であったり、そういったものにも定義されています。

Yahoo!検索では「標準仕様」を厳守し品質を保つ為、検索機能に関するものを「共通UI」と定義し、部品化して「再利用」しています。

部品化された「共通UI」について、ブログ検索と知恵袋検索のページ送りの実装をもとに、ご紹介します。

ブログ検索

知恵袋検索

この2つページ送りは、見た目は違いますが、ページ送りの仕様(振る舞い)と要素の配置は「標準仕様」として定義されています。

表示させる要素と、その挙動は一致しており、デザインも検索上の要素と、それぞれのサービスのテイストを考慮したものとされています。

実装コード(HTML)は同一のコードを持ち、デザイン上の差異は、部品化されたUIパーツ内で、それぞれの要件に応じて調整されます。

全ての部品化された共通UIは、サービスごとのIDにより内部で出しわけを自動的に行い、必要最小限のコードのみの状態となり、さまざまなサービスで「再利用」されます。

こうすることで「標準仕様」へ忠実に従って、個々の部品の管理を行うことで全てのサービスの実装において、文書構造の水準、ページ表示のパフォーマンス&開発効率をそれぞれ損なうことなく、お客様へ最適なUIを提供することが可能となっています。

手順を自動化して再利用

実装手順においても、「再利用」は行われています。

表示を高速化する為には、以下のような施策があります。

  • CSSやJavaScriptの徹底的なコード圧縮(コメントの削除、記述の簡略化)
  • 画像ファイルの適切な圧縮
  • CSS Sprite
  • firstbyteを利用して画像の先読み
  • dataスキームの利用(画像データのBase64変換)

端末の環境や条件にもよりますが、これらを行うことで、HTTPリクエスト数、ファイル容量などの削減に効果が期待でき、表示速度の改善につながります。

ただし、この手の作業は地道に手作業で行っていくととても大変です。その為、常に最善の状態を維持できるように、変換作業や圧縮作業が自動化される環境を用意し作業手順を「再利用」しています。


これらの取り組みにより、パフォーマンス計測ツールの計測結果において文書構造水準や、パフォーマンスに対して高い評価も確認されています。

計測ツールのひとつ【モバイル版YSlow】の計測結果ではパフォーマンス水準が対象サービスで総じて高い評価となっています。

【モバイル版YSlow】を利用して計測評価

【モバイル版YSlow】を利用して計測評価を行っています。
1. http://developer.yahoo.com/yslow/mobile/ にアクセスしてそのページをbookmark
※その際にURLの「http://developer.yahoo.com/yslow/mobile/#」を削除
2. 測定したいサイトにアクセスしてYSlow bookmarkletを起動

※【モバイル版YSlow】は現在ベータ版です

このようにYahoo!検索では「標準仕様」にのっとった「共通UI」の部品化により、想定した水準のUIの設計、デザイン、実装の「再利用」を行いスマートフォンへの最適化を行っています。

しかしながら、スマートフォンは現状でもOSの違いや、処理能力の違い、画面サイズの違い、入力装置の違いなどいろいろ考慮すべき点もあり、また、今後新たにさまざまな端末が発売されてきます。端末ごとの違いはより拡大されていきますし、タブレット端末もあり、パソコンとの境界も曖昧になっていくと予想さ れます。

今後も引き続き、さまざまな端末へ向けた最適なUIをご提供すべく、まだまだ検討を重ねる必要があります。「見た目大体同じ、使い方大体わかる」Yahoo!検索を、より快適にご利用いただけるよう、取り組んでまいります。

ご期待ください。



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

カテゴリー:Yahoo!検索

当ブログについて

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

ブログ内を検索

ページのトップへ

ブログトップ > スマートフォン版Yahoo!検索の作り方 第3回:UI実装編 - 共通UIの部品化と再利用