5種類57デバイス対応UIデザインの裏側——U-NEXTブランドリニューアル
U-NEXTは、2020年4月にブランドリニューアルを行いました。新ブランドは、ブランドデザインを担当するNicolas Goninを中心に構築していきましたが、そのブランドをあらゆるタッチポイントに反映するに当たっては、さまざまなメンバーが活躍しました。
今回は、ユーザーのU-NEXT体験に最も影響を与えるアプリ等のUIデザインを担当した源田みどり、Livioに話を聞きました。
源田 翠
UIデザイナー / Web制作会社を経てアプリのデザインに関心を持ち、ゲーム会社へ転職。家庭用ゲームやオンラインゲームのUIデザイン、新規タイトルの立ち上げなどを経験した後、よりUIを突き詰めようと考え2017年2月U-NEXTに入社。Product Design Team所属。担当タイトルに、モンスターハンターストーリーズ、ブラウザ三国志など。
Livio
UIデザイナー / 3年間グラフィックデザインのインターンを経験した後、スイス国内の広告代理店へ入社。5年弱、2社で広告グラフィックのデザイン・アートディレクションを経験。代理店で出会った日本人アートディレクターに紹介された日本の広告クリエイティブをきっかけに、来日。制作会社でUIをはじめデジタル領域のデザインを経験した後、2018年12月にU-NEXT入社。Brand Desgin Teamを経て、現在はProduct Design Team所属。
Livio／源田
多様な媒体でブランドの“らしさ”をどう作るか
——今回のブランドリニューアルでは、お二人が中心となりUIのリニューアルを進めてきたと伺いました。どのような経緯でスタートされたのでしょうか？
源田：最初は、「新しいブランドをUIに落としてもらえないか」というラフなスタートでしたね。現在、Product Design Teamには5人のUIデザイナーが在籍します。普段はPO（Product Owner）がWikiとワイヤーを用意し、都度担当者を決めて作り込むのですが、今回はアートディレクターのNico（アートディレクターのNicolas Gonin）が作った簡単なドキュメントが土台でした。
Livio：最初に用意されていたのはビジュアル素材とコンセプト資料でした。モックアップやサンプルはなかったので、UIに反映するとどうなるかを検討するところからスタートしました。
Nicoが用意したドキュメントの一部
——最初新しいブランドを見たときは、どう思われましたか？
源田：アイデアとしては、個人的にも気に入っています。一方UIに反映するという意味では、難しい部分もあるな…と感じましたね。特に苦戦したのは、テーマカラーがないことです。「だれにとっても自分のものと思えるように、またどんな作品ともコラボレートできるように、色の印象をもたせない」というコンセプトにはとても共感するのですが、インターフェイスを作る上では悩ましいと考えていました。
Livio：そうですね。それに加えて、媒体ごとに新しいブランドを反映する強さは悩みました。U-NEXTの場合、展開する媒体の幅がとても広い。映画館やプロモーションで使われる紙媒体もあれば、デジタルの広告、Webサイト。視聴環境もWebやアプリだけではなく、テレビやSTB（Set Top Box）、ゲーム機なども含まれます。
特に、デジタルではユーザビリティも重視しなければいけないので、紙ほどのインパクトのあるブランド表現はしない方が良い場合もあります。どれくらいブランドの“らしさ”を反映するかは、何度も調整を重ねました。
「プラットフォームごとのマナー」とのバランス感覚
——実際、どのように検討を進めていかれたのでしょうか？
源田：まずは、UIに反映するブランドの“強さ”を調整するため、パターンを作っていきました。
あくまでU-NEXTの主役はコンテンツ。それを阻害してまでブランドが前面に出でてくるようなデザインはあるべき姿ではありません。たとえば、主要要素の一つであるジオメトリックパターンを背景全部に敷くのは、存在感がありすぎるのでNGです。
とはいえ、新たなブランドという印象は欠かせません。何があれば新しくなったという印象を持ってもらえるか、どうすればブランディングができているといえるかなどは議論を重ねましたね。
制作したデザインデータの一部
Livio：話をしながらいくつもパターンを出したので、試した数でいうとかなりの量になると思います。スプラッシュにないとブランディングとは言えないんじゃないか、ここに入れるとコンテンツの邪魔になるんじゃないかなど、そういった議論をかなりの数やりました。
——その上で、各プラットフォームに反映を？
源田：そうですね。並行する部分もありながら動かしていきました。先ほどLivioがお話ししたように、U-NEXTはデバイスの幅がとても広いので、「U-NEXTブランドとしての共通性」と「プラットフォームごとのマナー」のバランス感覚は必須です。
今回は、デバイスごとの差を意識せず一通り作り、話が進んだあとにプラットフォームに合わせたカスタマイズをしていきました。抽象的に全体を作り、それぞれのマナーに最適化する中で詳細を詰めるイメージです。
Livio：詳細を詰める中では、新しいブランドとマッチするものは積極的に選んでいきました。たとえば、Android TVでフォーカスしたものが拡大するモーションは、新ブランドとも相性が良いと考え取り入れました。
また、ユーザー体験に与える影響を考え、デバイスによってはあえて表面的な見た目の変更にとどめているものもあります。デザイナーとしては新しいブランドに合わせて作り替えたい気持ちもあるのですが、変えるべきではないと判断したものもありました。
——こうした多様なデバイスを手がけられるのはU-NEXTならではですね。
Livio：日々、新たな発見と学びの連続ですね。マルチデバイス展開しているサービスは数多くありますが、こんなに少人数でこれだけの種類を作っているチームはまずないでしょう。経験の浅い領域でも積極的に挑戦できるのは、なかなかできないことだと感じています。
その一方で、まだまだ経験値が足りないからこそ「いいと思うデザイン」を作っても「実装上難しい」「デバイスのルールから考えるとNG」という壁には必ずぶつかります。こればかりは、知識と経験を積まなければと日々思うところですね。
源田：それに加えて、ユーザーが使う上での「モード」やU-NEXTを使う前後でおこなっていたことも違うので、前提を考えてデザインをしていくともっと変数があります。そういった多様な要素を加味して手を動かすのは、純粋に楽しいですね。
ユーザーと向き合い、愛されるブランドへ
——実際、今年4月に新たなブランドを反映したUIがリリースされました。リニューアルをすると、以前の使い勝手になれたユーザーから反発が起こることもありますが、反響はいかがでしたか？
Livio：幸い今回は見た目に関してネガティブな意見はそこまでなかったように思います。使い勝手に関わる大幅な変更をしていないのもあると思いますが、比較的ポジティブな意見が多かったですね。
源田：「青の方が好きだった」という声はいくつか目にしましたね。ただ、それ以上に「かっこよくなった」という前向きな声も多かったです。特にiOSは数カ月前に大幅な機能面のアップデートを行い改善を重ねていたので、ユーザーにとっては徐々に慣れてきているタイミングなんじゃないかと思います。
——ブランドリニューアルを経て2カ月ほど経ちました。（※取材時）Nicolasさんは以前の取材で「ここからがスタート」とお話しされていましたが、今取り組もうと考えていることはありますか？
Livio：まだまだたくさんありますよ（笑）。細かなUIの改善点は膨大にありますし、デバイスごとの対応もまだまだ道半ば。優先度をつけながら取り組んでいる最中です。
源田：今回のベースデザインが、iOSやマテリアルデザインのガイドラインに綿密に準拠しながら…と作ったわけでないのもあり、デバイスごとへの最適化のは特に力を入れたいですね。
——そこに向け、すでに動いているものはありますか？
源田：ユーザーの反響を見ながらの改善は直近力を入れていることの一つですね。CXOのJasperが入社し組織化が進んでから、業務の専門性も高まりチームの層も厚くなりました。その流れの中でUXリサーチャーがチームに加わり、ユーザー視点をより重視するようになってきています。
Livio：そうですね。これまで以上にユーザーの声に基づいたサービス作りができるようになってきているように感じます。自分たちの仮説や機能要件からだけではなく、ユーザーと向き合い、「ユーザーにとって本当に良いブランド」を作っていきたいです。
（参考）対応デバイス／種類
テレビ Amazon Fire Stick
テレビ Amazon Fire TV
テレビ Amazon Fire TV Cube
テレビ Anker Nebula Capsule II
テレビ Apple TV
テレビ D-room TV
テレビ Epson MOVERIO BT-300
テレビ Funai Android TV OS搭載テレビ
テレビ Funai スマートテレビ
テレビ Google Chromecast
テレビ Google Chromecast Ultra
テレビ Google Home
テレビ Google Home Mini （現Google Nest Mini）
テレビ Google Nest Hub
テレビ Google Nest Hub Max
テレビ Google Nexus Player
テレビ Hisense スマートテレビ
テレビ Hitachi Wooo スマートテレビ
テレビ LG スマートテレビ
テレビ Panasonic Diga ブルーレイディスクプレイヤー
テレビ Panasonic Private Viera スマートテレビ
テレビ Panasonic Viera スマートテレビ
テレビ Pixela 4K Smart Tuner
テレビ Pixela Smart Box
テレビ Pixela Smart TV
テレビ popIn Aladdin
テレビ popIn Aladdin2
テレビ popIn Aladdin SE
テレビ popIn z6
テレビ Sharp Aquos Android TV OS搭載テレビ
テレビ Sharp Aquos スマートテレビ
テレビ Sharp ネットプレイヤー
テレビ Sony Android TV OS搭載テレビ
テレビ Sony コンポーネントオーディオ
テレビ Sony ブルーレイディスクプレイヤー
テレビ Sony ホームシアターシステム
テレビ TCL Android TV OS搭載テレビ
テレビ Toshiba Regza スマートテレビ
テレビ Toshiba Regza ハードディスクレコーダー
テレビ U-NEXT TV M220
テレビ U-NEXT TV M380
テレビ 光BOX+
スマートフォン Android OS搭載スマートフォン （Google Mobile Service）
スマートフォン Android OS搭載スマートフォン （Huawei Mobile Service）
スマートフォン iPhone シリーズ
タブレット Android OS搭載タブレット （Google Mobile Service）
タブレット Android OS搭載タブレット （Huawei Mobile Service）
タブレット iPod シリーズ
ゲーム機 PS4
ゲーム機 PS4 Pro
PC macOS 搭載Mac（Chrome）
PC macOS 搭載Mac（FireFox）
PC macOS 搭載Mac（Safari）
PC Windows OS搭載PC （Edge）
PC Windows OS搭載PC（FireFox）
PC Windows OS搭載PC（IE11）
PC Windows OS搭載PC（Chrome）