絵本LP
絵本のようにめくって読む体験型ランディングページ。AI自動化コンサルの世界観をストーリーで伝える。
LP制作体験型UINext.js
制作裏側を見る →マップLP — 制作裏側
概要
何を作ったか
4つのサービスエリアを「島マップ」として表現するインタラクティブなランディングページ。タップ・クリックで各エリアの詳細がスライドアップする体験型UIで、AI自動化サービスの世界観を直感的に伝えることを目指しました。
目的
なぜ作ったか・誰向けか
何を作ったか
インタラクティブマップで4サービスエリアを探索できるランディングページ
誰向けか
AI自動化・LP制作サービスに興味を持つ事業者・個人
種別
ショーケース / ポートフォリオ
工数
どのくらいの時間がかかったか
合計: 約3時間
ChatGPT壁打ち・コンセプト整理
30分
Claude Code実装
30分
マップ画像作成・デザイン調整
約2時間
使用ツール・技術
どんなツールを使ったか
Claude CodeChatGPTFramer MotionNext.jsVercel
実装ステップ
どんな順序で作ったか
1
島マップのコンセプトを設計
「島を探索するようにサービスを発見できる」体験をChatGPTと壁打ちして具体化。4エリアの配置と情報設計を整理しました。
2
Claude Codeで実装
Framer Motionを使ったスライドアップUIと、マップ画像上のクリッカブルエリアをClaude Codeで実装。30分程度で基本動作を完成させました。
3
マップ画像の作成とデザイン調整
AI画像生成でマップビジュアルを作成し、各エリアの位置合わせとレスポンシブ対応を調整しました。
苦労した点
問題と解決策
課題
画像上の特定位置にクリッカブルエリアを配置すると、レスポンシブ対応が難しい
解決策
パーセンテージベースのposition指定を採用することで、画面サイズに関わらずマップ上の正しい位置にエリアを配置できるようにしました。
学び・再利用できる知見
次に活かせること
- ✓画像上のインタラクティブUI実装はposition指定をパーセンテージにするとレスポンシブ対応が容易
- ✓コンセプトが明確であればClaude Codeの実装は短時間で完成する
- ✓制作時間の多くは素材（マップ画像）の準備が占める