Submit Search
Upload
Designing for Google TV
•
7 likes
•
1,531 views
Yukio Andoh
Follow
Designing for Google TV Google TV のためのデザイン 10 foot UI とは?
Read less
Read more
Technology
Business
Report
Share
Report
Share
1 of 32
Recommended
Bees Showreel
Bees Showreel
bee_sinton
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Robert Nyman
TV design guidelines
TV design guidelines
Yukio Andoh
Android tv
Android tv
Noer Rhiannah Aghuztins
Getting your app on Android TV
Getting your app on Android TV
Xavier Hallade
Google Developers Summit Android TV で実現するリビングルームでのアプリ体験
Google Developers Summit Android TV で実現するリビングルームでのアプリ体験
Takashi EGAWA
Android TV: Building apps with Google’s Leanback Library
Android TV: Building apps with Google’s Leanback Library
Joe Birch
Android tv get started
Android tv get started
Ascii Huang
Recommended
Bees Showreel
Bees Showreel
bee_sinton
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Robert Nyman
TV design guidelines
TV design guidelines
Yukio Andoh
Android tv
Android tv
Noer Rhiannah Aghuztins
Getting your app on Android TV
Getting your app on Android TV
Xavier Hallade
Google Developers Summit Android TV で実現するリビングルームでのアプリ体験
Google Developers Summit Android TV で実現するリビングルームでのアプリ体験
Takashi EGAWA
Android TV: Building apps with Google’s Leanback Library
Android TV: Building apps with Google’s Leanback Library
Joe Birch
Android tv get started
Android tv get started
Ascii Huang
Google I/O 2013に行ったついでにラスベガス戦果報告
Google I/O 2013に行ったついでにラスベガス戦果報告
Shoya Tsukada
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
Chihiro Tomita
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
kyu buns
会話型UI事始め
会話型UI事始め
DeNA
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
Microsoft
デザインのリファクタリング (慣れを大切に)
デザインのリファクタリング (慣れを大切に)
Yukio Andoh
SIGGRAPH ASIA 2020 みどころ紹介
SIGGRAPH ASIA 2020 みどころ紹介
Yukio Andoh
UX MILK All Night 2020 (Yukio Andoh)
UX MILK All Night 2020 (Yukio Andoh)
Yukio Andoh
Ethical UX / uxmilk fukuoka 2019/12/17
Ethical UX / uxmilk fukuoka 2019/12/17
Yukio Andoh
Ethical UX
Ethical UX
Yukio Andoh
SIGGRAPH 2019 preparation
SIGGRAPH 2019 preparation
Yukio Andoh
SIGGRAPH ASIA 2018 : BOF : SIGGRAPH ASIA 2018の歩き方
SIGGRAPH ASIA 2018 : BOF : SIGGRAPH ASIA 2018の歩き方
Yukio Andoh
VoiceUIのデザインと音声サービスの勘所
VoiceUIのデザインと音声サービスの勘所
Yukio Andoh
VUIテクノロジーアップデート& VUIビジネストレンド紹介
VUIテクノロジーアップデート& VUIビジネストレンド紹介
Yukio Andoh
Voice UI Designer Meetup Tokyo 「 VUIデザインの勘所」
Voice UI Designer Meetup Tokyo 「 VUIデザインの勘所」
Yukio Andoh
Voice UI/UX Design Guideline
Voice UI/UX Design Guideline
Yukio Andoh
Design JP vol2 (Motion Design & Animation)
Design JP vol2 (Motion Design & Animation)
Yukio Andoh
UX Jam x UX Sketch 2017 HD
UX Jam x UX Sketch 2017 HD
Yukio Andoh
Shin UX 2017 - UX strategy - UX review
Shin UX 2017 - UX strategy - UX review
Yukio Andoh
BPStudy #111 iOS 10 and iPhone 7
BPStudy #111 iOS 10 and iPhone 7
Yukio Andoh
DesignJP prototyping 20160825
DesignJP prototyping 20160825
Yukio Andoh
More Related Content
Similar to Designing for Google TV
Google I/O 2013に行ったついでにラスベガス戦果報告
Google I/O 2013に行ったついでにラスベガス戦果報告
Shoya Tsukada
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
Chihiro Tomita
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
kyu buns
会話型UI事始め
会話型UI事始め
DeNA
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
Microsoft
Similar to Designing for Google TV
(6)
Google I/O 2013に行ったついでにラスベガス戦果報告
Google I/O 2013に行ったついでにラスベガス戦果報告
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
会話型UI事始め
会話型UI事始め
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
More from Yukio Andoh
デザインのリファクタリング (慣れを大切に)
デザインのリファクタリング (慣れを大切に)
Yukio Andoh
SIGGRAPH ASIA 2020 みどころ紹介
SIGGRAPH ASIA 2020 みどころ紹介
Yukio Andoh
UX MILK All Night 2020 (Yukio Andoh)
UX MILK All Night 2020 (Yukio Andoh)
Yukio Andoh
Ethical UX / uxmilk fukuoka 2019/12/17
Ethical UX / uxmilk fukuoka 2019/12/17
Yukio Andoh
Ethical UX
Ethical UX
Yukio Andoh
SIGGRAPH 2019 preparation
SIGGRAPH 2019 preparation
Yukio Andoh
SIGGRAPH ASIA 2018 : BOF : SIGGRAPH ASIA 2018の歩き方
SIGGRAPH ASIA 2018 : BOF : SIGGRAPH ASIA 2018の歩き方
Yukio Andoh
VoiceUIのデザインと音声サービスの勘所
VoiceUIのデザインと音声サービスの勘所
Yukio Andoh
VUIテクノロジーアップデート& VUIビジネストレンド紹介
VUIテクノロジーアップデート& VUIビジネストレンド紹介
Yukio Andoh
Voice UI Designer Meetup Tokyo 「 VUIデザインの勘所」
Voice UI Designer Meetup Tokyo 「 VUIデザインの勘所」
Yukio Andoh
Voice UI/UX Design Guideline
Voice UI/UX Design Guideline
Yukio Andoh
Design JP vol2 (Motion Design & Animation)
Design JP vol2 (Motion Design & Animation)
Yukio Andoh
UX Jam x UX Sketch 2017 HD
UX Jam x UX Sketch 2017 HD
Yukio Andoh
Shin UX 2017 - UX strategy - UX review
Shin UX 2017 - UX strategy - UX review
Yukio Andoh
BPStudy #111 iOS 10 and iPhone 7
BPStudy #111 iOS 10 and iPhone 7
Yukio Andoh
DesignJP prototyping 20160825
DesignJP prototyping 20160825
Yukio Andoh
UX Strategy 2016/06/18
UX Strategy 2016/06/18
Yukio Andoh
UX milk (UX Jam) 20160108
UX milk (UX Jam) 20160108
Yukio Andoh
Google Cardboard and VR Tips (at KL)
Google Cardboard and VR Tips (at KL)
Yukio Andoh
google cardboard and VR tips
google cardboard and VR tips
Yukio Andoh
More from Yukio Andoh
(20)
デザインのリファクタリング (慣れを大切に)
デザインのリファクタリング (慣れを大切に)
SIGGRAPH ASIA 2020 みどころ紹介
SIGGRAPH ASIA 2020 みどころ紹介
UX MILK All Night 2020 (Yukio Andoh)
UX MILK All Night 2020 (Yukio Andoh)
Ethical UX / uxmilk fukuoka 2019/12/17
Ethical UX / uxmilk fukuoka 2019/12/17
Ethical UX
Ethical UX
SIGGRAPH 2019 preparation
SIGGRAPH 2019 preparation
SIGGRAPH ASIA 2018 : BOF : SIGGRAPH ASIA 2018の歩き方
SIGGRAPH ASIA 2018 : BOF : SIGGRAPH ASIA 2018の歩き方
VoiceUIのデザインと音声サービスの勘所
VoiceUIのデザインと音声サービスの勘所
VUIテクノロジーアップデート& VUIビジネストレンド紹介
VUIテクノロジーアップデート& VUIビジネストレンド紹介
Voice UI Designer Meetup Tokyo 「 VUIデザインの勘所」
Voice UI Designer Meetup Tokyo 「 VUIデザインの勘所」
Voice UI/UX Design Guideline
Voice UI/UX Design Guideline
Design JP vol2 (Motion Design & Animation)
Design JP vol2 (Motion Design & Animation)
UX Jam x UX Sketch 2017 HD
UX Jam x UX Sketch 2017 HD
Shin UX 2017 - UX strategy - UX review
Shin UX 2017 - UX strategy - UX review
BPStudy #111 iOS 10 and iPhone 7
BPStudy #111 iOS 10 and iPhone 7
DesignJP prototyping 20160825
DesignJP prototyping 20160825
UX Strategy 2016/06/18
UX Strategy 2016/06/18
UX milk (UX Jam) 20160108
UX milk (UX Jam) 20160108
Google Cardboard and VR Tips (at KL)
Google Cardboard and VR Tips (at KL)
google cardboard and VR tips
google cardboard and VR tips
Recently uploaded
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Recently uploaded
(7)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Designing for Google TV
1.
Designing for Google
TV Google TV のためのデザイン 10 foot UI とは? 2010/11/12 株式会社エクサ 安藤幸央 yukio.andoh@gmail.com
2.
3.
4.
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よりも携帯電話よりも重視。だれも待ってはくれない。
13.
14.
15.
吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。 吾輩は猫である。名はまだ無い。
16.
1段落につき 90文字が限界。日本語にすると 50文字くらい? 日本語字幕は
10∼13文字で2行。10文字以下なら一瞬で読み取れる。 暗い背景に、明るい文字が読みやすい 720p なら最小でも18pt 推奨 21pt 以上。1080p なら最小24pt 推奨28pt 以上。 印刷物よりも行間を広めに(文字が大きいことだけが読みやすさでは無い) 文字
17.
色 純粋な白 (#FFFFFF) は極力使わない(ゴーストが目立つ)。 推奨は
(#F1F1F1) (240,240,240) 十分白に見える。 明るい白、赤、オレンジは色がにじみやすいので注意。 テレビの様々なモードで表示を確認すること(省電力モード、シネマモードなど)。 細かいグラデーションには注意。マッハバンドが目立つ可能性が高い。 性能の悪い、ガンマ値の違うディスプレイで見ているものと考える。 ピクセル単位での調整を厭わない。
18.
19.
Check Point 表示
20.
本サイトは解像度720pにて正しく表示される事を確認済み。 本サイトは解像度1080pにて正しく表示されることを確認済み。 本サイトは(解像度に関係なく)オートズームでも正しく表示する。 本サイトは最小限の待ち時間(3秒未満)にて読み込む。 本サイトはコンテンツの読み込み中その待ち時間の視覚的表示を使用する。 本サイトのいずれの場所でも、スクロールバーを使用あるいは表示をしない [CSS overflow:hidden が適用される] 代わりに、待ち時間の案内表示、矢印、クリック可能なページ数などが使用さ れる。 少なくとも10%の余剰分を伴う親コンテナの制限内にて、全てのデータ類が 読み込まれる。
21.
Check Point デザイン
22.
本サイト使用色はテレビ画面上にて正しく表示される(この点は各自の判断に委 ねる) 本サイトは画面からのはみ出し予防として、エッジ・パディングを施してある。 全てのグラフィックスは解像度720pおよび1080pにおいて、ピクセル化せずに正 しく表示する。 全ての文字類が読み易くなっている(つまり、10フィートの距離からも簡単に判 読するに十分な文字の大きさ)。 明るい白色類、赤色類、およびオレンジ色類を使用していない(色の歪み防止の ため)。 解像度720pでは18pt未満、および解消度1080pでは24pt未満の文字は使用してい ない。
23.
Check Point ナビゲーション
24.
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