アプリ模写100本ノック_SoundCloud #26

今回はSoundCloud(iOSアプリ)です。

　SoundCloudは、音楽の視聴とアップロードができる音楽プラットフォームです。各々が独自のトレンドを発信でき、無料ですべての機能を使うことができます。ドイツで生まれたプラットフォームらしいです。あとユーザー数２億人以上、、。高校生くらいの頃から使っている記憶があるアプリです。
慣れ親しんでいるこのアプリも100本ノックのおかげでいろんな発見がありました。もしかして力ついてきた？と勘違いし始めています。

アプリ模写100本ノックとは

目的

1. そのアプリのコア体験について製作者の意図を考察し、気づきを通じてデザインパターンの引き出しを広げることが狙い。

2. 自分の知識として定着させる

なんでやるのか

デザインを作る上で瞬発力が必要
そのために以下のスキルが重要になる
・対象を観察する
・事象から法則性を見つけ出す
・即興で形にする

参考文献

Miwa Kuramitsuさんのこちらの記事です。頑張ります。

アプリ模写100本ノックやり方

1. 模写したいアプリを選ぶ（５分）

2. アプリを触りながら、気になったことをメモする（１０分）

3. 付箋を縦にして、選択した３画面を手書きで模写する（１０分）

4. 容姿に付箋を並べて貼り、気づきを書き足す（１０分）

自分は上記の後に2から4のまとめとして「やってみて感じたこと・気づいたこと」を書き出しています。
では本題に入ります。

アプリを触りながら、気になったことをメモ

• ホーム

  • 全て英語。日本語対応はしていない

  • ヘッダー固定

  • 一番上のセクションにフォローしているアーティストのNew track(新しい曲)がユーザーアイコンと名前で表示されてる

    • 右上に周波アイコンがあるため曲が聴けそうな感じがする

  • You PlaybackセクションがNew trackの下に配置されてる

    • 年末年始の期間的なものかな？

  • Reccently Playedセクションで最近再生したアーティストとプレイリストがスライダーで表示される

  • 他要素もスライダーで表示されてる

    • アーティストは円形の画像の下に名前が表示され、プレイリストは四角形での画像の下にタイトルが表示されてる

    • 四角形の画像の後ろに同じ形のオブジェぅとが２枚重なっていることでプレイリスト感がある

  • 前回最後に再生した曲がメニュー上で固定されている

    • オレンジ色のインジケーターでどこまで聞いたかわかる

    • ハートアイコンをタップすると「いいね」ができる

    • 再生ボタンをタップすると、再生画面を開くことなく曲を再生できる

• アーティスト詳細

  • 画面内にある再生ボタンをタップすると、少し振動する

やってみて感じたこと・気づいたこと

Home_アーティスト詳細_再生

　全て英語のアプリを初めて100本ノックしたのですが、慣れていることもあり、全く気になりませんでした。言語がわからなくても感覚的に使えるように設計しているんだろうなと全体的に感じました。

　ホーム画面では、フォローしているアーティストの情報やそれに関連するアーティストが表示されています。セクションごとにスライダーでデザインされています。Netflixもそうでしたね。いいなと思った点は２点あります。
１点目はアーティストとプレイリストが同じセクションに並んでいてもわかるようにデザインを変えていることです。アーティストは円形の画像でプレイリストは四角形です。Recently Playedに同列で並んでいるのですが、わかりにくいと思ったことないので、デザインを考慮すれば問題ないんだなと思いました。
２点目はメニューバー上に前回アプリを閉じる前に聞いていた曲が停止状態で表示されていることです。ホーム画面に限らず、他ページでも固定されているのですが、親切だなと思いました。たくさん曲の情報があるとどれから聴こうと悩むのですが、アプリを立ち上げて再生するまでが早くなる気がしました。いいねボタンも含まれているので、どのページにいても評価をつけられるのもいいなと思いました。noteみたい。

　アーティスト詳細画面ではアーティストの写真や名前、出身地、詳細情報などが記載されており、フォローすることができます。
特徴としては、詳細情報が記載されているグループ内に再生ボタンがあり、タップするとアーティスト自身が一番上に配置している曲から再生されることです。この画面もまず聞いてみるという行動がすぐにできるように設計しているなと思いました。再生している曲にはNow Playingと表示され、メニューバー上の再生するための要素にもタイトルが表示されます。
下にスクロールしていくとアーティストの名前がヘッダー部に表示されます。このデザインはいろんなサービスで見かけたのですが、一番自然な感じがしました。表示されていない状態とヘッダーへの表示方法に違いがあるんだと予想します。

　再生画面では、再生している曲のジャケット画像を背景に曲が再生されている様子を見ることができます。再生はどの画面にいても、アプリを閉じていても再生され続けます。
このページは改めて見てみるとすごいことをやっているなとおもいました。
どれくらい再生されたかが波形を模したインジケーターで見ることができます。真ん中に基準の軸を持ち、波形自体が左に進んでいくデザインになっています。波形がその曲の波形を模しているため、ユーザーが直感的に再生したい場所まで移動させることができます。また、メニューバーは非表示になっており、代わりにいいねボタンやコメント、シェアボタンなどが表示されます。下にスワイプすると、メニューバー上の要素に収まります。
説明文を読ませるのではなく、直感的に操作ができるようにするというのはまさしくこのことだよなと思いました。個人的に再生画面に関しては他の音楽再生アプリよりも直感的で使いやすいと思います。

全体を通して、どの画面でも再生するまでのアクションが早くできるように設計しているなと思いました。どれから聞いたらいいかわからない、情報が多くてよくわかんないから使ってない、みたいなことが起きないようになってます。当たり前のように今まで使ってきたので今回対象にするか悩んだのですが、ものすごく勉強になりました。海外のアプリを検討するのもいいなと思ってきました！

以上です。