DailyUI 009｜音楽アプリのUIデザイン

June 3, 2023June 11, 2023

こんにちは、おんたまです。

DailyUI9つ目のお題に挑戦しましたので、今回も制作過程やデザインを紹介していきたいと思います。

お題

今回のお題は「Music Player」です。お題のヒントは翻訳すると下記の通りです。

音楽プレーヤーをデザインする。操作性、配置、アーティストやアルバムジャケットなどのイメージなどを考慮する。また、音楽を再生するデバイスの種類も考えましょう。ツアーバスのダッシュボード、スマートウォッチ、ウェブブラウザ経由など。それぞれのデバイスタイプによって、考慮すべき要件、機能、制限事項が異なるでしょう。

ヒントに書いてあるように、今回はPCとSPでそれぞれデザインにチャレンジしました。今までスマホの音楽アプリを愛用していたのでPC版との見比べは興味深かったです。

制作過程について

音楽アプリのUIについて調べる

まずは色んな音楽アプリのUIについて調べてみました。

おんたまは普段Spotifyをスマホにダウンロードしてよく音楽を聞いています。アカウントを持っているので、スマホアプリ、デスクトップアプリ、Webブラウザでそれぞれ見比べてみました。

スマートフォン版とパソコン版で比較

まずはスマートフォンとパソコンのデスクトップで比較してみました。

相違点

画面構成（スマホ版は１カラムでパソコン版は2カラム）
カードリストの表示列（スマホ版は2列固定、パソコン版はブラウザ幅に合わせて可変）
カードリストの見た目（スマホ版の方が枠や画像がなかったりしてシンプル。）
通知、履歴、設定アイコンの有無（パソコン版は画面右上の人型アイコンに設定が集約されている。通知や履歴はパソコン版ではなさそう。）
マイライブラリの表示の仕方（スマホ版は下部のタブバーで切り替え表示、パソコン版はサイドのナビゲーション下に常に表示）
戻る・進むボタンの有無（パソコン版はヘッダーに固定でボタンがある。スマホ版はない。）

共通点

アイコンのデザイン
フォントやカラーリング
聞いた音楽が表示される順番

1番大きな違いは表示面積なので、同じコンテンツでもそれぞれのデバイスに合わせて表示の仕方が異なりました。

デスクトップ版は面積が大きく２カラムなので黒ベースでも背景色を微妙に変えて区切りをつけていたり、検索のカードリストにそれぞれ画像が入っていてメリハリがある印象でした。一方、スマホ版は枠をつけなかったり、検索のカードリストも文字のみでデスクトップ版に比べシンプルにしている印象でした。

パソコンのWebブラウザ版とアプリ版で比較

今度はデバイスは一緒ですが、Webブラウザ版とアプリ版で比較してみました。

相違点

ダウンロードボタンの有無（アプリ版はダウンロードボタンがある。）
アプリインストールの表示有無（Webブラウザ版は表示がある。）
友達のアクティビティアイコンの有無（アプリ版はアイコンがある。）
ホーム画面お知らせ表示の有無（アプリ版は表示がある）
フッターの有無（Webブラウザ版はあり、アプリ版はない。）

共通点

画面構成
アイコンのデザイン
フォントやカラーリング

デバイスは同じなので画面構成は基本一緒でしたが、Webかアプリかで出来ることが変わるためその影響で細かいところに差がありました。

アプリはストリーミング再生や、他ユーザーとのプレイリスト共有ができるのでその分の機能表現が実装されていました。そのためなのか、Webブラウザ版は「アプリをインストール」のボタンが右上にずっと表示されていてアプリ版への移行を推奨しているように見受けました。また、Webブラウザ版はサイトの位置付けになるので、フッターがあり企業情報やプライバシーポリシーの記載がありました。

色々比較してみて、同じ音楽アプリでもデバイスの種類やサイトなのかアプリなのかで実装させる機能やUIが変わることがよくわかりました。

また、その他の音楽アプリのUIは「UI Pocket」というアプリUIを集めたギャラリーサイトを参照しました。

UI Pocket