絵本LP
絵本のようにめくって読む体験型ランディングページ。AI自動化コンサルの世界観をストーリーで伝える。
LP制作体験型UINext.js
制作裏側を見る →概要
何を作ったか
「親しみやすさと技術力を前面に出す」コンセプトで、子供向けアニメ「ティニピン」から着想を得たキャラクターLP。複数のキャラクターがそれぞれ名前・役割を持ち、ページ内で躍動するLPを作ることで、LP制作の可能性を示すショーケースとして制作しました。
目的
なぜ作ったか・誰向けか
何を作ったか
複数キャラクターが案内するランディングページ
誰向けか
LP制作を検討している事業者
種別
ショーケース / ポートフォリオ
工数
どのくらいの時間がかかったか
合計: 約5〜6時間（ChatGPT壁打ち含む）
ChatGPT壁打ち・コンセプト整理
約1時間
画像生成・Canva加工
約3〜4時間
Claude Code実装
1時間未満
使用ツール・技術
どんなツールを使ったか
Claude CodeChatGPTGeminiCanvaNext.jsVercel
実装ステップ
どんな順序で作ったか
1
ティニピンからコンセプトを具体化
キャラクターの種類・名前・役割をChatGPTと壁打ちして決定。どんな画像が必要かをリストアップしました。
2
キャラクター画像を生成・加工
ChatGPT / Geminiで複数キャラクター・複数ポーズを1枚の画像にまとめて生成し、Canvaで1体ずつ切り出しました。
3
Claude Codeで実装
ChatGPTに実装プロンプトを生成してもらい、Claude Codeで実装。キャラクターが躍動するアニメーションも含めて1時間未満で完成しました。
苦労した点
問題と解決策
課題
複数キャラクター・複数ポーズを統一感を保って生成するのが難しい
解決策
1回の出力で全キャラクター・全ポーズを1枚の画像に含めて生成することで、統一感のあるバリエーションを作成できました。後半はCanvaの操作にも慣れてスムーズになりました。
課題
Canvaでの切り出し作業が手作業になってしまう
解決策
生成時に「1枚にまとめる」設計にしたことで切り出し作業が最小化。Canvaの操作自体は習得すれば効率的に進められます。
学び・再利用できる知見
次に活かせること
- ✓複数種類・複数ポーズの画像生成は1枚にまとめて生成すると統一感が出る
- ✓画像生成と加工の工数がコーディングよりかかることがある。スケジュール設計に組み込むべき
- ✓Claude Codeの実装は最小。ボトルネックは素材準備にあった