DESIGN.md — 墨黒×朱赤×金の和風観光 LP（Dark Sumi Heritage Tourism LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、上品・高級、ラグジュアリー・ダーク、信頼・誠実
• キーワード: 墨色の地・和紙カード・朱赤の額縁ボタン・金茶の資産タグ・青海波と雲文様・字間の広い明朝
• 地の質感: 地は墨色のマット。青海波・雲の文様をうっすら重ね、和紙カードには筆の跡のようなかすれを入れる
• 形: 角丸なしの四角。ボタンは内側に細い線を引いた額縁型。地図はシルエットで切り抜く
• 温度感: 暗くて落ち着いた色に、朱と金で温かみを足す

Colors

• 地は全体を墨色 #222 にする。和紙色のカードは導入部と最後のバナー枠だけに使う
• 朱赤は、セクション内リンクのボタン、SNS の丸アイコン、地図マーカーに使う
• 金茶は構成資産のタグだけに使い、朱赤と役割を分ける
• 記念年などのラベルは金色の文字にし、面には使わない
• 墨地の上の文字は白に近い色、和紙の上の文字は焦げ茶黒にする
• 鮮やかな色は写真だけに任せ、UI の色は朱・金・生成りの 3 色までに絞る

Typography

• 見出しは明朝で細めにし、字間を 0.15em ほど広げて品よく見せる
• 遺産の見出しは 2 行に分け、セクションごとに右寄せと左寄せを交互にする
• 長い本文は読みやすさを優先してゴシック、行間は 1.9 にする
• 金色のラベルは見出しのすぐ上に 1 行で置く
• ボタンの文字は中央揃えにし、太字にはしない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。構成資産のタグだけ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面幅の 95% 近くまで広げ、片側の端に寄せる
• 見出しは写真の下に重ねるように、文様の背景の上に置く
• 各遺産セクションの最後に、地図シルエットと構成資産パネルを置く
• セクションの終わりは横幅いっぱいの細い罫線で区切る
• 朱赤ボタンは縦に 3 つ、間隔 16px ほどで並べる

Elevation & Depth

• 影はほぼ使わず、色の明暗で面を分ける
• 構成資産パネルは半透明の明るい墨色で、地図シルエットに重ねる
• ボタンの立体感は、影ではなく内側の細い線で出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの横長の四角。片側を画面の端まで寄せる
• セクション境界: 細い横罫線。背景は雲と青海波の文様でゆるやかに切り替える
• ボタン・カードはすべて角丸なしにする
• 朱赤ボタンと金茶タグには、内側 4px の位置に細い線を引いて額縁にする
• SNS アイコンだけは円形にする
• 地図は県の形のシルエットにし、所在地を朱の丸で示す

Components

• 朱赤の額縁ボタン（button-nav-red）: ページ内のセクションへ飛ぶボタン。朱赤の地に細い内枠の線、文字は白の明朝
• 金茶の資産タグ（tag-asset-gold）: 構成資産の名前を 2 列で並べるタグ。金茶の地に内枠の線を引く
• 和紙の導入カード（card-washi）: ファーストビューの写真に一部重ねて置く生成り色のカード。筆のかすれ模様と地図を入れる
• 記念年ラベル（label-anniversary）: 見出しの上に置く金色の明朝 1 行
• 文様つき 2 行見出し（heading-heritage）: 青海波と雲の文様の上に、大きな明朝の 2 行見出しを置く
• 構成資産パネル（panel-assets）: 地図シルエットに重ねる半透明のパネル。中央に小見出しを置き、その下にタグを並べる
• 地図シルエット（map-silhouette）: 生成り色の県の形に、朱の丸と小さな明朝の注記を添える
• SNS の丸アイコン（icon-sns-circle）: 朱赤の円に白のアイコン。3 つを横に並べる

Do's and Don'ts

Do - 墨の地・朱・金・生成りの 4 色でまとめる - 見出しは字間を広げた明朝で、余白を多めにとる - 青海波や雲の和柄を、背景にうっすら敷く - 写真は青空や緑など、色の鮮やかなものを選んで暗い地に映えさせる - ボタンは四角の額縁型でそろえる

Don't - 角丸のボタンやポップなグラデーションを使わない - 朱赤と金茶の役割を入れ替えない - 見出しに太いゴシックを使わない - 背景を白い地にしない（和紙色は部分使いだけにする） - 強い影や光沢を付けない

Page Structure

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

1. ファーストビュー（土地の象徴的な風景で興味を引く）: 画面幅いっぱいの風景写真に、白の明朝のサブタイトルと、字間を大きく空けた欧文の大見出しを重ねる
2. 導入（テーマの概要と全体像を伝える）: 写真に重なる和紙色のカードに、見出し・明朝の本文・地図を入れる
3. ページ内ナビ（各テーマのセクションへ誘導する）: 朱赤の額縁ボタンを縦に 3 つ並べる
4. テーマ紹介 1（1 つめの遺産を詳しく説明する）: 写真→金色ラベル→右寄せの 2 行明朝見出し→ゴシックの長い本文の順に並べる
5. 構成要素一覧 1（含まれる施設を一覧にする）: 地図シルエットに半透明パネルを重ね、金茶のタグを並べる
6. テーマ紹介 2（2 つめの遺産を説明する）: 写真の位置と見出しの寄せる向きを左右反転させる
7. 構成要素一覧 2（施設を一覧にする）: 金茶のタグを 2 列 × 4 行で並べる
8. テーマ紹介 3（3 つめの遺産を説明する）: 森の写真、金色ラベル、右寄せの見出し、長い本文
9. 構成要素一覧 3（施設を一覧にする）: 地図と金茶のタグのパネル
10. 公式サイトバナー（外部の詳しい情報へ誘導する）: 写真 3 枚を並べた横長のバナーに、朱赤の帯の文字を重ねる
11. SNS（公式アカウントへ誘導する）: 欧文セリフの見出し、小さな補足、朱赤の丸アイコン 3 つ
12. 関連キャンペーンバナー（関連サイトへ送客する）: 和紙色の帯にバナー画像を置き、下に朱赤の文字リンクを添える

Imagery

• 史跡や自然は晴天の下で撮り、色の鮮やかな写真を選ぶ
• 古い建物は夕方の斜光で撮り、陰影を深く出す
• 参道や森は暗めで、しっとりした緑の写真にする
• 背景には青海波と雲の文様を、黒に近い灰色でうっすら敷く
• 地図は生成り色の平たいシルエットにし、朱の丸の目印を付ける
• 和紙カードには、淡い筆のかすれのような円弧を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では導入カードを横並びにし、地図を左、本文を右に置く
• PC ではナビボタン 3 つを横 1 列に並べる
• PC では写真を幅 40% ほどにして左右の端に寄せ、反対側に見出しを置く
• PC では構成資産タグを 4 列にする
• PC では本文を幅 55% ほどの段落にして、地図の横に置く

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