タイムラインLP — 制作裏側
概要
何を作ったか
企業の歩みや沿革を、縦スクロールで時系列に沿って追体験できるランディングページ。左右交互に配置されたカードとプログレスバーで、ストーリーを直感的に伝える構成にしました。タイムライン型のLPは採用ページや会社紹介で需要が高く、ショーケースとして制作しました。
目的
なぜ作ったか・誰向けか
何を作ったか
縦スクロールで企業の歩みを追体験できるタイムラインLP
誰向けか
企業サイト・採用ページのLP制作を検討している事業者
種別
ショーケース / ポートフォリオ
工数
どのくらいの時間がかかったか
合計: 約2時間
ChatGPT壁打ち・コンセプト整理
20分
Claude Code実装
30分
デザイン調整・アニメーション磨き込み
約1時間
使用ツール・技術
どんなツールを使ったか
Claude CodeChatGPTFramer MotionNext.jsVercel
実装ステップ
どんな順序で作ったか
1
タイムラインUIのコンセプトを設計
「縦スクロールで時系列を追体験する」コンセプトをChatGPTと壁打ちして具体化。左右交互配置とプログレスバーの情報設計を整理しました。
2
Claude Codeで実装
Framer Motionを使ったスクロール連動アニメーションと、レスポンシブ対応のタイムラインUIをClaude Codeで実装。30分程度で基本動作を完成させました。
3
アニメーション調整・レスポンシブ対応
スクロール連動のプログレスバーとカードの出現アニメーションを調整。モバイルでは1カラム表示に切り替わるレスポンシブ対応も実施しました。
苦労した点
問題と解決策
課題
左右交互配置のタイムラインをモバイルでも見やすくする必要がある
解決策
モバイルでは1カラムの縦並びに切り替え、プログレスバーを左端に固定することで、どの画面サイズでも読みやすいレイアウトを実現しました。
学び・再利用できる知見
次に活かせること
- ✓タイムライン型UIはスクロール連動アニメーションとの相性が良く、少ない実装で効果的な演出ができる
- ✓左右交互配置はPC向けには効果的だが、モバイル対応を最初から設計に含めるべき
- ✓コンセプトが明確であればAI実装は短時間で完成する。ボトルネックは調整作業にある