NAEBAPRINCEHOTELPRINCE HOTEL
- ROLE
- Front-end Development
- FOCUS
- Responsive × Motion
- DESIGN
- Provided Design
- YEAR
- 2026
THE BRIEF
支給デザインの魅力を、画面サイズに左右させない。
苗場プリンスホテルのグリーンシーズン向け特設LP。支給デザインをもとに、フロントエンド実装を担当しました。
にぎやかな世界観を維持しながら、スマートフォンから大型ディスプレイまで幅広い表示環境に対応することが求められました。
にぎやかな世界観を維持しながら、スマートフォンから大型ディスプレイまで幅広い表示環境に対応することが求められました。
THE APPROACH
RESPONSIVEIS NOT JUSTSHRINKING.
単純に画面全体を縮小するのではなく、コンテンツごとの見せ方や情報量を考えながらレスポンシブレイアウトを構築しました。
CSS GridやFlexbox、clamp()などを使い分け、画面幅が変化しても不自然な余白やレイアウト崩れが発生しにくい実装を意識しています。
IMPLEMENTATION
- 01
Responsive
スマートフォンから大型画面まで、コンテンツの優先順位に合わせて配置やサイズを調整。
- 02
Slider
Swiperを利用し、コンテンツに合わせたスライダーUIと挙動を実装。
- 03
Motion
ページの世界観を損なわない範囲で、GSAPを使ったアニメーションを実装。ゴンドラアニメーションはsvgにパスアニメーションを適用し、より自然な動きを表現。