DESIGN.md — 羊皮紙×赤の冒険風観光キャンペーンLP（Treasure Map Parchment Tourism Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: レトロ、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 宝探し・古地図・羊皮紙・冒険・鉄道の赤・地域周遊
• 地の質感: 生成り〜ベージュのムラがある羊皮紙テクスチャを全面に敷く。ベタ塗りは赤とロゴ用の白カードだけ
• 形: 四角いバナーとロゴカードが基本。写真カードだけ角丸にして少し傾ける。赤枠には斜めストライプを入れる
• 温度感: 暖色寄り。生成りとこげ茶で温かくし、赤で引き締める

Colors

• 地は全部、羊皮紙テクスチャのベージュにする。白い単色の背景は使わない
• 赤はヘッダー・フッター・キャンペーンバナー・Pick upの枠だけに使い、面で強く見せる
• 文字はこげ茶を基本にする。黒は避ける
• リンクの強調部分だけを赤文字にし、残りはこげ茶にする
• ロゴやバナーは白いカードに載せ、テクスチャから浮かせる
• 緑とオレンジは古地図と地名タグにだけ使う
• pickup-slider は文字 #4C230F × 背景 #E50014 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#FF5E6C、4.55:1）を使う。

Typography

• 本文もほぼ太字にして、テクスチャの上でも読めるようにする
• リード文は短い行に区切って中央揃えにする
• 字間は0.08em前後と広めに取る
• 日付は数字を大きく、曜日を小さい英字にする
• 英字見出しの下に小さな英字ラベルを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。関連リンクの下半分だけ2カラムのロゴグリッドにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• キービジュアルは全幅にし、ヘッダー直下に置く
• 新着情報の見出しは左、説明文は右に並べる
• ロゴカードは左右に余白を取り、中央に縦積みする
• Pick upは横スライダーにし、右側に次のカードを少し見せる
• ページ番号の矢印は見出しの右端にそろえる

Elevation & Depth

• 影はほぼ使わず、テクスチャと白カードの明暗差で階層を作る
• 写真カードは傾けて重ねることで奥行きを出す
• ページトップボタンは右端に固定し、濃いグレーにする

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の長方形にし、少し回転させてずらしながら重ねる
• セクション境界: 区切りは入れない。テクスチャを続け、余白だけで分ける
• バナーとロゴカードは角丸なしの四角にする
• 価格バッジは赤い正円にする
• 地名タグは旗の形にする

Components

• 赤ヘッダー（header-bar）: 白ロゴとハンバーガーメニューを載せた赤の帯
• Pick upスライダー（pickup-slider）: 斜めストライプ入りの赤枠の中に白いバナーカードを並べる横スライダー
• 価格バッジ（price-badge）: 金額と「から」を白文字で入れた赤い正円
• 新着リスト（news-list）: 日付と赤リンクのタイトルを細線で区切るリスト。右端に赤とグレーのスクロールバーを付ける
• 傾き写真カード（photo-card-tilt）: 角丸の写真を回転させて重ね、緑の旗型の地名タグを添える
• キャンペーンバナー（campaign-banner）: エンブレムと白い太字コピーを入れた赤い長方形バナー
• 関連リンクのロゴカード（logo-card）: 白い長方形の中央にロゴを置いたカード。縦積みか2列グリッドで並べる
• ページトップボタン（page-top）: 右端に固定する濃いグレーの四角ボタン。白い上向き矢印を入れる

Do's and Don'ts

Do - 地は必ず羊皮紙テクスチャにして、冒険・古地図らしさを保つ - 赤は帯や枠の面として大胆に使う - 文字はこげ茶の太字にし、中央揃えでゆったり組む - 写真は角丸にして傾けて重ね、手作りのスクラップ感を出す - 日付は大きな数字で目立たせる

Don't - 真っ白な背景や寒色のフラットな背景にしない - 本文を細い書体や黒文字にしない - 赤を本文の地に広く敷かない - 写真に濃い影や光沢を付けない - ピル型ボタンなど現代的なSaaS風の部品を混ぜない

Page Structure

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

1. ヘッダー（運営元を示し、メニューへ誘導する）: 赤い帯に白ロゴとメニューを置く
2. ファーストビュー（冒険の世界観を一目で伝える）: 全幅の合成写真。人物・名所・気球を入れ、ロゴと縦書きの筆文字コピーを重ねる
3. 開催概要（キャンペーン名と開催期間を伝える）: テクスチャの上に中央揃えで置く。日付の数字を大きくする
4. リード文（旅への期待感を高める）: 問いかけの見出しと、5行ほどの中央揃えの短文
5. Pick up（おすすめの企画へ誘導する）: 英字見出しとページ送りの矢印。赤ストライプ枠のバナースライダー
6. 新着情報（更新情報を見せる）: 左に見出しと英字ラベル、右に説明文。その下に日付と赤リンクのリスト
7. スポット紹介（地域の魅力を写真で見せる）: 傾けて重ねた角丸写真カードに旗型の地名タグを付ける。PCは古地図イラストも入れる
8. 関連キャンペーンバナー（連動企画へ誘導する）: 中央に赤い長方形バナーを1つ置く
9. 関連リンク（観光サイトや旅行会社へ送る）: 白いロゴカードを縦積みにし、続けて2列グリッドに並べる
10. フッター（著作権を表記する）: 赤い帯に白の小さな英字を中央揃えで置く

Imagery

• キービジュアルは中世ファンタジー風の衣装を着た人物と地域の名所を合成し、映画ポスターのような劇的な空にする
• ロゴは宝箱と剣、マントのモチーフ。太いセリフ英字を黒で入れる
• 古地図は手描き風で、緑とオレンジの塗り分け、羅針盤、帆船、海の怪物を描く
• スポット写真は明るく彩度の高い工芸品や名所を使い、角丸にして傾ける
• 地名タグは深緑の旗に白文字で、和文と英字を併記する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはヘッダーに横並びのグローバルナビを表示する
• PCのキービジュアルは横長にし、ロゴを左、コピーを右に配置する
• PCのPick upはバナーを3枚横並びにする
• PCの新着情報は見出しを左、リストを右の2カラムにする
• PCは古地図イラストを大きく入れ、写真カードを3列にする
• ロゴカードはPCで3〜4列のグリッドにする

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