Border

AD:PIANO VI Punishment

Web / Design, Develop (2018)

Diverse Systemのピアノコンピレーションアルバム、「AD:PIANO VI Punishment」の特設Webサイトのデザインと実装を担当した。
「AD:PIANO IV Monochrome」「AD:PIANO V Noir」に続く3部作の最後の作品であり、「フィナーレ」を感じられるようなデザイン・演出にした。

前2作と同じくアニメーション、演出はPixiJS + GSAPで実装した。前作ではVue.jsを使用したが、特設Webサイトの性質(制作者以外がサイトの更新をおこないたい場合がある)上、Vue.jsやReactといったJavaScriptフレームワークは相性が悪い。しかし条件分岐やリストレンダリングなど、HTMLでは難しいことをやりたかったので、PHPを採用した。これにより、動的にコンテンツを生成しつつ、更新容易性も保つことができた。
JavaScriptはあくまでアニメーションでの使用にとどめている。

URL

http://adp6.diverse.jp/

Design Tool

  • Photoshop

Teck Stack

  • PHP /
  • PixiJS /
  • GSAP