Apple TV Appのデザインのポイントや注意点など

ここ最近AppleTV関連のアプリのお手伝いしていたりすることもあったりして、個人的にもAppleTVを購入して使っています。購入前は「単なる娯楽商品で絶対いらないでしょ」と思っていたんですが、いざ購入してみるとすごい便利だなーと感心したりもしています。 とは言えデバイスの性質上、現状はエンターテイメントによってユースケースがメインなので必要ない人にはやっぱり必要のない製品だと思います。 ちなみにエンターテイメントじゃなくても、画面を複数人に共有して一緒に見る時のAirPlayは便利ですよ。ChromeCastでもできるよって思っていたりしましたが、特にPCの画面共有のスムーズさでは現状AppleTVの圧倒的勝利です。

前置きはコレくらいに、実際にユーザーとして使ってみたりApple TV Appのデザインを考えてみた経験からいくつかポイントやTips的な部分を残しておこうと思います。

※ 私自身ユーザーとしてもゲームはやっていないですし、ゲームアプリデザインについても携わっていないので、一旦ゲームに関する部分は言及しないものとします（ゲームのほうが基本的に自由度も高くクリエぃティビティを発揮する領域も大きいのですごく興味はあります。が、今回はナシ）

Apple TV Appの操作

そもそもですが、Apple TVはPCやスマートフォンなどのタッチスクリーンデバイスとは違うコンテクストでの操作が要求されます。 主な操作方法としては、AppleTVに付属のリモコン（Remote, Siri Remoteなどとも呼ばれる）を用いてボタンを押したり、タッチジェスチャーやSiriの操作をしたりします。

デザインを考える前提として、この操作方法についてはきちんと知っておく必要があると思います。 Remote - Remote and Controllers - tvOS Human Interface Guidelines

具体的にどのような操作があるかまとめるとこんな感じです。

アクション	-	説明
タッチ	-	基本的に認められている（推奨されている）操作ではないように思いますが、判定してレスポンスすることは可能です。動画を再生するプレーヤーなどでは、タッチした段階でSeakBarを表示するという見せ方をしています。
タップ	-	タッチ後に指を離したのをタップとして判定。単純なタップ操作とは別に、上下左右の端をタップすることで別のアクションを提供することも可能。
クリック	-	タッチ後にさらに押し込むような操作。タップと同じく上下左右の端をクリックすることで別のアクションを提供することも可能。
スワイプ	-	Touch Surfaceを上下左右等にスワイプする操作。
Menu		Menuボタンとなってはいるが、ユーザー目線の使用用途としてはほぼBackボタンとして機能している。
Home		Apple TVのHome画面に戻るボタン（USの場合はTV Appが起動するが、現状日本はTV AppがないためHomeに戻る）。長押しでAppleTVのスリープや２度押しで起動アプリの切り替えも可能。
Siri		通常クリックするとAppleTV全体のSiri検索が起動する。アプリ内での検索等に使用したい場合はアプリ内の検索画面等に移動後、input areaのフォーカスした状態でSiriボタンを押しっぱなしにし発話する必要がある（メンタルモデル的にちょっと難しい気がする）
Play/Pause		基本的に動画などのコンテンツの再生・一時停止に使用するボタン
Volume Up		ボリュームを上げる
Volume Down		ボリュームを下げる

Homeボタンは強制的なHomeへの移動ボタン。Volume Up/Downは基本的にボリュームに使うという認識。という前提からも、アプリ内の移動・操作に利用できるボタンはタッチ面の操作とMenu, Play/Pauseボタンだけと考えられます。

しかし、Menuボタンも基本的にBackボタン的な役割、Play/Pauseボタンも動画を再生・一時停止するような役割と利用方法にはコンテクストを考えることが重要であると思います。

AppleTVではアプリトップでMenuボタンを押した場合にHome画面にすぐに戻らず、TabBarなどのNavigationを表示するというのは自然な動作です。なので、アプリの設計としてまずいち早くユーザーの求めるコンテンツを提供する、ユーザーが別のコンテンツ等を求めた時に戻ろうとしてMenuボタンを押した時に他の選択肢を提供する（Navigationを表示するなど気づけるようにする）というようなアプリの体験設計にしておくと良いと思います。

