AbemaTVのシークプレビューへのこだわり

こんにちは。AbemaTVのUIデザイナーのリーダーをしている松本です。

みなさん、PCやスマホで動画をみることはもう当たり前の時代ですよね。

しかし、「動画プレイヤー」というものは奥が深すぎて未だに「普遍的なUI」が見つかりません。(あったら教えてください)

YouTube・Netflix・Hulu・ニコニコなどの動画サービスのプレイヤー、パソコンやスマホなど各デバイスの標準プレイヤー、テレビやゲーム機などの動画プレイヤーなど、数多くのプレイヤーがこの世に存在していますが、全てが人間のごとく個性豊かな表情を見せています。

今回はAbemaTVのiOS・Androidアプリのプレイヤーの「シークプレビュー」について。

ようやくAbemaTVの各デバイスでプレイヤーの「シークプレビュー」機能が実装されました。(Webは一足先にリリースしていました)

そのUIのこだわりをつらつらと述べます。

「シークプレビュー」とは

動画の再生コントロールをするスライダーをグリグリする時に出る画像のこと

これによっていい感じのとこから再生できたりする。

では早速ご覧ください！(Androidアプリ)

こんな感じです。

動画再生中にシークすると、再生されたままプレビューが確認できます。

デザイン制作時、いろんなビデオオンデマンドサービスのプレイヤーを参考にしました。

プレイヤーの挙動に詳しくなったのでいくつか共有したいと思います。

シーク時は動画の再生が止まります。「操作時は動画は止まって欲しいだろう」という開発者の狙いなのでしょうか？(AbemaTVでは、操作時も動画は再生し続けています)

AbemaTVとほぼ同じ挙動ですが、シーク時に動画上のコントロールパーツが消えない仕様でした。

シークプレビューとコントロールパーツが重なるのがレイヤー構造的にごちゃついて見えそうだったのでAbemaTVはシーク時に動画上のコントロールパーツが消えるようにしています。

こちらもAbemaTVと近い挙動です。しかし、個人的に気になる点が一つ。

シークバーとシークプレビューのマージンが狭いため、操作時に指がかぶるのです。この挙動はよく見受けられます。

AbemaTVは、そこをこだわって最適なマージンをとることにしました。↓

ほらね。AbemaTVは指とかぶることなくシークできます。

シークプレビューが動画そのものとなっているパターンでした。このようなプレイヤーも多く存在しています。大きくプレビューできる点がメリットですが、再生中の動画とシークしたい位置を見比べることができません。このサービスのシークは自分の撮影した動画の操作なので、その必要性が少ないのでしょう。

ちなみに、エンジニアに実装してもらう際にPixate(2016年にサービス終了)というプロトタイピングツールでデザインモックを作りました。

この細かいところまで作り込んだモックにより、実装へのイメージが精細に見えてきました。

エンジニアさんには、細部まで理想の挙動を再現していただきました。感謝感謝です。

シークプレビュー以外にも、

・再生時間の表記の違い

・再生停止などのコントロールパーツの位置

・倍速設定、画質設定、10秒スキップなどの機能の有無

などなど、本当に動画プレイヤーとは個性豊かな生き物です。

例えばPS4の動画プレイヤーは、ゲームコントローラー特有の多様な操作性により、様々なことができるようになっています。

AbemaTVは、コンテンツのクオリティに左右されるプロダクトです。

だからこそ、コンテンツのお皿となるUIはシンプルさと機能性のバランスを極め続けないといけません。

もちろんまだまだブラッシュアップしたい箇所はありますが、

これからもバランスのとれた操作性を高めていき、世界一イケている動画サービスを作り上げたいと思います。