Map LP — Behind the Scenes
Overview
What We Built
4つのサービスエリアを「島マップ」として表現するインタラクティブなランディングページ。タップ・クリックで各エリアの詳細がスライドアップする体験型UIで、AI自動化サービスの世界観を直感的に伝えることを目指しました。
Purpose
Why & For Whom
What was built
インタラクティブマップで4サービスエリアを探索できるランディングページ
Target audience
AI自動化・LP制作サービスに興味を持つ事業者・個人
Type
ショーケース / ポートフォリオ
Effort
Time Investment
Total: 約3時間
ChatGPT壁打ち・コンセプト整理
30分
Claude Code実装
30分
マップ画像作成・デザイン調整
約2時間
Tools & Technologies
What We Used
Claude CodeChatGPTFramer MotionNext.jsVercel
Implementation Steps
Build Order
1
島マップのコンセプトを設計
「島を探索するようにサービスを発見できる」体験をChatGPTと壁打ちして具体化。4エリアの配置と情報設計を整理しました。
2
Claude Codeで実装
Framer Motionを使ったスライドアップUIと、マップ画像上のクリッカブルエリアをClaude Codeで実装。30分程度で基本動作を完成させました。
3
マップ画像の作成とデザイン調整
AI画像生成でマップビジュアルを作成し、各エリアの位置合わせとレスポンシブ対応を調整しました。
Challenges
Problems & Solutions
Problem
画像上の特定位置にクリッカブルエリアを配置すると、レスポンシブ対応が難しい
Solution
パーセンテージベースのposition指定を採用することで、画面サイズに関わらずマップ上の正しい位置にエリアを配置できるようにしました。
Learnings & Reusable Insights
Takeaways for Next Time
- ✓画像上のインタラクティブUI実装はposition指定をパーセンテージにするとレスポンシブ対応が容易
- ✓コンセプトが明確であればClaude Codeの実装は短時間で完成する
- ✓制作時間の多くは素材（マップ画像）の準備が占める