DESIGN.md — ピーチ色グラデの冬の離島観光 LP（Warm Peach Gradient Island Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型、ポップ・元気
• キーワード: ピーチグラデ・写真コラージュ・手書きスクリプト・縦書きキャッチ・波線区切り・クーポン訴求
• 地の質感: フラットな面に写真を斜めや重ねで散らし、白い丸写真と波線で手作り感を出す
• 形: ピル型ボタン、丸写真、角丸の吹き出し、波形のセクション区切り
• 温度感: 暖色寄り。ピーチ・サーモン・淡ピンクで温かい

Colors

• 地はピーチグラデ→白→淡ピンクの順で切り替え、章の変化を示す
• クーポン訴求は朱サーモンの塗りピルに白文字で統一する
• 主ボタンは黄色塗り、副ボタンは白塗りに黒枠を使う
• 見出し・本文は墨色。純黒は使わない
• スクリプト英字はピンクかオレンジで、見出しの背景装飾として薄めに置く
• スポット名のタグはオレンジ地に黒文字の小さなピルにする
• coupon-pill は文字 #FFFFFF × 背景 #E2654A のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44222、4.56:1）を使う。

Typography

• 見出しは上に小さなリード、下に太字の大見出しの 2 段で組む
• 見出しの後ろに手書き欧文を斜めに重ねる
• スポット写真には白地の縦書き見出しを重ねる
• ボタン文字は字間を広めにとり、先頭に＋記号を付ける
• 注釈は ※ を付けて小さいグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。体験一覧は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は大小を混ぜて互い違いに置き、説明文を隣に添える
• 体験カードは写真の上に小さなラベル、下にピル型の名前を付ける
• CTA 帯は左に主ボタン、右にクーポンピルを縦に並べる
• 注釈はボタン直下に中央揃えで置く

Elevation & Depth

• 影はほぼ使わず、黒線の枠で区切る
• 写真同士を重ねて奥行きを出す
• 丸写真には白いフチを付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 四角と円を混ぜ、少し傾けたり重ねたりする
• セクション境界: ピンク地との境目はゆるい波線
• ボタンとクーポンは必ずピル型にする
• 吹き出しは白い楕円に黒の細線
• カテゴリ見出しの横にアイコン入りの四角を置く

Components

• 主ボタン（button-primary）: 黄色塗りに黒枠のピル型。先頭に＋を付ける
• 副ボタン（button-secondary）: 白塗りに黒枠のピル型
• クーポンピル（coupon-pill）: 朱塗りに白文字、2〜3 行のクーポン案内
• スポット名タグ（spot-tag）: 写真下に置くオレンジの小さなピル
• 手書き欧文付き見出し（script-heading）: 斜めのスクリプト英字の上に太ゴシックの見出しを重ねる
• 吹き出し（speech-bubble）: 白い楕円の吹き出しで料理などのひとことを添える
• 章ナビカード（nav-card）: 手描きアイコンと 2 行の見出しを入れた白い黒枠カード
• 体験カード（experience-card）: 写真の上にピンクのラベル、下に白いピルの名前を付ける

Do's and Don'ts

Do - 暖色のグラデとピンク地で章を切り替える - 写真は大小をつけて重ね、雑誌風に組む - 見出しには手書き欧文を重ねる - クーポン訴求を朱のピルで繰り返し見せる

Don't - 寒色の地色や濃い暗色の面を使わない - 写真を均一の格子だけで並べない - 角ばった四角ボタンにしない - 影を強くしすぎない

Page Structure

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

1. ファーストビュー（旅の魅力を一目で伝える）: 名物や景色の写真を 4 分割で敷き詰め、中央に白い手書き風ロゴを置く
2. 導入・アクセス（地域の紹介と行き方の案内）: ピーチグラデの地に縦書きキャッチと白抜きの地図を並べ、白ピルのボタンを置く
3. クーポン案内（予約前にクーポンの存在を知らせる）: 朱のピルを 4 つ横に並べ、下に注釈を付ける
4. おすすめスポット（観光地を紹介する）: 写真に縦書き見出しを重ね、左右互い違いに説明文とタグを置く
5. 章ナビ（体験とグルメへ誘導する）: 波線の下にアイコン付きカードを 2 枚並べる
6. 体験プラン一覧（体験付き宿泊を一覧で見せる）: ピンク地に写真カードを 5 列のグリッドで並べる
7. CTA 帯（プラン予約とクーポン取得へ誘導する）: ピーチグラデ地に黄・白のボタンと朱のクーポンピルを並べる
8. グルメ紹介（昼ご飯と夜ご飯を紹介する）: 丸写真と吹き出しを散らし、カテゴリアイコン付きの見出しを置く
9. お土産（特産品を紹介する）: 黒枠の白ボックスに商品の切り抜き写真と価格を並べる
10. フッター（主催者を表示する）: 白地に小さいクレジットとロゴを置く

Imagery

• 料理・景色は彩度高めの明るい写真にする
• 人物は体験中の笑顔を自然光で撮る
• 料理は真上か斜め上からの寄りで撮り、円に切り抜く
• 地図やアイコンは白抜きのシンプルな線画にする
• 飾りにピンクの波線や短い斜線を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではスポット紹介を写真→説明文の縦積みにする
• 体験グリッドは SP で 2 列にする
• CTA 帯は SP でボタンとクーポンを全幅で縦に並べる
• FV のコラージュは SP で 2×2 を保ち、ロゴを縮小する
• 縦書きキャッチは SP でも縦のまま写真の横に置く

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