このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
コンセプト
クリーム×ネイビー×レッドの世界観で、巨大ディスプレイタイポと中央の製品ビジュアルを主役に据えた飲料ブランドサイト。Hero／About／製品（赤背景の横スクロールスライダー）／ブランドフィルム／News／ブランド一覧／Contactを軸に、会社紹介・製造・製品・チーム・FAQ・問い合わせまで全8ページで構成。Lenisのスムーススクロール上に、見出しの行マスク・clip-pathワイプ・カードのスタッガー・ヒーローのイントロ演出をGSAP／IntersectionObserverで実装した。
背景・課題
「ただ縦に積むだけ」にならない没入感を、全デバイスで破綻させずに出すことに注力した。reveal／clipはCSSトランジション＋ScrollTriggerのクラス付与方式に統一し、固定全画面ブレンドや重い画像デコードを排してスクロールの引っかかりを解消（脱落フレーム0）。製品ボトル等の透過素材はAI生成画像の「偽透過」を検知してキーアウト処理し、クリーム背景に自然に馴染ませた。
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
スクロール演出横スクロールスライダー行マスク見出しclip-path演出フォームレスポンシブ
使用技術
HTMLCSSJavaScriptGSAPLenis
CMSなし
フォームあり
アニメーションあり