Designing for Google TV Google TV のためのデザイン 10 foot UI とは?

1. Designing for Google TV
Google TV のためのデザイン
10 foot UI とは？
2010/11/12
株式会社エクサ 安藤幸央
yukio.andoh@gmail.com

5. 10 foot User Interface

6. 10 foot User Interface

7. 10 foot UI
Environment
Input
Display
Size

8. YouTube Leanback
http://www.youtube.com/leanback

9. Google Maps

10. HowTo

11. Google Chrome
Mozilla/5.0 (X11; U; Linux
i686; en-US) AppleWebKit/
533.4 (KHTML, like Gecko)
Chrome/5.0.375.127 Large
Screen Safari/533.4
GoogleTV/161242
= Chrome 5 (stable)

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

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

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

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

19. Check Point
表示

20. 本サイトは解像度720pにて正しく表示される事を確認済み。
本サイトは解像度1080pにて正しく表示されることを確認済み。
本サイトは（解像度に関係なく）オートズームでも正しく表示する。
本サイトは最小限の待ち時間（3秒未満）にて読み込む。
本サイトはコンテンツの読み込み中その待ち時間の視覚的表示を使用する。
本サイトのいずれの場所でも、スクロールバーを使用あるいは表示をしない
[CSS overflow:hidden が適用される]
代わりに、待ち時間の案内表示、矢印、クリック可能なページ数などが使用さ
れる。
少なくとも１０％の余剰分を伴う親コンテナの制限内にて、全てのデータ類が
読み込まれる。

21. Check Point
デザイン

22. 本サイト使用色はテレビ画面上にて正しく表示される（この点は各自の判断に委
ねる）
本サイトは画面からのはみ出し予防として、エッジ・パディングを施してある。
全てのグラフィックスは解像度720pおよび1080pにおいて、ピクセル化せずに正
しく表示する。
全ての文字類が読み易くなっている（つまり、10フィートの距離からも簡単に判
読するに十分な文字の大きさ）。
明るい白色類、赤色類、およびオレンジ色類を使用していない（色の歪み防止の
ため）。
解像度720pでは18pt未満、および解消度1080pでは24pt未満の文字は使用してい
ない。

23. Check Point
ナビゲーション

25. 本サイトは（フォーム要素も含め）D-パッドにより簡単
に操作できる。
デフォルトのページネーション要素を含め、操作ではマ
ウスが不要である。
選択された要素によっては視覚的な待ち表示が施され
る。
スプラッシュ画面またはヘルプメニューによって、ユー
ザーがどのように本サイトを操作するのかを手助けする
（任意）。

26. ビデオおよびオーディオ・メディア・プレイヤー：
データ送受信の管理を表示（必須）
アイコンまたはメニューにてフルスクリーン表示が
可能（任意）。
メディアの再生時間および現在の再生位置を表示
（任意だが推奨）。

27. 入力装置のデータ送受信の管理ボタンに対応（任意だが推奨）：
178: 停止 | 176: 次へ | 177: 戻る | 179: 再生 | 179: 一時停止
D-パッドの入力ボタンおよびマウスでのクリックが同じ作用となる。
スクロール: D-パッドに対応。
ページング要素: D-パッドに対応。
ホームページへ戻る容易な操作方法を提示。
Escキーにより、ポップアップ画面からユーザーを除き(同時にポップ
アップ画面を閉じる)、そして／あるいは全画面表示を終える。

28. Check Point
その他

29. 本サイトでは適切な法律関係情報へのリンクが提示
（個人情報保護、利用規約など）
本サイト／サーバーは、利用者がユーザー・エー
ジェント（ラージ・スクリーン、グーグルTV）を通じ
たテレビ対応のウェブサイトに属するものとする。
バグ／エラー報告をするユーザーが特定されない仕
組み(グーグルTV DevRelへ情報／フィードバックを提
供)

30. Enjoy ! Q&A

31. Resources
http://en.wikipedia.org/wiki/10-foot_user_interface
http://www.googletvforum.org/
http://www.logitechgoogletv.net/
http://googletv.blogspot.com/
http://code.google.com/tv/web/docs/design_for_tv.html

32. Books
10 foot User Interface
ISBN13:978-6130257934