デザイン鍛錬13

なんだか今日は夜中に目が覚めやる気が漲ってしまったので、夜中に更新しています。

今日も今日とてUI/UXのデザイン練習をしています。
過去の作品は、こちらのマガジンにまとめておりますのでお気軽にご覧ください。

デザイン鍛錬｜ひとみ｜noteイベントの常連｜note

デザインお題

1. デザインする上でのポイント

ポイント
【ユーザーにとって必要な情報】
・映画のタイトル
・自分がどこまで見たか分かる
・ゴロゴロしながら映画を見る→横画面にした時でも見やすいデザイン

参考サイト
どのサービスも似たような画面デザインなので、どこで差別化するか…
・amazon prime video
・NETFLIX
・Hulu
・dTV
・YouTube
・TED
TEDは気が向いた時に見ていますが、PCで視聴していても、シンプルでわかりやすいと思います。

使用ツール
Adobe Xd

2. 骨格をデザインする

上記のポイントを参考に、下記のようにベースをデザインしていきます。

【ユーザーが必要なアクション】
・映画のスタート/ストップボタン
・全編何分か/そのうち何分視聴したか
・お気に入りボタン（bookmarkボタン）
・映画の説明（YouTubeで言う概要欄）
・関連動画

TEDのスマホ画面を参考にしました。
色合いも、ダークモードを標準にすることで少しでも目に優しくします。

3. 反省点・議論点

YouTubeと異なり、映画を見る人は「他の人のコメント」をあまり見たくはないのでは？と思い、口コミの表示を無くしました。（特にMARVELなど映画ブランドにこだわっている人であれば尚更。）

保存機能を付与することで、あとで見返したりできるようにします。

完成した画面はこちら。