CASE STUDY OF

HIKARU UTADA ''FACE MY FEARS''
GLOBAL WEBSITE

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)

Front-End Engineer: Tatsuhisa Ishikawa (gnisdé Inc.)

Back-End Engineer: Daisuke Okazaki (Qrank Inc.)

Awards & recognition

  • Css Design Awards

    Website of the day

  • Awwwards

    Honorable mention

Related projects

We should work together!