スクリーンショット_2019-03-16_23

UI分解 Sound Cloud編

こんにちは。
春休み期間に週1UIトレースという自己満プロジェクトを黙々としていた訳ですがそろそろ実践的なことがしたいなと思って既存アプリのUIを勝手にリデザインするUI分解をはじめました。名前の由来は1回分解して再構築してみようということから。そんなことはさておき、記念すべき1発目はSound Cloud(iOS版)を分解しました!

Sound Cloudって?

一言でまとめると「音楽発見サービス」でしょうか。
類似のサービスとしてはSpotify、AppleMusic、LINEMusic、AWAなどの音楽ストリーミングサービスが挙げられると思うので使ったことがない方はそのようなコンテンツを想像してみてください。
私は高校生の時にLINEとかTwitter級に使っていたけど大学生になってから全然と言っていいほど使わなくなりました。
今回リデザインするために久しぶりに使ってみたらさっき述べた類似サービスにはないメリットが見えてきました!


Sound Cloudのメリット

Spotify、AppleMusic、LINEMusic、AWAなどはアーティストとリスナーがいてアーティストは音楽をリリースしてリスナーは音楽を探す、という感じで発展性がないなと。図にまとめるとこんな感じ。

それらとは違ってSound Cloudは自身の音楽発信でき、音楽を探すこともできます。つまりリスナーにもアーティスト(仮)にもなれちゃいます。こちらも図で表現しました。

音楽を探す時もオフィシャルなものだけでなくremixされた音楽も多々アップされているので冒頭に述べたサービスよりももっとたくさんの音楽と出会える可能性があるというメリットがあると考えました。

Sound Cloudの現状

ということで可能性を秘めてるSound Cloudを理解すべく、現状のUI を考察してみることから始めました。

全体的な問題点などを挙げるとすると
●メリハリがない
●色味が少ない
●コミュニケーションがしづらい印象
というところが挙げられそうです。
メリットのところでも書きましたが他のサービスとの相違点は「誰でも音楽を発信できる」というところだと思うのに発信してもリスナーとのコミュニケーションが取りづらいのは本当にもったいないと感じました。なのでUIを再構築するときに自分の中でテーマを1つ決めることにしました。

楽しく音楽でつながる

なんでもそうですがやっぱり楽しいのが1番だと思います。メリハリがなかったりアプリ全体の色が少ないというのは視覚的に楽しさを減少させてしまうのかなと今回思いました。あとは音楽でコミュニケーションを取ることができたらきっとSound Cloudの良さを引き出すことができるのではないかなと。という意味を込めて楽しく音楽でつながるというのを自分の中のテーマにしました。

分解するときに残しておきたいところ

早速デザイン案を考えるときにSound Cloudらしさがあるところは残したいなと思いました。なのでUI的にそのサービスらしさを見つけることから始めました。
そこで今回出てきたのがこの3つ。


まずLIKEの話
どのサービスにも言えるけど、アプリで円滑にコミュニケーションを取るにあたってアイコンの一つ一つがすごく重要になってくると思います。Sound Cloudではもともと気に入った音楽にLIKEを付けれるようになっています。LIKEの他にも類似の意味を持っているものはFaceBookの👍でいいねだったり、昔のツイッターの星マークでお気に入り、Instagramのハートマークでいいねなどなど同じマークを使っていても意味合いが違かったりするんですよね。なのでここはちゃんと明確にしておきたいと思いました。

そこで、さっき挙げた類似マークからしっくりくるものを選ぶことにしました。お気に入りとLIKEは「この音楽お気に入りなの!」という使い方もするし「この音楽すごくすき!」とかもいうので正直迷ったところもありますが「スキ!」の方がアーティスト的に嬉しい気持ちになるのではないかなという結論に至ってLIKEはやっぱりそのまま残しておきたいなと思いました。

次に再生マークと波型のバーの話
競合サービスとしてSpotify・LINEMusic・AppleMusicの音楽再生画面のUIで比較して見ることにしました。音楽の進度をコントロールするバーは一直線のデザイン・再生マークは右に尖っているの正三角が一般的ではないでしょうか。今回調べた競合サービスもそのような感じでした。しかし、SoundCloudは波型のバーだったり再生マークも矢の先端のようなマークを用いています。やはりこれらは他のサービスではなかなか見ないもの。つまりこれが「らしさ」だなと思いちゃんと残したいと考えました。


分解して再構築する

そんなことを踏まえ私が考えたUIはこんな感じになりました。

Sound Cloudの現状でも述べたように全体的に色が少なかったりメリハリがない問題を解決したかったので全体的にテーマカラーであるオレンジの割合を増やして見たり、画像や文字にメリハリがつくように考えました
上記の全体図を押すとモックアップを見ることが可能です。それではどこをどう考えて変えたのか説明していきます。

