見出し画像

〜ほぼ Daily UI vol.57〜 Video Player

参考にしたサイト・アプリ

YouTube

スクリーンショット 2020-09-20 13.54.48

スクリーンショット 2020-09-20 13.55.09

Twitter

スクリーンショット 2020-09-20 13.51.57

スクリーンショット 2020-09-20 13.52.13


Frontend Masters

スクリーンショット 2020-09-20 13.52.57

スクリーンショット 2020-09-20 13.53.08

デザインを考える上でのポイント

動画の視聴を邪魔しないように最小限に
動画のコントロールは動画を見ながらでもストレスなく操作できるように半透明にしたり、あまり縦に長くなりすぎないようにする必要がある。

全画面前提なら、下の方に余白を固定で作るとかもできるかもしれない。

Hoverをコントラストを下げることによって分かりやすくする
Netlifx では他の要素を薄くすることによって、何がホバーされているかを分かりやすくしていて頭いいなと思った。

スクリーンショット 2020-09-20 17.05.20

自分のデザイン

特にいいアイデアが思いつかなかったのでNetflixっぽく作る

画像8

思ったこと

普段気づいてなかったけど、細かいインタラクションの工夫色々しているんだなー。

この記事が気に入ったらサポートをしてみませんか?