スマートフォンの特性を生かすためのHTML5適用
Yahoo! JAPANがスマートフォン向けに提供している各種コンテンツの内、現時点でHTML5に対応しているのは「Yahoo! JAPAN トップ」「Yahoo!検索」「Yahoo! Japan」の3タイプのものだ。Yahoo! JAPAN トップの画面デザインに関しては、これまで何度かに渡ってユーザーの使い勝手を高めるための改善が積み重ねられてきたが、2012年2月8日に行われた最新のリニューアルでは表示速度の改善を最優先課題とし、そのためにデザインも大幅に変更されている。リニューアル前と比べ、トップ画面の表示にかかる時間を約3分の1にまで短縮したという。
では、Yahoo! JAPANでは具体的にどのようなポイントに気を付けてトップ画面を設計しているのだろうか。是井氏は3つのポイントを挙げる。
「既知のデザインを積極的に利用する。デバイスの特性をよく知る。そして、HTML5についてよく知る。どれも当たり前のことだが、こうした基本的なポイントに立ち返ってUIの設計に取り組んだ」
「既知のデザインの利用」とは、それぞれのデバイスにもともと備わっているUIの見た目や操作感を取り入れることで、ユーザーが直感的に操作できるよう配慮することを指す。
また「デバイスの特性を知る」とは、スマートフォンのデバイスとしての特性を考慮したデザインを行うということだ。例えば、スマートフォンの画面に一度に表示できる情報量は限られているため、画面サイズはもちろんのこと、場合によってはコンテンツの量も思い切って削る。また、スマートフォンならではのタッチ操作が快適に行えるよう、画面上の各部品に対応するタッチ領域の大きさを決め、それをもとに各部品の配置や行間などを割り出している。
そして「HTML5についてよく知る」こと。上で挙げたようなUIの要件を満たすためには、HTML5のどの機能が有効かを十分に検討する必要がある。Yahoo! JAPANでは主に、「Local Storage」「Touch Events」「History API」「GeoLocation API」の機能を活用している。また併せて、CSS3の「CSS Transform」と「CSS Gradient」の機能も使っている。
例えばLocal Storageは、各種の履歴情報や設定情報を保存するために利用している。Local Storageの仕様では文字列データしか保存できないため、構造化データはJSON化した上で保存している。また、画像データなどバイナリデータもBase64化した上で、キャッシュデータとして自動的に保存する仕組みを作り込んでいる。またCSS TransformやCSS Gradientを使うことで、スマートフォンが備える描画機能をフル活用した滑らかな画面表示も実現しているという。
ちなみに「Yahoo!ニュース」「Yahoo!ショッピング」「GyaO!」といった各種サービスの画面は、トップ画面とは異なる設計が施されている。これら各サービスは、その土台となる共通テンプレートシステムを適用し、その上に各サービス特有の機能を載せる形で実装されている。
このテンプレートは、HTML5で実装された基本テンプレートと、モジュール動作や機種別差異の吸収のためのJavaScriptコード、そして共通ヘッダや検索ボックスなどのモジュールパーツにより構成される。HTML5の技術が採用されているのは、この中の主に基本テンプレートの部分であり、HTML5マークアップとWeb Storage、そしてCSS3が使われている。また、各サービス特有の機能を実装するために、GeoLocation APIやCanvas、Offline Web Applicationなどの機能も使われている。
