DESIGN.md — 生成り紙×テラコッタの農林公園・観光 LP（Warm Kraft Paper Farm Park LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい
• キーワード: 生成り紙テクスチャ・波形の境界・有機的な丸い写真・フラットイラスト・テラコッタ見出し・5色ドット
• 地の質感: 繊維が混じった再生紙のような淡いノイズ地。面はフラットで影はほぼ使わない。
• 形: 角を大きく丸めた不定形の写真マスク、うねる波形のセクション境界、ピル型ボタン。
• 温度感: 暖色寄り。ベージュとテラコッタが主で、紺と青緑が差し色。

Colors

• 地は生成り紙とピーチベージュを波形境界で交互に切り替える。
• お知らせ・問い合わせ・フッターは白地でテクスチャなし。
• 和文見出しはテラコッタ、英字サブ見出しは濃い茶で固定。
• 回遊ボタンは紺のピル、問い合わせ主CTAのみテラコッタ。
• 見出し上にテラコッタ・オレンジ・黄・青緑・紺の5色ドットを置く。
• 料金表は系統ごとにテラコッタ・オレンジ・青緑のヘッダで色分けする。
• button-primary は文字 #FFFFFF × 背景 #D45F3E のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C94F2D、4.53:1）を使う。
• tag-dashed は文字 #CE5E3D × 背景 #FFFFFE のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C55332、4.51:1）を使う。
• badge-shop-info は文字 #3A8581 × 背景 #FFFFFE のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#38817E、4.55:1）を使う。

Typography

• 見出しは和文大＋英字小の2段で中央に揃える。
• 和文見出しは丸みのある太字にする。
• 英字ラベルは丸い欧文・大文字・字間広め。
• 本文は行間1.8前後で左揃え。
• 金額は紺の太字でセル中央に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、お知らせはサムネ左＋テキスト右の2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 18px（375px 幅換算）
• 見出しブロックは中央揃え、本文は左揃え。
• セクション冒頭の角にイラストや丸い写真をはみ出させて置く。
• 情報カードは白地に、ピル状のラベル帯と値を交互に並べる。
• ボタンは中央に置き、幅は画面の45〜55%にする。
• 写真スライダーの下にバー型のインジケーターを置く。

Elevation & Depth

• 基本はフラットで影なし。
• ボタンは下側に濃い色の2〜3pxの縁を付け、押せる感じを出す。
• 白カードは影なし。地色との差で浮かせる。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 60px。ボタンはピル型。
• 写真の切り抜き: 四隅を大きく丸めた不定形のスクイクル型、または片側が波打つ形に切り抜く
• セクション境界: ゆるやかにうねる波形曲線
• 写真は直角で使わない。
• タグは破線の枠で角を丸める。
• カードのラベル帯は右端だけピル状に丸める。
• 背景に淡い色の不定形ブロブを散らす。

Components

• 紺の回遊ボタン（button-secondary）: 白丸の再生アイコン付きのピル。下側に濃い紺の縁。
• 問い合わせ主CTA（button-primary）: ほぼ全幅のテラコッタ色ピル。メールアイコン付き。
• 5色ドット付き見出し（section-heading）: 5色ドット、和文見出し、英字ラベルを縦に中央で積む。
• 破線カテゴリタグ（tag-dashed）: テラコッタの破線枠のピル。隣に日付を並べる。
• 利用情報カード（info-card）: 白の角丸カード。ベージュのピル状ラベル帯と値を並べる。
• 店舗情報ラベル（badge-shop-info）: 白いピルの左に青緑のiアイコン、右に丸欧文の青緑の文字。
• 色分け料金表（price-table）: 上辺を丸めた色付きヘッダと淡色セル。グレージュの区分帯の下に紺の金額。
• 手書き吹き出しイラスト（speech-illust）: 人物イラストの上に、斜め線で挟んだ小さな手書き風のひと言を添える。

Do's and Don'ts

Do - 生成り紙のテクスチャ地を全体に敷く。 - セクションの境目は波形にし、地色を交互に変える。 - 写真は大きな角丸の不定形マスクで切り抜く。 - 見出しには必ず5色ドットと英字ラベルを添える。 - 各セクションの角にフラットな人物イラストを置く。

Don't - 直角の写真や直線の区切りを使わない。 - 濃い影やグラデーションボタンを使わない。 - 寒色の背景を広い面積に使わない。 - 見出しを細い明朝にしない。 - テラコッタの主CTAを多用しない。

Page Structure

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

1. ファーストビュー（施設の全景と魅力を一目で伝える）: 空撮写真を有機的な形で大きく切り抜く。下にリード・大キャッチ・説明文。縦書きのSCROLL表示と波形の下端。
2. お知らせ（最新イベントを告知）: 白地。サムネ＋破線タグ＋日付＋タイトルのリスト。紺の一覧ボタン。
3. 体験（収穫などの体験を紹介）: 生成り地。角に丸写真とイラスト。中央に見出し、短い説明と一覧ボタン。
4. 飲食（看板メニューを訴求）: ピーチ地。丸ロゴバッジを重ねた店内写真、本文、店舗情報ラベル、白い楕円皿に乗せた商品3点を横並び。
5. バーベキュー（手ぶら利用を案内し予約へ誘導）: 円形ロゴを重ねた写真スライダー、情報カード、予約ボタン。
6. 直売所（物販の品揃えを紹介）: 手書き風ロゴ吹き出しを重ねた丸写真、本文、店舗情報ラベル。
7. 貸施設（料金と設備を明示）: 丸写真スライダー、白カード内に色分けした料金表と注意事項の箇条書き。
8. アクセス（所在地を案内）: ピーチ地に車のイラストと波形の上端。中央に住所、その下に全幅の地図。
9. お問い合わせ（連絡手段を提示）: 白地。紺の見出し、テラコッタの全幅ボタン、大きな電話番号と受付時間。
10. フッター（関連団体バナーとサイトマップ）: 横並びのバナー、2列のリンク、SNSラベル、ロゴと住所。

Imagery

• 写真は晴天の自然光で、緑と木の温かみがある明るい色調。
• 人物はくつろいだ家族や友人の自然な笑顔。
• イラストは線のないフラットな人物で、テラコッタ・紺・青緑・黄を使う。
• 淡いピンク・黄・青緑の不定形ブロブとドットの網点を背景に散らす。
• ロゴ風バッジは白い円や吹き出しに手書き調の文字で作る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部にロゴと横並びのピル型グローバルナビ。
• PCのお知らせは左に見出し、右にリストの2カラム。
• PCは写真とテキストを左右に交互配置し、イラストを余白に置く。
• PCの料金表は3系統を横並びの1表にまとめる。
• 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 行書くと起動時に読み込まれる。