DESIGN.md — 生成り地×橙緑のイラスト移住就業フェアLP（Warm Illustrated Rural Career Fair LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、ポップ・元気
• キーワード: 生成り和紙・手描きイラスト・分野別カラー・丸い見出しバッジ・イベント告知・地方移住
• 地の質感: 和紙のような細かな繊維感のある生成り地。セクションによっては白やごく淡いクリームに切り替える
• 形: 角丸の白カード、太枠の角丸ボックス、円形写真、波形のセクション境界
• 温度感: 暖かい。黄み寄りのベージュと橙で日なたの印象

Colors

• 地は生成り、情報ブロックは白か淡クリームの角丸面に載せる
• 見出しの小見出し・帯ボタンは橙で統一する
• 農=赤茶、林=深緑、漁=青の分野カラーを丸バッジ・枠線・文字色で一貫させる
• 分野ボックス内の本文・見出しもその分野色で着色する
• 特典カードは黄〜黄緑のグラデで目立たせる
• 外部リンクボタンだけ水色グラデを使い、橙CTAと役割を分ける
• label-pill は文字 #FFFFFF × 背景 #EE801E のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B75D0E、4.58:1）を使う。
• button-link は文字 #FFFFFF × 背景 #1E8DB5 のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1B7FA4、4.55:1）を使う。

Typography

• セクション見出しは太い丸みのポップ体で、文字ごとに橙・緑・茶・青を混ぜる
• 見出しの左にシンプルな塗りアイコンを添える
• リード文は中央揃え、短文を改行で並べる
• 詳細本文は左揃えで行間を広くとる
• 人名は大きく太字、敬称は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、リンク地名は 3 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 22px（375px 幅換算）
• 白カードは左右 26px 前後の余白で中央配置
• 見出しはカードの外、上に中央配置
• スケジュールは時刻ラベル＋講座名の横並び行と説明文の繰り返し
• 分野ボックスは上辺中央に丸バッジを重ねる
• コーナーは円形写真を左、名称を右に並べる

Elevation & Depth

• 白カードに薄い影（0 2px 8px 10%程度）
• Page up ボタンは白丸にやわらかな影
• フッターのバナーに軽い影
• それ以外はフラット

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は円形または角丸16px、イベント写真は角丸の横長
• セクション境界: 大きな波形・弧のカーブで地色を切り替える。葉のイラストで区切る箇所もある
• 帯見出しボタンは橙のピル型
• 分野ボックスは3px程度の太い角丸枠線
• 分野バッジは大小2つの円を重ねた形
• 番号は白丸に緑数字でカード左上に重ねる

Components

• アイコン付き多色見出し（section-heading）: 塗りアイコン＋多色のポップ体で中央に置く
• 番号付き特典カード（benefit-card）: 黄〜黄緑グラデの角丸カード。左上に白丸番号、中に白ピル型の詳細ボタン
• 時刻ラベル付き講座行（schedule-row）: 灰の小矩形に白の時刻、横にグレー太字の講座名と所要時間
• 分野丸バッジ（field-badge）: 分野色の大小2つの円に白抜きの漢字
• 分野別枠ボックス（field-box）: 分野色の太枠と淡い同系色の面。上辺にバッジを重ねる
• 橙の帯見出し（label-pill）: 幅いっぱいの橙ピルに白太字
• 水色リンクボタン（button-link）: 水色グラデ角形、右端に区切り線と白三角
• 登壇者プロフィール（speaker-card）: 角丸写真の左上に分野丸アイコン、右に所属と大きな人名
• 吹き出しタブ付きバナー（speech-tab）: 写真バナーの上辺に青いピル吹き出しで誘導文
• 開催概要の罫線リスト（info-table）: 項目名と内容を中央揃えで縦積み、間を細い濃色罫線で区切る

Do's and Don'ts

Do - 分野色は3色で固定し、バッジ・枠・文字に一貫して使う - 見出しはポップ体で多色、本文は落ち着いたゴシックにする - 和紙風の生成り地と白カードを交互に重ねる - 人物は温かい手描き風イラストで描く - セクション境界に波形カーブや葉のイラストを使う

Don't - 純白だけの無機質な背景にしない - 寒色の濃いグラデや黒地の大面積を使わない - 分野色を別の分野に流用しない - 鋭い直角カードや細すぎる明朝見出しにしない - 写真に強いフィルターをかけない

Page Structure

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

1. ファーストビュー（イベント名・日時・会場を伝える）: 空色〜生成りのイラスト風景に多色ロゴ、日付を大きく、職業別人物3人を前面に
2. リード（新しい働き方を提案）: 短文を中央揃えで8行ほど並べる
3. 参加特典（来場の動機づけ）: 番号付き黄緑グラデカードを縦に2枚
4. セミナー（講座の時間と登壇者を示す）: 白い大カード内に時刻ラベル付きスケジュールと登壇者プロフィール、黄色の告知帯
5. 出展一覧（出展者を分野別に一覧）: 淡クリーム面に分野バッジと中央揃えの名前リスト、水色リンクボタン
6. 総合相談ブース（相談窓口を紹介）: 橙ピル帯見出し＋分野バッジごとに分野色の小見出しと説明
7. イベントコーナー（体験コンテンツ紹介）: 分野色の太枠ボックスに円形写真とコーナー名、プレゼント告知
8. 動画PR（動画で魅力を伝える）: 角丸動画サムネを縦3つ、左に分野の小丸アイコン
9. 地域紹介（県の特徴を伝える）: 和紙地に波形上辺、地図シルエット、緑写真上の白い数値カードのスライダー
10. 開催概要・アクセス（実務情報）: 罫線区切りの中央揃えリストと角丸の地図
11. 昨年度開催報告（実績で安心感）: 角丸写真と緑の見出し・本文を交互に
12. リンク（関連サイトへ誘導）: 吹き出しタブ付き写真バナー3つと3列の地名リスト
13. フッター（主催・問い合わせ）: 人物イラスト、白丸のPage up、弧形の黄緑面にバナーと連絡先

Imagery

• 絵本風の手描きイラスト。くすんだ緑・青・橙の水彩調の質感
• 人物は職業の道具（魚・野菜・チェーンソー）を持つ親しみある表情
• 写真は会場や現場の自然光スナップ、円形か角丸で切り抜く
• 葉っぱの連なりや集中線、地図シルエットなどの装飾
• 和紙のような繊維テクスチャを背景に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはナビを橙のピル型バーにして上部に固定
• PCでは特典カードやイベントコーナーを2〜3列に並べる
• 出展一覧はPCで分野バッジを左、名前を4列で右に配置
• 開催報告はPCで写真と文章を左右交互の2カラム
• PCでは白カードの左右に人物や重機の切り抜きイラストを浮かべる
• 地名リストはPCで6列

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