REGENT BEVERAGE

飲料・メーカー / ブランドサイト（コーポレート）

清涼飲料ブランド「REGENT BEVERAGE」のブランドサイト（コンセプト）。巨大タイポと製品ビジュアルを主役に、スクロール連動の没入演出で世界観を伝える全8ページ構成。

このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。

CONCEPT

クリーム×ネイビー×レッドの世界観で、巨大ディスプレイタイポと中央の製品ビジュアルを主役に据えた飲料ブランドサイト。Hero／About／製品（赤背景の横スクロールスライダー）／ブランドフィルム／News／ブランド一覧／Contactを軸に、会社紹介・製造・製品・チーム・FAQ・問い合わせまで全8ページで構成。Lenisのスムーススクロール上に、見出しの行マスク・clip-pathワイプ・カードのスタッガー・ヒーローのイントロ演出をGSAP／IntersectionObserverで実装した。

背景・課題

“ただ縦に積むだけ”にならない没入感を、全デバイスで破綻させずに出すことに注力した。reveal／clipはCSSトランジション＋ScrollTriggerのクラス付与方式に統一し、固定全画面ブレンドや重い画像デコードを排してスクロールの引っかかりを解消（脱落フレーム0）。製品ボトル等の透過素材はAI生成画像の“偽透過”を検知してキーアウト処理し、クリーム背景に自然に馴染ませた。

PROJECT INFO

ジャンル: 飲料・メーカー
サイト種別: ブランドサイト（コーポレート）
制作年: 2026年
想定予算帯: ¥350,000（税抜）
制作期間帯: 要件に応じて調整
規模感: 8ページ

DESIGN PERSPECTIVE

デザイン傾向: ボールド / ヴィンテージ・モダン

TECHNOLOGIES & FEATURES

主な機能

スクロール演出横スクロールスライダー行マスク見出しclip-path演出フォームレスポンシブ

使用技術

HTMLCSSJavaScriptGSAPLenis

CMSなし

フォームあり

アニメーションあり