Play/Pauseボタンに関しても、基本的には再生・一時停止のためのボタンではありますが、例えばPinPなどで再生中のコンテンツを一時的に画面の隅に表示して別のコンテンツをさがすというようなことを可能にした場合の再生中のコンテンツに一発で戻るショートカットとして利用するのもありなのかなと考えたりしています。（PinPのところにヒントとして「Play/Pauseボタンで再生画面に戻る」的なヒントを表示する必要はある） ただし、これについては動画コンテンツを選択フォーカスした状態でPlay/Pauseボタンを押した場合、そのコンテンツが再生されるというのが一般的であるようにも感じる部分があるので、賛否両論ありそうなところではありますが。。。

タップ（タッチ）の使い方には気をつける

Apple公式のアプリ等も含めて、上下左右の端をタップすることで隣のコンテンツに移動するというようなアクションが非常に一般的な感じになってはいますが、個人的にこれはリスクもあるかなと思っています。 一番の理由としては、非常に誤タップが発生しやすいためです。 リモコンのタッチ面は大きく、Edgeまできちんと反応するので非常に軽快に操作できる反面、すごくセンシティブでもあるので意図せず触ってしまったがためにコンテンツが移動してしまうという誤操作も発生しやすくなっています。 （少しでもタッチ面に触ってしまうとコンテンツが切り替わってしまうので、リモコンを置くときも非常に慎重になるというストレスをユーザーとして感じました）

使用する場合でも、コンテンツ選択時のような比較的に誤操作が発生してもストレスが少ない場面で使うのが良いと思います。 逆にコンテンツ再生時にタッチですぐ隣のコンテンツに移動するようなアクションは、コンテンツを視聴しようとしているコンテクストを遮られるため誤操作によるストレスが大きいので、使うべきではないと思います。（例としてAbemaTV Appではタップでチャンネルが切り替わってしまい、便利？な反面、誤操作も発生しやすく非常にストレスを感じる）

一覧画面（Apple TV Home）でタッチ面の右端をタップした場合の動作

すぐ隣のアプリにフォーカスが移る

AbemaTVのチャンネル再生画面でタッチ面の右端をタップした場合の動作

すぐ隣のチャンネルに移動する（誤操作の場合は非常にストレス）

上下左右の端をタッチ・タップ・クリックはショートカット的オプションな利用にする

基本的に上下左右の端をタッチ・タップ・クリックするという動作にユーザーは気づけません（ミスでやらない限り基本的にその操作をしないと思われる）。 ですので、基本的に重要な操作はそれに割り当てず、他の方法でもできる操作のショートカットとして使用することをおすすめします。

また使用する場合は、上下左右の端をタッチしたときにヒントを表示して、クリックした時にこんなことが起こるという内容をユーザーに教えるという方法は有効だと思います。 AppleTVのMedia PlayerはSeekBar表示時などに左右端をタッチするとSeekBarに10秒スキップアイコンが表示されます（真ん中あたりをタッチしたときは表示されない）。 これは、このままクリックした場合に10秒スキップするというヒントを示している例です。

コンテンツ再生時に利用される上下左右スワイプアクションのよくある例

動画などを再生している画面で左右にスワイプした時は、先程も書いたように両隣のコンテンツに移動するというアクションを割り当てていることが多いように思います。 上から下にスワイプした場合は、その動画のinformationやAudioや画質の設定などを含めたTabBarを表示しているケースが一般的な操作として見られます。 下から上にスワイプした場合は、特にこれと言った共通の操作にはなっていないようですが、Facebook Video Appのように関連動画を表示したりというケースは有効的な使い方かなと思います。

MenuはBackボタン

MenuはほぼBackボタンとしての役割を持っていますが、AppleTV を使用しているとすぐにコレに慣れて自然なものとして使用する感じになります。 なので、基本的に視覚的なボタンとして画面上の「戻る」ボタンは表示する必要はありません（表示しないことを推奨している）