①Streamはあった方がいいのか問題
メニューバーの雷マークはStreamというページでフォローしているユーザーがRepostした音楽などを見れるところ。置き換えればツイッターのタイムラインみたいな感じでしょうか。私はデザイン的に淡々としていてメリハリがないという印象を持ちました。どうしたらメリハリが出るかなと考えた時にStraemだけにする必要はないのではと思いました。なので今回Streamにあったものは全てホームにまとめメニューバーからも削除しました。その代わり、今まで自分のプロフィールにたどり着くまでLibrary→More→Profileというプロセスを踏まないとたどり着けなかったところをメニューバーに追加して一発でとべるようにしました。

②ホームは自分の興味のある音楽をチェックするところに
ホームの流れをざっくりとまとめるとこんな感じ。

図にまとめたように今までホームはユーザーの履歴に基づいた音楽の紹介をしたのちにいきなりいろんなジャンルのおすすめの音楽が出てきてページに1つのテーマがないなと思いました。やっぱり同じページの中で統一感だったりテーマがあるといいなと思ったのでホームは自分の興味のある音楽をチェックするところというテーマを決めてデザインしました。

またStreamのデザインもアルバムの全体画像が見れなくてもったいないと思ったので長方形ではなくスクエアに変えました。実際のデザインよりもアイキャッチができると思います。

③Sarchは新しい音楽と出会う場所に

現状のSarchページは検索バーしかなくてすごく殺風景なのが残念だと感じました。今のままだとキーワードがないと検索をかけれない状況なので真新しい音楽と出会うのは困難だし音楽を見つけることに楽しさを感じることができなそうと思います。なので、最近流行っている曲やアーティストをおすすめすることで今どういうものが流行っているのかわかるような構成にしました。また、実際のアプリではジャンル別のおすすめ音楽はホームにありましたがこれをsarchに持ってくることによって気になるジャンルから音楽を探せるように考えました。

④LIKEした曲やPlaylistをもっと使いやすく
①でも述べた通りメニューバーにプロフィールアイコンを付け足した理由は履歴ではなく本当にいいなと思った曲をもっと聞きやすくするためなんです。現状でプロフィールにとぶにはLibrary→More→Profile、Playlistを見るのだってLibrary→Playlistという段階を踏まないとなので少し面倒です。LIKEしたりPlaylistに追加する音楽はきっとユーザーにとって何回も聞きたいものなのではないかと考えたらすぐ開けるようにしたいと思いました。

⑤リスナーとアーティストをもっと繋げるために

アーティストのプロフィールページを見てるということは興味を持って見ている場合が多いと考えます。ですが現在のプロフィールページを見るとフォローよりもPlayallのほうが目立つ印象。確かにそのアーティストの音楽を聞いてもらうことによってリスナーとアーティストを繋げるという解釈もできますが、それだけでは曲を聞いてる時だけしか双方をつなげることができません。ですがフォローすればホームなどにアーティストの最新曲が流れてくるので長期的につなげることができるのではないかと思いました。なので、パッとみてフォローしやすいようにボタンを大きくセンターに置くことを考えました。

また、アーティストのプロフィールを変更したので個人プロフィールも統一感を出すためにデザインを変えました。

⑥残したいポイントがしっくりくるデザインにするために

今の音楽再生ページほかのサービスには無いようなデザインですがジャケットの写真の色によってはアイコンが見えづらかったりしてすごく勿体無いと感じます。なのでどんなジャケットが来てもアイコン等には支障のないデザインにしようとおもいました。冒頭の方でも書きましたが再生ボタンと波型のバーは「らしさ」を感じるので残そうとしました。再生ボタンはすんなりと新しいデザインに馴染みましたがバーがなかなか上手いこといかなくて四苦八苦したのでしっくりくるまでのプロセスを紹介します。

STEP1 現状の波形をトレースする
トレースしたのちにバーが来る場所に配置してみましたが棒と棒の間が狭すぎて全体的に密度が高い印象を受けました。
STEP2 密度を減少させる
前段階のことも踏まえ棒の本数を減らしたり間隔をさらに開けてみることにしました。密度的にはちょうど良くなったものの縦に長いなということに気づきました。
STEP3 上下にプレスする
先ほどの反省を生かしてバーの全体を上下にキュッとプレスしたのちに配置したらスッキリ収まりました!
という3STEPを経てバーが完成したのでした。ロゴにもこの波形のバーらしきものがあったのでどうしても残さねばと思いつつ最初はしっくりこなくてどうしようと思いましたが最終的に全体の雰囲気とマッチできたと思います。

UI分解と再構築をやってみて 

ここ1ヶ月くらい週1で既存のアプリのUIトレースをやってきましたが、やっぱり要領が全然違うなと思いました。トレースでは順序ってこうなってるんだ。とかこのアイコンこんな意味あるんだ。とか新たな発見が多かったです。でも今回は実際に自分で改善案を考えないとなのでまずは現在のサービスのメリットデメリットから考えた上で自分がどうしたいのかというのを明確にしたりだとか今までトレースしてきたものをもう一回振り返ってみたりだとかしてインプットももちろんしたけれどそれよりもインプットを踏まえて実際にモックを作るというアウトプットがとても刺激になったなと。今後も時間を見つけてチャレンジしたいです。



この記事が気に入ったらサポートをしてみませんか?