BAKE CHEESE TART
- Website
127
Release
Our Services
Technical Direction, Frontend Dev.
チーズ菓子の総合ブランド “BAKE CHEESE TART” のウェブサイトリニューアル実装
Client
BAKE (2)
「溶ける」を、表現する。
チーズタルト専門店から、チーズ菓子の総合ブランドへと生まれ変わった “BAKE CHEESE TART”。
ブランドリニューアルによる新たな世界観の発信のため、旧サイトに引き続きウェブサイトのテクニカルディレクションとフロントエンド実装を担当させていただきました。
デザインの核となったのは、チーズのとろける食感とタグライン「Cheese Metamorphose」から導かれた「溶ける」というキーワード。ロゴアニメーションから、チーズが各商品へと姿を変えるピクトグラムアニメーション、ページ全体のインタラクションまで、モーションチームが設計した動きのニュアンスを損なわずにウェブ上で再現することに注力しました。
素材と手仕事を伝える写真・映像を多用する構成のなかでも、表示の軽さと滑らかな体験を両立させるため、デザイン・モーションチームと連携し、実装方針を検討しています。
キネティックアイデンティティを
サイトのインタラクションへ。
チーズのとろりとした、もっちりした質感を、画面上の手ざわりとして伝えるため、WebGLに頼らずSVGとCSS transformによる軽量なモーションシステムを設計・実装しました。
写真を切り抜く不定形のフレームは、複数の輪郭パスをランダムにモーフィングさせ、大きく変形したあとに小さく揺り戻す2段階の動きで、生地が落ち着くような余韻を持たせています。周囲の小さな形はわずかに遅れて追従し、粘りのある一体感を生みます。
ボタンやビジュアルは、カーソルに吸い寄せられて柔らかく沈み、離すと弾むように元へ戻ります。中の写真を逆方向にずらすことで厚みを感じさせ、スクロールの速度に応じて要素が遅れて伸び縮みする演出と組み合わせることで、サイト全体を「さわりたくなる」質感で統一しました。
一方で、動いている間だけ描画処理を走らせ、画面外の要素は停止させるなど、表現の豊かさと軽快な表示を両立させています。
毎回異なる「垂れ方」を生成するメニューアニメーション
メニューの開閉には、溶けたチーズがとろりと流れ落ちる動きを取り入れました。既成のアニメーションは使わず、SVGパスを毎フレーム計算して描き直す仕組みを独自に実装しています。
幕の縁は複数の制御点を持つ3次ベジェ曲線です。各制御点が落ち始める遅延をsin波で決め、その位相をメニューを開くたびにランダムにずらしています。そのため波打ち方は毎回変わり、同じ形は二度と現れません。遅延にはさらに小さな揺らぎを加え、機械的な規則性が見えないようにしました。2枚のレイヤーは同じ曲線を共有したまま遅らせて落とすので、粘性のある厚みが出ます。
「線が紡ぐ」アイコンアニメーションを、どのブラウザでも同じように
チーズが各商品へと姿を変えていくピクトグラムアニメーションは、背景が透ける滑らかな映像として、ページのあちこちで再生されます。簡単そうに見えて、今回もっとも試行錯誤を重ねた部分です。
透過付きのアニメーションをウェブで再生する方法は、ブラウザごとに得意なものが違います。そこで、HEVCの透過動画（.mov）、VP9の透過動画（.webm）、アニメーションPNGの3形式で素材を書き出し、画質、ファイルサイズ、再生の安定性を端末ごとに比べました。アニメーションPNGはどのブラウザでも透過を表示できますが、ファイルが重くなり、再生の頭出しや終わりの検知も細かく制御できません。最終的には、SafariとiPhoneには.mov、それ以外には.webmを読み込ませる構成に落ち着きました。
形式を決めてからも、課題は続きました。再生を命じても実際には止まったままになる、最初のフレームが一瞬ちらつく、といった現象がブラウザによって起こります。そこで、再生が本当に始まったかを確かめて自動でやり直す仕組みや、ブラウザに合わせて再生を始めるタイミングを変える処理を独自に組み込みました。チーズから商品へ、商品からチーズへと行き来する変化も、順再生と逆再生の映像を別々に用意し、つなぎ目が見えないように切り替えています。
来訪者には何事もなく動いて見えること。その「当たり前」を支えるために、いちばん時間をかけた部分です。
スマートフォンにも、同じ「手ざわり」を
PCでカーソルを近づけて楽しむインタラクションを、スマートフォンでもそのまま体験できるよう、タッチ操作向けに再設計しました。指でなぞるとボタンやビジュアルが柔らかく吸い寄せられ、指を外すとぷるんと弾んで元に戻ります。タップだけでは伝わりにくい弾力を、指先でも感じられるようにしています。
とろりと流れ落ちるメニューの幕は、スマートフォンでは波の起伏を少なくして、狭い画面でもうるさくならない大きなうねりに調整しました。メニューを開いたときに流れるロゴのアニメーションも、PCとスマートフォンで別々に用意しています。動画はブラウザごとに最適な形式を選んで読み込み、通信が不安定な環境でも再生が止まらないよう配慮しました。
ページ内のリンクをたどったときの止まる位置も画面幅に合わせて計算するなど、細かな操作感まで、どの端末でも心地よく使えるよう調整しています。