Timeline LP — Behind the Scenes
Overview
What We Built
企業の歩みや沿革を、縦スクロールで時系列に沿って追体験できるランディングページ。左右交互に配置されたカードとプログレスバーで、ストーリーを直感的に伝える構成にしました。タイムライン型のLPは採用ページや会社紹介で需要が高く、ショーケースとして制作しました。
Purpose
Why & For Whom
What was built
縦スクロールで企業の歩みを追体験できるタイムラインLP
Target audience
企業サイト・採用ページのLP制作を検討している事業者
Type
ショーケース / ポートフォリオ
Effort
Time Investment
Total: 約2時間
ChatGPT壁打ち・コンセプト整理
20分
Claude Code実装
30分
デザイン調整・アニメーション磨き込み
約1時間
Tools & Technologies
What We Used
Claude CodeChatGPTFramer MotionNext.jsVercel
Implementation Steps
Build Order
1
タイムラインUIのコンセプトを設計
「縦スクロールで時系列を追体験する」コンセプトをChatGPTと壁打ちして具体化。左右交互配置とプログレスバーの情報設計を整理しました。
2
Claude Codeで実装
Framer Motionを使ったスクロール連動アニメーションと、レスポンシブ対応のタイムラインUIをClaude Codeで実装。30分程度で基本動作を完成させました。
3
アニメーション調整・レスポンシブ対応
スクロール連動のプログレスバーとカードの出現アニメーションを調整。モバイルでは1カラム表示に切り替わるレスポンシブ対応も実施しました。
Challenges
Problems & Solutions
Problem
左右交互配置のタイムラインをモバイルでも見やすくする必要がある
Solution
モバイルでは1カラムの縦並びに切り替え、プログレスバーを左端に固定することで、どの画面サイズでも読みやすいレイアウトを実現しました。
Learnings & Reusable Insights
Takeaways for Next Time
- ✓タイムライン型UIはスクロール連動アニメーションとの相性が良く、少ない実装で効果的な演出ができる
- ✓左右交互配置はPC向けには効果的だが、モバイル対応を最初から設計に含めるべき
- ✓コンセプトが明確であればAI実装は短時間で完成する。ボトルネックは調整作業にある