DESIGN.md — 生成り×緑×焼き橙の田園イラスト就農LP（Pastoral Illustrated Rural Recruitment LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、信頼・誠実
• キーワード: 田園イラスト・生成り地・和柄の雲・波線見出し・焼き橙アクセント・太枠カード
• 地の質感: フラットで少しザラつきのある絵本風イラスト。地はマットな生成り色
• 形: 角丸の太枠カード、ピル型ボタン、セクション上端をドーム状の円弧で切る
• 温度感: 暖かい。土色・橙・若草色が中心で、水色の面がさわやかさを足す

Colors

• 地は生成り色を基本にし、セクションごとにクリーム色・水色・空色の面に切り替える
• 強調色は焼き橙1色にまとめ、見出しの雲・波線、カード枠、ボタン、番号に使う
• 文字は黒ではなく焦げ茶にして、温かみを出す
• 就農者紹介は若草色の外枠帯で囲み、ひとつのまとまりに見せる
• 青・オレンジなど強い原色は地図の区分にだけ使う
• button-primary は文字 #FFF6E7 × 背景 #CE602B のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B75526、4.51:1）を使う。
• location-tab は文字 #FFF6E7 × 背景 #CE602B のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B75526、4.51:1）を使う。

Typography

• 全体を丸ゴシックの太めでそろえ、柔らかい印象にする
• 見出しは中央に置き、上に雲のアイコン、下に橙の波線を付ける
• 本文は小さめにして行間を広く取り、段落頭は1字下げる
• ローマ字の名前は人名の横に小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。市町村リンクだけ2カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出しの上に雲、下に波線を置き、中央寄せにする
• 就農者カードは右上に地名タブを付け、動画→プロフィールと顔写真→作物写真→本文→POINT→ボタンの順に並べる
• セクションの境目に横長の田園イラストを入れる
• アクセスの所要時間は点線枠のリストにする

Elevation & Depth

• 影はほぼ使わず、平面的に仕上げる
• 奥行きは太い枠線と面の色の切り替えで出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 作物写真は角丸なしの長方形。人物写真は上が丸いアーチ形で、橙の枠を付ける
• セクション境界: セクション上端をドーム状の円弧で切る。丘のイラストを帯状に並べて区切る
• カードは橙の太線(3px)で縁取り、角丸を大きめにする
• 地名タブは上だけ角丸の橙の札にし、ピンのアイコンを付ける
• リンクボタンは白のピル型にする

Components

• 雲と波線の見出し（section-heading）: 橙の和柄の雲、茶色の見出し文字、橙の波線を縦に重ねる
• 橙のピル型ボタン（button-primary）: 幅60%ほどの中央寄せボタン。白文字
• 就農者紹介カード（farmer-card）: 白地に橙の太枠。動画・プロフィール・作物写真・POINTをまとめる
• 地名タブ（location-tab）: カードの右上に付ける橙の札。ピンのアイコン付き
• POINT枠（point-box）: 橙の二重線の枠。番号付きの丸で要点を3つ並べる
• 地域ラベル（region-label）: 地図に添える色付きのピル型ラベル
• 市町村リンク（link-pill）: 空色の地に白いピル型ボタンを2列に並べる
• アクセスリスト（access-list）: 白地に点線の枠。橙の丸印と矢印で区間を示す

Do's and Don'ts

Do - 見出しには必ず雲と波線を付ける - セクションの境目に横長の田園イラストを入れる - 強調色は焼き橙1色に絞る - 人物写真はアーチ形に切り抜き、橙の枠を付ける - 生成り地に焦げ茶の文字で温かみを出す

Don't - 真っ黒の文字や鋭い直角のボタンは使わない - 濃い影やグラデーションを多用しない - 寒色を強調色に使わない（水色は面だけに使う） - 写真を全面に敷き詰めない

Page Structure

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

1. ファーストビュー（テーマを伝え、親しみを持たせる）: 中央に大きなロゴ風の文字、茶色の帯のサブコピー、SCROLL表記、下に田園イラストを置く
2. 地域の産業紹介（地域農業の概要を伝える）: 農作業する人物イラストで見出しを囲み、下に本文を左寄せで置く
3. 地域紹介（地理と特徴を伝える）: 色分けした地図に地域ラベルを付け、罫線区切りの本文を添える
4. 写真スライダー（風景の魅力を見せる）: 丘のイラストの帯の上に横スクロールの写真を並べ、橙の丸い矢印を付ける
5. 交通アクセス（移動しやすさを示す）: 水色の面を上端ドーム形で切り、日本地図のイラストと点線枠のリストを置く
6. 就農者紹介（先輩の事例で具体的なイメージを持たせる）: 若草色の帯で囲んだ中に、太枠のカードを3枚縦に並べる
7. お知らせ（新着情報を載せる）: クリーム地に罫線区切りのリスト、橙の丸い矢印、もっと見るボタンを置く
8. 関連サイトバナー（詳しい支援情報へ誘導する）: 黄色地に野菜イラストを敷いたバナーと、水色枠のバナーを置く
9. 市町村リンク（各地の窓口へ誘導する）: 空色の面に白いピルを2列で並べ、下端に牧場のイラストを置く
10. SNS・関連リンク（継続的な接点を作る）: SNSアイコンを3つ並べ、その下にバナー画像を置く
11. お問い合わせ・フッター（連絡先を示す）: 淡い水色の面をドーム形で切り、連絡先を中央に置き、田植えのイラストで締める

Imagery

• フラットな絵本風の田園イラスト。丘・畑・トラクター・雲・太陽などを使う
• 人物イラストは素朴な農作業姿で、橙・黄・緑を基調にする
• 写真は自然光で撮った人物と作物のアップ。作物は画面いっぱいに写す
• 和柄の渦巻く雲のモチーフを見出しのアイコンにする
• 雲はクリーム色の横長の楕円で、背景に浮かべる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで幅を約80%に保ち、左右は生成り地を残す
• PCのファーストビューはロゴとイラストを横長に一体化させる
• PCの就農者カードは、動画とプロフィールを左右2カラムに並べる
• PCの地域紹介は地図と本文を左右に並べる
• PCの写真スライダーは一度に5枚ほど見せる

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