アメリカ版Huluが、ライブ配信を行う新しいプラットフォームとして「Hulu Live」をリリースしました。
「Hulu Live」にはメインカラーだったライムグリーンが一切使われておらず、デザイン面で大幅な刷新をしています。
この新しいUI/UXが斬新だと海外で話題になっています。

Hulu Liveの登場により、ケーブルテレビのユーザーはインターネットに流れ込むと言われています。
視聴者はパソコンや家のテレビはもちろん、モバイル端末でライブ動画配信を見ることもでき、購読者には後で録画したものを再生して見ることができる機能も提供しています。

それでは、Hulu Liveがどんな機能を提供しており、どんなUI/UXになっているのでしょうか。
今回は、Hulu Liveの機能やUI/UX上のポイントをご紹介します。

Hulu Liveとは？

Watch_Live_TV_Online_and_Stream_On_demand___Hulu.png
https://www.hulu.com/live-tv

「Hulu Live」は、Huluが新しくリリースしたライブ動画配信を行うプラットフォームです。
YouTubeなどのようにユーザーがコンテンツをアップするのではなく、野球やバスケットボールをはじめとした実況中継など、従来ケーブルテレビが放送していたような番組を配信します。

10年前にHuluがローンチしたときは、ほどんど独占状態だったマーケットも、今では競争が激化しています。
AmazonやNetflix、YouTubeといった企業が注目を集める中、独自番組を制作することなく、多かれ少なかれ似たような番組が目立ちます。

では、Hulu Liveが他のサービスと差別化しようとしている部分はどこにあるのでしょうか。
それは*UX(ユーザーエクスペリエンス)*です。

HuluのUX＆デザインチームのサブリーダーであるジョン・コーチはCo.designのインタビューの中で、次のように語っています。

我々が大きな競争の中にいるのだとしたら、「自分たち」をどのように差別化できるか、常に考えていました。
そして明らかに、「体験」こそがそれを成し遂げる手段でした。

人々がテレビを見続けるのをやめてインターネットにシフトさせるというHuluの構想は、2016年1月に始まりました。
当時、このチームにはスタッフとしてたった6人のデザイナーしかいませんでした。
現在は40人以上のチームにまで拡大し、UXデザインのコンサルティングを行うデザインエージェンシーHugeとともにプロダクトデザインを行なっています。

Hulu Liveが変えたUX〜機械学習とオンボーディング

ケーブルテレビでもストリーミングサービスでも、番組を見るときに最も頭を悩ませるのは、見たい番組を探すことです。
選択肢の数は、テレビ番組の数と同じなので、新着番組を紹介しつつもユーザーが求めている番組を提供することが重要になります。

ストリーミングサービスにログインすると、さまざまな映画やお笑い番組、アニメなどが流れてきます。
ユーザーが最初にやるのは、昔で言えば雑誌形式のTVガイドをめくることで、少し前で言えばデジタルのテレビ番組ガイドを操作することです。

このUXは初期のHuluも同じだったと言えます。
たくさんの選択肢があれば、それだけユーザーのためになる、ということを前提にデザインされていました。

しかし、Huluは今回のプロダクトでホーム画面のグリッドシステムを撤廃しました。
その代わりに、ユーザーの好みを機械学習で学ぶアルゴリズムに変え、個人の好みに合いそうなものを提案する形に変えたのです。

Hulu Liveにアクセスすると、まずプロフィールをセットアップする操作に入ります。
この一連の質問に答えていくことで、そのユーザーがどのような番組が好きかをある程度把握できます。

リストの中から、犯罪ドラマなのか、イギリスのコメディなのか、アニメなのか、好きなジャンルを選んでいきます。
好きなジャンルを選んだあとは、好きな番組やネットワークをプロフィールに加えていきます。

最初にオンボーディング(サービスの流れに乗せること)を経験したユーザーには、カスタムのホームページが用意されます。
個人用ホームページには2つの別れたセクション(チャンネルと番組)が用意されており、ニュースやスポーツのようなアルゴリズムが選んでくれたテーマも表示されます。

