【DailyUI 009】Music Player
DailyUIチャレンジでの個人ルール
ツールはFigmaを使う。
ミニマルデザインを意識して作成する。
制限時間を設ける。お題によるが、大体1~2時間を目安にする。
未完成でも70%の出来でもnoteに記事を書いて、やったことを残す。
ただ作っただけにはしない。作成過程で１つは学んだことを残せるようにする。
残業・体調不良などで時間がなければ休んでも良い。
デザインする際に考えたこと、気をつけた点など
表示する項目
メニュー（3点リーダー）
ジャケット画像
曲名
アーティスト名
再生時間（曲の長さ）
再生／一時停止ボタン
前曲／次曲
シャッフルボタン
ループボタン
音量ボタン
表示項目を洗い出す際に考えたこと
架空の音楽プレイヤーアプリを想定。
シンプルで使いやすいUIを検討する。
デザインを作成する際に調べたこと
参考
Spotify
Amazon Music
iOS純正ミュージックアプリ
作成したデザイン
学んだこと・反省点など
基本の構成は似たアプリが多いが、思ったよりもアプリによってボタン数・機能など違いがあった。
プレイヤー画面に音量変更・シャッフル・ループがない（メニューなどから変更可能になっている）、など
サブスク音楽配信アプリでは共有・検索など機能が多い分画面構成が複雑になる。
確認したアプリを見ると、曲送りボタンと再生ボタンの間隔が割と狭く感じた。
個人的には通勤で運転中によく使用するので、再生ボタンなど使用頻度の高いボタンは大きめに設定、間隔もあけた。
作ったデザインだとジャケットが画面の半分以上を占めているが、ジャケットと操作UIは1:1くらいで良かったと感じた。ジャケットがよく見えるよりも操作性を重視する方が大事。
再生ボタン・シャッフルなどの間隔が狭く
アルバム情報などをアーティスト名の右側に表示しても良かったかも。
おわりに
似た音楽プレイヤーアプリあるなぁ…という形になりました。
dribbbleで検索するとおしゃれなUIが多くて大変勉強になります。
CDジャケットの周りにシークバーを表示したり、シークバーが棒グラフのようになっていたり…思いつかないなぁ。
既存のデザインを模倣するだけでなく、他にはないけどありだなと思わせるデザインを提案できるようになっていきたいですね。
ここまでお付き合いありがとうございました。
スキやコメントでフィードバックいただけるととても嬉しいです！お時間あれば、よろしくお願いします！！
この記事が気に入ったらサポートをしてみませんか？