works西武鉄道「ラビューで秩父っとび!」特設サイト

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