UI改善に新機能追加。日々スクラップ＆ビルドを繰り返しているサービス開発現場では、一つのデザインを創り上げるまでに数十を超えるデザイン案を作成することも少なくありません。本連載では"お蔵入りUIデザイン"と題して、現在のデザインに至るまでにお蔵入りとなったデザインにフィーチャーし、「なぜお蔵入りになってしまったのか？」をオクラくんと共に担当デザイナーがご紹介していきます。

オクラくん
ネバにちは！
無料で楽しめるインターネットテレビ局『AbemaTV』の開発現場にやってきたよ。
どんなお蔵入りデザインが見られるネバかな〜。
それでは早速デザイナーさんを呼んでみよう！ デザイナーさーん！

清水 康秀（以下、清水）
オクラくんこんにちは！

オクラくん
初めまして、お蔵入りのデザインを存分に堪能できると聞いてワクワク、いや、ネバネバしながらやってきたオクラくんだよ！

清水
『AbemaTV』デザイナーの清水です。今回オクラ君に紹介するのは、2018年3月28日にリリースされた『AbemaTV VR』のUIデザインです。

『AbemaTV VR』では、まるで家でプロジェクタで投影しているかのように大画面でAbemaTVを楽しむことができます。自分を囲むようにチャンネルが並んでいるVRならではのUIで、チャンネル切り替えや番組表からの検索が可能です。

また、映像の向きやサイズをコントローラーで好みに変化させることのできる画面拡縮機能が特徴となっています。

好きな位置に映像を動かせるので、寝ながら番組の視聴もできるんですよ。

オクラくん
360度映像に囲まれるなんて、臨場感がすごそうネバ〜！
いろんな番組を見てみたくなるネバ〜！
早速お蔵入りになってしまったUIを見せてくれネバよ〜。

清水
僕がこのプロジェクトに参加したのが昨年11月頃で、今年3月のリリースまでの4ヶ月間でデザインをたくさん変更しました。今日はその過程でお蔵入りになったものをご紹介しますね！

▷ アプリの体験を360度の空間に落とし込む

清水
まずは、僕がこのプロジェクトに参加した11月頃のUIデザインがこちらです。この頃のUIはAbemaTVの世界観がモチーフの空間がベースにあり、アプリの機能の一部のモックアップをエンジニアさんが作ってくれていました。

そのUIは、メインの動画の横に番組情報や番組表などを並べたデザインでした。

オクラくん
『AbemaTV』アプリって、左右にスワイプして番組を探す「ザッピング体験」が肝となってると思うんだけど、このVRのUIはそれが直感的にわかりづらいネバね。

これじゃあダメネバ。

清水
（！！）
...うう...そうなんです。
『AbemaTV』アプリのユーザーをメインターゲットにしたので、なるべく使用感をアプリと近づけたいと考えました。そこで、動画視聴体験とザッピング体験の二つをシンプルにわかりやすくすることを最初に考えました。

その結果、メインの動画のサイズだけが一回り大きくなり、その他の動画は暗くなってユーザーを囲むように番組が並ぶUIに変更しました。左右に動画が見えていれば、アプリを使用しているユーザーなら直感的にザッピングしてくれるのではないかと考えたからです。また、360度空間を使用することでVRの特性を活かしたデザインになりました。

オクラくん

確かにこっちのほうがワクワクするネバァ！！
他にもお蔵入りしたUIはあるネバ？ もっとくれネバァ！

シンプルにとどめたコメント表示

清水
コメントの表示方法は様々な案を出し、実際に動くものを作りながら検討していきました。

初期はアプリのコメントをそのまま表示していました。しかしこれではVRという特性を活かしきれていないのではと思い、もっと空間を使ったコメントの表現ができないか、とアプリとは違うアイデアも検討していきました。

その中の一つで、床にコメントを表示したパターンがこちらです。

オクラくん
...読みづらいネバ。
ぁぁ、このどうしようもない感じがお蔵入り感あって非常に興奮するネバ...。

清水
...シンプルに読みづらいですよね。
床にコメントを出すアイデアは「空間を使う」という点で面白いかな、とは思ったのですが...。番組を視聴しながらコメントを見る基本の体験が極端に悪くなってしまったので、お蔵入りとしました。

次に、花火のようにコメントが出たらどうか？ と考えコチラも動くものを作りました。

オクラくん
...おおっ！？

う、うーん。
一見すると空間を自由に使っていて、VRでしかできない表現で良さそうに見えたネバけど...。

清水
そうなんですよね。平面のデザインでの見え方は良い気がしたのですが表示される場所が決まっていないため、VR空間で見ると視聴中にコメントを見ることが思いの外難しくこちらもお蔵入りとなりました。

最終的にリリースされたものは、映像の隣に吹き出しのような背景とともにコメントが一つずつ流れていくものとなりました。

動きをつけることにより、新しいコメントが出たことを直感的にわかりやすくしています。シンプルではありますが、動画の視聴を邪魔せずコメントを見る上でこのUIが良いと判断しました。

VR空間といえど視野は限られているので、視野の範囲を意識しながらデザインを進めることが大事だと感じました。

オクラくん
いや〜色々と思い切ったデザインにもチャレンジしてたネバね〜。偉いネバ。
意を決して開発した思い切ったデザインが、あっけなくお蔵入りになるのが特に好きなんネバ。興奮するネバ。

清水
今後ユーザー数が増えてくればより様々なチャレンジをしていけると思うので、ぜひたくさんのユーザーの皆様に使ってみていただきたいです！

Daydream対応の端末をお持ちの方は無料でご利用いただけますので、ぜひこの機会にダウンロードしてみてください！ 泣いて喜びます。

オクラくん
Daydreamって日本語にすると「白昼夢」「空想」って意味ネバね。VR(仮想現実)って夢があって素敵ネバ。

清水
そういう意味では、お蔵入りになったデザインもなんだか楽しい白昼夢、まさに「Daydream」だったんですね。

オクラくん
ネッバァァァアアアアアアアアア！！！！
こりゃあ一本取られた☆

「サイバーエージェント お蔵入りUIデザイン」最近の記事
・そのデザイン過剰です！　FRESH！新機能『ライブファンディング』のお蔵入りUIデザイン

【企業プロフィール】 株式会社サイバーエージェント
インターネットというフィールドで「Ameba事業」「インターネット広告事業」「スマートフォンゲーム事業」「その他メディア事業」「投資育成事業」の5つの事業を展開。インターネット総合サービス企業として、企業・インターネットユーザーに対し有益なサービスを提供している。

●株式会社サイバーエージェント：https://www.cyberagent.co.jp/

『CyberAgent Developers Blog』

https://developers.cyberagent.co.jp/blog/