スマートtvへの アプローチと制作
TRANSCRIPT
![Page 1: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/1.jpg)
スマートTVへのアプローチと制作
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv
スマートTVへのアプローチと制作
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv
![Page 2: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/2.jpg)
"I don't want a tablet."
Leo Laporte, 2010年1月
![Page 3: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/3.jpg)
"I don’t use a laptop anymore."
Leo Laporte, 2010年4月
![Page 4: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/4.jpg)
"I don't see people wanting tohave the internet on their TV."
Leo Laporte, 2010年5月
![Page 5: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/5.jpg)
中国: 2010年http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
中国: 2010年http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
No-web TVWeb TV
![Page 6: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/6.jpg)
中国: 2015年(予想)http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
中国: 2015年(予想)http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
No-web TVWeb TV
![Page 7: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/7.jpg)
0.4%米国: 2010年 (TV販売の加増)
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
0.4%米国: 2010年 (TV販売の加増)
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
![Page 8: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/8.jpg)
17%世界: 2010年 (TV販売の加増)
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
17%世界: 2010年 (TV販売の加増)
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
![Page 9: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/9.jpg)
主にBRIC
とJapan
※ BRIC: ブラジル、ロシア、インド、中国
主にBRIC
とJapan
※ BRIC: ブラジル、ロシア、インド、中国
![Page 10: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/10.jpg)
Web on TVっていうのは…
Web on TVっていうのは…
![Page 11: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/11.jpg)
SocialLuxurySocialLuxury
![Page 12: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/12.jpg)
1998年~2001年1998年~2001年
![Page 13: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/13.jpg)
2006年~2006年~
![Page 14: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/14.jpg)
![Page 15: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/15.jpg)
Logitech MX AirLogitech MX Air
![Page 16: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/16.jpg)
Hillcrest Labs Loop PointerHillcrest Labs Loop Pointer
![Page 17: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/17.jpg)
Sony / Google TVSony / Google TV
![Page 18: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/18.jpg)
![Page 19: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/19.jpg)
•文字入力が楽ではない•文字入力が楽ではない
![Page 20: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/20.jpg)
•文字入力が楽ではない
•ナビゲーションが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
![Page 21: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/21.jpg)
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
![Page 22: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/22.jpg)
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
![Page 23: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/23.jpg)
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
![Page 24: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/24.jpg)
あらっ、ちょっと待った…
あらっ、ちょっと待った…
![Page 25: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/25.jpg)
モバイルとほぼ同じじゃないか!モバイルとほぼ同じじゃないか!
![Page 26: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/26.jpg)
さようでござる。さようでござる。
![Page 27: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/27.jpg)
問題点は主に四つ問題点は主に四つ
![Page 28: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/28.jpg)
A
![Page 29: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/29.jpg)
A
![Page 30: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/30.jpg)
問題: テレビの画面が
ちっちゃい
問題: テレビの画面が
ちっちゃい
![Page 31: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/31.jpg)
![Page 32: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/32.jpg)
解決:
文字を大きくする
解決:
文字を大きくする
![Page 33: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/33.jpg)
方法: Media Queries
(メディアクエリー)を使う
方法: Media Queries
(メディアクエリー)を使う
![Page 34: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/34.jpg)
わかった、わかった。事例を見せてよ…
わかった、わかった。事例を見せてよ…
![Page 35: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/35.jpg)
はい、はい。はい、はい。
![Page 36: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/36.jpg)
![Page 37: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/37.jpg)
じゃ、ズームしたらいいんじゃない?じゃ、ズームしたらいいんじゃない?
![Page 38: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/38.jpg)
![Page 39: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/39.jpg)
body {-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);
}
body {-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);
}
![Page 40: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/40.jpg)
![Page 41: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/41.jpg)
body {font-size: 2em;
}
body {font-size: 2em;
}
![Page 42: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/42.jpg)
![Page 43: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/43.jpg)
body {font-size: 3em;
}
body {font-size: 3em;
}
![Page 44: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/44.jpg)
![Page 45: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/45.jpg)
TVの判断なら@media tv {
}
TVの判断なら@media tv {
}
![Page 46: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/46.jpg)
ただ…ただ…
![Page 47: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/47.jpg)
「tv」 Media Type(メディアタイプ)が
テレビに使われていない
「tv」 Media Type(メディアタイプ)が
テレビに使われていない
![Page 48: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/48.jpg)
だからメディアクエリ
だからメディアクエリ
![Page 49: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/49.jpg)
メディアクエリ:CSSの「if」分メディアクエリ:CSSの「if」分
![Page 50: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/50.jpg)
ザ・パーフェクトテレビ用のメディ
アクエリ…
ザ・パーフェクトテレビ用のメディ
アクエリ…
![Page 51: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/51.jpg)
(多分)(多分)
![Page 52: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/52.jpg)
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
}}
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
}}
![Page 53: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/53.jpg)
bit.ly/tvdevbit.ly/tvdev
![Page 54: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/54.jpg)
A
![Page 55: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/55.jpg)
問題:青 = 緑っぽい
ピンク = どっちかというと…
問題:青 = 緑っぽい
ピンク = どっちかというと…
![Page 56: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/56.jpg)
![Page 57: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/57.jpg)
解決:色に頼らない
解決:色に頼らない
![Page 58: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/58.jpg)
plus...plus...
![Page 59: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/59.jpg)
こだわらないこだわらない
![Page 60: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/60.jpg)
問題:halo effect
問題:halo effect
![Page 61: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/61.jpg)
![Page 62: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/62.jpg)
解決:背景に#fffを
使わない
解決:背景に#fffを
使わない
![Page 63: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/63.jpg)
plus...plus...
![Page 64: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/64.jpg)
こだわらないこだわらない
![Page 65: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/65.jpg)
A
![Page 66: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/66.jpg)
●D-pad●トラックパッド●ポインター
●D-pad●トラックパッド●ポインター
![Page 67: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/67.jpg)
問題::hover, :focus
がうまくいかない
問題::hover, :focus
がうまくいかない
![Page 68: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/68.jpg)
スペーシャルナビゲーション
(spatialnavigation)
スペーシャルナビゲーション
(spatialnavigation)
![Page 69: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/69.jpg)
解決:tabindex=”0”
を使いましょう
解決:tabindex=”0”
を使いましょう
![Page 70: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/70.jpg)
bit.ly/spatnavbit.ly/spatnav
![Page 71: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/71.jpg)
A
![Page 72: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/72.jpg)
問題:画面のスペース
が少ない
問題:画面のスペース
が少ない
![Page 73: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/73.jpg)
解決:不必要なものを
表示しない
解決:不必要なものを
表示しない
![Page 74: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/74.jpg)
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
} #sidebar {display: none;
}}
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
} #sidebar {display: none;
}}
![Page 75: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/75.jpg)
問題:リモコンでの
スクロールが遅い
問題:リモコンでの
スクロールが遅い
![Page 76: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/76.jpg)
解決:長いページを
分ける
解決:長いページを
分ける
![Page 77: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/77.jpg)
マウスの行ける所をCSSで
コントロールできる
マウスの行ける所をCSSで
コントロールできる
![Page 78: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/78.jpg)
#image4 {nav-left: #image3;nav-right: #image5;
}
#image4 {nav-left: #image3;nav-right: #image5;
}
![Page 79: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/79.jpg)
bit.ly/navdirbit.ly/navdir
![Page 80: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/80.jpg)
テレビでチェックしないと
想像しにくい
テレビでチェックしないと
想像しにくい
![Page 81: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/81.jpg)
だから
だから
![Page 82: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/82.jpg)
Summary:本物のTVで確認*
*必須項目
Summary:本物のTVで確認*
*必須項目
![Page 83: スマートTVへの アプローチと制作](https://reader034.vdocuments.mx/reader034/viewer/2022052621/558b561fd8b42a34698b4687/html5/thumbnails/83.jpg)
Thank you!
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv
Thank you!
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv