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はシンプルさ機能性のバランスを極め続けないといけません。

 

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

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

アバター画像
2015年新卒入社。同年7月に株式会社AbemaTVに出向しiOS/AndroidアプリのUIデザイナーとしてAbemaTV(現ABEMA)の立ち上げを担当。 2016年4月にリリースのち、現在に至るまでデジタルプロダクトデザインの責任者として携わっている。