事例紹介

スマートフォンを超えて: JioHotstar が折りたたみ式デバイスとタブレット向けに UX を最適化した方法

所要時間: 3 分
Charles Munger さんのプロフィールを表示
Prateek Batra デベロッパー リレーションズ エンジニア、Android アダプティブ アプリ

スマートフォンを超えて: JioHotstar がアダプティブ UX を構築した方法

JioHotstar は、インドを代表するストリーミング プラットフォームであり、4 億人を超えるユーザーを抱えています。33 万時間を超えるビデオ オンデマンド（VOD）と主要なスポーツ イベントのリアルタイム配信を含む膨大なコンテンツ ライブラリを擁するこのプラットフォームは、大規模に運用されています。

JioHotstar は、膨大な数の視聴者にプレミアムなエクスペリエンスを提供するため、折りたたみ式デバイスとタブレット向けにアプリを最適化し、視聴エクスペリエンスを向上させました。これを実現するために、Google のアダプティブ アプリ ガイダンスに沿って、サンプル、Codelab、クックブック、ドキュメントなどのリソースを活用し、すべてのディスプレイ サイズで一貫してシームレスで魅力的なエクスペリエンスを作成しました。

JioHotstar の大画面への挑戦

JioHotstar は標準的なスマートフォンで優れたユーザー エクスペリエンスを提供していましたが、チームは新しいフォーム ファクタを活用したいと考えていました。まず、チームは大画面アプリの品質に関するガイドラインに照らしてアプリを評価し、折りたたみ式デバイスやタブレットにユーザー エクスペリエンスを拡張するために必要な最適化を把握しました。大画面アプリの Tier 1 ステータスを達成するため、チームは 2 つの戦略的なアップデートを実装し、さまざまなフォーム ファクタにアプリを適応させ、折りたたみ式デバイスで差別化を図りました。JioHotstar は、折りたたみ式デバイスやタブレット デバイスに特有の課題に対処することで、あらゆるディスプレイ サイズとアスペクト比で高品質かつ没入感のあるエクスペリエンスを提供することを目指しています。

必要な対応

JioHotstar のユーザー インターフェースは、主に標準的なスマートフォンのディスプレイ向けに設計されているため、ヒーロー画像の縦横比、メニュー、番組画面を、他のフォーム ファクタのさまざまな画面サイズや解像度に適応させる際に課題が生じました。そのため、特に横表示モードでは、画像の切り抜き、レターボックス表示、低解像度、未使用スペースが発生することがよくありました。タブレットと折りたたみ式デバイスの機能を最大限に活用し、これらのデバイスタイプで最適化されたユーザー エクスペリエンスを提供するため、JioHotstar は UI の改良に注力し、より幅広いデバイスで最適なレイアウトの柔軟性、画像レンダリング、ナビゲーションを実現しました。

社内での取り組み

JioHotstar は、大画面での視聴体験を向上させるため、WindowSizeClass を組み込んで、コンパクト、中程度、拡大の幅に最適化されたレイアウトを作成することで、アプリを強化する取り組みを行いました。これにより、アプリのユーザー インターフェースをさまざまな画面サイズやアスペクト比に適応させ、さまざまなデバイスで一貫性のある視覚的に魅力的な UI を実現できました。

JioHotstar は、このパターンに従い、Material 3 Adaptive ライブラリを使用して、アプリで使用可能なスペースを把握しました。まず currentWindowAdaptiveInfo() 関数を呼び出し、次に 3 つのウィンドウ サイズクラスに応じて新しいレイアウトを使用します。

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

ブレークポイントは、大きいものから小さいものの順に並んでいます。これは、API が内部で「以上」をチェックするためです。EXPANDED 以上の幅は、常に MEDIUM より大きくなります。


JioHotstar は、折りたたみ式デバイスならではのプレミアムなエクスペリエンスであるテーブルトップ モードを提供できます。この機能により、折りたたみ式デバイスを部分的に折りたたむと、動画プレーヤーが画面の上半分に、動画コントロールが下半分に移動し、ハンズフリーで操作できるようになります。

これを実現するには、同じく Material 3 Adaptive ライブラリを使用して、同じ currentWindowAdaptiveInfo() でテーブルトップ モードをクエリします。デバイスがテーブルトップ モードで保持されると、上半分と下半分の形状に合わせてレイアウトを変更できます。上半分にプレーヤーを配置し、下半分にコントローラを配置するには、列を使用します。

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

JioHotstar は、Tier 1 の大画面アプリの品質に関するガイドラインを満たしています。チームは、アダプティブ アプリのガイダンスを活用し、サンプル、Codelab、クックブック、ドキュメントを利用して、これらの推奨事項を組み込みました。

ユーザー エクスペリエンスをさらに向上させるため、JioHotstar は動画検索ページのタップ ターゲットのサイズを推奨される 48 dp に拡大し、大画面デバイスでのユーザー補助を確保しました。動画の詳細ページがアダプティブになり、画面サイズや向きに合わせて調整されるようになりました。単に画像を拡大縮小するのではなく、ウィンドウ サイズクラスを活用してウィンドウ サイズと密度をリアルタイムで検出し、各フォーム ファクタに最適なヒーロー画像を読み込むことで、視覚的な忠実度を高めています。ナビゲーションも改善され、さまざまな画面サイズに合わせてレイアウトが調整されるようになりました。

ユーザーは、大画面デバイスで JioHotstar のお気に入りのコンテンツを、より最適化された視聴エクスペリエンスで視聴できるようになりました。

「Google とともに大画面アプリの Tier 1 ステータスを達成したことは、私たちの共有ビジョンの強さを反映するマイルストーンです。JioHotstar では、大画面デバイス向けの最適化は単なる適応性にとどまらず、折りたたみ式デバイス、タブレット、コネクテッド テレビを急速に受け入れている視聴者の視聴体験を向上させることだと常に考えてきました。

Google の Jetpack ライブラリとガイドを活用することで、コンテンツ消費に関する当社の知見と、プラットフォーム イノベーションに関する Google の専門知識を組み合わせることができました。このコラボレーションにより、両チームは限界を押し広げ、ギャップを解消し、あらゆる画面サイズでシームレスで没入感のあるエクスペリエンスを共同で作成することができました。

この強化されたエクスペリエンスを何百万人ものユーザーに提供し、インドと世界がストリーミングを体験する方法に新たな基準を確立できることを誇りに思います。」
- Sonu Sanjeev 氏、シニア ソフトウェア開発エンジニア

作成者:
続きを読む