ユーザーは1つの画面で1つのカテゴリーを閲覧することができ、右にスクロール(モバイルデバイスではスワイプ)を行うことで他のカテゴリーに切り替えることができます。

Hulu Liveで番組を観れば観るほど、機械学習のアルゴリズムによって観たい番組が次々に提案されていきます。
認知負荷(コグニティブオーバーロード)が軽減されれば、ユーザーのHuluに対するエンゲージメントもますます上がっていきます。

Hulu Liveが変えたUI〜色依存からの脱却とジェームズ・タレルのインスタレーション

HuluTV.jpg

ユーザーがコンテンツにアクセスするのを簡単にするだけでなく、Huluのデザインチームは存在感のあり、はっきりと差別化できるUIを作り上げたいと考えていました。

ジョン・コーチ率いるデザインチームが新たな差別化について考えているときに議題に上がったのは、**「自分たちが提供しているものは何か」*ということであり、結論は「ストーリーテリング」*でした。

語り部が語るのを暖炉を囲って聞き入るのが、現代文化ではスクリーンを囲って番組を見入るのになぞらえて考えてみました。
そのとき、デザインチームが重要な要素として見逃さなかったのが、*「光」*です。

この「光」の使い方からデザインチームの頭の中に浮かんだのは、ジェームズ・タレルの作品でした。
ジェームズ・タレルは、主に光や空間を題材とした作品を制作している現代芸術家です。
日本でも世田谷美術館や名古屋市美術館をはじめとして、さまざまな場所で彼の作品を見ることができます。

tarell.jpg
Copyright(C) James Tarell

タレルは没入感のある経験を作るために光を使っており、まさにHuluが実現したい没入的で映画のようで、なおかつパーソナライズされた経験を演出するのに最適でした。
タレルの作品と同様に、ステージを作り、ユーザーを空間に配置することで、独特の「ユーザー体験」が生まれると考えたのです。

「ブランドアイデンティティー」とは緑を全面に押し出すことではなく、「光を使った色面を通じての体験」そのものだと考えるようになったのです。

Hulu LiveのUIは「美しすぎる」と一時海外でも話題になりましたが、実は単にグラデーションを多用しているだけでなく、いくつもの問題を解決する考えられたデザインになっています。

例えば、当初Huluのデザイナーはフチなしのデザインを各画面で見せたいと考えていましたが、実際にはアートワーク(いわゆるジャケット画)の質は番組ごとにバラバラでした。
しかし、グラデーションのオーバーレイをかけることで、それらが全て統合されるように見えます。
デザイナーはエンジニアと協力し、独自のカラーピッキングのアルゴリズムを作り、主調色(ドミナントカラー)を分析して色調に基づいたグラデーションをそれぞれの画像にオーバーレイをかける方法を作り上げました。

差別化とは何か？

anime.gif

毎月39.99ドル(日本円で約4,500円)を支払うことで、通常のHuluに加えて50以上のチャンネル数を持つHulu Liveも視聴することができます。
さらに、50時間分の録画ストレージまで用意されています。
Hulu LiveはAndroid・iOS・Apple TV・Chromecast・Xbox Oneに対応し、今年の後半にはRokuやAmazon Fire TVデバイスにも対応予定です。

アメリカではSling TV、Playstation Vue、DirectTV Now、YouTube TVといった競合サービスがあります。
しかし、こうした若手の競合に対して、4大放送(ABC・CBS・Fox・NBC)のライブ放送を配信しているのも、Hulu Liveだけです。

しかし、こうしたラインナップだけでなく、Huluが変えようとしているのはそもそものユーザー体験です。
「ブラウズ」(ぶらぶらと見る)という体験そのものをなくし、自分が今観たい番組をすぐに観られるようにしたいと考えています。

まとめ

Hulu Liveは「Huluにライブ動画配信の機能が付け加わっただけ」という印象を持つかもしれません。
しかしデザインを細かく見ると従来のユーザー体験そのものを覆すほどよく練られたプロダクトだということが分かります。

日本では残念ながら利用できませんが、アプリやWebサービスを作っている方には、大変参考になるケーススタディなのではないでしょうか。