ROLE: Web Production, UX Design, Technical Direction
DELIVERABLE: Experience Website
DATE: JAN 2019
2019年1月に、11年ぶりのニューシングル”Face My Fears”をリリースし、全世界で楽曲が話題になった宇多田ヒカル。そのリリースおよび世界でのランクインを記念して制作されたスペシャルサイトの、テクニカルディレクションおよび開発を担当しました。
全世界での楽曲の盛り上がりを可視化
Webサイトでは、ニューシングルの収録楽曲に加え、2018年11月に配信リリースした楽曲”Too Proud featuring XZT, Suboi, EK (L1 Remix)”の世界各国での盛り上がりが
可視化されています。YouTube・Spotifyの総再生回数や、Spotify・Apple Musicでのソングランキング最高位、世界中からの楽曲に関連するトピックスやInstagram・Twitterの投稿がカウントされ、Webサイト上でその数値を視覚的に表現しました。
体験の気持ちよさを追求
開発時には、楽曲の盛り上がりをビジュアライズする際にサイトが重くならないことを目指しました。インターフェイス全体の触り心地やアニメーションを作り込み、ずっと触っていたくなる気持ち良さを追求しています。特にメインとなる地球儀のマッピング部分は検証を重ねて工夫した箇所。実装開始時はSVG + D3.jsでの開発を予定していましたが、最終的にはthree.jsで大陸を描画することに。マウスオーバーでの国の判定はTopoJSONと連携した別データから判別し、APIから受け取ったSpotifyとApple Musicのデータをアウトプットしています。
Credits
Client: EPIC Records Japan
Our role: Web Production, UX Design, Technical Direction
Producer: Nozomu Kaji (EPIC Records Japan)
Assistant Producer: Shinsaku Kumabe (EPIC Records Japan)
Creative Director + UI Designer: Yosuke Kamihigashi (Sony Music Communications Inc.)
Art Director + Designer: Takumi Kawamoto (Sony Music Communications Inc.)
Account Manager: Shimeon Satou (Sony Music Communications Inc.)
Technical Director + Web Producer: Ryo Miyakawa (monopo Tokyo)
Front-end Engineer: Tatsuhisa Ishikawa (gnisdé Inc.)
Back-end Engineer: Daisuke Okazaki (Qrank Inc.)
MONOPO STAFF ON THIS PROJECT
Related projects
We should work together!
