DESIGN.md — 黄×若草色の水彩手描き地域農産物 LP（Watercolor Farm Produce Regional LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、ポップ・元気
• キーワード: 水彩イラスト・不定形写真・丘の波形境界・生成り紙質感・緑枠カード・茶色丸ゴシック
• 地の質感: 生成り地に紙のような細かいノイズ。黄色面には薄い米粒・葉の模様を散らす
• 形: 角丸の大きいカード、ピル型ボタン、丘や雲のような有機的な曲線
• 温度感: 暖かい。日なたの畑のような明るく柔らかい温度感

Colors

• 地は生成り、黄、緑、生成りの順で切り替え、セクションごとに色面でリズムを作る
• 文字は黒を使わず濃茶に統一する。緑面の上だけ白文字にする
• 購入カードは白地に緑の太枠と、下にずらした緑の影
• まとめの購入ブロックは白地に濃茶の枠と濃茶のずらし影
• 行動を促す要素は緑丸のアイコンでそろえる
• 黄色の面には同系色の薄い粒模様を重ねる
• button-icon-circle は文字 #FFFFFF × 背景 #74BA42 のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#52832F、4.52:1）を使う。

Typography

• 全体を丸ゴシックの太字で、字間を広めにとる
• 見出しは中央揃えで 2〜3 行に改行する
• 見出しの左右に麦の穂や斜線、放射線の手描き装飾をつける
• 本文も中央揃えが基本。特長の説明だけ左揃え
• 文字色は濃茶で、緑面の上だけ白
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。購入カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 購入カードは 2 列で、間隔は約 16px
• セクションの上下に丘の形の波形境界を入れる
• イラストは中央に大きく置き、見出しと説明を下に続ける
• 商品紹介は横スライダーにし、ドットのページャーを置く
• 注意事項は白い帯に置き、※を使ったぶら下げインデントにする

Elevation & Depth

• ぼかし影は使わず、色付きの影を下に 6〜8px ずらして立体感を出す
• 購入カードの影は緑、まとめブロックの影は濃茶
• 写真は白いフチで囲み、地から浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 不定形の有機的な曲線で切り抜き、白いフチをつける。スライダーの写真は角丸長方形
• セクション境界: 丘や波のようなランダムな曲線。縁を少しギザギザにして手でちぎった風にする
• 直線の境界は使わない
• 見出しのラベルは雲形の吹き出しで、下にしっぽをつける
• もっと見るボタンは白いピル型で、縁を点線のギザギザにする
• アイコンボタンは正円

Components

• 購入先カード（card-shop）: 白地に緑の太枠と緑のずらし影。ロゴ、特長の見出し、説明、下段に「購入する」と緑丸アイコン
• 緑丸アイコンボタン（button-icon-circle）: 緑の正円に白い外部リンクアイコン。左にラベル文字を置く
• もっと見るボタン（button-more）: 緑面の上に白いピル型。縁は点線状で、右端に緑丸と三角矢印
• 麦穂装飾見出し（heading-laurel）: 中央揃えの見出しの左右に、手描きの麦の穂や斜線を対称に置く
• 雲形吹き出しラベル（label-cloud）: 濃茶の雲形に白文字。下にしっぽがあり、白枠ブロックの上辺にまたがって置く
• 購入先まとめブロック（box-shop-list）: 白地に濃茶の細枠と濃茶のずらし影。ロゴと購入ボタンを 2 列に並べる
• 白い不定形のスライドカード（slider-blob）: 黄色面の上に白い有機形の面を敷き、イラスト・見出し・説明を載せる
• フッターリンク（nav-footer）: 緑の小さな三角に濃茶の細字リンクを縦に並べる

Do's and Don'ts

Do - 文字は濃茶の丸ゴシックにし、字間を広くとる - セクションの境界は丘のような曲線にする - 写真は不定形に切り抜き、白フチをつける - イラストは水彩の手描き風にする - カードには色付きのずらし影をつける

Don't - 純黒の文字や明朝体を使わない - 直線の区切りやシャープな四角を多用しない - ぼかしの強いドロップシャドウを使わない - 原色の赤や青を CTA に使わない - 写真を全面に敷いて、その上に文字を載せない

Page Structure

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

1. ファーストビュー（ブランドの紹介と産地の魅力を伝える）: 黄色い地の四隅に不定形の農産物写真を置く。中央にロゴのプレート、リード文、麦穂付きの見出しを配置
2. 購入先一覧（通販サイトへすぐ誘導する）: 生成りの地に、緑の太枠の購入カードを 2 列で並べる
3. 楽しみ方の提案（利用シーンを伝える）: 黄色い面の上部に農機具のイラスト。斜線装飾付きの見出しと、白い不定形カードのスライダー
4. 商品紹介（代表品目を見せる）: 緑の面に白文字の見出し。角丸写真のスライダーと、もっと見るボタン
5. 特長（品質と産地の魅力を伝える）: 生成りの地に水彩イラスト、見出し、短い説明を縦に 3 つ並べる
6. CTA（最後に購入へ誘導する）: 雲形の吹き出しラベルと、白枠の購入先まとめブロック
7. 注意事項（外部サイトについての免責）: 白い帯に大きな！マークの見出しと、※付きの注釈
8. フッター（サイト内リンクと問い合わせ先）: 不定形写真と丘のイラストからベージュのフッターへつなぐ。リンク一覧、ロゴ、マスコットを置く

Imagery

• 農産物の写真は明るい自然光で撮り、少し寄りで切る
• 写真は不定形の曲線で切り抜き、白フチをつける
• 野菜・人物・動物・農機具は水彩テクスチャの手描きイラストにする
• セクションの境目に、小さな人物や動物のイラストを置く
• 黄色の地に、米粒や葉の淡いシルエット模様を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では購入カードを 4 列のグリッドにする
• PC では商品紹介を 3 列 × 2 段のカード一覧にし、スライダーをやめる
• PC では特長を横 3 列に並べる
• PC ではファーストビューを横長にし、写真を左右の端に寄せる
• 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 行書くと起動時に読み込まれる。