DESIGN.md — 深緑×金茶の和モダン寺院サイト LP（Deep Teal Japanese Temple Minimal LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル、信頼・誠実
• キーワード: 縦書き明朝・墨緑・金茶の家紋・広い余白・細罫線・写真の重ね配置
• 地の質感: 平坦な単色面に実写の写真。グラデーションや影はほとんど使わない
• 形: 角丸なしの四角。ボタンは細い線の長方形。家紋の円だけが曲線
• 温度感: 落ち着いた低めの温度。冷たい深緑に金茶の温かさを少し足す

Colors

• 地色は白に近いグレーを基本に、墨緑の濃いセクションを交互に入れてリズムを作る
• 強調色は金茶の 1 色だけ。家紋・英字キャッチ・主ボタンに限って使う
• 濃い面の上では白文字と、ほぼ透明に近い深緑グレーの英文を重ねる
• サービス案内は写真の上に黒い半透明を敷き、白文字で載せる
• 問い合わせ帯はグレージュの地に金茶ボタンで、ページ内でいちばん目立たせる
• 派手な彩度の色は使わない。色は写真の空や桜で足す
• button-primary は文字 #FFFFFF × 背景 #8A7559 のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#877257、4.59:1）を使う。

Typography

• 主要なセクション見出しは縦書きの明朝にし、横に小さな英字ラベルを縦向きで添える
• 見出しは字間を 0.1em 以上あけて静かに見せる
• 本文は行間 2.0 前後で、短い行で改行して読ませる
• 背景に巨大な欧文セリフを薄い色で透かして置く
• 太字は使わず、ウェイトは 400〜500 にとどめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真 2 枚はずらして重ね、ジグザグに置く
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は 24px 前後。写真は画面端まで広げることもある
• 写真は左右交互にずらし、片側を画面端に付けて非対称に置く
• セクション同士の間は 80px 以上あけ、余白で区切る
• 色面ブロックは片側だけ画面端から少し離して浮かせる
• サービス案内は全幅の写真帯を縦に 3 つ並べる

Elevation & Depth

• 影は使わず、面の色の差と細い線だけで階層を作る
• 写真の上には黒の半透明（40〜60%）を敷いて文字を読みやすくする
• 白カードはグレー地の上に影なしで置く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。縦長と横長を混ぜ、重ねて配置する
• セクション境界: 直線で切り替える。縦の細い白線をアクセントに入れる
• 角丸は一切使わない
• 円形は家紋モチーフだけにする
• ボタンは 1px の線で囲んだ長方形にし、右端に細い「>」を置く

Components

• 細線ボタン（button-outline）: 1px の墨色の枠、白地、明朝の文字と右端の細い矢印
• 金茶の問い合わせボタン（button-primary）: グレージュ帯の中央に置く、幅広の金茶ベタ塗りボタン
• 写真上の白線ボタン（button-ghost-dark）: 暗い写真の上に置く、白い 1px 枠の透明なボタン
• 縦書き見出し（heading-vertical）: 中央に縦書きの明朝見出しを置き、右に小さな英字を縦向きで添える
• 墨緑の案内ボックス（notice-box）: 上段に見出しと英字、細線で区切った下段に短い案内文を入れる
• 写真帯サービス案内（service-band）: 全幅の写真に暗い膜を敷き、英字ラベル・明朝見出し・説明文を中央に揃える
• お知らせリスト（news-list）: 上下を細線で区切り、日付・丸印・カテゴリ・タイトル・下線付きの詳細リンクを並べる
• 家紋の透かし（crest-watermark）: セクションの角に大きな家紋を薄いグレーで部分的に置く

Do's and Don'ts

Do - 見出しは明朝で、要所には縦書きを使う - 墨緑の面と白い面を交互にして静かなリズムを作る - 写真は大きく使い、重ねたりずらしたりして配置する - 金茶はブランドの印と主ボタンだけに使う - 余白を大きくとり、一行の文字数を減らす

Don't - 角丸・ピル型・ドロップシャドウを使わない - 原色や彩度の高いアクセント色を足さない - 太いゴシックの見出しで煽るような訴求にしない - 装飾アイコンやイラストを多く入れない - 金茶を本文や広い面に使わない

Page Structure

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

1. ファーストビュー（歴史と静けさを第一印象で伝える）: 墨緑の地に小さな導入文と薄い英文を置く。金茶の家紋と大きな明朝キャッチを載せ、下に境内の全幅写真を続ける
2. 紹介（由来と特徴を伝える）: 白地に縦書きの見出しと明朝の本文を置き、右寄せの細線ボタンを付ける
3. 写真ギャラリー（四季と境内の雰囲気を見せる）: 縦長の写真 2 枚を左右交互にずらして置き、背景に巨大な英字を透かす
4. 境内案内（境内の見どころへ誘導する）: 全幅の暗い写真の中央に縦書きの見出しを置き、下へ縦の細い白線を伸ばす
5. コンセプト（訪れる価値を情緒的に伝える）: 濃い墨緑の地に写真をはみ出させて置き、金茶の英字キャッチと白文字の本文を添える
6. 特長（参拝者への配布物を紹介する）: 薄いグレーの面に家紋を透かし、写真 2 枚を重ねて置く。中見出し・本文・細線ボタンを続ける
7. 注意事項（対応していないことを伝える）: 中央に墨緑の小さな案内ボックスを置く
8. サービス案内（行事・葬儀・法要を案内する）: 暗い写真の帯を 3 つ縦に積み、英字ラベル・見出し・説明を中央に揃える。PC では横に 3 列
9. お知らせ（最新情報を載せる）: 白カードに縦書きの見出しを置き、細線で区切ったリストと一覧へのボタンを並べる
10. アクセス（場所と受付時間を伝える）: 地図の埋め込みの下に明朝の名称・住所・時間と、下線付きのリンクを置く
11. CTA（問い合わせへ誘導する）: 桜の全幅写真の後に、グレージュの帯と金茶のボタンを置く
12. 関連サービス誘導（別サイトへ送る）: モノトーンの暗い写真の上に白文字と白線ボタンを置く
13. フッター（連絡先とサイトマップを載せる）: 墨緑の地に白い家紋と縦書きの大きな名称、右寄せの住所、2 列のリンクを並べ、最下部に濃い帯のコピーライトを置く

Imagery

• 晴れた日の境内や建物を広角で撮った自然な実写
• 桜・石像・建築の細部を浅い被写界深度で切り取る
• 文字を載せる写真は暗めの露出か、黒い膜を敷く
• 石像などはモノトーンに近い落ち着いた色調にする
• 装飾は家紋の円と巨大な欧文セリフの透かしだけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーのナビを縦書きで右上に並べ、キャッチはロゴの横に置く
• PC の紹介文は縦書きの本文を右から左へ流す
• サービス案内は SP の縦 3 段を PC では横 3 列にする
• お知らせ・アクセスは PC で見出しと内容を左右 2 カラムにする
• PC のフッターは名称・住所・リンク 3 列を横に並べる
• PC は本文幅を約 60% に絞り、左右の余白を広くとる

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