7月2日に開催された「モバイルサイト制作に見る、次世代ウェブのカタチ ～One Web～」のレポート後編をお届けする（前編のレポートはこちら⁠）⁠。

スマートフォンのUX

Yahoo! JAPAN株式会社の藤木 祐介氏と伊東 宣之氏より、実際にスマートフォン版Yahoo! JAPANの制作で培ったノウハウやTipsを解説した。

最初に、伊東 宣之氏よりスマートフォン版のYahoo! JAPANの変遷から同サイトのユーザーインターフェース設計について解説した。

同サイトは、2008年7月にiPhoneの発売と同時にiPhone版として立ち上げ、その後2010年4月にAndroid対応を行った。そして、つい先日の2011年6月にデザインを強化してリニューアルを行ったという。その際のポイントとして、以下の4つを挙げた。

• 既知のデザインを積極的に利用する
• デバイスの特性を知る
• HTML5を知る
• 実機での再検証

1つ目の「既知のデザインを積極的に利用する」は、慣れ親しんだ従来のデザインを再利用することによって直感的な操作ができるようにすることである。例えば、ユーザーインターフェースには、iPhoneに似たものを使用することやパソコン版のYahoo! JAPANや各種サービスで既に使われているデザインを積極的に再利用することなどを挙げた。

2つ目の「デバイスの特性を知る」は、スマートフォンのスクリーンサイズが小さいことを考慮する必要があることやタッチインターフェースによる操作に最適化しなければならないことである。例えば、タッチ領域としてボタンをタッチしやすいように高さを最小29pxにすることや実際のボタンの見た目よりもタッチ領域を大きくすることなどを挙げた。

3つ目の「HTML5を知る」は、設計者側でもHTML5の主要なテクノロジーを理解して設計に組み込み、積極的に利用して実装時のパフォーマンスをあげることであるとした。

4つ目の「実機での再検証」では、片手持ちの親指だけ操作可能であることや精緻な入力や両手持ちを要求しないかなどの観点から実機で再検証し、見直す必要があることを述べた。

続いて、藤木 祐介氏より実際のユーザーインターフェースの実装テクニックについて詳細に解説した。

まず、同サイトで利用されている要素技術として以下のものを提示した。

HTML5

• Local Storage
• Touch Events
• Geolocation API

CSS3

• CSS Transform
• CSS Gradient

Local Storageは、ブラウザに大容量のデータを保存することができる仕様である。同サイトでは、各種履歴や設定を保存しておくことや、JavaScriptのコードをキャッシュして高速化していることなどを説明した。また、Touch Eventsでは、タッチによる操作で発生するイベントとマウスによる操作で発生するイベントが違うため、タッチイベントをマウスイベントに変換して利用するテクニックなどを紹介した。CSS Transformは、アニメーションを表示するCSS3の仕様である。ハードウェア（GPU）による支援がうけられるため、YUI（Yahoo! UI Library）やjQueryといったJavaScriptライブラリを使ったアニメーションよりも高速で動作することなどを実際のサンプルを交えて解説した。CSS Gradientは、グラデーションを表示するCSS3の仕様である。画像を使わずにiPhone4などの高解像度のデバイスでもなめらかに表示できることや、容量の削減にも繋がるメリットがあることを説明した。その他、カルーセルやON/OFFトグルスイッチなどの個別のユーザーインターフェースやCSS Transformを使ったスライドページングなどのページ遷移などについて幅広く解説した。

今後の対応として、iPhone5への対応やYUIやjQueryのモバイル対応、HTML5のアプリケーションキャッシュなどによる高速化を検討しているとした。

スマートフォンの徹底検証とサイトパフォーマンス

次に、NHN Japan株式会社の馬場 宣孝氏よりスマートフォンのパフォーマンスの検証とその改善方法を詳細に解説した。

現在は、新しいデバイスや新しいOSが次々とリリースされている状況であるとし、それぞれの環境で共通して利用できるWeb標準技術を使ってアプリを作る時代だとした。しかし、Webアプリはネイティブアプリと比べて応答性で大きく劣っており、スピードが重要であると述べた。また、モバイル分野では回線が細くて不安定なことやハードウェアのスペックが低いなどを挙げ、よりハイパフォーマンスであることが求められていると述べた。

実際にWebサイトを表示する場合に時間が掛かっているのは、CSSやJavaScript、画像の表示である。パフォーマンスをあげるには、これらを改善していくことが重要だと述べた。ここでは、JavaScriptを除くCSSと画像の表示について詳細を解説する。

CSSの改善策としてまず最小構成のテンプレートを作成してそれを流用していくことで、デザインや機能をシンプルにすることを挙げた。同じようなスタイルやちょっとした差異で重複したスタイルを定義しないようにスリムにし、かつサイト全体の統一感を図ると述べた。また、細かなテクニックとしてキャンペーン対応などでスタイルを追加する場合、外部ファイルにするのではなくインラインでスタイルを書くことで通信量を減らすことができると説明した。

次に、画像の改善策として主に3つのテクニックがあると述べ、それぞれの特徴と比較結果を解説した。

• CSS Sprite
• dataURI
• CSS3

