abema1

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

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

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

 

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

 

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

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

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

 

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

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

これによっていい感じのとこから再生できたりする。(男性諸君はよくわかるはず)

 


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

こんな感じです。

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

 

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

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

 

サービスA

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

 

サービスB

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

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

 

サービスC

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

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

 

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

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

 

サービスD

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

 


 

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

iOSのデザインモック

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

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

 

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

・再生時間の表記の違い

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

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

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

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

ほんとかわいい。

 

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

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

 

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

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

shunsuke_matsumoto
2015年新卒入社。同年7月に株式会社AbemaTVに出向しiOS/AndroidアプリのUIデザイナーとしてAbemaTVの立ち上げを担当。 2016年4月にリリースのち、リードデザイナーとして引き続き機能開発、グロース、各デバイス対応などの運用を担当中。