![見出し画像](https://assets.st-note.com/production/uploads/images/36120134/rectangle_large_type_2_38189f15a36daa7d610d64ff2afb1b50.png?width=1200)
デザイン鍛錬13
なんだか今日は夜中に目が覚めやる気が漲ってしまったので、夜中に更新しています。
今日も今日とてUI/UXのデザイン練習をしています。
過去の作品は、こちらのマガジンにまとめておりますのでお気軽にご覧ください。
デザインお題
1. デザインする上でのポイント
ポイント
【ユーザーにとって必要な情報】
・映画のタイトル
・自分がどこまで見たか分かる
・ゴロゴロしながら映画を見る→横画面にした時でも見やすいデザイン
参考サイト
どのサービスも似たような画面デザインなので、どこで差別化するか…
・amazon prime video
・NETFLIX
・Hulu
・dTV
・YouTube
・TED
TEDは気が向いた時に見ていますが、PCで視聴していても、シンプルでわかりやすいと思います。
使用ツール
Adobe Xd
2. 骨格をデザインする
上記のポイントを参考に、下記のようにベースをデザインしていきます。
【ユーザーが必要なアクション】
・映画のスタート/ストップボタン
・全編何分か/そのうち何分視聴したか
・お気に入りボタン(bookmarkボタン)
・映画の説明(YouTubeで言う概要欄)
・関連動画
TEDのスマホ画面を参考にしました。
色合いも、ダークモードを標準にすることで少しでも目に優しくします。
3. 反省点・議論点
YouTubeと異なり、映画を見る人は「他の人のコメント」をあまり見たくはないのでは?と思い、口コミの表示を無くしました。(特にMARVELなど映画ブランドにこだわっている人であれば尚更。)
保存機能を付与することで、あとで見返したりできるようにします。
完成した画面はこちら。
読んで下さった皆様の背中を押せるようなコンテンツを発信し続けます。ありがとうございます。