WebとUIをつなぐトリックスター（2）
テレビでYahoo!
デバイスが変わればUIデザインも変わる
仲里淳2008/11/19
SVGとJPEGをベースにした独自プラットフォーム
Yahoo! JAPAN for AQUOSは、AQUOSが備えるSVG（Scalable Vector Graphics）の処理エンジンを使って実現されている。AQUOS側はあくまでもデータを処理するのみであり、Webサービスとして後からサービスの追加や入れ替えができる仕組みになっている。専用のブラウザ機能が備わっていると考えると分かりやすいだろう。
サービス制作者はビジュアル要素としてJPEGを用意し、それをSVGを使って動作を記述する。ワークフローとしては次のようになる。
- ラフとしてワイヤーフレームを作成
- どのボタンを押すとどう遷移するかなどフローを設計
- 仕様が決まったらJPEG画像を描く
- JPEGを動かすためのSVGのソースコードを技術担当者が書く
- それらを組み合わせて開発環境でテスト＆調整
清水田氏がプロジェクトへ参加したのは、過去にソニーのBRAVIAで提供されているアプリキャストでの経験を買われてのもの。また、もともとコーディングのスキルもあるため技術スタッフとの調整が円滑に行えるという。
「SVGの部分は技術担当者の役割なので、清水田が書くことはありません。しかし、技術を理解していて話が早いというのは、特に終盤の工程では大事になってくるんです」と徳應氏はいう。
SVGはXMLが基盤となっているし、JPEGやページ遷移といった概念はWeb制作に近いものがある。
とはいえ、先述の徳應氏の言葉にあるように、テレビ向けのサービスにはPC向けとは異なるニーズがあるのも事実。それらのノウハウは、ヤフー内ではこのYahoo! JAPAN for AQUOSチームにしか蓄積されていない。
今後は、このノウハウと経験を生かして、サービスの事業部にアドバイスをしたり、新たなデバイスへ進出することが役目となる。一方で、この分野はまだまだこれからだともいう。
「まだまだ現状のサービスには満足していません。現時点ではこの程度しかできないというのが率直なところです。これまでPCの世界にあった引き出しからおもちゃを持ってくると、まだこんなもんにしかならないよというのが実際なんですね。
逆に、テレビのことを想定してPC向けサービスの企画を考えると、もっとテレビの世界にもいろいろなものを持ってくることができるはず。あらかじめ設計のところでテレビやほかのデバイスのことを想定していれば、もっとユーザーのかゆいところに手が届くコンテンツやサービスが提供できます」（徳應氏）
コンテンツの何が幹で何が枝葉かを考えることが重要
Yahoo! JAPANといえば、日本のネットユーザーで知らない者はいないほどのメジャーサイト。誰でも1つくらいはサービスを使ったことがあるはずだ。 あらゆるユーザー層を相手にしているのだから、日本のネットユーザーにとっての最大公約数的なデザインを知り尽くしているといっても過言ではないだろう。しかし、このテレビ向けサービスでは、そのことをあらためて考えるきっかけになったという。
「日本のネットユーザーは5000〜6000万。 Yahoo! JAPANの視聴率は八十数パーセントですから日本人の3人に1人が使っていることになります。 それだけ多くのユーザーに使っていただくとなると、われわれもみんなに嫌われないようにという価値観に支配されてきます。
そうすると、何かしらサービスを始めるときに、あれもこれもと要件がてんこ盛りになってしまいがちです。あらためて大切だと思ったのは、全部を盛り込めるわけではないので、不要なものをそぎ落としていったときの幹はどこか、あると便利だねという枝葉の部分はどこか考えるということです。
これは、情報量やインターフェイスで制約のあるデバイスにかかわったからこそ再認識できたことですね。ですから、要件定義から上流工程に時間をかける。そうすると、後で破綻することもないです」（徳應氏）
テレビでネットというサービスは、セットトップボックスなどの製品が昔から存在していたものの、なかなか成功したとはいえなかった。しかし、ここ数年はブロードバンドの普及とネット機能の低コスト化、そして大画面テレビの高精細化によって、テレビでのネット利用があらためて期待されている。ここで重要なのは、PC向けのサービスをテレビで利用できるようにするだけでは不十分で、テレビならではのコミュニケーション様式が求められるということだ。
Yahoo! JAPAN for AQUOSの試みは、PCのWebとは異なる領域でのデザイン／UIを模索することでもある。今後、ネット対応デバイスは増えていくにつれ、デザイナにはデバイスごとの特徴に沿ったデザイン能力も求められてくることになる。
【関連情報】
●Yahoo! JAPAN for AQUOS
●Yahoo! JAPAN for AQUOS対応製品
 |
| 新しいユーザーインターフェイス向けのコンテンツ作りは全社で取り組んでいます！ |
 |
3/3 |
| INDEX | ||
| WebとUIをつなぐトリックスター
（2） テレビでYahoo!―デバイスが変わればUIデザインも変わる |
||
| Page1 テレビでYahoo!―デバイスが変わればUIデザインも変わる PCとは異なるテレビならではのUIデザインを探る PC版やケータイ版と異なるチームがテレビ版サービスを担当 新しい取り組みであるが故にノウハウの蓄積と一元化を目指す まずは「何のデータが使えるか」からスタート |
||
| Page2 たどり着いた結論は「PCコンテンツともテレビ番組とも違うもの」 リビングでの利用に適したデザインとUIを模索 |
||
 |
Page3 SVGとJPEGをベースにした独自プラットフォームで開発 コンテンツの何が幹で何が枝葉かを考えることが重要 |
|
[an error occurred while processing this directive]
 |
「デザインハック」コーナーへ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
