【DailyCocoda! 6日目】音楽アプリの再生画面

こんにちはー、mintoです！

今回はDailyCocoda!6日目のお題、「レシピの検索画面」を作成しました！
※5日目の「天気予報アプリのアイコン」はグラフィックデザイン寄りなので今回は飛ばします。

今回のUIデザインにあたってのターゲットは以下のように指定されています。

LINE MUSIC、Youtube Music、Spotify、AWA、Apple Music、Amason Music辺りを参考にしました。基本的に類似したUIになりがちですが、しっかり考察すると、それぞれのアプリで個性を出しているので、その辺りを踏まえつつ作業を進めました！

完成品

そして完成したものがこちらです！

以下、デザインした上で気をつけたポイントを箇条書きで説明していきます。

・忙しくて、じっくり音楽を選ぶ時間がない女性のために、例えば電車でつり革に捕まった状態でも片手で操作できるように、使用頻度が高い操作は画面の下半分に収まるように意識しました。

・ボタンの大きさにも注意を払らいました。「再生/停止」ボタンは一番使用頻度が高いと考え、一番大きなサイズにしています。
「次の曲」「前の曲」のボタンはそれより少しに小さめにしています。
その他の「リピート」「シャッフル」「デバイス接続？」「曲リスト」ボタンの使用は、全ボタンの中でいうと低頻度であるので、一番ボタンを小さく且つ色味を落としています。

・これらのボタンの他に、「お気に入り」ボタン等を配置することも考えたのですが、忙しくてじっくり音楽を選ぶ暇がない女性なら、基本的に悩む必要がないようにお気に入りのプレイリストを作り、それを通勤時に聴いているのではないかと考えました。だとするとシャッフルやリピートのボタンは押しやすいところにおいた方が良いと考え、「リピート」「シャッフル」ボタンの優先順位を上げ、お気に入りはモーダル右上の設定画面から追加できる想定をしています。

・すべてのボタン(アイコン)の形に丸みをつけることで、女性の親しみやすさを意識しました。

・今回のターゲット丸の内OLは、ファッション的にシンプルで高級感のあるものを身に着けている印象があります。なので全体のデザインも白を基調としたシンプルさと嫌味のないゴールドで高級感を表現しました。また、ボタンやその他の要素がギュウギュウにならないように余白を多めに取りました。

・電車の中でスマホがイヤホンと繋がってなくて、音楽を鳴らしたら周りから視線を浴びて恥ずかしそうにする人を割と見かけます（というか僕のことです笑）。なので、再生画面ではイヤホンが繋いであれば接続中であることがすぐ認識できるようにしました。

・再生されている曲のジャケットに関しては、再生中の曲の前後をスワイプで選べることがわかりやすいように、左右にジャケットを少しみせるようにしています。
また、停止状態では左右のジャケットと同じ高さで、再生すると少し浮き上がるようにして、今再生されていることが認識しやすくしています。
更に、ジャケットの位置をできる限り下にして、片手の親指で左右にスワイプして曲を選ぶことが容易にできるようにしています。

・再生画面への遷移方法は、メジャーな音楽アプリで使用されているモーダル遷移を採用しています。プッシュ遷移だと他の曲を見るために再生画面を離れたら、また同じ遷移を繰り返す必要があると思います。なのでどこの画面に行っても画面下部の最小化したモーダルをタップすれば再生画面に戻れるようにしています。
またプッシュ遷移の目的は対象の画面を見るためで受動的であり、音楽を再生や停止、早送りしたいといったこちらからアクションを取ることを目的とした画面はモーダルの役割という認識でいます。
Human Interface Guidelinesには「ビデオ、写真、カメラビューなどの没入型コンテンツや、ドキュメントのマークアップや写真の編集など、フルスクリーンプレゼンテーションのメリットを活用する複雑なタスクには、フルスクリーンのモーダルビューを使用します。」とありますが、曲の再生に集中させたい今回においては、モーダル遷移が適切なのではという考察をしてみました。

・モーダル右下の「曲リスト」ボタンを押すと、下にスライドしてプレイリストやアルバムの曲目のリストが表示されるようにしています。

デザインの感想

シンプルで高級感を少し出しつつ、片手操作をしっかり意識してデザインできたかと思います。
また、メジャーな音楽アプリで、モーダル遷移とPush遷移といった異なる遷移が存在する理由を考察できたのも面白かったです！

細かいところで、「次の曲」アイコンと「早送り」アイコンの違いとか、画面右下の「曲リスト」押下後の仕様はどうしたらいいか等気になる点があるので、今後の学習に役立てたいと思います。

ではまた次回！