この記事は Android team による Android Developers Blog の記事 " U-NEXT sees 1.5X increase in tablet installations after boosting support for large screens " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
日本最大級の国内ストリーミング サービスかつデジタル コンテンツ サービスである U-NEXT は、ユーザーが好むコンテンツを表示するための新しい手法を常に模索しています。U-NEXT では、映画、アニメ、ライブ配信、マンガ、雑誌、電子書籍など、1,200,000 以上の作品を単一のアプリで利用できます。
UX を改善するための手法を常に模索し続けている U-NEXT は最近、Android タブレットや Chromebook などの大画面デバイスや折りたたみ式デバイスの市場が拡大している点に着目し始めました。そこで、U-NEXT のエンジニアは、大画面デバイスや折りたたみ式デバイスの独自の強みを活かして、コンテンツの視聴方法を改善できるのではないかと考えました。たとえば、大画面デバイスで利用できる優れたマルチウィンドウ機能を組み込むことで、多種多様な情報を表示できるようになったり、折りたたみ式デバイスの UX を改善すれば、従来の紙の本のような読書体験をうまく再現できるかもしれません。
ただ、大画面デバイスや折りたたみ式デバイスで U-NEXT のアプリを使用している際に、バグが発生することもありました。たとえば、U-NEXT を大画面デバイスで開いた場合に、重要なボタンが隠れてしまい、これらのナビゲーション ツールがページのどこにあるかユーザーが探さなければならなくなっていました。
そこで、UX を大幅に見直して Android の大画面デバイスや折りたたみデバイスにより対応できるようにするために、U-NEXT のチームは、既存のバグを一掃してから、大画面を最大限活用できる機能を追加するという 2 段階でプロジェクトに取り組みました。
バグを一掃する
アプリ内の重要なナビゲーション ボタンが見えなくなるという問題に対処するために、U-NEXT のエンジニアは ConstraintLayout (英語) を使用して、表示領域を制限する境界を設定しました。これにより、UI 要素が画面外に押し出されてしまうことを防止でき、また、画面のサイズによらずに適切な向きで表示されるようになります。
また、U-NEXT のアプリが大画面デバイスで適切に表示されないこともありました。たとえば、ユーザーが閲覧できる動画の一覧を表示するページは、通常、ヘッダーとキュレートされた動画一覧で構成されます。本来は動画の一覧がページ上のほぼ全体に表示されるはずですが、大画面の場合、ヘッダーが画面上のほとんどのスペースを占有してしまっていたため、動画コンテンツの操作がしづらくなっていました。U-NEXT のチームは、大画面でのヘッダー画像の幅を制限することで一覧の表示スペースを確保し、大画面デバイスを使用するユーザーが操作しやすくして、この問題を解決しました。
ユーザーが U-NEXT のアプリで書籍を読む場合、画面のタップ操作で横方向のスクロールバーを表示でき、文章内を迅速かつ簡単に移動できます。ただ Chromebook の場合、このナビゲーション ツールは表示されませんでした。
U-NEXT の Principal Engineer、三輪 智也氏は次のように述べています。「もともと、ユーザーのタップ時に Chromebook が全画面表示になっているかどうかの判定には、SystemUiVisibility を使用していました。全画面表示ではないことを SystemUiVisibility が検出した場合に、コントローラが表示される仕組みでした。ただ、Chromebook では SystemUiVisibility が変更されても、このリスナーが呼び出されないため、コントローラが表示されませんでした」
そのため、Chromebook で SystemUiVisibility が変更された場合に、コントローラの表示を処理する方法を変える必要がありました。このバグを修正することで、Chromebook で画面をタップすると、SistemUiVisibility の変更とコントローラの表示 / 非表示処理が同時に行われるようになったため、ユーザーが直面していた問題が解決されました。
U-NEXT のデベロッパーが対処した最後のバグは、視聴時にユーザーが折りたたみ式デバイスを折りたたんだ際に、動画が一瞬途切れてしまうというものでした。コンテンツの視聴時にデバイスを折りたたんでもシームレスに処理されなければなりませんが、ディスプレイを折りたたむ際にアクティビティを自動で削除して再作成するため、動画が一瞬途切れていたのです。
U-NEXT のデベロッパーは、この構成の変更を Android で自動的に処理するのではなく、手動で処理するようにアプリを変更しました。チームは、onConfigurationChanged() を使用して変更をオーバーライドし、UI 要素の削除と再作成が自動的に行われないようにしました。これにより UI 要素が維持され、動画の再生が途切れないようになりました。
さまざまなフォーム ファクタを活用する
U-NEXT はユーザー エクスペリエンスが大幅に向上することを期待し、機能刷新の一環として、従来型のナビゲーション バーをナビゲーション レール (英語) に置き換えました。
三輪氏は次のように述べています。「快適なユーザー エクスペリエンスを提供するという点に関して言えば、目的の箇所に手が届きやすいということが重要になります。従来型のナビゲーション バーの場合、中央にあるボタンに手が届きづらいです。ナビゲーション レールであれば簡単に手が届きます。」
次に U-NEXT のチームは、読者が折りたたみ式デバイスで電子書籍を読んでいる際に、コンテンツを 2 ページの見開きで表示できるように改善を加えました。折りたたみ式デバイスが縦向きの場合、通常は 1 ページのみが表示されます。ただ、ほとんどの折りたたみ式デバイスには 2 ページを表示できる十分なスペースがあります。そのため、U-NEXT のデベロッパーは、縦向きか横向きかによらずに、あるいは、デバイスが少し折りたたまれている状態でも常に 2 ページの見開きが表示されるようにしたいと考えました。
また、U-NEXT のチームは、大画面デバイスや折りたたみ式デバイスでのユーザー エクスペリエンスをさらに改善するために、生活の質を上げられるちょっとしたアップデートも加えました。このアップデートには、大画面デバイスでの Google Play アプリ内課金への対応の強化、ピクチャー イン ピクチャー (英語) の表示の最適化などが含まれています。
Android であれば最適化が簡単
U-NEXT チームは、大画面デバイスや折りたたみ式デバイス向けにアプリを簡単に最適化できたことに驚いていました。U-NEXT は、Android のデベロッパー リソースを活用することで、時間と労力を最小限に抑えながら、U-NEXT のアプリを使用してさまざまなデバイスでコンテンツを視聴する方法を改善できました。
三輪氏は次のように述べています。「そこまで難しくはありません。ナビゲーションを導入することは比較的簡単でしたし、アプリが基本的な画面の回転に対応していれば、折りたたみ式デバイスへの対応も一般的にそれほど難しくはありません。」
大画面により対応するように U-NEXT アプリをアップデートしてから、タブレットでのインストール数は 1.5 倍になりました。また、大画面デバイスを使用するユーザーの視聴時間も、10% 以上増加しています。
今後、U-NEXT のチームは、マウスやキーボードとの互換性の向上、詳細なリスト表示の導入による検索機能の強化、テーブルトップ モードのサポートの推進、簡単にコンテンツを共有できるドラッグ＆ドロップ機能の実装など、引き続き大画面デバイス向けの機能を強化していく予定です。
U-NEXT は、最近のマテリアル デザイン 3 (英語) のアップデートをはじめ、Android の増え続ける大量のドキュメントにさらにリソースが追加されたことを歓迎しています。これによって、大画面デバイスや折りたたみ式デバイスを利用するユーザーが拡大し続ける状況にもさらに対応しやすくなります。
大画面デバイスへの最適化を今すぐ開始する
大画面デバイスや折りたたみ式デバイスなど、新しいフォーム ファクタを使用するユーザーの数は増加しています。そのようなデバイスを使用するユーザーをサポートする方法は Android の大画面ギャラリーの例を参考にしながら学べます。
Reviewed by Mari Kawanishi - Developer Marketing Manager, Google Play
