DESIGN.md — 金枠×藍帯の和風巡礼スタンプラリー LP（Pilgrimage Digital Stamp Rally Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 和柄小紋・金の細枠・藍の帯見出し・明朝体・水彩イラスト・ステップ解説
• 地の質感: 白地に淡い水色・ピンク・黄色の菊・七宝・縞の丸模様を薄く散らしたもの。ベージュの生成り面で落ち着きを出す
• 形: 四隅を内側に切った和風の額縁枠、角丸が小さめの帯見出し、上部にラベルを重ねたボックス
• 温度感: 温かみのある中間色。金茶と藍の対比で品よくまとめる

Colors

• 地は白、和柄小紋は彩度を下げた水色・ピンク・黄で左右余白にだけ散らす
• 参加ステップ群は金茶の額縁、使い方群は藍の額縁で色系統を分ける
• 小見出し帯は藤色・ピンク・金茶でコースや種類ごとに色分けする
• 長文の注意事項と賞品紹介は生成りベージュの面にのせる
• 強調したい一文だけえんじ赤の明朝で書く
• 藍の帯見出しは左から右へわずかに明るくなるグラデーションにする
• sub-band は文字 #FFFFFF × 背景 #AE99B8 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#896A98、4.59:1）を使う。
• accordion-row は文字 #FFFFFF × 背景 #C5B162 のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#857431、4.63:1）を使う。
• challenge-card は文字 #FFFFFF × 背景 #C5B162 のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#857431、4.63:1）を使う。

Typography

• 見出しと本文は明朝で統一し、和の品格を出す
• 注意事項など細かい文字だけゴシックで読みやすくする
• 導入文は中央揃えにして、行間を広めにとる
• ステップ番号は大きな欧文セリフ数字を使う
• 強調はえんじ色か藍色の文字色で行い、太字はむやみに使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、賞品やチャレンジは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各ステップは額縁ボックスで囲み、上辺中央にラベルを重ねる
• セクションは全幅に近い藍帯の見出しで始める
• アプリ操作の手順はスクショ 3 枚を矢印でつないで横に並べる
• ボックスとボックスの間は 24〜32px あける
• 左右の余白に和柄の丸模様を置く

Elevation & Depth

• 影は基本使わず、線と面の色で階層をつける
• 手順スクショのパネルだけ淡い青灰の面で浮かせる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形、ヒーローの下に寺社写真を帯状に並べる
• セクション境界: 直線のみ。額縁枠は四隅を内側に切った形
• ステップラベルは小さな金茶の札型、または藍の旗型にする
• 小見出し帯は両端に※の飾り記号を置く
• アプリのダウンロードボタンは黒の角丸長方形

Components

• 金枠ステップボックス（frame-box-gold）: 金茶の二重線で囲み四隅を内側に切った額縁。上辺中央に札型のステップラベルを重ねる
• 藍枠ステップボックス（frame-box-indigo）: 藍の線で囲んだ額縁。上部に STEP と大きな番号の旗型ラベルを置く
• 藍帯見出し（section-band）: 藍のグラデーション帯に白い明朝の見出しを中央に置き、左右の端に波模様の飾りをつける
• 色帯小見出し（sub-band）: 藤色・ピンク・金茶の帯に白文字を置き、両端に※の飾り
• 金茶アコーディオン（accordion-row）: 金茶の帯に※付きの地域名を左寄せで置き、右端に＋をつける
• チャレンジカード（challenge-card）: 金茶の面に大きな番号・条件文・スタンプ画像を横に並べ、2 列で配置
• 手順スクショ列（step-screens）: 青灰のパネルに説明・スマホ画面・藍の三角矢印を横一列に並べる
• 問い合わせボックス（contact-box）: 藍の面に白文字で窓口名と大きな電話番号を置く
• PDF ダウンロードボタン（button-primary）: 藍の横長ボタン。中央に白い明朝の文字、右に※の飾り
• 注意事項パネル（notice-panel）: ベージュの面に●付きの箇条書きを小さなゴシックで詰めて並べる

Do's and Don'ts

Do - 見出しと本文は明朝体で品よくそろえる - 参加の流れは番号付きの額縁ボックスで段階的に見せる - アプリ操作はスクショと矢印でまとめて示す - 背景には淡い和柄の丸模様をまばらに散らす - 賞品は写真と名前と当選人数をカードにして並べる

Don't - 原色のネオン色や強いグラデーションは使わない - 濃い影や立体的なボタンは使わない - ポップな丸ゴシックを見出しに使わない - 和柄模様を本文の下に重ねて読みにくくしない - 金と藍以外の色を枠線に使わない

Page Structure

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

1. ファーストビュー（企画名と期間を伝える）: 淡い和柄地に水彩の旅人イラストを置き、明朝の大きなタイトルと期間を中央に配置。下に寺社写真を帯状に並べる
2. 導入文（巡礼の魅力と企画の概要を伝える）: 茶系の明朝で中央揃えの短い段落を 3 つ置き、下に歩く人々の水彩イラスト
3. 参加ステップ（エントリーから応募までの 3 段階を説明する）: 金枠ボックスを 3 つ縦に並べ、それぞれに色帯の小見出し・説明・イラストを入れる
4. 賞品紹介（コース別の賞品を見せる）: ピンク面に 3 列の賞品カード、ベージュ面に特別賞品の大きな写真
5. 利用方法（アプリの使い方を手順で示す）: 藍帯の見出しのあとに藍枠の STEP ボックスを 3 つ。スクショ列とチャレンジカードを入れる
6. スタンプ押印方法（スタンプの取り方を説明する）: 藍枠の中に青灰パネルのスクショ列を 2 つ置き、間にえんじ色の強調文
7. マップ（対象エリアを地図で見せる）: 全幅の路線図イラストを置き、下に藍の PDF ボタン
8. 設置場所一覧（地域ごとの対象地点を示す）: 金枠の中に金茶のアコーディオンを縦に並べる
9. 再挑戦の案内と問い合わせ（リセット手順と連絡先を伝える）: 藍枠の中に番号付きの小見出しとスクショ手順、藍の問い合わせボックス
10. 注意事項（規約や条件を網羅する）: ベージュの角丸パネルに●付き箇条書きを小さく並べる
11. お問い合わせ先・フッター（応募先と商標表記を示す）: グレーの帯見出しの下に住所と電話番号を中央揃えで置き、最後に注釈を小さく並べる

Imagery

• 人物は淡い水彩と細い線画で描き、旅を楽しむ雰囲気にする
• 寺社の写真は晴天の正面寄りで撮り、横長に切り出して帯状に並べる
• 背景には菊・七宝・縞の丸い和柄を淡いパステル色で散らす
• アプリの画面はスマホのスクショを白いフチなしでそのまま並べる
• スタンプや御朱印風の絵柄で巡礼らしさを加える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 75% 幅の 1 カラムで、左右の余白に和柄を置く
• SP では額縁ボックスを画面幅 90% にし、枠線は 1〜2px に細くする
• 手順スクショ列は SP で 2 列または縦並びにし、矢印を下向きにする
• 賞品 3 列は SP でも 3 列を保つか、2 列にする
• チャレンジカード 2 列は SP で 1 列にする

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