DESIGN.md — 紺×水色×黄緑の地域求人ポータル LP（Regional Job Portal Flat Illustration LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、信頼・誠実
• キーワード: 地図シルエット・俯瞰の人物イラスト・紺線カード・黄緑の帯・レモン色ボタン
• 地の質感: フラットな単色面。グラデーションや影はほぼ使わない
• 形: 角丸カードに紺の 2px 枠線。ボタンはピル型。背景の水色面は不定形の曲線
• 温度感: 明るく軽快。紺で締めた公共的な安心感

Colors

• 地はグレー、そこに水色の不定形面を重ねて地図風の動きを出す
• 紺は文字・枠線・主ボタンに統一し、ブランド色として全体を締める
• 黄緑は使い方セクションの全幅帯だけに使う
• レモン色ボタンは黄緑帯の白カード内でのみ使う
• リンクは紺の下線テキスト
• 写真やバナー以外では色数を増やさない
• tab-switch は文字 #F5F7FE × 背景 #70B92C のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4C7D1E、4.61:1）を使う。

Typography

• 見出しは英字大きめ+小さな和文サブの 2 段で中央揃え
• 見出しとロゴは紺、本文は黒
• ロゴは丸みのある幾何学的サンセリフ
• リンクは下線付きの紺文字
• 本文は左揃えで行間を広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。関連リンク集は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 30px ほどの余白を空けて中央に置く
• イベントは横スクロールのカルーセルにし、隣のカードを少し見せる
• 英字見出しの上下に余白をたっぷり取る
• イラストは画面端からはみ出すように置く
• 黄緑帯は全幅にする

Elevation & Depth

• 影は使わず、紺の線と面の色差で階層を表す
• カードは白の面と紺の 2px 枠で浮かせる

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: カード上部に角丸の矩形で収め、紺枠で囲む
• セクション境界: 水色の不定形な曲線面と、黄緑の直線全幅帯
• カードとボタンは角丸に統一する
• タブは上だけを角丸にする
• TOP ボタンは紺の正円

Components

• 検索カード（search-card）: 紺枠の白カードの中に、タブ切替・ピル型の検索ボタン・入力欄と紺の検索ボタンを並べる
• 紺ピルボタン（button-primary）: 紺の塗りに白文字。右に虫眼鏡アイコン
• 大型枠線ボタン（button-outline-large）: 白地に紺枠と紺の大きな文字。登録や法人向けの導線に使う
• レモン色ボタン（button-cta）: 黄緑帯のカード内に置く。紺文字のピル型
• NEW 丸バッジ（badge-new）: カード左上に重ねる紺の円。中に白の英字
• イベント・ニュースカード（event-card）: 紺枠の画像に、日付と下線リンクのタイトルを添える
• 上角丸タブ（tab-switch）: 黄緑と紺の 2 枚のタブを並べ、白の下線文字を載せる
• マーカー見出し（heading-marker）: 紺の太字の下半分に薄黄のマーカーを敷く
• VIEW ALL リンク（view-all-link）: 中央の英字の左右に細い矢印線を添える
• リンク集タイル（link-tile）: 紺枠の白い角丸にロゴを入れ、下に下線リンクを付ける。2 列で並べる

Do's and Don'ts

Do - カードとボタンの枠線は紺で統一する - 俯瞰の人物イラストを各セクションの端に散らす - 見出しは英字と和文の 2 段構成にする - 水色の地図風の面で背景に動きを出す - リンクには下線を付けてわかりやすくする

Don't - ドロップシャドウやグラデーションを使わない - レモン色を黄緑帯の外で多用しない - 明朝体や細い書体を使わない - 枠線を黒やグレーにしない - 写真を背景いっぱいに全面で敷かない

Page Structure

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

1. ファーストビュー（地域と求人サイトであることを伝える）: グレー地に水色の地図シルエットを敷き、紺の巨大ロゴと縦書き風の短い和文、人物イラストを配置する
2. 仕事検索（すぐに検索へ誘導する）: 紺枠の白カードにタブ・紺のピルボタン・入力欄を並べる
3. 登録導線（会員登録を促す）: 大型の枠線ボタンを 1 つ置き、周りに人物イラストを散らす
4. イベント（催しを紹介する）: 水色地に横スクロールのカードを並べ、NEW バッジと VIEW ALL を添える
5. お知らせ（新着情報を伝える）: 紺枠のバナー画像に日付と下線タイトルを添え、縦に積む
6. 使い方（利用方法を案内する）: 上角丸のタブ 2 枚の下に黄緑の全幅帯を敷き、白カード 3 枚それぞれにレモン色ボタンを置く
7. 法人向け導線（企業の掲載を促す）: 小さなリード文の下に大型の枠線ボタンを置き、人物イラストを添える
8. 関連リンク集（外部サイトへ案内する）: カテゴリ見出しに紺の下線を引き、2 列のロゴタイルを並べる
9. フッター（ページを締める）: 紺の丸い TOP ボタンの下に、薄グレー地と紺のロゴを置く

Imagery

• 真上から見た人物のフラットイラストを使う（線画なし・単色の塗り）
• 人物は端末や書類を持ち、歩いている姿にする
• 地域の地形をシルエットにした水色の大きな面を使う
• バナー画像は紺枠の角丸に収める
• ロゴタイルは白地の中央に配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを 2 カラムにし、ロゴを左、検索カードを右に置く
• PC はイベントを 4 列、お知らせとリンク集を 3 列で並べる
• 使い方のカードは PC でも中央に 1 列で、幅を約 50% に絞る
• 背景の地図面とイラストは 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 行書くと起動時に読み込まれる。