はじめてAppleTVのアプリデザインをしたお話

tvOSアドベントカレンダー19日目の記事です。

エンジニアさんの記事が多いなか毛色がちがって恐縮ですが、

カレンダーも後半、箸休めに読んでいただければ。

簡単に自己紹介

職場での異動をきっかけに、今年の春夏頃からAppleTV（AndroidTV）アプリのデザインを担当しています。

正直それまで触ったこともなかったので、

色々検索してみるも、tvOSのUI情報てなかなかないですね。

スマートフォンが出回り始めた頃に初めてモバイルアプリのデザインをした時のような気持ちです。

今回はAppleTVのここが好き！と、開発中につまづいた出来事を初心者目線から３つ紹介します。

とりあえずはじめにしたこと

■ガイドライン読みました

■GUI探していじってみたり（全然ない… ありがたや〜）

■スクショ撮るためにXcode入れたり

のちにβ版入れるためにも必要でした（@toshi0383 さんがまとめてくれてます）

https://qiita.com/toshi0383/items/8654798818a6774a11e5

Focus and Parallax がかっこよくてとにかく好き

TVはリモコン操作のため、現在の場所を明示する役割としてフォーカスがあります。

https://developer.apple.com/tvos/human-interface-guidelines/app-architecture/focus-and-selection/

tvOSはリモコン操作がTouch Surfaceでスルスルな反面、たまにどこにいるかわからなくなっちゃうことも。

でもね。

サムネがパララックするので、今どこを選択中なのかがすぐわかります。

そして少し放置しているとリモコンを置いていても

背景を落として目立つように。

こういう細かいところまでリビングで見ているユーザーのことを考えられていて

さすがだなぁと思います。

このFocus and ParallaxはtvOS一番の個性だと思うので、

AppleTVのアプリならば、これ入れたいよなぁと思うのでした。

（ただテキストとの相性が悪いところは困る( ˘ω˘ )

トップシェルフなどできちんとレイヤー分けされたパララックスサムネイルみつけると

無駄にグリグリグリグリしちゃいますね！

画像を複数用意しないといけないので、運用はとっても大変そうですが。。

シームレスなコンテンツ切り替え

AppleTVにおいてメインのナビゲーションとして使われる Tab bar。

クリックせずともフォーカス移動しただけでコンテンツが切り替わり

目的のページに素早く移動できてとっても便利ですね。

（たまに予期せず移動してしまってストレスなこともありますが…）

ではこちらは？

こちらもAppleの公式でよく見かける、ページ内のタブ切り替え。

（正式名称が分からず汗…Tab controller？）

本家ではこちらもクリックなしの、フォーカスのみで切り替わっているのですが…

とあるページでこのようなレイアウトを作ったことがあり、

エンジニアさんが作ってくれたモックを実際に触ってみると。

上にフォーカス移動したい時や、メニューを出すために横移動したい時（AndroidTVのBrowse Laneのようなメニューを左端においていた）意図せず「すべて」と「おすすめ」のコンテンツが切り替わってしまいストレスに。クリックで切り替えた方がいいかも。といった議論がありました。

（こういう場合はボタンのようなUIの方がよいのでは、といった案もあると思いますが）

リモコンが本当にスルスルなので、誤操作が起きやすいAppleTV。

フォーカス時の遷移はユーザーがストレスを感じないか、シーンによって意識すべきだなと。

縦スクロールとフォーカス

「〜に該当するコンテンツはありませんでした」

検索結果ゼロ件などでよく使うこちらの表記。

検索ページで、他のデバイスの仕様と合わせて最初こんな感じのレイアウトで作っておりました。

その後、検索結果の項目（ラベル）が増えることになり、ページが縦長に。

スクロール必至です。

するとエンジニアさんが

「スクロールするためにゼロ件の文言にもフォーカス当たっちゃいますけど、どうします？」

極端にいうとこんな状態に。。

なんのイベントも発生しないのにフォーカスが当たっちゃうぅ。

結果、シンプルにゼロ件表示は全体の１つのみにし、コンテンツがない場合はそのラベルはまるっとださない、となりました。

無駄なスクロールも減ってスッキリ！

機能を知らせるためにあえて出したい情報などもあると思いますが、常にどこにフォーカスがあたっているかを意識して表示情報の精査や見せ方を変える意識が大事だなと。

終わりに

普段tvOSの開発している方には当たり前のことばかりなのかもしれませんが、

思いがけないところで「たしかに！」と気づかされる日々です（精進します…）

今回はフォーカス周りのことになりましたが、

他にも同じような小さな気づきと失敗がたくさんあるので

忘れないうちに初心者備忘録としてまとめられたら。。

ちなみに、猫多めの画像となりましたが、

担当しているアプリはにゃんこアプリではありません(=ΦÅΦ=)

最後までありがとうございました！