CSS Spriteは、複数の画像を1枚の画像にまとめて、CSSで画像の表示位置と表示範囲を変えることによって個々の画像を表示する手法である。画像ファイルへのリクエスト数が減らせることがメリットで、既に広く使われている。逆に画像ファイルの管理が複雑になることなどがデメリットであると説明した。

dataURIは、画像ファイルをBase64形式の文字列として扱う手法である。Base64形式の文字列をCSSに含める形となるので画像を表示するためのリクエストが発生しない。また、Base64形式にエンコードすると画像サイズが3割ほど増加してしまうが、CSSをgzip圧縮にて配信していれば問題ないレベルであると説明した。

CSS3は、border-radiusやgradientなどのCSS定義を使って画像を作成する手法である。CSS3によって表現力が向上したため可能になったと述べた。複雑な形状の画像は作成が困難であるとしながらも、非常にパフォーマンスが良いことやベクターデータであることから高解像度のデバイスやスクリーンサイズの差異にも対応できることなどを説明した。

これらの手法は、実際のパフォーマンス測定の比較結果からCSS3、dataURI、CSS Spriteの順で高速であると述べた。また、これらの手法の適用が難しい画像についてもサイズが35KB以下であればパフォーマンスに大きな差異がないことなどを計測結果とともに提示した。

そして、パフォーマンス改善のためのワークフローとして「計測する」,「計測結果を周知する⁠」⁠、「⁠継続的に計測する」の3つが必要と述べた。Webサイトの変化に対して、表示速度やファイルサイズ、ファイル数など明確な基準を元に評価して周知し、改善する。それらを継続的に取り組むことが重要であると説明した。その他にも画像容量の圧縮やタグの種類によるパフォーマンスの違いなどを解説した。

スマートTVへのアプローチと制作

最後に、Opera SoftwareのDaniel Davis氏より、スマートTVと呼ばれるインターネットに接続可能なTVに対してWebサイトを制作する際の実践的な手法を解説した。

現在、世界でWebにアクセスできるTVは約8%である。しかし、5年後には約半数のTVがWebにアクセス可能になるという予測を紹介した。また、BRIC（ブラジル、ロシア、インド、中国）と日本では急速にスマートTVが普及していると述べた。スマートTVは、他のデバイスにはない特徴として、友人や家族と一緒に鑑賞するようなSocialな点と、何かの必要に迫られて情報を探すのではないLuxuryな点がある。そのため、従来のデスクトップやスマートフォンとは違った形のサービスが生まれてくるかもしれないと述べた。

実際にスマートTVに対応したWebサイトを作る際には、以下の点に注意しなければならないとした。

• 文字入力が難しい
• ナビゲーションが難しい
• テキストが読みづらい
• ページロードが遅い

多くのスマートTVでは、フルキーボードやトラックパッドを持っていない。また、赤外線による入力で遅延が発生するため文字入力が難しいこと。スマートTVの主要なナビゲーションの手段であるD-pad（上下左右のキーを持つ）では、思ったところにカーソルが移動しないためナビゲーションが難しいこと。TVの画面は一見大きいように思えるが、実際は離れたところから見ているので非常に小さく見える。そのため、スマートフォンのようにテキストが読みづらいこと。ハードウェアが低スペックのためページロードが遅いことなどを説明した。そして、これらの特徴はモバイルWebと非常によく似ており、同じ課題があると述べた。そこで、スマートTVでこれらに対応するための4つのチャレンジを提案した。

• 文字
• 色
• ナビゲーション
• レイアウト

1つ目は、文字である。文字を大きくする手段はいくつかあるが、font-sizeを書き換えるのがもっとも妥当であるとし、Media Queriesによる手法を紹介した。スマートTVは、ユーザーエージェントが公開されておらず、またメディアタイプも仕様上は「tv」が用意されているが使われていないため、スクリーンサイズによる判別が必要である。スマートTVは、1920px×1080pxもしくは1280px×720pxの2種類で判別できると解説した。

2つ目は、色である。TVでは、ある色がそのまま表示されるとは限らない。例えば同じ番組や映画でもTVによって見え方がまったく違う。そのため、「⁠青のボタンを押してください」など、色によるナビゲーションに頼らないことが重要であると述べた。また、TVにはデフォルトでは文字や線などのふちを白で囲むhalo effectという仕様がある。そのため背景色に白を使うとちらつくので、背景色には白以外の色を使うことを推奨した。

3つ目は、ナビゲーションである。D-padによってカーソルがさまざまなボタンやリンクに移動するが、通常ではdiv要素などで作成したボタンにはカーソルが移動しない。その場合、tabindex属性を追加し、"0"を指定するとカーソルが移動するようになる。また、CSS3のnav-rightやnav-leftなどでカーソルの移動先を指定できるテクニックを、デモを交えて解説した。

4つ目は、レイアウトである。TVが実際は画面が小さいことは先に述べたが、限られたスペースを有効に利用するために不要なものを非表示にすることを解説した。

最後に、スマートTVでは実際の見た目や使い勝手を実機でチェックしなければ想像できないことが多いため、本物のスマートTVで確認することが必須であるとした。