# モダンなストリーミングUIデザイン | Vodlix **Source:** https://vodlix.com/ja/features/modern-uiux **Summary:** Web、モバイル、テレビのインターフェースをそれぞれの入力方法に合わせて構築。カタログ、視聴権限、視聴位置はその下で共通です。 **Publisher:** Vodlix --- ## モダンなUI & UX それぞれの画面を、実際の入力方法に合わせて構築。リモコン、親指、ポインターは3つの異なる道具であり、1つのレイアウトを3つの幅で表示するものではありません。 - **Feature Plan:** 2 - core-platform ## ストリーミングアプリのためのモダンなUI/UX：画面ごとに設計 Web、スマートフォン、テレビを、それぞれの実際の操作方法に合わせて構築。その下には同じカタログ構造があります。 - **Featured Image Alt:** モダンなUI/UX — ヒーロー画像 ### インターフェースがテレビでつまずく理由 VodlixのモダンなUI/UXは、画面に合わせてリサイズするのではなく、画面ごとに設計されています。インターフェースが最もつまずきやすいのはテレビです。ホバーもポインターもなく、視聴者は画面から数メートル離れて座っています。テレビに引き伸ばされたWebレイアウトは、この環境ではうまく機能しません。Vodlixはテレビの体験をリモコン向けに設計しており、見やすいフォーカス、大きな選択領域、十字キーに沿ったナビゲーションを備えています。OTT事業者にとって、画面ごとのネイティブなデザインこそが、リビングでの体験を自然なものにします。 #### Web対応 使い慣れたレスポンシブなレイアウト。 #### モバイルファースト タッチ操作と小さな画面のために設計。 #### テレビにネイティブ カーソルではなく、リモコンのために設計。 - **Image Alt:** モダンなUI/UX — 同じカタログ ### 同じカタログ構造、異なる入力モデル Web、モバイル、テレビのいずれでも、Vodlixは同じカタログ構造を維持しながら、画面ごとの操作方法を変えています。コンテンツ、カテゴリ、リスト、アカウントはどこでも同一で、違うのは入力モデル、つまりカーソルか、タッチスクリーンか、リモコンかという点だけです。あるプラットフォームを無理に別のプラットフォームへ引き伸ばすことはありません。視聴者はどのデバイスでも一貫したサービスを利用でき、各デバイスには実際の使われ方に合わせて設計されたインターフェースが用意されます。 ### ソファから読みやすいテレビレイアウト Vodlixのテレビレイアウトは、リビングの視聴距離に合わせた文字サイズと余白を採用しています。ノートPC向けのサイズの文字はソファからは読めないため、テレビではタイトル、説明文、メニュー項目をWebやモバイルよりも大きく、間隔を広くとって表示します。アートワークや列は、視聴者が部屋の反対側からでも読んで選べるように配置されています。離れた場所からの読みやすさはテレビのインターフェースの基本要件であり、Vodlixはそれを基本要件として扱っています。 ### リモコン、タッチ、マウスのために設計されたナビゲーション Vodlixでは、テレビのインターフェース上のすべての要素に、現在のフォーカスから上下左右の4方向へ移動するだけで到達できるため、リモコンで届かない場所に取り残される要素はありません。モバイルのインターフェースはタッチ操作向けに構築され、ジェスチャーや親指に合わせたサイズのタップ領域を備えています。Webでは、マウスとキーボード向けに使い慣れたレスポンシブなレイアウトを採用しています。入力方法ごとに最適なインターフェースを用意していることが、同じサービスをどのデバイスでもネイティブに感じさせる理由です。 **Q: Vodlixのアプリは、ひとつのデザインをデバイスごとにリサイズしたものですか？** いいえ。Vodlixは、Web、モバイル、テレビのインターフェースを各デバイスの操作方法に合わせて個別に設計しており、その下には同じカタログ構造があります。あるプラットフォームのものを別のプラットフォームに引き伸ばすことはありません。 **Q: Vodlixがテレビのインターフェースを別扱いにするのはなぜですか？** テレビにはホバーもポインターもなく、数メートル離れて視聴されます。そのためVodlixのテレビアプリは、フォーカスベースのナビゲーション、大きめの文字、リビングの視聴距離に合わせた余白を採用しています。 **Q: Web、モバイル、テレビでカタログは異なりますか？** いいえ。コンテンツ、カテゴリ、リスト、アカウントはすべてのVodlixアプリで同一です。変わるのはインターフェースと入力モデルだけなので、視聴者はどの画面でも一貫したサービスを利用できます。 **Q: Vodlixのモバイルアプリはタッチ操作向けに設計されていますか？** はい。Vodlixのモバイルアプリはタッチ操作と小さな画面向けに構築されており、縮小したWebページではなく、ジェスチャー、親指サイズのタップ領域、スマートフォンやタブレットに適したレイアウトを備えています。 **Q: 画面ごとのデザインでもブランドの一貫性は保たれますか？** はい。Vodlixのテーマ、カラー、ブランディングはすべての画面に適用されます。各インターフェースの違いは操作方法だけなので、スマートフォンからテレビまで、ブランドは一貫して伝わります。 **Q: デザインは変更できますか？** カラー、カードの形状、ヘッダーとフッター、全体のテンプレートを変更できます。インタラクションのパターンは意図的に同じようには公開していません。それらは好みの問題ではなく、入力方法への対応だからです。 **Q: インターフェースがうまく機能しているかは、どうすればわかりますか？** 視聴者がすぐに観たいものにたどり着き、また戻ってくるかどうかで、プラットフォームごとに測定します。インターフェースはWebでは問題なくても、テレビではうまく機能していないことがあり、社内の誰もそれに気づかない場合があります。オフィスでそのように視聴する人はいないからです。 **Q: ストリーミングのインターフェースでアートワークが大きいのはなぜですか？** ポスターはタイトルよりもはるかに速く判断でき、視聴者が各作品にかける時間は約1秒だからです。大きなアートワークはスタイルの選択ではなく、人が実際にカタログを見渡す速さへの対応です。