第2回HTML5ワーキンググループが開催されました。

2012年1月30日に第2回「HTML5ワーキンググループ」が開催されました。このワーキンググループは、2011年9月に月例勉強会「Webサービスから見たHTML5 ―HTML5の現状と今後の展望―」が開催された際、ご好評をいただき、ワーキンググループ化を希望される声もあがったため、設置されたものです。第2回目の開催となった今回は、テーマに高い関心をお持ちの、継続的にご参加頂いている会員の方38名の参加で行われました。


スマートフォン版Yahoo! JapanトップのUI設計と実装について

はじめに、座長の是井氏より、第2回目の活動となる今回は、「スマートフォン版Yahoo! JapanトップのUI設計と実装について」」をテーマに、ヤフー(株)の伊東氏、藤木氏よりご講義頂くとのご紹介がありました。
続けて、ヤフー(株)の伊東氏より、2008年7月に「iPhone版 Yahoo! JAPAN」が リリースされてから現在にいたるまでの変遷をご紹介頂いた後、スマートフォン版サービスのUI(ユーザーインターフェース)を「設計」するためのポイントをご講演頂きました。ポイントとして

1. 既知のデザインを積極的に利用する

  • OS標準のアプリから学ぶ
  • 他のサービスで共通のデザイン
  • ウェブブラウザで見慣れたもの

2. デバイスの特性を知る

  • 端末仕様、ブラウザ機能、接続環境、利用シーン
  • 特性に対して、UIで最適な体験を提供できているか

3. HTML5を知る

  • スマートフォンだからこそ使える技術
  • リッチなインタラクションで快適な操作性を実現させる

4. 実機で評価・修正

  • 成果物を実機で試す
  • 違和感・使いづらさをとりはらう

といったあたりを、スマートフォン版Yahoo! Japanの豊富な実例を交えながらご講演頂きました。
続けて、ヤフー(株)の藤木氏より、スマートフォン版サービスのUIを「実装」する際に主に使われている次の技術のご紹介がありました。

1. HTML5

  • Local Storage
  • Touch Events
  • GeoLocation API

2. CSS3

  • CSS Transform
  • CSS Gradient

これらの技術がスマートフォン版Yahoo! Japanで実際にどのように生かされているかの豊富な実例を交えながらご講演頂きました。


左より、ヤフー(株)藤木氏、伊東氏、座長の是井氏

講演後の質疑応答の時間には、参加された会員の方から、Local Storageとcookieの使い分け、JavaScriptライブラリに対するヤフー(株)のスタンス、iPhoneとアンドロイドそれぞれの実機検証の工数の違いなどの質問がなされ、活発な質疑応答が行われました。 最後に座長の是井氏より、「HTML5ワーキンググループ」を会員の皆さまが個別にお持ちの問題を解決する場としても開催していきたいといった今後の方向性についてのお話しがありました。 次回は3月を予定しておりますので、是非ご参加ください。

提言・ニュース