DESIGN.md — 生成りと若葉色の水彩造園 LP（Watercolor Leaf Natural Garden LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ナチュラル、やさしい・柔らかい、シンプル・ミニマル、清潔・爽やか
• キーワード: 若葉色・水彩の葉・大きな余白・非対称の写真配置・波形の区切り・広い字間
• 地の質感: 地は平坦な単色。イラストだけに水彩のにじみと紙の質感を持たせる
• 形: 写真は角丸なしの四角形。ボタンは正円。セクションの境界はゆるい波形
• 温度感: あたたかく明るい。生成りとベージュの地に緑を差す

Colors

• 文字はほぼすべて若葉色の緑で書く。黒い文字は使わない
• 地は生成り→白→ベージュの順に切り替え、セクションの区切りを色で示す
• 強い色はロゴ・見出し・CTA の緑だけに絞る
• イラストには深緑・ミント・水色・茶色の水彩色を使う
• ベージュ地の大きな英字見出しは白抜きにして、控えめに見せる
• 円形ボタンは生成りの面に薄いベージュの縁を付け、矢印は緑にする
• page は文字 #5C9054 × 背景 #F9F8F4 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#507D49、4.52:1）を使う。
• button-circle-more は文字 #2E9E3A × 背景 #F9F8F4 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#268230、4.58:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #379E29 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2F8623、4.61:1）を使う。

Typography

• 和文はどれも字間を 0.1em 以上あける
• 本文は 1 行 20 字前後で改行し、行間は 2.5 前後にする
• 和文見出しのすぐ下に、小さな英字ラベルを全角大文字で添える
• キャッチは縦書きにするか、緩い弧に沿わせて置く
• 文字の太さは 500〜700 に抑え、900 のような極太は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストは左右にずらして非対称に置く
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算）
• 余白を大きくとる。セクション間は 100px 以上あける
• 写真は左寄せ・右寄せを交互にし、大小 2 枚を段差で重ねる
• 見出しは左揃えと右揃えをセクションごとに切り替える
• 円形ボタンは右端に寄せ、左にリンク文字を並べる
• イラストは画面の端からはみ出させてよい

Elevation & Depth

• 影は使わずフラットに仕上げる
• 奥行きはイラストと写真の重なりだけで表す

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの四角形。正方形や縦長でトリミングする
• セクション境界: 地の色が変わる境目は、ゆるやかな波形の曲線にする
• ナビの円ボタンは直径 100px 前後の正円にする
• カテゴリのバッジは緑の細線で囲んだピル型にする
• 直線的な装飾罫線は使わない

Components

• 円形の「もっと見る」ボタン（button-circle-more）: 生成りの正円の中に緑の山形矢印を置き、左側に緑のリンク文字を添える
• カテゴリバッジ（badge-category）: 緑の細線で囲んだピル型。中に小さな緑の文字を入れ、見出しの上に置く
• 和英 2 段の見出し（heading-bilingual）: 大きな和文見出しの下に、字間を広げた小さな英字ラベルを置く
• 弧を描くキャッチ（catch-arc）: 一文を緩い円弧に沿わせて配置し、端に水彩の葉を添える
• 白抜きの大きな英字見出し（display-outline-en）: ベージュ地の中央に、白で大きな英字を置く
• お知らせの一行（news-line）: 英字ラベル・日付・下線付きリンクを縦に並べ、横に SNS アイコンを置く
• 問い合わせ CTA（button-primary）: 緑の面のピル型ボタン。白文字で、右端に白い丸の矢印を付ける
• 舞う水彩の葉（watercolor-leaf）: にじみのある葉の形を余白に散らし、セクションを視覚的につなぐ

Do's and Don'ts

Do - 地の色は生成り・白・ベージュの 3 色だけで切り替える - 文字はすべて緑の濃淡で統一する - 写真とイラストを大きな余白の中に非対称で散らす - セクションの境界は波形にし、地の色を切り替える - 本文は短い行で改行し、行間と字間をたっぷりとる

Don't - 黒や濃いグレーの本文にしない - 影の付いたカードや角ばったボタンを使わない - 写真を全幅で敷き詰め、余白をなくさない - 赤や原色の強調色を足さない - 文字を詰めた情報過多なレイアウトにしない

Page Structure

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

1. ヘッダー（ブランドを示し、メニューへ導く）: 左に緑の円形ロゴと英字の社名、右に二本線のメニューアイコンを置く
2. ファーストビュー（暮らしと緑の世界観を伝える）: 縦書きの緑のキャッチの横に縦長写真を置き、下に小さな写真を段差で添える
3. お知らせ・SNS（最新情報を伝え、SNS へ導線をつくる）: 英字ラベル・日付・下線リンクを並べ、SNS アイコンと音声切替を横に置く
4. 理念メッセージ（自然と住まいに対する想いを語る）: 短い 4 行の文を広い行間で置き、小さな写真と舞う葉、木のイラストへつなげる
5. 私たちについて（人柄とこだわりを紹介する）: 弧を描くキャッチ、和英の見出し、人物写真、短い本文、円形ボタンの順に並べる
6. 商品・素材紹介（扱う樹木の魅力を伝える）: 見出しを右に寄せ、正方形の写真と 3 行の本文、円形ボタンを置く。端に木のイラストを添える
7. 実績・サービス（個人向けと法人向けのサービスを示す）: 波形の境界からベージュ地に切り替え、白抜きの英字見出しを置く。続けてバッジ・見出し・ずらした写真・本文・ボタンを 2 回繰り返す
8. イラストメッセージ（目指す街の姿を情景で見せる）: 水彩風の建物と人々のイラストを置き、下に英文の 3 行メッセージを添える
9. 問い合わせ CTA（相談・見積もりへ誘導する）: 生成りの角丸パネルに人物イラスト、短い文、サブリンク、緑のピル型ボタンを置く
10. フッター（サイト内リンクと連絡先を載せる）: 緑の小さな文字でリンクを多列に並べ、電話番号を大きく表示する

Imagery

• 写真は木漏れ日の中の植物や家族を、明るく淡い露出で撮る
• 写真の彩度は低め。緑は柔らかく、空気感がにじむように仕上げる
• 葉と木はちぎり紙と水彩の質感で描き、色は深緑・ミント・水色
• 建物と人物は平面的な水彩イラストで描き、輪郭線は付けない
• 葉のイラストを風に舞うように斜めに散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを 2 カラムで左右交互に並べる
• PC では見出しを縦書きにして、写真の横に立てる
• PC では余白をさらに広げ、イラストを画面の両端からはみ出させる
• PC のフッター手前には、問い合わせパネルを横長の角丸ボックスで置く
• 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 行書くと起動時に読み込まれる。