DESIGN.md — 紫×焼き柿色の和紙調 古都観光 LP（Autumn Washi Heritage Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 和紙テクスチャ・秋の落ち葉・レンガ装飾・タイムライン型モデルコース・イラストマップ・シネマティック写真
• 地の質感: 地は和紙・紙のざらつきがある淡い藤色とベージュ。柿色やからし色のブロックも紙のような粒子感がある。
• 形: 角が直線の白カード、小さめの角丸ボタン、ピン型の番号アイコン、ギザギザ吹き出し、市松模様の帯。
• 温度感: 暖色寄り。紫が締め色、柿色がアクセントになる秋らしい温かさ。

Colors

• 地は藤色の和紙と和紙ベージュをセクションごとに交互に使う
• 紫は見出し文字・リボン・所要時間ラベルなど構造を示す要素に使う
• 柿色は番号ピン・リンク・購入系ボタン・プロフィールの枠に使う
• 物語のセクションは柿色・からし色・茶色のブロックに白文字で並べる
• 黄色マーカーは小見出しの下線にだけ使う
• フッターだけ黒にして全体を締める
• button-primary は文字 #FFF6E9 × 背景 #DB7A3C のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B15921、4.54:1）を使う。

Typography

• 英字の大見出しは太いスラブ／ディスプレイ書体にし、下に小さい和文の訳を添える
• 誘導見出しは手書き風の文字を少し傾け、左右に斜線を付ける
• 所要時間ラベルの数字だけ大きな欧文ディスプレイ書体にする
• ブロック見出しは白文字。上に細い白線と小さな前置きの文言を置く
• 本文は 13px 前後、行間を広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ナビは 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面の左右 16px 内側に置く
• 物語のセクションは写真ブロックと色ブロックを交互に積み、6px の継ぎ目で区切る
• モデルコースは左に縦線と丸ノードを置いたタイムライン
• スポットカードの間に紫の所要時間ラベルを挟む
• セクションの境目にレンガ装飾や市松の帯を置く

Elevation & Depth

• 白カードの下辺に薄いベージュの影（ずらし影）を付ける
• ナビカードには軽いドロップシャドウ
• 吹き出しには灰色のずらし影
• それ以外は基本的にフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの横長長方形。人物プロフィールだけ円形に切り抜く
• セクション境界: レンガ積みの装飾・市松の帯・和柄（青海波）を背景に入れて直線で切り替える
• ボタンは角丸 6px 程度の長方形。右側に点線の区切りと矢印アイコン
• スポット番号は柿色のピン型
• プロフィール枠は四隅を内側に丸く欠いたチケット型
• バス移動ラベルは右側が半円の形

Components

• 詳細ボタン（button-primary）: 柿色の地に白文字。右側に点線の区切りと外部リンクアイコン
• アイコン付きナビカード（nav-card）: 白いカードに柿色のアイコンと 2 行の文字。下辺中央に黄色の丸い下向き矢印
• 色ブロックのアコーディオン（story-block）: 紙の質感がある柿色・茶色の面に白文字の見出し。右に CLICK 表記と白い角丸の矢印ボタン
• モデルコースのスポットカード（timeline-spot）: 淡いクリーム色のカードに番号ピン・柿色のキャッチ・名称・本文・リンク・写真スライダー
• 所要時間ラベル（duration-label）: 紫の長方形に白文字。数字だけ大きく、左に小さな三角を付ける
• リボン見出し（ribbon-heading）: 紫の旗リボンに白文字の見出し。下に柿色の小さな英字
• ギザギザ吹き出し（speech-bubble）: 白くて形が少し不揃いな吹き出しにずらし影。キラキラや手のアイコンを添える
• 名所カード（spot-card）: 白いカードに紫のピン、名称、点線の下線、キャッチ、本文、紫の下線リンク、右上に写真
• 紫の丸バッジ（round-badge）: 動画サムネイルの右上に重ねる、縁が波形の紫の丸。中に白文字

Do's and Don'ts

Do - 地には必ず紙の粒子の質感を入れる - 紅葉・銀杏・レンガのモチーフをセクションの端にあしらう - 紫と柿色の 2 色で役割を分け、混ぜすぎない - 写真は暗めでドラマチックなものと明るい名所写真を使い分ける - スポットには番号ピンと所要時間を付け、順番に回れることを見せる

Don't - 純白だけののっぺりした背景にしない - 寒色やビビッドなネオン色を加えない - ボタンをピル型や大きな角丸にしない - カードに強いぼかしの影を付けない - 明朝体だけで固く高級な印象に寄せない

Page Structure

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

1. ファーストビュー（観光地とキャンペーンの印象付け）: 藤色の和紙の地に大きな紫のロゴ風タイトル、白枠の写真スライダー、レンガと落ち葉の装飾
2. ページ内ナビ（主要コンテンツへの誘導）: 白いアイコンカードを 2×2 に並べ、下に黄色の矢印
3. 導入メッセージ（旅の情緒を伝える）: クリーム色のカードに人物写真、紫の見出し、短い詩的な文章
4. 物語ブロック（見どころの疑問を投げて興味を引く）: 写真と柿色・からし色の色ブロックを交互に積んだアコーディオン
5. 周辺マップ（立ち寄り先の位置関係を示す）: 和紙ベージュの地に手描き風のイラストマップ、番号ピン、その下に名所カード 3 枚
6. モデルコース（1 日の回り方を提案する）: リボン見出しの下に縦線タイムライン。スポットカードの間に所要時間ラベル
7. 関連バナー（別のコース記事へ送る）: 手書き風の誘導見出しと横長の写真バナー
8. 体験プラン（予約・購入につなげる）: 藤色の地に白いプランカード。写真・柿色のタイトル・価格・詳細ボタン
9. コミュニティ案内（会員登録への誘導）: 上下に多色の縞帯が入ったクリーム色のパネル、濃いオレンジのボタン 2 つ
10. ギャラリー（動画・ポスターを見せる）: 欧文の大見出し、白抜き文字の小見出し、再生ボタン付きのサムネイル、丸バッジ
11. 人物プロフィール（出演者の紹介）: 柿色の地にチケット型の白枠、縦書きの紫の見出し、円形の写真
12. お得情報バナー（関連サービスへの送客）: 黄色マーカーの見出しの下に、イラストのバナーを縦に並べる
13. フッター（関連サイト・SNS・規約）: 黒地に白文字、バナーの 2 カラムグリッド、丸い SNS アイコン

Imagery

• 写真は暖色の照明で暗く映画的なもの（寺院内部・人物の後ろ姿）
• 名所の写真は晴天の青空で明るく撮る
• 地図や人物はフラットなイラスト。線は少なめで、柿色・からし色・紫の配色
• 紅葉・銀杏・コスモス・鹿・足跡などを端に散らす
• レンガ積みと青海波の模様を背景装飾に使う
• グルメ・雑貨は木の卓上で寄りの自然光で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューが左ロゴ・右写真の 2 分割
• ナビカードは PC で 4 つ横並び
• 物語ブロックは PC で写真と色ブロックを左右交互の 2 カラムにする
• モデルコースは PC で S 字にうねる紫の道の上にカードを左右交互に置く
• プラン・バナーは PC で 2 カラムのグリッド
• マップと名所カードは 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 行書くと起動時に読み込まれる。