Ohtani Log
A site visualizing Shohei Ohtani's at-bat log based on MLB game data. Track at-bat results, batting average, and home runs with real-time data.
MLBData VizNext.jsVercel
Behind the Scenes →Storybook LP — Behind the Scenes
Overview
What We Built
トップページの別パターンとして、「親しみやすさと技術力を前面に出す」コンセプトで制作。絵本をめくるようにページ遷移できる体験型のLPを作ることで、AI自動化コンサルの世界観をストーリーとして届けられると考えました。
Purpose
Why & For Whom
What was built
絵本のようにページをめくって読む体験型ランディングページ
Target audience
AI自動化コンサルに興味を持つビジネスオーナー・経営者
Type
ショーケース / ポートフォリオ
Effort
Time Investment
Total: 約2.5時間
ChatGPT壁打ち・コンセプト整理
30分
Claude Code実装
15分
デザイン調整・アニメーション磨き込み
約2時間
Tools & Technologies
What We Used
Claude CodeChatGPTNext.jsVercel
Implementation Steps
Build Order
1
ChatGPTでコンセプト壁打ち
「絵本をめくる感覚のLP」というコンセプトをChatGPTに投げ、どんな体験設計にするか具体化しました。
2
Claude Codeで実装
ChatGPTに実装計画プロンプトを生成してもらい、Claude Codeに投げて15分程度で基本実装を完了しました。
3
アニメーション調整・磨き込み
ページをめくるアニメーションのリアリティとパフォーマンスのバランスを調整。ブラウザコンソールのエラーを確認しながらClaude Codeと往復して完成させました。
Challenges
Problems & Solutions
Problem
アニメーションのリアリティを追求すると、サイトが重くなってしまう
Solution
「本をめくるように見えつつ、重い処理をしない」バランス型の実装を選択。リアリティとパフォーマンスのトレードオフを最初に決めることで方針がブレなくなりました。
Problem
ウィンドウサイズが小さい時に、スクロールとページめくり操作が競合してしまう
Solution
細かな条件分岐を追加してスクロールとページめくりを正しく切り分けました。アニメーションが複雑なほどClaude Codeとの往復回数も増えることを学びました。
Learnings & Reusable Insights
Takeaways for Next Time
- ✓アニメーションは複雑にするほどClaude Codeとの往復が増える。最初にリアリティとパフォーマンスのトレードオフを決めておくのが重要
- ✓ブラウザのコンソールエラーをClaude Codeに渡すだけで多くの問題が解決できる
- ✓基本実装はAIで15分、磨き込みに時間をかけるのが効率的な進め方