SpotifyのUIトレース
自己紹介
はじめまして。こちらが初投稿記事となります。
現在、UIデザイナーを目指して勉強中のTomoと申します。
UIトレースやDaily UI、Sketchの操作についての記事をこれから複数投稿していく予定ですので、宜しければ覗いてみてください！
アプリのUIトレースの第一弾として、Spotifyを選びました。
Spotifyについて
スウェーデンの音楽ストリーミングサービスです。ユーザー数は2019年の時点で2億4800万人にのぼります。
プラン: Basicプラン(無料)とPremiumプラン(有料)
競合: Apple Music, Amazon Musicなど
競合大手であるApple Musicの有料会員数が約6,000万人であるのに対し、Spotifyの有料会員数は1億1300万人に達しており、音楽ストリーミングサービスの分野では世界最大手です。
Appleのサービスとは異なり、無料プランがあるにも関わらず、この有料会員の数字は驚異的です。因みに、私もApple MusicからSpotifyに切り替えたユーザーのうちの1人です。アプリをトレースして、その特徴を探りたいと思います。
UIトレースの画面紹介
使用ツールは、Sketchです。
左から順にアプリのスクリーンショット→トレース→トレース画面にマージンを引いたものです。
ホーム画面とアルバムの曲の再生画面、検索画面を中心にトレースしました(合計時間: 3時間程)。ヘッダーはiOSのキットを利用していますが、それ以外のアイコンは全てベクターツールで自作しています。
キットはこちらがおすすめです。
それでは、トレースをしてみて発見したことを整理したいと思います。
色について
Spotifyを使用してみて、目を引くのがダークトーンの画面です。Apple Musicが白やピンクを基調としているのに対し、Spotifyは黒やグレーのイメージがあります。
実際にトレースをしてみると、コーポレートカラーである緑、黒と白のカラーを中心に画面が構成されていることがわかります。
黒は上記の#191414だけでなく、#060606や#282828など明度の異なるカラーを画面のパーツ毎に分けて使用していました。緑はシャッフル再生のボタンなど一部の機能に限定して使用されています。
テキストは白やグレー(#A0A0A0)が中心でした。
再生画面のカラーは決まっておらず、アートワーク(CDジャケット)の色調によって異なっています。そして、画面の上部から下部にかけてグラデーションが施されていることがわかりました。SketchのFillsのGradientの機能を使うと簡単にグラデーションが再現できるので便利ですね。
フォントについて
欧文: Circular(Bold)
日本語: Hiragino Sans(W3・W5)
トレースをしてみて、「Lady Gaga Complete」のCやoの字、またホーム画面で使用されている 「50」が独特の字体であることに気づき、リサーチしました(トレースはシステムフォントであるSF Pro DisplayとSF Pro Textを使用しています。両者の区別についてはこちらの記事を参照しました)。
Circularはサンセリフ書体で、Linetoからリリースされています。SFと比較すると少し縦長で、全体的に丸みを帯びたフォントですね。
このモダンなフォントが、画面全体のダークトーンと非常にマッチしていて、スタイリッシュな印象を生み出していることがわかります。
フォントのサイズとしては、大見出しやアルバム名などに24pt、再生画面のアーティスト名やダウンロードに16pt、それ以外については画面によって異なり、概ね10~13ptの間に収まっていました(検索画面の大見出しは30pt)。全体的にフォントは小さめの印象です。
余白について
最後に、余白です。
ホーム画面以外では、画面左右に16pxのマージンが設定されており、8の倍数に沿っていました。特に、検索画面ではその傾向が顕著で、オブジェクト間同士で綺麗に16pxのマージンが設定されています。
アートワークは中央に配置され、左右にも等しくマージンが設定されているものの、上記以外に特に大きな規則性は発見できませんでした。
その他
ボタンや再生画面の隅が丸みを帯びており、12pt 〜24ptのradiusが設定されていました。
トレースしてみた結果
※こちらはトレースをした上での気づきと個人的な意見です。
全体的に色調が上手くコントロールされており、フォントと相まってスタイリッシュでモダンな画面構成が特徴的と言えます。
Spotifyのユーザーのage groupを分析すると、30歳以下の若年層が多くを占めており、メインターゲット層への訴求を意識しているのかもしれません。
また、ダークトーンがアートワークの色調を和らげており、どちらかと言うと１つのアーティストやアルバムにこだわりすぎるのではなく、プレイリストを重視し、よりたくさんのアルバムや音楽をリスナーに広げたいというアプリの目的がUIデザインにしっかり反映されているという印象を受けました。
トレースする上で注意したこと
部品を整理して、必ずシンボル化するように心がけました。
シンボル化しておけば、Overrideを書き換えるだけで再利用できますし、コンポーネントを意識するきっかけになります。
また、よく使う色はDocument Colorに登録して管理していました。
最後に
トレースに取り組んだことで、これからの勉強の方向性が見えてきました。
今後は、色やフォントなどデザインの基礎・原則を理解して、言語化できるようにするため、トレースと並行して書籍で大量にインプットする予定です。
また、OSのガイドラインを読み込んで、iOSアプリをデザインする上で必要な知識を吸収したいと思います。
長くなりましたが、最後まで読んで頂きありがとうございました。
この記事が気に入ったらサポートをしてみませんか？