DESIGN.md — 黒線画と黄緑の軽やかな旅行ポイント案内 LP（Line-Art Illustrated Travel Points Guide LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 親しみ・手作り感、シンプル・ミニマル、清潔・爽やか、ポップ・元気
• キーワード: 線画イラスト・黄色マーカー・グリーンの番号・淡いグレー地・ステップ解説・スマホ画面キャプチャ
• 地の質感: フラットな単色の面。地には文字を大きく淡く敷き詰めた透かしパターンを使い、手書き風の英字を添える
• 形: 角丸の大きなグレーパネル、円形の番号バッジ、ピル型CTA、角のない表
• 温度感: 明るく軽い中間温度。白とグレーの地に、黄色が温かみを、グリーンが爽やかさを足す

Colors

• 地は白と#F6F7F9を交互にしてセクションを区切る
• イラストは黒の線画が基本。色は黄色とグリーンだけを部分的に差す
• 強調語には、黄色の半透明マーカーを文字の下半分に引く
• グリーンは番号バッジ・英字サブ見出し・見出しの下線・選択中のタブだけに使う
• 主CTAは黒地に白文字。補助の会員向けCTAはグリーン地にする
• シアンは手順説明のSTEPラベルと注釈だけに使う
• 赤は画面キャプチャの該当箇所を囲む枠だけに使う
• フッターは墨色の地に白文字で締める
• button-secondary は文字 #ECECEB × 背景 #4DBB72 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2E7947、4.51:1）を使う。
• step-badge は文字 #ECECEB × 背景 #4DBB72 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2E7947、4.51:1）を使う。
• callout-box は文字 #E04B4B × 背景 #FFFFFF のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#DC3535、4.56:1）を使う。
• step-label は文字 #5AA6BF × 背景 #FFFFFF のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#3A7F95、4.52:1）を使う。
• region-tab は文字 #4DBB72 × 背景 #FFFFFF のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2E7947、4.5:1）を使う。

Typography

• 見出しと本文はどちらも中央揃えにする
• 見出しの下に、グリーンの小さな英字サブ見出しを大文字で添える
• 見出しの一部には、グリーンの下線か黄色のマーカーを引く
• 本文は小さめにし、行間を2.0ほど取る
• イラストには手書き風の筆記体英字を添えて動きを出す
• 冒頭タイトルの上に、斜線で挟んだ短いリードを置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。地域タブだけ3列のグリッドにする
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上下に余白を大きく取り、白とグレーの地を交互に並べる
• 手順は番号バッジ・小見出し・スマホのキャプチャの順に縦に積む
• スマホのキャプチャの横に、STEP番号と説明の吹き出しを並べる
• 表は左列を黒地・白文字の項目名、右列を白地の値にする
• 全幅の写真は区切りとして1枚だけ挟む

Elevation & Depth

• 影はほとんど使わず、フラットに保つ
• ギフト券の画像にだけ薄い影を付ける
• スマホのモックは黒い太枠で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は全幅の長方形に切る。イラストは背景を切り抜いて置く
• セクション境界: 直線で区切り、地の色を切り替える。ファーストビューの背景は角丸のグレーパネルにする
• 番号は正円のグリーンのバッジにする
• CTAは完全なピル型にし、右端に矢印を付ける
• 表と折りたたみは、角丸なしで細い線で囲む
• 地域タブは角丸なしの白いタイルにし、選択中はグリーンで塗る

Components

• 主CTAボタン（button-primary）: 黒いピル型。中央に白文字、右端に矢印を置く
• 会員向けボタン（button-secondary）: グリーンのピル型。小さなロゴと白文字を2段で入れる
• 番号バッジ（step-badge）: グリーンの正円の中に、白文字で01・02の番号を入れる
• セクション見出し（section-heading）: 黒の太字の見出しの下に、グリーンの英字サブ見出しかグリーンの下線を付ける
• 黄色マーカーの強調（marker-text）: 強調したい語の下半分に黄色の帯を引く
• 条件の表（info-table）: 左列は黒地に白の項目名、右列は白地に値を入れ、灰色の線で区切る
• キャプチャの注釈（callout-box）: 赤枠の白い箱を、キャプチャ内の該当箇所と線でつなぐ
• STEPラベルと説明（step-label）: シアンの英字STEPと数字の下に、黒枠の説明箱を置く
• 注意事項の折りたたみ（accordion）: 黒い細枠の長方形。中央にタイトル、右に下向きの矢印を置く
• 地域タブ（region-tab）: 3列の白いタイル。選択中はグリーン地に白文字にする

