Jan. 1, 2016

TOKYO MUSIC ODYSSEY 2016

TOKYO MUSIC ODYSSEY 2016
  • TOKYO MUSIC ODYSSEY 2016
  • TOKYO MUSIC ODYSSEY 2016
  • TOKYO MUSIC ODYSSEY 2016
  • TOKYO MUSIC ODYSSEY 2016
  • TOKYO MUSIC ODYSSEY 2016

ABOUT THIS PROJECT

「TOKYO MUSIC ODYSSEY 2016」はスペースシャワーTVがプロデュースする、東京発の次世代を創造する新たな音楽とカルチャーの複合イベントです。
TOKYO MUSIC ODYSSEYとは、 スペースシャワーTVの視点で音楽シーンを総括し、 様々な音楽コンテンツで功績をあげたアーティストとクリエイターに感謝と敬意を込め、表彰する新しいアワード「SPACE SHOWER MUSIC AWARDS」、スペースシャワーTVがプッシュする近い将来にブレイクが期待されるニューカマーのショーケースライブ「SPACE SHOWER NEW FORCE」、音楽映画やサブカルチャー系の映画などスペースシャワーTVがセレクトした映画を上映するイベント「SPACE SHOWER MOVIE CURATION」、独創的な音楽性を十分に発揮し、独自のスタンスで2015年の音楽シーンで注目を集めたアーティストで構成されるライブイベント「SPACE SHOWER ALTERNATIVE ACADEMY」、現在の音楽表現に欠かすことが出来ない、視覚に訴えるアートワークにフォーカスした展示会「SPACE SHOWER MUSIC ART EXHIBITION」という5つのコンテンツで構成されます。
それぞれ関連アーティストのライブパフォーマンスやトークイベントなども予定されており、各イベントのイベントレポートなども掲載しています。

5つの複合イベントの情報サイトとなるので、トップページではイベントロゴをモーショングラフィックとして作成して各イベントへの導線を強めています。イベントロゴのモーショングラフィックは、After Effectsで3Dモデルのアニメーションを作成し、HTMLにVideoタグでコーディングしています。

各イベントページでは、イベントごとに別々のキーカラーを配色し、音楽とアニメーションを同期させた演出で、イベントの特色を差別化しています。音楽と同期したアニメーションはWebGLで実装していて、音楽の周期と波形データを解析することで動的にビジュアライズしています。

サイトをスムーズに回遊できるように、PushState APIを使用してスムーズにページ遷移できるようにしています。
また、レスポンシブデザインで構築しているので、1ソースでスマートフォンでも閲覧できます。


AWARD

CSS Design Awards: Site of the day

Awwwards: Honorable Mention

CREDIT

  • 株式会社スペースシャワーネットワーク

    Client

  • 山中雄介

    Producer

  • 徳本彩花

    Project manager

  • 田渕将吾

    Art Director, Interactive Director, Sound Director, Designer

  • 有吉学

    Designer

  • 高橋呂沙

    Assistant Designer

  • 大橋將史

    Technical Director

  • 鍛治屋敷圭昭 / 芦川能純

    Developer

  • 井谷円香

    Motion Designer

  • 吉武諭(cubesato)

    Sound Designer

LISTに戻る

SHARE