キャラクターLP
AIキャラクターが案内するランディングページ。ユニコーンラボが手がけるLP制作事例を紹介。
LP制作AIキャラクターNext.js
制作裏側を見る →概要
何を作ったか
トップページの別パターンとして、「親しみやすさと技術力を前面に出す」コンセプトで制作。絵本をめくるようにページ遷移できる体験型のLPを作ることで、AI自動化コンサルの世界観をストーリーとして届けられると考えました。
目的
なぜ作ったか・誰向けか
何を作ったか
絵本のようにページをめくって読む体験型ランディングページ
誰向けか
AI自動化コンサルに興味を持つビジネスオーナー・経営者
種別
ショーケース / ポートフォリオ
工数
どのくらいの時間がかかったか
合計: 約2.5時間
ChatGPT壁打ち・コンセプト整理
30分
Claude Code実装
15分
デザイン調整・アニメーション磨き込み
約2時間
使用ツール・技術
どんなツールを使ったか
Claude CodeChatGPTNext.jsVercel
実装ステップ
どんな順序で作ったか
1
ChatGPTでコンセプト壁打ち
「絵本をめくる感覚のLP」というコンセプトをChatGPTに投げ、どんな体験設計にするか具体化しました。
2
Claude Codeで実装
ChatGPTに実装計画プロンプトを生成してもらい、Claude Codeに投げて15分程度で基本実装を完了しました。
3
アニメーション調整・磨き込み
ページをめくるアニメーションのリアリティとパフォーマンスのバランスを調整。ブラウザコンソールのエラーを確認しながらClaude Codeと往復して完成させました。
苦労した点
問題と解決策
課題
アニメーションのリアリティを追求すると、サイトが重くなってしまう
解決策
「本をめくるように見えつつ、重い処理をしない」バランス型の実装を選択。リアリティとパフォーマンスのトレードオフを最初に決めることで方針がブレなくなりました。
課題
ウィンドウサイズが小さい時に、スクロールとページめくり操作が競合してしまう
解決策
細かな条件分岐を追加してスクロールとページめくりを正しく切り分けました。アニメーションが複雑なほどClaude Codeとの往復回数も増えることを学びました。
学び・再利用できる知見
次に活かせること
- ✓アニメーションは複雑にするほどClaude Codeとの往復が増える。最初にリアリティとパフォーマンスのトレードオフを決めておくのが重要
- ✓ブラウザのコンソールエラーをClaude Codeに渡すだけで多くの問題が解決できる
- ✓基本実装はAIで15分、磨き込みに時間をかけるのが効率的な進め方