Do's and Don'ts

Do - イラストは黒の線画で描き、黄色とグリーンを部分的に差す - 見出しには、グリーンの英字サブ見出しか下線を必ず付ける - 手順は番号バッジとスマホのキャプチャで見せる - 強調語には黄色のマーカーを使う - 白と淡いグレーの地を交互にし、余白を広く取る

Don't - グラデーションや濃い影を使わない - 黄色・グリーン・シアン以外の差し色を増やさない - 左揃えの長文を詰め込まない - 写真を多用しない。全幅の写真は区切りとして1〜2枚に留める - CTAに角ばった四角いボタンを使わない

Page Structure

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

1. ファーストビュー（制度名と世界観を伝える）: 短いリードの下にロゴ風の大きなタイトルを置く。角丸のグレーパネルの上に、旅と街の線画イラストを大きく配置する
2. コンセプト説明（制度の概要を伝える）: 淡い水色の透かし文字パターンを地に敷く。2行の見出し、流れを示すイラスト、マーカー付きの中央揃えの本文を並べる
3. 貯め方（獲得の流れと条件を示す）: グレー地に、アイコンを矢印でつないだ流れ図を置く。その下に説明文と、項目名の列が黒い表を並べる
4. 確認方法（画面上での確認手順を示す）: 番号バッジの下に、スマホのキャプチャと赤枠の注釈を置く。最後に注意事項の折りたたみを付ける
5. 対象施設マップ（使える場所を地域別に示す）: 3列の地域タブの下に、淡い水色の日本地図と点・引き出し線を置く
6. 全幅写真（実際の空間で雰囲気を伝える）: 館内写真を全幅で1枚だけ入れる
7. 使い方（交換できる特典を示す）: アイコンの流れ図、下向きの矢印、ギフト券の画像、マーカー付きの文を縦に並べる
8. 申請手順（交換申請の操作を説明する）: グレー地に、グリーンの下線付きの見出しを置く。2つの番号ステップに分け、キャプチャの横にSTEP1〜5の吹き出しを並べる
9. 利用先とCTA（利用できる施設へ送客する）: 空と海の写真を地にしてブランドロゴを並べ、黒いピル型CTAを置く
10. 会員向け導線（既存会員を案内する）: 白地に小見出しとグリーンのピル型ボタンを置く
11. フッター（サイト内リンクと言語切替）: 墨色の地に、言語タブ、SNSアイコン、2列のリンク、折りたたみのブランド一覧、コピーライトを並べる

Imagery

• 黒の単線で描いた、ゆるくおしゃれな人物と街並みのイラスト。旅行者やリゾートでくつろぐ人を描く
• 色はコインやチケットなど一部の小物の黄色と、植物のグリーンだけにし、残りは白抜きにする
• イラストの周りに、筆記体の英字・キラキラ記号・放射線を手描き風に添える
• アイコンは線画にし、黄色の面を1か所だけ差す
• 写真は自然光で撮った館内や海辺の風景を全幅で使う
• 地図は淡い水色のシルエットにし、黒い点と細い引き出し線を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもコンテンツは中央寄せにし、最大幅は約900pxにする
• PCのファーストビューは、左にタイトル、右にイラストのパネルを置く2カラムにする
• PCでは手順の01と02を横に並べ、間に右向きの矢印を置く
• PCの地図は大きくし、施設名のラベルを直接書き込む
• PCでは注意事項を折りたたまず、枠付きで全文を表示する
• PCのフッターは、ブランドごとに多列のリンク一覧にする

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