DESIGN.md — 生成り和紙×柿色と緑の農産物直売所 生産者募集LP（Warm Kraft Farm Market Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 和紙テクスチャ・柿色オレンジ・深緑・吊り札見出し・野菜切り抜き・にじみ角丸写真
• 地の質感: 背景全体に和紙・クラフト紙のような細かい繊維ノイズ。写真の縁はかすれた不規則な角丸。
• 形: 大きめの角丸カード、雲形の吹き出し見出し、紐で吊った白札、ピル型ラベル。
• 温度感: 暖色寄り。生成りとベージュの地にオレンジが映える温かい印象。

Colors

• 地は生成りとベージュを交互に使い、セクションを切り替える。
• 柿色は強調語・ラベル・募集CTA帯に限定する。
• 深緑は『理由』『集荷場』『流れ』など情報帯と吹き出し見出しに使う。
• ボタンは柿色ではなく濃茶で落ち着かせる。
• 見出し中の強調語は柿色ハイライト帯に白文字か、柿色文字にする。
• 白カードは生成り地の上にのせて浮かせる。
• cloud-bubble-heading は文字 #0B8D61 × 背景 #FFFEFE のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0A865C、4.56:1）を使う。
• recruit-badge は文字 #FEFBF5 × 背景 #0B8D61 のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0A865C、4.56:1）を使う。
• contact-band は文字 #FEFBF5 × 背景 #E14B11 のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE4510、4.54:1）を使う。
• point-label は文字 #FEFBF5 × 背景 #E14B11 のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE4510、4.54:1）を使う。

Typography

• 見出しは丸ゴシックの太字で親しみを出す。
• 数字は大きく柿色で、単位は小さく添える。
• 見出し上に柿色ピルの小ラベルを重ねる。
• 背景に薄ベージュの巨大欧文を流して装飾にする。
• 本文は茶色で行間広め、純黒は使わない。
• 電話番号は細めの縦長サンセリフで大きく。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。店舗数や流れは4分割。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右約22pxの余白で配置する。
• 特長カードは縦に詰めて連続させる。
• 色帯セクションは上角だけ大きく丸めて全幅で敷く。
• 野菜の切り抜きをセクション境界の角にはみ出させる。
• 写真のコラージュは大小をずらして重ねる。

Elevation & Depth

• 影はほぼ使わず、白カードと地の明度差で浮かせる。
• 吊り札見出しのみ下に柔らかい影。
• 写真は縁のかすれで質感を出し、ドロップシャドウは付けない。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 縁がかすれた不規則な角丸矩形、スタッフは円形切り抜き。
• セクション境界: 上角を大きく丸めた色帯、または地色の切り替えのみ。
• ボタンは角丸12px程度の横長。
• ラベルは完全なピル型。
• 見出しは雲形吹き出しか紐で吊った白札。
• 番号ラベルは角丸＋小さな尻尾の吹き出し型。

Components

• 吊り札見出し（hanging-sign-heading）: 和紙風の白札を2本の紐で吊り、上に柿色ピルの小ラベルを重ねる。
• 雲形吹き出し見出し（cloud-bubble-heading）: かすれた縁の雲形吹き出しに深緑文字、上に放射の集中線。横に人物切り抜き。
• アイコン付き特長カード（feature-card）: 白カード左にフラットアイコン、右に見出しと緑の強調数字、下に本文。
• 募集中吹き出しバッジ（recruit-badge）: 深緑の吹き出し形に白文字、写真や色帯の角に重ねる。
• 問い合わせCTA帯（contact-band）: 柿色帯の中に白カード、さらに薄生成りボックスで地域別電話番号を並べる。
• 濃茶ボタン（button-primary）: 濃茶の角丸ボタンに白文字と右端の矢印。
• 番号吹き出しラベル（point-label）: 柿色の小さな吹き出し型に『其の一』式の白文字。
• 担当者カード（staff-card）: 柿色ピルの担当地域ラベル、円形顔写真、名前、自己紹介文。
• 縦書きステップ（step-card）: 緑帯の上に生成りの縦長カードを4つ、番号丸と縦書き文字、間に金の三角。
• フォーム入力（form-field）: 生成り地にラベル＋柿色の必須印、白の角丸入力欄、項目間に薄い線。

Do's and Don'ts

Do - 背景に和紙の繊維テクスチャを必ず敷く。 - 野菜・果物の切り抜き写真をセクション角に散らす。 - 見出しは吊り札か雲形吹き出しで統一する。 - 数字は柿色で大きく見せる。 - スタッフの笑顔写真で人の温かさを出す。 - 問い合わせ帯をページ中に繰り返し配置する。

Don't - 真っ白な無地背景だけで構成しない。 - 寒色やネオン色を使わない。 - 角の鋭い四角や細いミニマル書体にしない。 - 柿色を本文や広い地に多用しない。 - 強いドロップシャドウを使わない。 - ストック写真のような無機質な写真を使わない。

Page Structure

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

1. ファーストビュー（対象者への呼びかけと募集の提示）: 斜線で挟んだ小コピー、柿色丸囲みの強調語入り大見出し、写真コラージュと募集バッジ。
2. 事業紹介（規模と信頼の提示）: 吊り札見出し、柿色ハイライト見出し、エリア地図に店舗写真、地域別店舗数。
3. 選ばれる理由（メリットを4つ示す）: 雲形吹き出し見出しと人物、アイコン付き白カードを縦に4枚。
4. 店舗写真スライダー（売り場の雰囲気）: 角丸写真を横並びでスライド、店名を金ピルで。
5. 店舗一覧（出荷先の詳細）: 地域タブ、店舗リンク、写真、住所と枠付き項目ラベル表、SNS点線枠。
6. 集荷場（持ち込めない人への案内）: 深緑帯に吹き出し見出し、白文字本文、下に地図埋め込み。
7. 担当者紹介（相談しやすさ）: 地域ラベル＋円形顔写真の白カードを縦に並べる。
8. 問い合わせCTA（電話・メールへの誘導）: 柿色帯、白抜き見出し、地域別電話番号カードと濃茶ボタン。
9. 販売の仕組み（委託販売の流れ説明）: 円形写真と中央の柿色ボックスを点線矢印で結ぶ循環図。
10. 特長詳細（3つのポイント）: 番号吹き出しラベル、柿色強調見出し、本文、かすれ角丸写真の白カード。
11. 販売までの流れ（手順の提示）: 深緑帯に縦書きステップカード4つと矢印。
12. お客様の声（契約者の実例）: 金番号付き写真カードのスライダー、名前は柿色ピル。
13. お問い合わせフォーム（申込み受付）: 吊り札見出し、線区切りの入力項目、濃茶送信ボタン。
14. フッター（会社情報と再CTA）: 下端がかすれる写真帯、丸ロゴ、住所、柿色電話カード、流れる欧文。

Imagery

• 売り場や畑で働くスタッフの自然な笑顔、オレンジ系ユニフォーム。
• 野菜・果物は影なし切り抜きで角に散らす。
• 写真の縁はかすれた筆跡風マスク。
• アイコンは緑と金のフラットイラスト。
• 地図はベージュの単色シルエットに写真を重ねる。
• 背景に薄ベージュの巨大欧文と食材写真を横に流す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約80%幅のコンテナにする。
• 特長カードはPCで4列横並び。
• 事業紹介は左テキスト右地図の2カラム。
• 特長詳細は写真とテキストを左右交互に配置。
• 問い合わせCTAは電話とメールを2カラムに並べる。
• 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 行書くと起動時に読み込まれる。