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 →Character LP — Behind the Scenes
Overview
What We Built
「親しみやすさと技術力を前面に出す」コンセプトで、子供向けアニメ「ティニピン」から着想を得たキャラクターLP。複数のキャラクターがそれぞれ名前・役割を持ち、ページ内で躍動するLPを作ることで、LP制作の可能性を示すショーケースとして制作しました。
Purpose
Why & For Whom
What was built
複数キャラクターが案内するランディングページ
Target audience
LP制作を検討している事業者
Type
ショーケース / ポートフォリオ
Effort
Time Investment
Total: 約5〜6時間（ChatGPT壁打ち含む）
ChatGPT壁打ち・コンセプト整理
約1時間
画像生成・Canva加工
約3〜4時間
Claude Code実装
1時間未満
Tools & Technologies
What We Used
Claude CodeChatGPTGeminiCanvaNext.jsVercel
Implementation Steps
Build Order
1
ティニピンからコンセプトを具体化
キャラクターの種類・名前・役割をChatGPTと壁打ちして決定。どんな画像が必要かをリストアップしました。
2
キャラクター画像を生成・加工
ChatGPT / Geminiで複数キャラクター・複数ポーズを1枚の画像にまとめて生成し、Canvaで1体ずつ切り出しました。
3
Claude Codeで実装
ChatGPTに実装プロンプトを生成してもらい、Claude Codeで実装。キャラクターが躍動するアニメーションも含めて1時間未満で完成しました。
Challenges
Problems & Solutions
Problem
複数キャラクター・複数ポーズを統一感を保って生成するのが難しい
Solution
1回の出力で全キャラクター・全ポーズを1枚の画像に含めて生成することで、統一感のあるバリエーションを作成できました。後半はCanvaの操作にも慣れてスムーズになりました。
Problem
Canvaでの切り出し作業が手作業になってしまう
Solution
生成時に「1枚にまとめる」設計にしたことで切り出し作業が最小化。Canvaの操作自体は習得すれば効率的に進められます。
Learnings & Reusable Insights
Takeaways for Next Time
- ✓複数種類・複数ポーズの画像生成は1枚にまとめて生成すると統一感が出る
- ✓画像生成と加工の工数がコーディングよりかかることがある。スケジュール設計に組み込むべき
- ✓Claude Codeの実装は最小。ボトルネックは素材準備にあった