Neumorphismで動画プレイヤーを作ってみる②

エンジニアのyuiです。

前回動画プレイヤーのビジュアルを作成しましたが、そちらを実際に動かせるよう最低限の機能を実装しました。

• ボタンでの再生/停止

• シークバー/再生時間表記を実際の動画と連動

• シークバーの操作

期限を決めて制作したこともあり、今回は円状のシークバーのUI/UXを主に考察することにしました。
比較対象を用意するため一般的な直線のシークバーとの2パターン用意し、実際に触って意見をもらう流れになりました。

2つの制作物について

通常のシークバー

一般的な棒状のシークバーです。左が始点になり右端への移動量から再生時間の操作を行えます。
※CodePenで動画を最初に再生する際、動画エリアを最初にクリックして下さい。

円状のシークバー

円状のシークバーです。上中央が始点で円の中心を基準に、タッチした角度から再生時間の操作を行うことができます。
※CodePenで動画を最初に再生する際、動画エリアを最初にクリックして下さい。

実装に関して

シークバーを実装する際にAppleMusicのUIを参考にしました。
シークバーの近くをスワイプさせると操作が開始し、スワイプしている間は指を離さない限り全体が操作領域になります。
操作前再生中だと操作後も再生、停止していた場合は操作後も停止するようにしました。また操作中は動画が進まないようになっています。

触ってみた所感

2つのプロトタイプをWEB R&Dのミーティングで触ってみました。
どちらも問題なく直感的な操作はできていたように思います。
棒状のシークバーの方が慣れているのでやや使いやすいという意見もありました。
しかし円状のシークバーでも違和感のない操作が可能ということが分かったので、円状のシークバーが選択として相応しい時もあると思います。

• 横幅が取れないデザインの時。縦幅は必要になってくるが円であれば棒状より横スペースを取らない。

• 円が意味を持つデザインの時。今回のようにiPodを連想させる見た目にしたい時など。

• 無限に繰り返すことができるので、連続した仕組みとの相性が良い。進捗が最後まで来た時、次の要素に切り替えるor最初の値に戻すことなどの処理も可能。

値を円状で表現するのは、シークバーでなくとも値の操作でUIパーツとして活用できると思います。
最近ではサイトローディングのプログレスバーとして円形が使用されているのをよく目にします。

引用画像：https://gigazine.net/news/20210624-ipod-js/

またこちらのサイトでは今回UIの参考にしたiPodのUIを再現し実際に操作することができます。円のコントローラを生かし、上で挙げたような無限繰り返し（次項選択）や操作の楽しさを演出しています。

まとめ

ニューモーフィズムを使用してみたい、というところから始まりデザイン作成、実装、UI/UXの考察までを行うことができました。
ニューモーフィズムという一つのデザインを観察し、UIに落とし込む良い経験になったと思います。
今回ニューモーフィズムのコンテンツ感の演出と円状のシークバーの操作の楽しさがマッチしてくれたと感じます。

引き続きWEB R&Dは続けていくので、よろしくお願いいたします。