Daily UI #009 （Music Player）

Daily UI 9日目のお題は「Music Player」。
プレイリスト画面を制作します。

制作過程

今回は2時間ほどかかりました。

制作の流れ
リサーチ：16分
ラフ：4分
ワイヤーフレーム：39分
ビジュアル：1時間3分
-------------------------------
計　2時間2分

要件定義

実は、過去にMusic Playerの画面を作ったことがあったので、デザインはそれを基に制作しました。以前作ったのが曲の再生画面だったので、今回はプレイリストの一覧画面を作ることにします。

リサーチ

既存の音楽サービスを主に参考にしました。リスト型のデザインが使えそうと思ったので、Instagramの保存済みの画面も少し参考にしました。

主に参考にしたサービス
LINE Music, YouTube Music, Amzaon Music, Apple Music, Spotify, SoundCloud, TIDAL, Instagram（保存済み）

ラフ

ここは割愛。

ワイヤーフレーム

制作したワイヤーフレームがこちら ↓

前回のデザインに合わせ、ダークモードにしました。背景は、設定した画像がうっすら透ける想定です。下には再生中の曲を浮かせて表示しています。

ビジュアル

左がワイヤーフレームに画像などを入れたもの、右がFigmaのミラーリング機能で確認しながら調整したもの。思ったより中心にオブジェクトが集まり過ぎていたので、余白を減らしました。

完成

制作した画面がこちら ↓

デザインのポイント

背景の画像が透けるデザイン

これなら、全体のデザインは大きく変わらなくとも曲の世界観を醸し出せるんじゃないかと思います。再生中の曲の部分は、再生/停止ボタンがないことに後から気づいて、再生中のアイコンから▶のアイコンに変えました。

制作してみて

・いずれやりたいと思っていたダークモードに挑戦できたので良かったです。今回はあまり有彩色を入れていないので、入れたダークモードも作ってみたいです。

・Figmaのミラーリング機能デビューしました。実機で見るのとFigma上で見るのとでは違うところが結構あったので、もっと早く使えば良かったと思いました。

・ミラーリングで調整しながら気づいたのが、自分は思ったより余白を空けがちだということ。どうも広めに周りの余白を取り過ぎる癖がついていて、だいぶ抜けたと思ってたんですがまだ残っていたようです。逆に、似たオブジェクトが複数並ぶときの間の余白は狭くなりがちなよう（アイコン同士の間とか、リストとリストの間とか）。ミラーリング機能でこの辺の感覚も培っていけたらなと思います。