Work
実績
.png)
Lineaworks inc.西武鉄道「ラビューで秩父っとび!」特設サイト実績
Lineaworks inc.
クライアントの課題
- 短期間での公開スケジュールの中で、アニメーションを多用したサイトを実現する必要があった。
- ファーストビューや電車の動きを想起させるスライドアニメーション、GSAPを活用した地図の動的表現など、細部の演出にこだわるためデザインと実装の両面で綿密な調整が求められた。
- モデルコースとおすすめスポットの連携、PC/SPでのバナーURL切り替えなど、ユーザー体験を損なわない仕組みづくりが必要だった。
ソリューション
本プロジェクトでは、西武鉄道様の新CMキャンペーン「秩父飛(ちちぶっとび)なな子の休日」の一環として、秩父観光情報を発信するLPを新規制作しました。
ユーザーに魅力的な観光体験を提供するため、多彩なアニメーションを取り入れながら、視覚的にも楽しめるサイトを実現。
また、画像最適化やコンポーネントの再利用性を重視しながらAstroで開発を行い、短納期ながらも高品質なLPを提供しました。
キャンペーンイメージに合わせたアニメーション実装
電車の旅を想起させるスライドアニメーションや、スクロールに応じて地図の色が変化する演出など、「秩父観光情報発信サイト」として観光の意欲を高めるようなアニメーションを実装しました。
GSAPを用いた繊細な動きにより、視覚的な楽しさと直感的な操作性を両立させています。
テックリード
Astroによる軽量設計と短納期での高品質な実装
コンテンツ量の多さや画像の多用を考慮し、軽量かつ再利用性の高い構成を得意とするAstroを採用。
各コンポーネントの最適化に加え、ビルド時の画像圧縮や遅延読み込みの設定を取り入れることで、表示速度と保守性を両立しました。
成果
短納期ながらも、アニメーション表現を豊富に取り入れた高品質なLPを構築しました。
Astroを活用した画像の最適化やコンポーネント設計により、パフォーマンスとメンテナンス性を両立し、
表現力と実用性のバランスを保ちながら、クライアントの期待に応えるサイトを提供することができました。
クレジット
プロジェクトマネジメント:株式会社FLAT
フロントエンド:株式会社FLAT
WEBデザイン:Lineaworks inc.
フロントエンド:株式会社FLAT
WEBデザイン:Lineaworks inc.
使用技術
TypeScript / Astro
使用ツール
Slack / Figma
Other case
.png)