13

楽天ミュージックアプリ UX/UIデザイン

楽天様

音楽聞き放題のサブスクリプションサービスのUXの追求

ユーザーの好みに合わせて新たな音楽との出会いレコメンドしてくれるRakuten MusicアプリのUXデザイン、UIデザインに携わらせて頂きました。音楽のサブスクリプションサービスは、何万とある配信楽曲数の中から定額制で聴き放題、好みの音楽に出会うことのできるサービスです。新しい音楽との出会いから世界が広がり、音楽が自然に生活に溶け込んでくるような体験をUXデザインの手法を用いて設計し、描いたUXを実現するために入念なUI設計を実施し、グラフィックデザインに落とし込む取り組みをさせて頂きました。
また、リリース当初に設置されたティザーサイトのデザインも手がけさせていただき、プロモーションを支援させていただきました。

SOLUTIONS
FLOW

  1. Step
    01

    UXデザイン/人間中心設計

    聞き放題のサブスクリプションサービスにおいて、「音楽に出会う」体験とはどのようにあるべきか仮説を立て、UXのシーケンスモデルを描き体験のフローを整理しました。体験のフローはプロジェクトメンバーの内省により定性的に評価され優先順位がつけられ、もっとも実現すべきUXのビジョンがメンバーに共有されました。

    Output

    • UXシーケンスモデル
    • UXフロー/UX遷移図
  2. Step
    02

    ビジュアルモック制作/検証

    音楽サービスということもあり、感性的に心地の良いUIのインタラクションをどのように表現し、どのように魅せるかUI設計の初期段階からデザインの検証を同時に実施しました。具体的な手順としては、効果的にインタラクションを魅せれそうな部分を、UIフローより抜粋し、その部分のトランジションをAfterEffectsを用いてアニメーションをモックアップし、ユーザーがつい触りたくなるようなUIのインタラクションとなっているかを擬似的に検証するという流れで進めました。

    Output

    • ビジュアルモック
    • UIアニメーション
    • インタラクション定義書
  3. Step
    03

    UI設計/GUIデザイン

    ブランドのガイドラインから外れず、一方で、斬新さも兼ね備えたUIを表現するために、UI設計/GUIデザインを実施しました。 人間工学及びOSガイドライン、印象的なインタラクションの検証結果に則って、GUIデザインを実施することで、ユーザに与えたい印象を表現できるUIを目指しました。また、サービスロンチに向けて最終的に色調、色彩、明度を調整しデザインしました。

    Output

    • UIフロー/UI遷移図
    • アニメーション
    • UIパーツ