DESIGN.md — 水色×黄色の円ラインが弾む観光体験ガイド LP（Pop Cyan Yellow Regional Experience Guide LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、親しみ・手作り感
• キーワード: 円ライン・丸抜き写真・黄緑のラベル・体験カード・イラスト地図・ゆるキャラ
• 地の質感: フラットな塗りとクリーム地。細い同心円ラインと点線で軽い動きを出す
• 形: 円形写真・角丸カード・ピル型ボタン・斜めのリボン見出し
• 温度感: 明るく暖かいが、水色で爽やかさを足す

Colors

• 地はクリーム→淡黄→水色→白とセクションごとに切り替える
• 強調はカード見出しの黄緑ラベルと緑文字に限定する
• 主CTAだけを黄色の面＋濃茶太枠にする
• 文字は黒でなく濃茶で統一し柔らかさを保つ
• 水色は円ラインとアプリ紹介面に使いブランドの軸にする
• speech-bubble は文字 #4EC2E7 × 背景 #FEFDFD のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#167EA0、4.57:1）を使う。

Typography

• 見出しは極太ゴシックで詰め気味に組む
• キーワードだけ緑や水色で色替えし、軽く斜体にして動きを出す
• 本文は 13px 前後の中太で行間ゆったり
• 見出し前後に小さな斜線装飾を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（体験カードは 1 列、PC は 2 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 14px（375px 幅換算）
• カードは左右交互に少し上下ずらして並べリズムを作る
• 見出しは中央揃えのリボン＋大見出しの 2 段構成
• 地図セクションは中央に地図、周囲にエリアカードを配置
• CTAは横幅いっぱい近くの大型ピル

Elevation & Depth

• カードは影なし、濃茶の細枠でフラットに
• 主CTAのみ下方向にずらしたベタ影で立体感
• 吹き出しは白地に細枠のみ

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: FVは円形の丸抜き、カード内は角丸なしの長方形
• セクション境界: 直線で背景色を切り替える
• FV写真は円形で大小ばらばらに散らす
• 写真の周りに水色・黄緑・黄色の同心円ラインを重ねる
• 詳細ボタンは小さな白のピル＋矢印丸

Components

• クーポン取得CTA（button-primary）: 黄色の大型ピル、濃茶太枠と矢印丸付き、上に小さな吹き出しラベル
• 詳細を見るボタン（button-detail）: 白地に細枠の小ピル、右端に黒丸矢印
• 体験カード（experience-card）: 黄緑ラベル見出し＋写真＋地域バッジ＋アイコンと本文
• リボン見出し（ribbon-heading）: 白地細枠の横長帯に小見出し、両端に斜線装飾
• 地域名バッジ（area-badge）: 写真下中央に重なる白い小ラベル
• 使い方番号バッジ（step-number）: 黄色の円に番号、カード上端に重ねる
• 質問吹き出し（speech-bubble）: 白地細枠の吹き出しに水色文字の質問
• 追従クーポンバナー（floating-coupon）: 右上固定の黄色角丸ボックス

Do's and Don'ts

Do - 円ラインと丸抜き写真でFVに動きを出す - カードの見出しは必ず黄緑ラベル上に置く - 地域名やカテゴリはアイコン＋小ラベルで添える - ゆるキャラ風の黄色いマスコットを見出し横に置く - 文字色は濃茶で統一する

Don't - 黒の純色や濃い背景を多用しない - 影の強い立体カードにしない - 黄色をCTA以外の大面積に使わない - 明朝体など堅い書体を使わない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（体験の楽しさと取り組みを伝える）: 中央に極太見出しとリボン、周囲に円形写真と同心円ライン
2. 体験一覧（ツアー・アクティビティを紹介）: クリーム地にリボン見出し、体験カードを2列×4段
3. エリアから予約（地域ごとの体験を案内）: 淡黄地に簡略地図、周囲にエリアカードと吹き出し
4. アプリ紹介（旅の疑問解決ツールを紹介）: 水色地に白カード2枚、番号バッジとQ&A吹き出し
5. CTA（クーポン取得へ誘導）: 白地に黄色大型ピルボタンと注釈
6. フッター（運営表記）: 白地にロゴと小さな文字

Imagery

• 明るい自然光の観光・体験写真を高彩度で使う
• 人物は笑顔で体験している場面を選ぶ
• FV写真は円形に切り抜いて重ねる
• 地図は淡緑のフラットなシルエットにピン状ラベル
• 線画の小アイコンでカテゴリを示す
• 丸い黄色のマスコットイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではカードを1列にし写真を全幅にする
• FVの円形写真は数を減らし見出しを中央に大きく
• 地図セクションは地図を上、エリアカードを縦積みに
• 追従クーポンは下部固定バーに変える

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。