引き締まった印象で眼鏡を魅せるブランドDEMOサイト。
流れるような情報のデザインWebサイトを構築。

- サイト名
GLASS ROOM
- カテゴリー
ブランドサイト
- ページ数
1ページ
- 制作期間
実働 約1~2週間
- 機能
GSAP
smooth scroll
scrolltrigger
- 制作環境
Next.js / Typescript / Tailwind CSS
プロジェクトのポイント
架空の眼鏡ブランド「GLASS ROOM」の製品 FREE FiT を、1ページで紹介するデモサイトです。
黒を基調にした画面に、フレームの形と機能だけを置いています。
① 製品を分かりやすく伝える
FREE FiT の形・機能・仕様を、ヒーローから特徴、カラー、スペックまで一つの流れに整理しています。
情報を増やしすぎず、セクションごとに必要なことだけを置くことで、来訪者が製品の印象をすぐ掴めるようにしています。
② 流れるスクロールで情報を見せる
GSAP の ScrollTrigger とスムーススクロールで、スクロールに合わせて視差や入場の動きを付けています。
操作そのものがページの流れになり、眼鏡の軽さやシルエットが視線の移動とともに伝わるようにしています。
③ ミニマムデザインで見やすいサイトを
黒を基調にした落ち着いた画面に、アクセントは製品カラーだけに絞っています。
余白と書体を抑え、装飾を増やさずに、フレームの形とコピーが読みやすい状態を保っています。