CEDEC 2010「torne(トルネ)のUIでこだわった19のポイント」

セミナー

CEDEC2010、3日間参加してきました。

かなりたくさんセッションを受講したので可能な限りレポートしようと思います。ただ、すでにニュースサイトではたくさんアップされているようなので、かぶらないように最初はtorneのやつから書こうと思います。

概要

PS3専用の地上デジタルレコーダーキット「torne（トルネ）」の開発の経緯の紹介
  • torneのコンセプト
  • torneのUIでこだわった19のポイント
  • 技術面から見たtorne
公式サイト

コンセプト:Torneと家電の違い

Torneは開発当時、BD/DVDに焼けない、CS/BS/短波が映らない、録画モードが標準しかない、撮った映像を編集出来ないなど欠点があった。

→そこでTorneでしか体験出来ない、スペックに頼らないモノづくりの追求

家電製品 torne(トルネ)
コンセプト 機能ベース(Function Oriented) ソリューションベース(Solution Oriented)
機能 あらゆるニーズに答えるため多機能 簡便化
差別化 機能重視（〇〇エンジン搭載など） ソフトウェア
総じて No.1商品を目指す Only Oneを目指す
  • 家電は他社と差別化した要素を入れたい。なぜなら機能の○☓表で比較される。結果、機能ベースになる。
  • Torneに関しては初めからそんなに機能がない。UI強化・トルミル機能・リモートプレイを絞って投入。
  • Torneはハードウェア的にそんなに凄いものではないのでそもそもNo1は目指せない。
    • Only Oneを目指す。

Torneを生み出せたのは？

１、社内でも珍しい制作体制
  • ソフトウェアプラットフォーム開発部(システムソフト)と、SCEJAPANスタジオの連携(ゲーム)
  • GUIのデザイン部分はデザイン会社Mu.Incが担当
２、ゲームデザインのノウハウ

PS3らしいレコーダーとはなにか？

  • 圧倒的な快適操作の実現
    • XMBに通じる、サクサク動くUI
  • PSPとの連携
    • PSPに書き出して、外に持ち出す
    • TVから離れてのリモートプレイ
  • ネットワークを利用した、新しい体験
    • トルミル機能で、他のユーザーの視聴がわかる
    • TVを見ながらWEBを視聴できる
    • ネットワークアップデートで、進化するレコーダー

→これらは、他の家電には真似できない要素！

UIに注力

圧倒的な快適操作に、ゲームのノウハウが脈々と受け継がれている。

  • マニュアル不要の分かりやすさ
    • ゲームの場合、マニュアル読んでからゲームをプレイする人があまりいない
    • 操作はやりながら覚えていく
  • 気持ち良い応答
    • ユーザーのやりたい事を、少ないステップで実現してやる
  • 効果的な演出
    • グラフィカル・アニメーション・サウンドを効果的に使用する

→操作することが楽しくなってくる！

TorneのUIでこだわった、19のポイント

マニュアル不要の分かりやすさを実現するためのポイント

１、ボタンの意味付けを統一
  • ○は「決定」、☓は「キャンセル」
  • 画面が変わっても意味を変えない
２、基本操作を、十字キーと○・☓だけでもできるようにする。
  • 分かりやすい操作
  • PSPでのリモートプレイ・BRAVIAのリモコンも利用できるということもある。
３、メニューやボタンの説明を、画面の中に必ず入れる
  • 画面最下部に、ボタンを押したときの説明を表示
４、またその説明を動的に変化させる
  • 画面下部にヘルプラインを設け、合わせているカーソルの機能を表示させる
５、方向に対しての意味付けを行う
  • 左右の意味付け
    • 1つ1つの機能は、左から始まって、右のどん突きで完了
    • プログレスバー・シーンサーチなども、左から右
  • 上下の意味付け
    • メニューやリストは上下に並べる
    • 設定パネルも、上下のみで項目選択
６、途中で迷子にならないようにする
  • 階層が深い場合でも、☓ボタンの連打でメインメニューに戻る
  • 失敗しても大丈夫だという安心感を与える
７、表示メッセージに配慮する
  • 専門用語は極力避ける
  • メッセージの改行位置を調整する
  • 視点が動かなくて済むようにダイアログを小さめに、内容も簡潔に
  • 読みやすいようにフォントを使い分ける(基本は2つ、デザイン的にいくつか)
