こんにちは。 デザイン部の四倉です。
「Fenrir Advent Calendar 2016」の 24 日目の今日は、クリスマス・イブですね。皆さんいかがお過ごしでしょうか。
（Android TV / Apple TV）
今年は個人的に、スマートフォン/タブレットの UI デザイン以外に、Android TV/Apple TV のアプリデザインをたくさん手がけました。
2016 年の今でこそ、スマートフォンの UI デザインの情報は検索すればいくらでも手に入りますが、私がアプリの UI デザインをはじめた頃は本当に情報が無く、それこそフェンリルのブログなどを参考にしていたことを思い出します。
Android TV/Apple TV の設計をしていると、思いもよらぬところで時間をとられたりして、良くも悪くもそんな昔のことが思い出されるような楽しさがあります。
Android TV/Apple TV は、みんな大好きな Google と Apple が設計したセット・トップ・ボックス（以下 STB ）ですから、そのデザイン思想は折り紙付きです。 フェンリルアドベントカレンダーのテーマ「2016 年にグッときたコレ」にちなんで、その素晴らしい UI デザインの一端をお伝えしたいと思います。
なぜメニューを開いた状態で起動する？
Android TV/Apple TV の純正アプリをチェックして気づくのは Android TV/Apple TV ともに、”メニューを開いた状態で起動”することです。これはスマートフォンの UI デザインをしてきた私には気になることでした。スマートフォンのアプリで、メニューを開いた状態で起動することは稀ですよね。なぜメニューを開いた状態で起動するのでしょうか。
色々と私なりに考えてみたのですが、その結果「メニューを開いた状態で起動する」のは、私も最良の UI デザインだと納得するに至りました。
（※メニューとひとくちに言っていますが、Android TV の場合は Browse View、Apple TV の場合は Tab Bars を指しています。特に Browse View はメニュー以外にも使い方があるので、少し乱暴な言い方かもしれません。）
デザインガイドラインをチェックしよう
この「メニューを開いた状態で起動する」謎をとくために、それぞれのデザイン・ガイドラインを見てみましょう。
両者ともデザイナーであれば非常に読み応えのある内容なので、是非一読してもらいたいのですが、「メニューを開いた状態で起動する」謎に関連する部分は、主に以下の部分ではないかと思います。
Android TV のデザインガイドライン (抜粋+意訳)
デザイン原理（Design principles）
- カジュアルに消費（Casual consumption）
- 映画（館？）のような体験 （Cinematic experience）
- インタラクションは軽く（Lightweight interaction）
バック・ボタン
- バックボタンを押したら、前のビューに戻ること。
tvOS Human Interface Guidelines （抜粋+意訳）
デザイン原理（Design principles）
- クリア （Clear）
- 没入感 （Immersive）
メニュー・ボタン
- メニューボタンを押したら、前のビューに戻ること。
さぁデザインガイドラインも読んだ（？）ところで、メニューを『閉じた』状態で起動できる遷移を考えてみましょう。
（案A）素直にメニューを閉じて起動する
最初は素直に、メニューを閉じて起動することを検討しました。
しかしメニューを閉じたアプリホームでは動画コンテンツを再生することしかできず、さらにデザインガイドラインでバック・ボタン/メニュー・ボタンは前の画面に戻るものと定められていたので、メニューを入れる場所がありません。
デザインガイドラインをあえて無視するという方法もありますが、「必ず前の画面に戻る」というルールはユーザーにとって非常に分かりやすいですから、あまり無下にもしたくありません。
(案B) 画面内に[メニュー]ボタンを設置する
次は画面内にメニューボタンを設置することを考えると思います。
しかし STB の場合、画面をタッチして操作するのではなく、リモコンで操作します。画面内に設置したボタンにフォーカスをあわせるのは、スマートフォンに比べ非常に面倒です。
また、Android TV の Browse View や Apple TV の Tab Bars は非常に控えめなデザインになっていて、一度見なければどこにあるか分からないようになっています。ここに初見で分かるような「メニュー」をデカデカと載せるのは Android TV/Apple TV のデザイン原理にそぐわないと考えることもできます。
（案C）ハードウェアボタン？
では、Google と Apple はなぜ「メニューを表示する」ための専用のハードウェアボタンを用意せずバック・ボタンと兼用にしてしまったのでしょうか？
（Android TV / Apple TV）
ここからはこれまで以上に完全な憶測になりますが、2社ともハードウェアのリモコンの操作性まで含めてデザイン原理（映画館のような体験/没入感）を実現したかったのだと思います。
カーソルキーや決定キーといったフォーカスをあわせるために必要な部品を除いて、Apple TV のリモコンには6つ、Android TV のリモコンにはたった4つのボタンしかありません。たった一つのボタンとはいえ、無駄なボタンを増やさず複雑にしないという強いデザイン思想を感じます。 余計なボタンを増やすと、サードパーティーのアプリがボタンに勝手な機能を付与して、デザインガイドラインを無視することも考えられますしね。
なぜメニューを開いた状態で起動するのか
ここでもう一度、純正アプリの遷移をおさらいしてみましょう。 アプリはメニューを開いた状態で起動し、1クリックでメニューを閉じます。 その後は動画コンテンツを選んで、1クリックで再生します。 もう一度 OS ホームに戻るのにも、バック・ボタン/メニュー・ボタンを3クリックするだけでフォーカスを操作する必要はありません。
「バック・ボタン/メニュー・ボタンを押したら、前のビューに戻ること」というデザイン・ガイドラインも遵守されています。
…みなさんはどう感じたでしょうか。どうでも良いって感じでしょうか。私はこれを考えた時、一人で「うーん」と唸ってしましました。さすが Google。さすが Apple。ただアプリを起動するだけなのに、最高のデザインが出来上がっています。
来年も UI デザイン頑張ります！
Android TV/Apple TV については、もっともっと面白い話題があるのですが、起動しただけで超長文になってしまいました。 フェンリルは「デザインと技術でユーザーにハピネスを」届けることを理念に活動している会社です。その両翼を担う「デザイン」について、来年以降もひとつひとつ、じっくりと考えていきたいです。
またフェンリルでは、ユーザーの1アクションに徹底的にこだわる UI デザイナーも募集しています。詳しくは採用ページをご覧ください。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
