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