８、できるだけ中央に表示する
  • トップメニューなどは、選択している項目の名称が中央に来る
  • ヘルプラインやチャンネル切り替え時の番組表示も中央に寄せる
９、必要な情報は際立たせ、不要な情報は隠す
  • 選択されているものに対して、必要な情報のみを表示する
  • 番組情報を選択したときに、後ろの背景をぼかす
  • 必要の無い選択肢は隠すなどなど
１０、いつでも操作を受け付ける
  • 先行入力の受け付け、操作のブロッキングをしない
  • 画面の切り替え時などでも、操作を受け付ける
１１、直前の状態を覚える
  • 画面を切り替える前の状態を覚えておき、戻った時にカーソルを合わせる
  • 自分のたどった軌跡を、戻っていける
１２、最もよく使う機能を優先する
  • 番組リストで、現在放送中の番組で、○ボタンを押すと「再生」が始まる。
  • まだ放送されていない将来の番組で、○ボタンを押すと「録画」が始まる。
  • 状況に応じて機能を変える。
  • ゲームだと、宝箱の前だと「開ける」、人だと「話す」といったあたりまえの操作
１３、キーリピートの調整
  • 一定時間、同じ方向への入力でキーリピートが入り高速化
  • 番組表では上下にスクロールする際、２段階でキーリピートが入る
  • メニューの各所でキーリピートを調節する事で、ストレスを減らす
１４、公演時間の都合で割愛
１５、リビングに合うデザイン
  • 白基調で明るく清潔な印象
  • テレビをインテリアとして扱う
１６、長時間つけっぱなしでも馴染むような
  • 長時間使っていると、BGMが切り替わる
  • サムネイルが飛び交うメニューなどなど
１７、常に動かす
  • 止まってしまうと、死んだUIになってしまう
  • フリーズした様に見えるので避ける
１８、SEによるフィードバック
  • ほとんどの行動にSEを付ける
  • スピード感を感じる音を設定(XMBのような、小気味よい雰囲気でデモされました)
１９、待つ時間のストレスの軽減
  • 地デジの読み込みは必然的に、２,３秒かかってしまう
  • クロスフェードや、拡大縮小を利用して、待ち時間を感じさせない
  • 途中でアニメーションや、繋ぎの絵を入れる
  • ゲームでいうローディング中の処理の応用

実装された時に、ゲームと同様のチェック

上記の様なコンセプトはあるが、実際に触った時の感触は分からない。そこで...

  • クラッシュアンドビルド
    • 良さそうなアイデアは、まず実装し試してみる
  • チューニングチーム
    • ゲームと同じレベルまで、操作感をチューニング
  • QA
    • ゲームのQA部隊に依頼

ゲームデザインのノウハウまとめ

ユーザー視点にたってストレスなく優しく使える工夫を一つ一つ丁寧に仕上げる。
ゲームUI制作の基本をtorneに応用する事で、家電には無い製品が開発できた。

技術面から見たtorne、構成するモジュール

torneのシステムは2つのモジュールで構成されている

  • アプリケーションモジュール
    • 通常のゲームと同じ仕組みで動いている
    • 番組録画・テレビの視聴などを操作するアプリケーション
  • 録画モジュール
    • 他のゲームと並列で動作するもの
      • こっそり動作させる
    • ゲームの負荷に影響しないようなモジュール



技術面から見たtorne、高速な番組表の実装

TVの番組表は"文字数"が多く描画負荷が高い。
ただ、1080pでスイスイ動くというのは死守したかった。
そこで考えた二つの手法、

番組単位でレンダリング 文字単位でのレンダリング
利点 文字の位置計算が少なくて済む 文字種が少ないため、テクスチャサイズを小さく出来る
欠点 番組1つづつがテクスチャになるため、VRAMを圧迫 文字の位置計算の量が膨大

→数えてみると全番組で1000文字くらいしか使用していなかったため、1枚のテクスチャに収まることがわかった。

テクスチャのサイズ
  • 4096 x 4096 pixel、一文字 64 x 64 pixel、DXT1、MIPMAPあり

まとめ：今後の展開

家電との差別化・UIの操作性の向上という目標がある程度形になり、これから面白い事に挑戦できる土壌が出来た。
今後の予定としては、トルミル機能を膨らませてエンターティンメント方向に強化。今以上に触って楽しいレコーダーに進化させたい。

関連記事

特に無し