DESIGN.md — 芝生グリーンと道路イラストの観光ドライブ LP（Playful Illustrated Drive Map LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、ナチュラル、親しみ・手作り感、清潔・爽やか
• キーワード: 芝生グリーン・道路イラストマップ・角丸カード・欧文見出し・青ラベル・波形境界
• 地の質感: 緑の面に細かなノイズ粒子を乗せた紙のような質感。白地もわずかにグレーがかる。
• 形: 大きな角丸カード、ピル型ラベル、雲や丘の波形境界、切り欠き角に丸ボタンを置くカード。
• 温度感: 明るく暖かい昼間の行楽ムード。

Colors

• 地は淡グレー白、イラストマップとスポットは芝生グリーンで大きく塗り分ける。
• 強調の文字は緑、ラベル・タブ・選択 UI は青と役割を分ける。
• 白カードはグレー地の上に置き、境界線なしで面の差で区切る。
• 黄色は車や小さな丸の点在アクセントだけにする。
• フッターは淡いミントグリーンで締める。
• 写真カードの上の文字は白にし、写真の暗部に置く。
• arrow-button は文字 #FFFFFF × 背景 #2CB374 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#218657、4.55:1）を使う。
• map-label は文字 #FFFFFF × 背景 #2384FD のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#026FF8、4.53:1）を使う。
• segment-tab は文字 #FFFFFF × 背景 #2384FD のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#026FF8、4.53:1）を使う。
• info-card は文字 #63BB7B × 背景 #FEFEFE のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#39844E、4.54:1）を使う。
• sns-badge は文字 #FFFFFF × 背景 #2CB374 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#218657、4.55:1）を使う。

Typography

• 見出しは細い欧文の大見出し＋緑の太字和文の 2 段組みで中央揃え。
• 数字は欧文の細めウェイトで大きく、単位は小さな和文で添える。
• 本文は 13px 前後でやや広めの行間。
• 欧文の大きなループテキストを帯として流す。
• キャッチだけは斜体・太いディスプレイ書体で遊びを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、イラストマップは全幅
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 16px 余白で配置する。
• イラストマップは縦に長く全幅で使い、道路をスクロールに沿って蛇行させる。
• スポットカードは縦に 4 枚、間隔 16px。
• 見出しは中央、一覧リンクは右寄せ。
• ニュースは左に写真、右に日付とタイトルの横並び。

Elevation & Depth

• 基本はフラットで影を使わない。
• 白カードは地色との面の差だけで浮かせる。
• 拡大ボタンなどは半透明の暗い面を重ねる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 16px の長方形。右下を切り欠いて白い角丸の矢印ボタンをはめ込む。
• セクション境界: 雲や丘のような柔らかい波形で境界をつくる。
• タブ・ラベル・バッジはピル型にする。
• ヒーロー写真は膨らんだ有機的な角丸で切り抜く。
• 矢印ボタンは角丸の正方形。
• フッター上辺は大きな角丸。

Components

• 欧文＋和文見出し（heading-bilingual）: 細い欧文の大見出しの下に緑の太字和文を中央に置く。
• 写真スポットカード（spot-photo-card）: 角丸写真の左下に白太字タイトル。右下の切り欠きに白い矢印ボタン。
• 矢印丸ボタン（arrow-button）: 緑の角丸正方形に白矢印、または白地に緑矢印。
• スポット名ラベル（map-label）: 青いピル型に白太字。吹き出しの尾をつけてイラストを指す。
• 料金検索の切替タブ（segment-tab）: 青いピル型の帯に 3 択を並べ、選択中は白いピルに青文字。
• 営業時間カード（info-card）: 白い大角丸カードにアイコン、ラベル、緑の大きな数字、グレー地の注釈ボックス。
• SNSアカウントバッジ（sns-badge）: 緑のピル型に白文字のアカウント名。
• 注意アイコン付きリスト（rule-list）: 緑の丸枠に！のアイコンと本文を横並びにする。
• 番号付きルート例（numbered-route）: 青丸の白数字、経路テキスト、矢印付きのグレー地料金ボックス。

Do's and Don'ts

Do - 緑の面と道路イラストで、スクロール自体をドライブ体験にする。 - スポットは青ラベルと小さな線画イラストで示す。 - 白い大角丸カードで情報を区切る。 - 欧文見出しと緑の和文の 2 段見出しを全セクションで統一する。 - 車・木・花などの小さなイラストを余白に点在させる。

Don't - 濃い影やグラデーションの立体表現を使わない。 - 直角のボックスや細い枠線で区切らない。 - 緑と青以外の強い色を面積大きく使わない。 - 本文に明朝体を使わない。 - 写真の上にカラー帯を敷いて文字を載せない。

Page Structure

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

1. ヘッダー・お知らせ帯（ロゴ・言語切替・メニューと最新の告知）: 左上に青いロゴタブ、右に緑の角丸メニュー。下に白いお知らせバー。
2. ファーストビュー（景色の魅力を一目で伝える）: 有機的な角丸の写真の周りに車や木のイラストを散らす。右下に回転テキスト付きの緑丸ボタン。
3. 営業時間（基本情報を示す）: ハンドル型の装飾に挟まれた白カード。緑の大きな数字と注釈ボックス。
4. ループテキスト帯（ブランドの印象づけ）: 緑の大きな欧文を横に流す。
5. お知らせ（最新情報）: 車のイラストの上に見出し。写真と日付・タイトルの横並びリスト。右下に一覧リンク。
6. イラストドライブマップ（沿道のスポットを体験的に紹介）: 空色から緑の丘へ波形でつなぎ、蛇行する道路に沿って青ラベルとイラスト、＋ボタンを配置する。
7. スポット情報（テーマ別に回遊させる）: 緑地に角丸写真カードを 4 枚縦に並べる。
8. 料金検索（料金を試算させる）: 番号付きの料金例カード、青ピルの切替タブ、チェックボックス、結果を大きな数字で示す白カード。
9. イラスト地図（全体ルートの把握）: 角丸の大判イラストマップに、拡大を促す半透明ボタンと凡例を添える。
10. SNS（フォロー誘導）: 白カードにアイコン・名称・緑バッジ。投稿写真を 3 列で並べる。
11. ルールとマナー（注意事項）: 注意アイコン付きのリスト。
12. FAQ・お問い合わせ・リンク集（サポート導線）: グレーの角丸パネルに欧文見出しと緑の電話番号。白カードに外部リンクの一覧。
13. フッター（締めと連絡先）: 淡いミントの角丸面にロゴ・電話・SNS丸アイコン・ループする欧文。

Imagery

• 線を使わないフラットな塗りのイラスト（車、木、花、家族、ハイカー、建物）。
• 道路は明るいグレーに白い破線。緑地には粒状のノイズを乗せる。
• スポットのイラストは雲形や角丸の小窓に描き、夜景は濃紺に星を散らす。
• 写真は夜景・桜・展望台・新緑の道など、自然光で彩度がやや高めのもの。
• 月と星の紫枠アイコンで夜のおすすめを示す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヒーロー写真を横長にして全幅に近づけ、営業時間カードは横並びにする。
• PC のニュースは写真カードを 3 列で並べる。
• PC のマップは道路が左右に大きく蛇行し、スポットを左右交互に置く。
• PC のスポットカードと SNS カードは 2 列。
• PC の FAQ とお問い合わせは横並び。リンク集は複数列。

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 行書くと起動時に読み込まれる。