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

西武鉄道「ラビューで秩父っとび!」特設サイトのイメージ画像

プロジェクト概要

Summary

本プロジェクトでは、西武鉄道様の新CMキャンペーン「秩父飛(ちちぶっとび)なな子の休日」の一環として、秩父観光情報を発信するLPを新規制作しました。
ユーザーに魅力的な観光体験を提供するため、多彩なアニメーションを取り入れながら、視覚的にも楽しめるサイトを実現。
また、画像最適化やコンポーネントの再利用性を重視しながらAstroで開発を行い、短納期ながらも高品質なLPを提供しました。

クライアントの課題

Business Issue

短期間での公開スケジュールの中でも、アニメーションを多用したサイトを実現する必要がありました。
特に、ファーストビューや電車の動きを想起させるスライドアニメーション、GSAPを活用した地図の動的表現など、演出の細部にこだわるため、デザインと実装の両面で調整を重ねる必要がありました。
また、モデルコースとおすすめスポットの連携や、PC/SPでのバナーURL切り替えなど、ユーザー体験を損なわない工夫も必要でした。

達成成果

Achievements

短納期ながらも、アニメーション表現を豊富に取り入れた高品質なLPを構築しました。
Astroを活用した画像の最適化やコンポーネント設計により、パフォーマンスとメンテナンス性を両立し、表現力と実用性のバランスを保ちながら、クライアントの期待に応えるサイトを提供することができました。

システム開発/Webコンサルティングについて提案いたします

事業やサービスの課題に合わせて、ご提案させていただきます。
打ち合わせでのヒアリングも可能です。

キャンペーンイメージに合わせたアニメーション実装

電車の旅を想起させるスライドアニメーションや、スクロールに応じて地図の色が変化する演出など、「秩父観光情報発信サイト」として観光の意欲を高めるようなアニメーションを実装しました。

GSAPを用いた繊細な動きにより、視覚的な楽しさと直感的な操作性を両立させています。

Astroによる軽量設計と短納期での高品質な実装

コンテンツ量の多さや画像の多用を考慮し、軽量かつ再利用性の高い構成を得意とするAstroを採用。

各コンポーネントの最適化に加え、ビルド時の画像圧縮や遅延読み込みの設定を取り入れることで、表示速度と保守性を両立しました。

システム開発/Webコンサルティングについて提案いたします

事業やサービスの課題に合わせて、ご提案させていただきます。
打ち合わせでのヒアリングも可能です。


クライアント

Lineaworks inc.

クレジット

プロジェクトマネジメント:サトウ(FLAT)
フロントエンド:浅井(FLAT)、矢口(FLAT)
WEBデザイン:Lineaworks inc.

使用技術

TypeScriptAstroSass

使用ツール

SlackFigma

システム開発/Webコンサルティングのお問い合わせ

事業やサービスの課題に合わせて、ご提案させていただきます。

  • HOME/
  • 制作実績/
  • 西武鉄道「ラビューで秩父っとび!」特設サイト