--- version: alpha name: Warm Illustrated Rural Career Fair LP description: 生成りの和紙風地に、橙・深緑・茶・青の4色を分野別に使い分ける自治体主催の移住・就業イベントLP。手描き風イラストと太い丸みの見出しで、温かく親しみのある印象にまとめている。 colors: primary: '#EE801E' background: '#F9F3E5' surface: '#FFFFFF' background-alt: '#FFF9EF' secondary: '#2C732B' accent-1: '#642917' accent-2: '#2D77A0' cta: '#1E8DB5' on-cta: '#FFFFFF' text: '#333333' text-muted: '#727272' tint-1: '#E2E5C1' tint-2: '#EFFFF4' dark-section: '#EAE89B' marker: '#FEDC53' primary-accessible: '#B75D0E' cta-accessible: '#1B7FA4' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Mochiy Pop One fontSize: 32px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.0 rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 22px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 56px benefit-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px schedule-row: backgroundColor: '{colors.text-muted}' typography: '{typography.headline-sm}' height: 26px field-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 60px field-box: backgroundColor: '{colors.tint-2}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 760px label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px button-link: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px speaker-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px speech-tab: backgroundColor: '{colors.accent-2}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px info-table: textColor: '{colors.text}' typography: '{typography.body-md}' height: 90px --- # DESIGN.md — 生成り地×橙緑のイラスト移住就業フェアLP（Warm Illustrated Rural Career Fair LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: ナチュラル、親しみ・手作り感、やさしい・柔らかい、ポップ・元気 - **キーワード**: 生成り和紙・手描きイラスト・分野別カラー・丸い見出しバッジ・イベント告知・地方移住 - **地の質感**: 和紙のような細かな繊維感のある生成り地。セクションによっては白やごく淡いクリームに切り替える - **形**: 角丸の白カード、太枠の角丸ボックス、円形写真、波形のセクション境界 - **温度感**: 暖かい。黄み寄りのベージュと橙で日なたの印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EE801E` | 見出し・小見出しの橙 | 2% | 画素の実測 | | `background` | `#F9F3E5` | 生成りの地色 | 35% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード | 19% | 画素の実測 | | `background-alt` | `#FFF9EF` | 出展一覧の淡クリーム面 | 12% | 画素の実測 | | `secondary` | `#2C732B` | 林業・見出しの深緑 | 3% | 画素の実測 | | `accent-1` | `#642917` | 農業の赤茶 | 1% | 画素の実測 | | `accent-2` | `#2D77A0` | 漁業の青 | 1% | 画素の実測 | | `cta` | `#1E8DB5` | リンクボタンの水色グラデ基調 | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `text` | `#333333` | 本文の濃グレー | 3% | 推定 | | `text-muted` | `#727272` | 時刻ラベル・補足 | 0% | 画素の実測 | | `tint-1` | `#E2E5C1` | 特典カードの黄緑グラデ | 2% | 画素の主要色に補正 | | `tint-2` | `#EFFFF4` | 林業ボックスの淡緑面 | 3% | 画素の実測 | | `dark-section` | `#EAE89B` | フッター黄緑面 | 3% | 画素の実測 | | `marker` | `#FEDC53` | 告知帯の黄色 | 1% | 画素の実測 | | `primary-accessible` | `#B75D0E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#1B7FA4` | AA を満たす補正値（計算） | | 計算 | - 地は生成り、情報ブロックは白か淡クリームの角丸面に載せる - 見出しの小見出し・帯ボタンは橙で統一する - 農=赤茶、林=深緑、漁=青の分野カラーを丸バッジ・枠線・文字色で一貫させる - 分野ボックス内の本文・見出しもその分野色で着色する - 特典カードは黄〜黄緑のグラデで目立たせる - 外部リンクボタンだけ水色グラデを使い、橙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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大型ロゴタイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（アイコン付き） | 装飾・ディスプレイ | Mochiy Pop One | 400 | 32px | 1.3 | 0.08em | | `headline-md` | カード内見出し・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.05em | | `headline-sm` | 講座名・コーナー名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em | | `body-md` | 本文・リード | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 所属・補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `label-button` | 帯ボタン・リンクボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `accent` | 分野バッジの漢字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 24px | 1.0 | 0.0em | - セクション見出しは太い丸みのポップ体で、文字ごとに橙・緑・茶・青を混ぜる - 見出しの左にシンプルな塗りアイコンを添える - リード文は中央揃え、短文を改行で並べる - 詳細本文は左揃えで行間を広くとる - 人名は大きく太字、敬称は小さく添える - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-872411e6`（元 LP の URL から採番） - **元 LP**: https://kochi-iju.jp/lp/affwork/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。