DESIGN.md — 生成り和紙と深緑の農業メディアLP（Washi Texture Agricultural Media LP）

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

Overview

• 業種: その他 ／ 雰囲気: ナチュラル、信頼・誠実、和風、やさしい・柔らかい
• キーワード: 和紙テクスチャ・深緑・若草色・明朝体・田園写真・吹き出しの声
• 地の質感: 生成り〜薄いベージュの紙の繊維感がある背景。セクション境界は紙を破ったような細かいギザギザ。
• 形: ピル型ボタン、角丸の吹き出しカード、円形の人物写真、細い二重線の額縁見出し。
• 温度感: 暖かめのナチュラル。緑系の落ち着きにオレンジを一点だけ差す。

Colors

• 地は生成りの和紙テクスチャ2色を交互に使い、境界でトーンを変える。
• 深緑の面は料金・申込セクション1か所だけに使う。
• オレンジは主申込ボタンのみ。他のボタンは若草色か濃緑。
• 見出しと強調文字は緑、本文は茶墨色で黒を使わない。
• 吹き出しは若草色と淡緑を左右交互に塗り分ける。
• 白面は料金カードとロゴ枠など情報を囲む箱に限定する。
• button-primary は文字 #FFFBF2 × 背景 #E98435 のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B65B14、4.52:1）を使う。
• play-badge は文字 #FFFFFF × 背景 #4B8658 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#498356、4.5:1）を使う。

Typography

• 編集的な見出しと本文は明朝で統一する。
• 料金・申込まわりだけ太いゴシックで数字を大きくする。
• 見出しは固有名部分を大きく、助詞部分を小さくする。
• リード文は行間2以上で中央揃え。
• 人名は大きめ明朝、敬称は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、読者の声のみ 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右余白は約15px。
• セクション見出しは左揃えで下線を引く。
• 動画サムネは全幅、右下に円形再生ボタンを重ねる。
• 取り組み紹介は画像→項目名→本文→ボタンの順で縦積み。
• ボタンは幅約80%で中央配置。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 立体感は紙テクスチャと面色の差で出す。
• 円形の再生ボタンや人物写真にもドロップシャドウは付けない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 動画・写真は角丸なしの矩形、人物は正円。バナーは角丸12px。
• セクション境界: 紙を破ったような細かいギザギザの境界
• ボタンはピル型で右端に白丸の矢印アイコン。
• 吹き出しは角丸大きめで下に小さなしっぽ。
• 取り組み見出しは細い二重線の額縁で囲む。
• ロゴ画像は細い灰線の白枠に入れる。

Components

• 主申込ボタン（button-primary）: オレンジのピル型。右に白丸の矢印。深緑地上に置く。
• 詳しく見るボタン（button-secondary）: 若草色のピル型で緑文字、右に白丸の矢印。
• 濃緑サブボタン（button-dark）: カード内の濃緑ピルボタン。白文字。
• 読者の声吹き出し（voice-bubble）: 若草色と淡緑を交互に。3〜4行で省略し、もっと見るリンクを置く。右下に円形の人物写真が重なる。
• 下線付き明朝見出し（heading-underline）: 緑の明朝見出しの下に細い緑灰線を引く。
• 二重線額縁見出し（frame-heading）: 細い二重線の四角に、小見出しと大見出しを中央揃えで入れる。
• 円形再生ボタン（play-badge）: 深緑の正円に白い三角。円に沿って英字が回り込む。
• プランカード（price-card）: 白いカードで、上部に若草色または濃緑の帯見出しを置く。中は画像と大きな価格。
• 丸ドット項目名（bullet-item-title）: 若草色の小さな丸を先頭に付けた緑明朝の項目名。

Do's and Don'ts

Do - 背景には必ず和紙調の生成りテクスチャを敷く。 - 見出しと本文は明朝で落ち着かせる。 - 主CTAは深緑の面の上にオレンジで1つだけ目立たせる。 - 人物の声は吹き出しと円形写真で親しみを出す。 - セクション境界はギザギザの紙の破れ目にする。

Don't - 純黒の文字や純白のベタ背景をページ全体に使わない。 - オレンジを主申込以外のボタンに使わない。 - ネオンや彩度の高い青紫を使わない。 - 強いドロップシャドウや光沢のグラデをかけない。 - 見出しを太いゴシックだらけにしない。

Page Structure

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

1. ヘッダー（媒体ロゴの提示）: 白地の中央にロゴだけを置く。
2. ファーストビュー（理念と世界観を伝える）: 田園の集合写真の空に、緑明朝の2行キャッチを中央に置く。
3. リード文（共感と行動の呼びかけ）: 生成り地に緑明朝の短文を5行、中央揃え・広い行間で並べる。
4. 動画紹介（CMとメイキングを見せる）: 全幅サムネに円形再生ボタン。下にキャプションと説明文。背景は稲穂写真へフェードし、ピルボタンを置く。
5. 媒体紹介（実績と信頼性）: 下線見出しと本文の下に、紙面を重ねたコラージュ画像を置く。
6. お客様の声（多様な読者の評価）: 2列の吹き出しカードに円形写真、肩書き、氏名を並べる。最後にアンバサダーの大きな吹き出しを置く。
7. 料金・申込CTA（購読申込）: 深緑の面にデバイス画像、白い太字の価格、オレンジCTAを置く。下にセット購読とアプリの白カードと、法人向けリンクを続ける。
8. キャンペーン（特典で後押し）: 角丸のバナー画像を2枚縦に並べる。
9. 取り組み紹介（企業活動とブランド価値）: 二重線の額縁見出しの後、画像→ドット付き項目名→本文→若草色ボタンを4回繰り返す。
10. 会社紹介動画（親しみの醸成）: 問いかけ形式の下線見出し、説明文、注釈、再生ボタン付きサムネを置く。
11. フッター（締め）: 白地にロゴとコピーライトを置き、下端に稲穂の写真を敷く。

Imagery

• 秋の田園や稲穂を自然光で撮った、温かい色の写真を使う。
• 生産者や家族が笑顔で並ぶ集合写真で、地域の一体感を出す。
• 人物の横顔は背景を大きくぼかしたシネマ風に撮る。
• PC・タブレット・スマホを重ねたデバイスモックで電子版を見せる。
• 人物写真は胸から上を正円で切り抜く。
• 背景は紙の繊維が見える生成りテクスチャにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約900pxで中央寄せにする。
• PC のFVは写真全面で、キャッチを下部に1行で大きく重ねる。
• PC のリード文と動画、媒体紹介文と紙面画像は左右2カラムにする。
• PC の読者の声は3列のずらし配置にする。
• PC の料金ブロックは左にデバイス画像、右に価格とCTA。プランカードは横に2つ並べる。
• PC の取り組み紹介は左テキスト・右画像の2カラムにする。

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