SAKAZUKIのアニメーション実装を振り返る
SUNTORY GROUPのもと、お酒を酌み交わしながら日本の”Hidden Gems”を共有するNFTプロジェクト「SAKAZUKI」。そのフロントエンド実装を担当しました。Awwwards Site of the DayやFWA of the Dayなど3つのアワードを受賞したプロジェクトです。
コーディングからAPI連携までを担当していますが、この記事ではいちばん磨きをかけたアニメーション実装について振り返ります。
SAKAZUKIにはハートがある
制作が始まって、まずデザインと動きのイメージを受け取りました。コンセプトは「SAKAZUKIにはハートがある」。盃を交わすことで人と人のハートがつながる、その温かさや愛らしさをデザインに込めたとのことでした。
ミニマルで高級感のあるデザインの中に、確かに愛らしさがある。受け取ったとき、動かすイメージがどんどん湧き出てきたのを覚えています。
提案と擦り合わせ
制作は、打ち合わせで方向性を確認しながら、実装してすり合わるの繰り返しでした。デザインがもつイメージに対してこちらからも動きを提案し、実際にブラウザで確認しながら調整していきました。デザインをアニメーションでさらに具現化していきブラッシュアップしていく作業。その中でとくにこだわったポイントを3つ挙げてみます。
流体シェーダー
メインビジュアルの画像が切り替わる瞬間に、ぐにゃっとした流体表現やRGBをずらす表現をシェーダーで入れています。ウイスキーのとろっとした質感をイメージしたもので、お酒のプロジェクトならではの演出です。
THE HEART OF SAKAZUKIのハート
スクロールに合わせてハートがクルッと回ります。この回転にはクロソイド曲線を使いました。通常の円運動だと機械的になりますが、クロソイドは曲率が滑らかに変化するため、自然で気持ちのいい回転になります。回り終わったところでプルプルっと揺れる動きを加えて、ミニマルなデザインの中に愛らしさを宿しています。
BENEFITのハート
BENEFITの「E」が下がっていき、その間にハートが入り込むアニメーションです。Eが下がるスピードとハートが入ってくるタイミングを合わせないとアニメーションが成り立たないので、そのスピード感の調整が難しいポイントでした。
削る
足すだけでなく、削る作業も行いました。他にもインタラクションを実装したのですが、実際に入れてみるとSAKAZUKIの世界観とは合わなかったものもあります。面白い動きができたのですが、やむなく外すことになりました。
受賞
足したり削ったりを繰り返して完成したSAKAZUKIは、3つのアワードを受賞しました。
デザインやユーザビリティも含めて評価されたチームの成果です。デザイナーと擦り合わせながらイージングをひたすら調整するような制作ができたのは、本当にありがたい環境でした。好きで夢中で取り組んでいたことが通用するんだと思えた経験です。
普段は個人の表現としてジェネラティブアートの作品作りにも取り組んでいます。アルゴリズムで動きを生み出す感覚は、こうしたフロントエンドの実装にもつながっていると感じています。
こういった制作をこれからも続けていきます。デザインの意図を動きでも表現したいプロジェクトがあれば、ご連絡お待ちしています。
詳しくは以下をご確認ください。ご不明があればお気軽にお問い合わせください。
