「モバイルサイト制作に見る,次世代ウェブのカタチ ~One Web~ 」イベントレポート(後編)

この記事を読むのに必要な時間:およそ 3 分

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のアプリケーションキャッシュなどによる高速化を検討しているとした。

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入