GLASS ROOM

引き締まった印象で眼鏡を魅せるブランドDEMOサイト。

流れるような情報のデザインWebサイトを構築。

GLASS ROOM
サイト名

GLASS ROOM

カテゴリー

ブランドサイト

ページ数

1ページ

制作期間

実働 約1~2週間

機能

GSAP

smooth scroll

scrolltrigger

制作環境

Next.js / Typescript / Tailwind CSS

プロジェクトのポイント

架空の眼鏡ブランド「GLASS ROOM」の製品 FREE FiT を、1ページで紹介するデモサイトです。

黒を基調にした画面に、フレームの形と機能だけを置いています。

① 製品を分かりやすく伝える

FREE FiT の形・機能・仕様を、ヒーローから特徴、カラー、スペックまで一つの流れに整理しています。

情報を増やしすぎず、セクションごとに必要なことだけを置くことで、来訪者が製品の印象をすぐ掴めるようにしています。

② 流れるスクロールで情報を見せる

GSAP の ScrollTrigger とスムーススクロールで、スクロールに合わせて視差や入場の動きを付けています。

操作そのものがページの流れになり、眼鏡の軽さやシルエットが視線の移動とともに伝わるようにしています。

③ ミニマムデザインで見やすいサイトを

黒を基調にした落ち着いた画面に、アクセントは製品カラーだけに絞っています。

余白と書体を抑え、装飾を増やさずに、フレームの形とコピーが読みやすい状態を保っています。

ギャラリー