Don’t display a back button. People know that pressing Menu takes them back, so don’t waste space in your app with an extra control that duplicates this behavior.

Navigation - App Architecture - tvOS Human Interface Guidelines

ただし、商品の購入やコンテンツの削除などの重要なアクションをする画面には「キャンセル」ボタンとして置くことを認めているようです。

If necessary, display a Cancel button. If the only visible button purchases or deletes something, it's good practice to include a Cancel button that returns to the previous screen.

Navigation - App Architecture - tvOS Human Interface Guidelines

Scrollは横方向をメインに考える

今までPCやスマートフォンなどのタッチスクリーンデバイスでは、縦方向のスクロールをメインに考えることが多かったように思います。 Apple TV Appでは横方向のScrollをメインに考えることがHuman Interface Guidelineでも推奨されています。

Favor horizontal navigation of content. Swiping to the side is easier and more natural than swiping up and down. Consider this when choosing or designing layouts for your content.

Navigation - App Architecture - tvOS Human Interface Guidelines

リモコンでの操作が上下よりも左右のスワイプの方が簡単という部分もありますが、テレビ画面は横長で縦方向よりも横方向のほうがコンテンツ数を多く表示できるためという部分も大きな理由かなと思います。

またHIGでは、ナビゲーションによるページ自体の切り替えはあまり多様せずに、できるだけスワイプなどのフォーカス操作のみでコンテンツをたくさん見れるような構成にする方が良いとも言っていますので、可能であればカテゴリとそれに属するコンテンツを１ページに展開して表示するのが良いのかなと思います。 その場合は、横方向のスクロール移動をカテゴリ内のコンテンツの選択に使用し、縦方向のスクロール移動をカテゴリの切り替えに使用するという感じが良いのではないかと思います。 （もちろん状況によってはカテゴリごとに別ページにしたほうが、より目的のコンテンツにたどり着きやすい場合もあるので適宜検討する）

画面内は要素を減らして、文字・コンテンツ・余白を大胆に大きく

よくスマートフォンアプリでもよく言われるようなことではありますが、Apple TV Appの場合はそれよりももっと大胆にこれに取り組んだほうが良いように思います。（気持ち的にはスマートフォンアプリの場合の３〜５倍くらいの気持ち）

Apple TV Appは「遠くにある大きい画面のテレビに表示して、それを見ながら手元にあるリモコンでポインターなしに操作する」という特性上、細かい文字などのコンテンツやボタンは非常に見づらく気づきにくいですし、細かい操作などが非常に不得意です。

なので一つ一つのコンテンツを大きくわかりやすく表示して、操作を単純明快にするために画面内の要素は必要最低限に減らして、現在どのコンテンツが選択されているのかなどが明確になるようにコンテンツを大きくわかりやすくする方が良いです。

１画面内での複数カラム（３つ以上とか）でのレイアウトやショートカットボタンを散りばめたような画面のUIデザインは、Apple TVのFocus and Selectionという操作では難しくしてしまうので基本的にやめたほうが良いです。

（スマホでいうなら、らくらくフォンくらいの簡潔さのイメージで作るぐらいの気持ちが良いかも）

文字の大きさ具合や余白の感覚は正直PCや作業ディスプレイに向き合って作っていてもよくわからないので、逐次テレビに映して確認しながらやるのが良いように思います。 SketchであればAirPlayをしながら作業して、フルスクリーンモード ＆ Hide Interface（旧プレゼンテーションモード, ショートカットは ⌘+. ）にして100%の表示にした状態にすればすぐにそれっぽく確認できます（TabBarを表示している場合は非表示にする必要がある）。

正直この操作もめんどいので、なんとかpluginなどでもっと楽にできるといいなーと思って、作ろうかと検討中です。

複雑な（キーボード）入力を避ける

