飲料ブランドの季節限定商品キャンペーンLPの制作実績

案件概要

飲料ブランドの季節限定商品を紹介するキャンペーンLP制作に、本業の案件として参加しました。支給デザインをもとに、フロントエンド実装とレスポンシブ対応を担当しています。商品ラインナップや素材の特長、キャンペーン情報を縦長の1ページにまとめ、スマートフォンを基準としたレイアウトを実装。PCではコンテンツを中央に配置し、左右に背景を表示する構成に対応しました。スクロールに合わせた表示演出や、波形に沿って流れる文字、カードの回転など、商品の世界観を表現するアニメーションも組み込んでいます。

自分が担当した範囲

フロントエンド開発

実装内容・工夫

スマートフォンを基準にしたレスポンシブ対応：スマートフォンでは画面幅に応じて文字・画像・余白のサイズが変化するレイアウトを実装しました。PCでは中央のコンテンツ幅を制限し、左右の背景と組み合わせた表示に対応しています。
SVGを活用した文字のループ演出：SVGの波形パスに沿って文字を配置し、文字ごとの位置と角度を調整しながら流れる演出を実装しました。支給された文字のアウトラインを用いて、デザインの形状を保った表現にしています。
スクロール・カードのアニメーション：Intersection Observerを使用し、要素が画面内に入ったタイミングで表示演出を開始する構成にしました。カードの表裏が回転する演出や、装飾が浮遊するアニメーションも実装しています。
表示状態に応じた動作制御：文字のループやカードのアニメーションは、画面外では停止する構成にしています。また、スクロール表示演出と文字ループでは、端末側の「動きを減らす」設定に応じて動作を抑える処理を設けました。