1. マルチデバイス時代に生き残る
HTML5で作る
ユーザーインターフェース
クロカワ リュート
2011.12.03

2. Profile
クロカワ リュート
Twitter : @180mm
•企画/制作ユニット 主宰
iPhone Appのプランニング、プロモーションの企
画、SNSを使ったイベントの企画など
•元・NHN Japan 株式会社 web UI担当
•HTML/CSS/JavaScript/ObjC etc...

3. Profile
iPhone & Android HTML5ではじ
めるアプリ制作の手引き
共著にて執筆、各書店・Amazonにて
発売中
スマートフォン向けのwebUIの構築・
設計について執筆しています。

4. Today s menu
•HTML5のいま
•マルチデバイスへの対応・実例
•HTML5のこれから

5. HTML5のいま

6. HTML5のいま
•動画・音楽の再生
•位置情報の利用
•オフライン機能
•CSS3でのUI構築
etc........

7. 動画・音楽の再生

8. 動画・音楽の再生
• webサイトへFlashなしで簡単に動画の
埋め込みが可能に。
• 特にYouTubeなどにアップロードした
ものを埋め込めば簡単に実装できる。

9. 位置情報の利用

10. 位置情報の利用
• JavaScriptを使って位置情報へアクセ
スできる。
• Google Maps JavaScript APIを併用
すればGoogle Mapに現在地の表示な
ども簡単に表現できる。

11. オフライン機能

12. オフライン機能
• ブラウザにテキストデータの保存が可
能に。これによってゲームやアプリ
ケーションでは設定情報などの保存に
活用できる。
• HTML、CSS、JavaScript、画像ファ
イルなどをブラウザにキャッシュさ
せ、オフラインでも動作可能にするこ
とができる。

13. きゃー！HTML5すてき！

14. でもね

15. HTML5の すてきじゃない 現状
•ブラウザごとに すてきな機能 に実装の差がある
> 各ブラウザ向けに書き分けなければいけない
•スマフォは端末ごとに すてきな機能 に実装差がある
> 各端末ごとに書き分けor実装断念してオミット
•スマフォは大抵2年縛り
> 実装の差がまんべんなく埋まるのは結構先？

16. マルチデバイスへの対応・実例

17. マルチデバイスへの対応・実例
代表的な対応方法
•サーバサイドのプログラムでページの出し分け
•CSS3でブラウザの表示幅別にリデザイン

18. サーバサイドのプログラムでページの出し分け

19. サーバサイドのプログラムでページの出し分け
• 同じコンテンツをPC,スマートフォンそれぞれ用にデ
ザインし、それぞれつくらなければいけない。
> 修正・更新共に作業量が倍かかる。
• たいていはタブレットはPCと同等の扱い。これを最
適と言えるかどうかはモノによる
• 一つのコンテンツに対してURLが複数になる場合も。

20. CSS3でブラウザの表示幅別にリデザイン

21. CSS3でブラウザの表示幅別にリデザイン
• htmlはワンソース、しかし設計のコストが高い。
（綿密なサイト設計が必要、デザイン的な制約も多い
• 修正・更新のコストはワンソースなので低め。
• 様々な解像度・ウインドウサイズに大して最適に見せ
ることが可能、柔軟性が高い。
• サーバサイドのプログラムを必要としない。
• 一つのコンテンツに対してURLは1つ

22. ではどうしたらいいのか

23. 個人的な見解
CSSでの表示変更をおすすめします。
• 単一URLで対応できるのでPVの集中、各SNSでの拡
散時にどのデバイスからのツイートでもURLが統一さ
れる。
• リダイレクトがないので通信環境が不安定なスマート
フォンへの負荷も低め。
• タブレットデバイスなど、PCやスマートフォン以外の
端末にも対応がしやすい。

24. 個人的な見解
しかし、htmlがワンソースで済む、とはいえ設計のコ
ストとデザインの制約が大きいので、費用が安く抑え
られるとは限らない。
HTMLの設計もデザインの制約もしっかり把握していな
いと作れないので、きっちり制作できるところは多く
はないと思います。

25. 実例
• mochrom モクロム
• OPERATION TOMODACHI BY NINJA -忍者のトモ
ダチ大作戦-
> 多言語化、YouTube埋め込みもスマフォ最適化

26. HTML5のこれから

27. HTML5のこれから
• いかにマルチデバイスへ柔軟に対応するか。
> HTMLがオープンでスタンダードなプラットフォームである
以上、マルチデバイスへの対応は大きなメリットであり、必須
• 無理をしすぎない実装
> HTML5の新機能はブラウザやデバイスごとに実装差がある
可能性を頭に置き、実装者との密な連携と十分な検証期間を。
• ソースコードが書けてデザイン・設計までできるデベ
ロッパーの需要はさらに高まる。

28. HTML5のこれから
• ノウハウ、ナレッジの共有がカギ
> デザイン・オーサリングツール、ライブラリやフレームワー
クの登場と進化のスピードも早い。これらの情報をいかに早く
手に入れ、検証・導入・共有できるかがカギ。
できる個人に依存しすぎれば社内での個々人のスキルの溝が空
き、できる人間とそうでない人間の二極化、さらにはできる人
間の流出へと。。

29. マルチデバイス時代に生き残るユーザーイ
ンターフェースの研究に、
マルチデバイスに強いソーシャルゲーム開
発のお役に立てたら幸いです。

30. Thank you!!