Apple TVは物理的なキーボードがないのはもちろん、ソフトウェアキーボードもキーのフォーカスを動かして一文字ずつ打っていくタイプのキーボードなので、文字の入力が非常に面倒です。 なので、簡単なキーワードでの検索などはSiriをつかった音声入力でやるのが良いのですが、サインアップなどで入力するメールアドレスやパスワードなんかはSiriでの入力も難しいでしょう。 そういった場合は、あえてスマートフォンで操作させるように案内するというのも手です。 すでにアカウントを持っていて、スマートフォンではすでにログインしているというような場合はなおさらです。 Apple TV AppでQRやURLを表示しておいて、スマートフォンなどでアクセスしてもらい、Apple TV App側のログイン認証を有効にするというような手法が大手のアプリではよく見られるので、それらを参考にするのが良いと思います。

Swipe操作とFocus and Selectionの考え方

Apple TVの操作方法の基本的な概念として「Focus and Selection」があります。 Focus and Selection - App Architecture - tvOS Human Interface Guidelines

Apple TVにはPCようなマウスポインターは存在せず、スマートフォンのように直接画面を触って操作するわけでもないため、現在どのコンテンツを選択肢しているのかを明示的に表示してそのフォーカスを動かすことによって操作をするという考え方です。

上のイメージのように、一覧画面であるコンテンツにフォーカスが当たってそれが大きく表示されているという状況では、フォーカスを右にずらそうと思った時（右のコンテンツにフォーカスを当てようと思った時）左から右にスワイプします。 これは、PCのポインターを動かしているように、フォーカスを移動させているとイメージすると非常にわかりやすいと思います。

公式のフォトアプリなどでは一つ一つの写真や動画のみを大きく表示するということもあります。 このときも左右のスワイプで左右のコンテンツに移動するということが可能ですが、この場合は先程のフォーカスの概念とは逆の操作になるので注意が必要です。 先程は「PCのポインターを動かしているように、フォーカスを移動させているイメージ」だったため、右に移動したい場合は左から右に向かってスワイプする操作でした。 今回は視覚上フォーカスは存在せず、画面に表示されている写真等の一つのオブジェクトを直接操作するというイメージで操作することになります。 つまり右に移動したい場合は、今表示されているオブジェクトを左に動かしていくと右から次のオブジェクトが出てくるという操作になります。 （これはスマートフォンでのタッチスワイプ操作やスクロールをイメージしていただくとわかりやすいかと）

このように、Apple TV上でもスワイプでのオブジェクトのフォーカス・選択移動は状況によって異なるので、きちんと理解しておく必要があります。 （時々、これが間違っているアプリがあって、それを操作したときは非常に気持ち悪い感じがする）

まとめ

AppleTVはやっぱりまだまだ、動画コンテンツやゲームなどのエンターテイメント用途に使うというのがメインです。 動画と言っても正直なところ料理動画を見るみたいな利便性のサービス的な側面で打ち出したアプリは非常に難しいだろうなーという印象です。なので現状は多くがエンターテイメントを前面に押し出したアプリが多く、それらがもっとも成功しているように思います。

サービス的なアプリはものすごく難しいと思うので、逆にそれができたら超革命的ですので皆さんのチャレンジを見守りつつ、私も何か考えてみたいと思っています。

※ 文中等にもし間違いやアドバイスがあれば、ぜひともコメント等で教えていただけると非常に助かります

Spinners Inc.ではAppleTVなどのTV向けAppやHomekitなどのスマートホーム関連, ARKitなどのAR関連といった内容に関するお仕事をしています。 Spinners Inc.

追記 2017.12.16

developers.cyberagent.co.jp

記事中のAbemaTVの件について、読んでくださっていたようで対応していただいたみたいです。（AppleTVでAbemaTVをよく見ているので対応してくださったのはユーザーとしても嬉しい） ところで上記記事で紹介されている、コントローラの上下左右移動については気づきませんでしたので非常に良いご指摘でした。ありがとうございます！ リモコンのタッチ操作とコントローラの上下左右は別にできると良さそうだなぁという気もしましたが、それもよくないのだろうか…？ （ちなみに、AbemaTVアプリのおかげかタップ操作での誤操作のストレスに調教されて自分の熟練度が上がってしまったのか、最近はわざとやらないと誤操作しなくなってしまった😇）