DESIGN.md — 若草グリーンとこげ茶の建設求人ポータル LP（Fresh Green Construction Recruit Portal）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、親しみ・手作り感、情報量多め・訴求型
• キーワード: 若草グリーン・白カード・方眼の淡緑地・斜めストライプ透かし・多色アクセント・丸いアロー
• 地の質感: フラットな面に半透明の太い斜めストライプ、淡緑面には細い方眼グリッドを敷く
• 形: 角丸の白カード、ピル型の枠線ボタン、円形の矢印アイコン
• 温度感: やや暖かい。緑と黄色のやわらかさにこげ茶で締める

Colors

• 地は薄グレーを基本にし、淡緑・濃緑・こげ茶の帯でセクションを切り替える
• 濃緑の帯の上には白カードを置き、カード内の文字はこげ茶
• 主要な矢印ボタンは緑の円＋白矢印で統一する
• 第2の検索軸だけをオレンジにして、緑と対で見せる
• 地域やカテゴリの識別には、ピンク・水色・黄・紫など多色の淡いアクセントを 1 項目 1 色で使う
• 条件タグは淡黄の地にオレンジのアイコン。該当しないものはグレーで表す
• button-search-primary は文字 #FAF9F6 × 背景 #5EB147 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#448033、4.55:1）を使う。
• button-search-secondary は文字 #FAF9F6 × 背景 #EC964B のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AF5B12、4.61:1）を使う。

Typography

• 見出しは、小さな緑の四角 4 つのアイコン＋大文字の英字ラベルを上に置き、その下に日本語の太字見出しを左揃えで置く
• キャッチ内の 1〜2 文字だけを緑で強調する
• 掲載件数などの数字は緑の大きい太字にし、単位は小さく添える
• 本文は字間を広めに、行間 2 前後でゆったり組む
• 文字色は黒ではなくこげ茶を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードと地域ボタンは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 16px でそろえる
• 求人カードと実績は横スクロールのカルーセルにし、右上にドットと丸い矢印ボタンを置く
• セクションの最後に、中央寄せのピル型『一覧へ』ボタンを置く
• 検索系のパネルは白カードにまとめ、濃緑の帯に重ねる
• 職種一覧は、左にサムネイル・右にタイトルと説明の横長カードを縦に並べる

Elevation & Depth

• 白カードには、下方向に薄くぼかした影（0 2px 8px rgba(0,0,0,.12)）をつける
• ボタンは影なし。枠線と塗りで見せる
• フッターは影なしのフラットな面にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸 4〜8px の長方形。ヒーローは写真を隙間少なめにタイル状に並べる
• セクション境界: 直線で背景色を切り替える。一部のセクションには写真の帯を挟む
• カードの右下に小さな色付き三角を置き、リンクであることを示す
• アイコンは淡黄の円の中に入れる
• ボタンは右端に円形の矢印をつけたピル型にする
• 背景に半透明の太い斜めの角丸ストライプを透かしで敷く

Components

• 検索ボタン（緑）（button-search-primary）: 左にピンアイコン、右に白い半透明の円に入った下矢印をつけた、緑塗りのピル型ボタン
• 検索ボタン（オレンジ）（button-search-secondary）: 2 つ目の検索軸に使う、オレンジ塗りのピル型ボタン
• 一覧へ進むボタン（button-outline-arrow）: 白地に淡緑の枠線をつけたピル型。右端に緑の円と白矢印を置く
• 英字ラベル付き見出し（section-label）: 緑の四角 4 つのアイコン＋グレーの英字ラベル、その下に大きな日本語見出し
• 求人カード（job-card）: 緑の職種バッジ、タイトル、社名・地域・給与のアイコン行、条件タグの 4 列グリッドで構成する
• 条件タグ（condition-tag）: 淡黄の地にオレンジのアイコンと 2 行のラベルを入れた正方形タグ。該当しないものはグレー
• 地域ボタン（region-button）: 地域ごとの色の枠線をつけたピル型ボタン。右端に同じ色の円矢印を置き、2 列に並べる
• サムネイル付き一覧カード（list-card-thumb）: 左に角丸の写真またはアイコン円、右にタイトルと説明。右下に色付き三角を置く
• 掲載数ボックス（count-box）: 白いボックスに、緑の大きな数字と小さな注釈日付を入れる

