DESIGN.md — 和紙ベージュと和柄の古都観光 LP（Washi Texture Heritage Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、親しみ・手作り感、ナチュラル、やさしい・柔らかい
• キーワード: 和紙テクスチャ・手書き風極太見出し・和柄の帯・色分けコースカード・不定形の写真切り抜き・人物・鹿のイラスト
• 地の質感: 地の全面に和紙のような細かい繊維ノイズを敷く。カード内は白の無地。
• 形: 角丸 12px 前後の白カード、ピル型の枠線ボタン、不定形の写真マスク、旗型のラベル
• 温度感: 暖かい生成りの地に、渋い抹茶色と桜色を差したやわらかな温度感

Colors

• 地は和紙ベージュにし、白カードを浮かせて情報をまとめる
• FV は白地にして、イラストと写真を散らす
• コースごとにテーマ色を 1 色決め、ラベル・和柄帯・ボタンの矢印をその色でそろえる
• 数字の強調は黄色マーカーの下線とこげ茶の極太文字で行う
• 黒は使わず、文字はこげ茶でまとめる
• 折りたたみ（アコーディオン）バーは抹茶グリーンの塗りに白文字にする

Typography

• コース名は明朝の太字にし、横に所要時間を小さく添える
• コース名の上にキャッチを小さな手書き風の文字で添える
• 数字は 1.5 倍に大きくし、単位は小さくする
• FV のコピーは手書き調の極太文字にし、ルビを小さく振る
• 本文は 12px で、1 文を短くする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はコースカードを 2 カラムにする
• 本文ブロックの幅: 画面幅の約 72%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約 14% の余白をとり、中央に置く
• カード内の写真は 2 枚を横に並べる
• カード同士は 16px あけて縦に積む
• 便利ポイントは、左に丸バッジ、右にテキストの横組みにする
• 地図は横幅いっぱいに近い大きさで見せる

Elevation & Depth

• 白カードに薄く柔らかい影をつける（0 2px 6px rgba(60,40,30,.12)）
• ボタンは影なしで、枠線だけで表現する
• 吊り下げバッジにだけ、ごく軽い影をつける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: FV は有機的な不定形ブロブで切り抜く。カード内の写真は角丸なしの長方形にする。
• セクション境界: 背景色の直線的な切り替えにし、フッターだけ手描きの丘のシルエットにする
• コースラベルは旗竿つきの旗型タグにする
• カード上部に、斜めにかかる和柄（麻の葉・青海波）の帯を敷く
• 便利バッジは紐で吊った丸い木札風にする

Components

• コースカード（course-card）: 白の角丸カード。旗型ラベル、和柄帯、明朝のコース名、本文、写真 2 枚、ボタンを順に並べる。
• 旗型コースラベル（flag-label）: 竿つきの小旗に白文字で番号を入れる。色はコースのテーマ色。
• 詳細ボタン（button-outline）: ピル型の枠線ボタン。右端にテーマ色の丸い再生アイコンを置く。
• 便利ポイント札（benefit-badge）: 紐で吊った茶色の丸札に、ラベルと番号を縦に入れる。
• マーカー強調行（marker-heading）: こげ茶の極太文字に黄色の下線マーカーを引く。
• きっぷアコーディオン（accordion-bar）: 抹茶色の帯に白文字を置き、右端に下向きの山形矢印をつける。
• 電話番号ボタン（phone-button）: 大きなピル型の枠線ボタン。中央に太い番号と受付時間を入れ、右端に三角を置く。
• 列車紹介の見出し帯（train-banner）: 列車イラストを左上にはみ出させ、市松柄と色帯に白の明朝見出しを重ねる。

Do's and Don'ts

Do - 和紙テクスチャを全面に敷いて温かみを出す - コースごとのテーマ色を、ラベル・帯・アイコンで統一する - 人物・鹿・建物の手描き風イラストを余白に散らす - 数字情報は大きくし、マーカーで目立たせる - 見出しは手書き調と明朝の 2 系統で使い分ける

Don't - 純黒の文字や彩度の高いネオン色を使わない - ボタンを塗りつぶしの派手なデザインにしない - 地を真っ白な無地で埋めない（FV 以外） - 角張った硬いカードや強い影を使わない - コースの色を 1 枚のカードに混ぜない

Page Structure

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

1. ファーストビュー（近さと楽しさを一言で伝える）: 白地の中央に手書き調の極太コピーを置き、周囲に不定形の写真・イラスト・和柄の丸を散らす
2. モデルコース導入と路線図（行き先の全体像を示す）: 吹き出しバッジと手書きの見出しを置き、色分けした路線図に所要時間の丸を重ねる
3. 便利ポイント（アクセスの良さを数字で示す）: 吊り札型の番号バッジとマーカー強調行を組み合わせ、案内図ボックスを添える
4. コース紹介（6 つのコースを比較させる）: 色分けした白カードを縦に積み、各カードに写真 2 枚とピル型ボタンを置く
5. 寄り道提案（周辺エリアへ回遊させる）: 横長のバナーカードを 2 枚並べ、写真サムネイルにラベルを添える
6. お得なきっぷ（商品を案内する）: 左右に仏像・建物のイラストを置いた見出しの下に、抹茶色のアコーディオンを 3 本並べる
7. アクセス案内（位置関係を示す）: 欧文の見出しの下に、日本地図のピンと広域路線図を配置する
8. 観光特急紹介（上質な列車旅を訴求する）: 列車イラスト付きの色帯見出しを置いた白カードに、車内写真 2 枚を並べる
9. 問い合わせ・フッター（連絡先と関連リンクを示す）: PDF ボタン、電話のピル型ボタン、リンクボタン 2 つを置き、丘のイラストで締める

Imagery

• 風景・寺社の写真は晴天の明るい色で撮り、不定形やカード内の長方形に収める
• 人物は旅装の男女・家族を、淡い色の手描き水彩風に描く
• 鹿・桜・五重塔などの小さなモチーフを余白に添える
• 麻の葉・青海波・市松などの和柄を、淡い色で帯やバッジに使う
• フッターは緑の丘を水彩のにじみで描き、歩く人物を置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコースカードを 2 カラムのグリッドにする
• PC の FV は横長にし、コピーを 1 行に収めて下に列車写真を並べる
• PC の便利ポイントは、路線図の右側に縦に並べる
• 観光特急のカードは PC で横 2 枚に並べる
• PC でもコンテンツ幅は約 75% に抑え、地の和紙テクスチャを見せる

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