1. TV design guidelines
2013/6/20
株式会社エクサ 安藤幸央
@yukio_andoh
HackDesign.org

3. 10 foot User Interface

4. GoogleTV
Google TV
Chrome 28
JB 4.2.2
Android:
As seen on TV!
Christian Kurzke
KOREA
Ethernet
Streaming/DRM

5. 前提
10フィート（3メートル）離れている。画面大きい。いつも横向き。16:9。基準は42インチ
リーンバック（ソファに座ってくつろいでいる）
リモコンで操作する（音声やジェスチャも一つの可能性）
一人ではなく、複数人で利用する場合もある
部屋が明るい時も、暗い時もある（画面が明るい発色の時と、暗めの発色の時がある）
そもそも、目的が他のデバイスと大きく異なる。受け身であること、映像中心であること
フィードバックとしても、エンターテインメントとしても、「音」は需要な要素

6. Guidelines
LG Smart TV and Media Product UI Guideline
http://developer.lge.com/resource/tv/RetrieveDocReferencesContent.dev?
resourceId=RS00000737#none
OpenCableTM Guidelines - Enhanced TV User Interface Guidelines
http://www.cablelabs.com/specifications/OC-GL-ETV-UIG-V02-060418.pdf
Samsung TV application SDK UX Guideline
http://freethetv2011.s3.amazonaws.com/Samsung%20TV%20Application
%20SDK%20UX%20Guideline%5BV1.01%5D.pdf
Google TV Design Pattens
https://developers.google.com/tv/android/docs/gtv_android_patterns

7. Guidelines
BBC: interactive televition design
http://www.mhp.org/docs/itv-design_v1.pdf
http://www.bbc.co.uk/guidelines/futuremedia/desed/
Opera Creating web content for TV
http://dev.opera.com/articles/view/creating-web-content-for-tv/
Roku Design Guidelines
http://sdkdocs.roku.com/display/sdkdoc/Design+Guidelines

17. ポイント
今どこにいるのか、常に把握できるようにする。また、いつでも戻れるように
一つのことをするには一つのアクションで済むように
今何を選択している状態なのかを明確に。マウスとは違い、選択中のものを「決定」する
最大値を考える。10件なら良いが、1000件の場合も使いやすいか？1つの操作で移動は一つ
垂直方向へのスクロールは注意深く利用する。基本、ページ単位で考えスクロールしない
急に ON/OFF すること。中断／再開すること。または常に電源が入りっぱなしなこと
常に何でも出来る必要は無い。ある時にやりたいことはたいてい数種類しかない。

18. GoogleTV 用 Web制作のポイント
ごくごくシンプルな作りに。色使いに配慮。明るすぎない明るい色調で。スクロールなし
ナビゲーションは単純に、明確に。片手で、一回でできる方法で。なにが選択できるか？
テレビ画面サイズを考えてデザイン。コンピュータの画面では無い。PCの2倍の気持ちで
文字フォントは重要。大きさも、太さも、行間も。コントラストも。
一画面に表示されて、読み切れる文字数を考える。
音に頼らない。びっくりするような音を出さない。
表示パフォーマンス重要。速度は PCよりも携帯電話よりも重視。だれも待ってはくれない。

19. 1段落につき 90文字が限界。日本語にすると 50文字くらい？
日本語字幕は 10∼13文字で２行。10文字以下なら一瞬で読み取れる。
暗い背景に、明るい文字が読みやすい
720p なら最小でも18pt 推奨 21pt 以上。1080p なら最小24pt 推奨28pt 以上。
印刷物よりも行間を広めに（文字が大きいことだけが読みやすさでは無い）
文字

20. 吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。
吾輩は猫である。名はまだ無い。

21. 色
純粋な白 (#FFFFFF) は極力使わない（ゴーストが目立つ）。
推奨は (#F1F1F1) (240,240,240) 十分白に見える。
明るい白、赤、オレンジは色がにじみやすいので注意。
テレビの様々なモードで表示を確認すること（省電力モード、シネマモードなど）。
細かいグラデーションには注意。マッハバンドが目立つ可能性が高い。
性能の悪い、ガンマ値の違うディスプレイで見ているものと考える。
ピクセル単位での調整を厭わない。

22. シーンを考える
実物で試す

24. http://www.youtube.com/watch?v=o1tTe5M-rz0