Daily UI #009「Music Player」ミュージックプレイヤー

制作の流れ

ミュージックアプリの特徴

普段はWalkmanで聴くのであまりミュージックアプリを使用しないのですが、アプリとしての特徴を簡単にまとめました。

• 音楽ライブラリの管理
  • ユーザーの音楽ライブラリを管理したり、ユーザーが所有する曲やアルバム、プレイリストなどを整理して気軽に曲を聴くことができる
• オンラインストリーミング
  • オンラインストリーミングサービスにより幅広い音楽ライブラリから曲をストリーミング再生することができる
• プレイリスト
  • 好みや気分に合わせてプレイリストを作成することができるので、アーティスト、ジャンル、ムードなどのカテゴリごとに自分だけの音楽体験を楽しむことができる。
• おすすめ機能
  • ユーザーの過去の再生履歴や好みに基づいて、新しい音楽やアーティストを推薦する機能が多い

ペルソナを設定

ChatGPTを使ってミュージックアプリを使用するユーザーのペルソナを作りました。

彼女がミュージックアプリに求めるもの

• 使いやすさとシンプルさ
  • 操作が簡単で、機能がわかりやすいものが好ましい
• オーディオ品質
  • クリアでバランスの取れた音楽体験が重要
• カスタマイズ性
  • 個人の好みに合わせてプレイリストを作成したり、お気に入りの曲をマークしたりする機能があると良い
• 新しい音楽の発見
  • アプリが彼女の好みや過去の履歴に基づいて音楽やアーティストなどの新着情報を提供してほしい

以上を参考に彼女のライフスタイルに合った機能やデザインを考えてデザインを制作します。

ミュージックアプリを調査

メジャーな音楽アプリから「Youtube Music」と「Spotify」を調査しました。

ミュージック一覧

Youtube Musicでは日頃からYoutube内で聴いている音楽を「リラックス」や「エナジー」などのカテゴリ分けをしておすすめの曲を紹介してくれます。
Spotifyでは聴いている曲に基づいた音楽というよりかは新しい音楽やアーティストの情報が多い印象でした。

ミュージック再生画面

Youtube Musicではシャッフルなどの操作ボタンが多い印象ですが、Spotifyでは再生ボタン周りとプレイリストに追加できるプラスボタンなどシンプルな見た目になっています。

こちらのアプリを参考にUIデザインを作成しました。

UIデザインを作成

ミュージック一覧

Youtube Musicをモデルにユーザーのニーズに合わせた曲のカテゴリ分けをタブ形式で実装しています。

ペルソナが常に音楽を聴いている生活を送っているので、通勤時やリラックスしたい時に聴く音楽ジャンルにすばやくアクセスできるため、直感的にストレスなく音楽を楽しむことができると考えました。

ミュージック再生画面

カルーセル形式

前後の曲をカルーセル形式で簡単に切り替えることができる仕様にしています。
スライドできることがわかるように左右に曲のジャケットを少しだけ覗かせておくというカルーセルUIのスマホ画面において有用な方法を採用しました。

逆に考慮すべき点としては、

• アクセシビリティに配慮したカルーセル操作
• タッチスクリーンを使う場合、ユーザーが意図せずにスワイプしてしまうリスク

こちらの2点を課題に挙げましたが、
・ボタンや自動再生による曲の切り替え
・他のアプリ操作をしながら音楽を聴くことが多く、再生画面をずっと表示していることがあまり多くない
という観点からカルーセルによる実装に至りました。

アクションバー

「お気に入りボタン」「共有ボタン」「プレイリスト追加」などの曲以外のアクションや操作を提供するバーを配置しています。

コントロールバー

再生ボタンや曲の進行状況を示すプログレスバー、曲の再生に関連する操作を含むバーはダークモードの赤色でコントラスト比を意識しています。

まとめ

#009「Music Player」ミュージックプレイヤーのUIデザインのまとめです。

• ユーザーが直感的に目的の場所に辿り着ける導線をわかりやすくデザインする
• カルーセルはコンテンツ量を減らすために有効だが、アクセシビリティやアプリのコンテンツに合わせた実装を意識する

Daily UI #009 「Music Player」ミュージックプレイヤー プロトタイプはこちら ↓ ↓

ミュージックアプリは内容的にも作り甲斐がありそうなエンタメアプリなので、時間があれば1つのアプリとして作り込みたいですね！