Do's and Don'ts

Do - 緑を主役にし、検索のもう一つの軸だけをオレンジにする - 白カードは角丸を小さめにし、影を薄くつける - 見出しには必ず英字ラベルと緑の四角アイコンを添える - 地域やカテゴリには淡い多色を 1 つずつ割り当てる - 背景には斜めストライプの透かしや方眼を薄く入れる

Don't - 真っ黒な文字やフッターを使わない（こげ茶を使う） - 原色の赤など強い警告色を CTA に使わない - カードの角丸を大きくしすぎない（8px 以下） - 影を濃くしたり、グラデーションを多用したりしない - 写真に強い色加工をしない

Page Structure

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

1. ヘッダー（ロゴとメニューを示す）: 白地の左にロゴとサイト種別の淡緑バッジ、右端に緑の正方形メニューボタン
2. ファーストビュー（現場で働く人の姿で親しみを伝える）: 作業員の写真をモザイク状にタイル配置し、その下にキャッチとロゴを中央寄せで置く
3. 検索導線（すぐに求人を探せるようにする）: 緑の枠線で囲んだパネルに検索ボタン 2 本を入れ、下に掲載数ボックスを置く
4. メッセージ（業界と仕事の魅力を語る）: グレー地に太字のリード 3 行と、ゆったり組んだ本文
5. ピックアップ求人（おすすめの求人を見せる）: 方眼柄の淡緑地に、求人カードの横スクロールと一覧ボタン
6. 写真帯（現場の雰囲気を添える）: 角丸の写真を横に並べた帯
7. エリア検索（勤務地から探せるようにする）: 濃緑地の上に白パネルを置き、色分けした日本地図と地域ボタン 2 列
8. 職種検索（仕事の種類から探せるようにする）: サムネイル付きの横長カードを縦に 6 つ並べる
9. 職種紹介（職種の理解を深める）: 濃緑地に白い正方形カードを 2 列で並べる。各カードは淡黄の円の中に緑の線画アイコン
10. 実績紹介（施工実績で信頼を示す）: 大きな写真のカルーセル。写真の右下に白い名札ラベルを置く
11. よくある質問（不安を解消する）: 淡緑の方眼パネルに、疑問の吹き出しと人物イラスト、一覧ボタン
12. 求人特集（条件から探せるようにする）: アイコン付きの白い横長カードを縦に並べる
13. フッター（サイト内の回遊と会社情報）: こげ茶地に白抜きのロゴ、白枠のピル型ボタン、線で区切ったリンクリスト、ページトップへの丸ボタン

Imagery

• 自然光の明るい現場写真。ヘルメットと作業着の人物を、空や建物と一緒に爽やかなトーンで撮る
• 建物・鉄骨・トンネルなどを角丸のサムネイルにトリミングする
• アイコンは緑の細い線画、またはオレンジのフラットな塗りにする
• 人物イラストは輪郭線なしのフラットな塗り。オレンジと水色の服に、丸い吹き出しを添える
• 日本地図は地域ごとにパステル色で塗り分ける
• 背景装飾は白の半透明の太い斜めバーと方眼
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは左にロゴと検索、右に写真のモザイクを置く 2 カラム
• PC のメッセージは、左にリード、右に本文の 2 カラム
• PC の求人カードは横に 7〜8 枚並べる
• PC の職種検索は 3 列、職種紹介は 5 列、求人特集は 4 列のグリッド
• PC のエリア検索は、地図の左右に地域ボタンを振り分ける
• PC の FAQ は、左にイラスト、右にテキストの横並び

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