--- version: alpha name: Fresh Green Construction Recruit Portal description: 明るい若草グリーンを主役に、薄いグレーの地とこげ茶の文字・フッターで落ち着きを出した建設業の求人ポータル。白いカードと地域別の多色アクセントで検索導線を整理し、親しみと信頼を両立させる。 colors: primary: '#5EB147' background: '#EEF0ED' surface: '#FFFFFF' tint-1: '#D5EECE' text: '#322B2A' dark-section: '#2F2725' on-dark: '#FAF9F6' secondary: '#EC964B' tint-2: '#FAF1C4' text-muted: '#818172' line: '#7EB772' accent-1: '#EC7484' accent-2: '#6CBCD4' accent-3: '#E5B224' primary-accessible: '#448033' secondary-accessible: '#AF5B12' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Inter fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-search-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-search-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-outline-arrow: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px job-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 340px condition-tag: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 64px region-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px list-card-thumb: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 96px count-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 64px --- # DESIGN.md — 若草グリーンとこげ茶の建設求人ポータル LP（Fresh Green Construction Recruit Portal） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 若草グリーン・白カード・方眼の淡緑地・斜めストライプ透かし・多色アクセント・丸いアロー - **地の質感**: フラットな面に半透明の太い斜めストライプ、淡緑面には細い方眼グリッドを敷く - **形**: 角丸の白カード、ピル型の枠線ボタン、円形の矢印アイコン - **温度感**: やや暖かい。緑と黄色のやわらかさにこげ茶で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5EB147` | ブランドの緑・帯セクション・矢印ボタン | 14% | 画素の実測 | | `background` | `#EEF0ED` | ページ基本の薄グレー地 | 30% | 画素の実測 | | `surface` | `#FFFFFF` | カード・パネルの白 | 22% | 画素の実測 | | `tint-1` | `#D5EECE` | ピックアップ・FAQの淡緑地 | 10% | 画素の実測 | | `text` | `#322B2A` | 見出し・本文のこげ茶 | 3% | 画素の実測 | | `dark-section` | `#2F2725` | フッターのこげ茶地 | 8% | 画素の実測 | | `on-dark` | `#FAF9F6` | フッター上の白文字 | 1% | 画素の実測 | | `secondary` | `#EC964B` | 仕事の種類検索ボタンのオレンジ | 1% | 画素の実測 | | `tint-2` | `#FAF1C4` | 条件タグ・アイコン円の淡黄 | 2% | 画素の実測 | | `text-muted` | `#818172` | 英字ラベル・注釈のグレー | 1% | 画素の主要色に補正 | | `line` | `#7EB772` | 区切り線・ボタン枠の淡緑 | 1% | 画素の実測 | | `accent-1` | `#EC7484` | 地域ボタンのピンク | 0% | 画素の実測 | | `accent-2` | `#6CBCD4` | 地域ボタンの水色 | 0% | 画素の実測 | | `accent-3` | `#E5B224` | 地域ボタンの黄 | 0% | 画素の実測 | | `primary-accessible` | `#448033` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#AF5B12` | AA を満たす補正値（計算） | | 計算 | - 地は薄グレーを基本にし、淡緑・濃緑・こげ茶の帯でセクションを切り替える - 濃緑の帯の上には白カードを置き、カード内の文字はこげ茶 - 主要な矢印ボタンは緑の円＋白矢印で統一する - 第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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーロー下のキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.08em | | `headline-md` | メッセージのリード文 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.9 | 0.08em | | `headline-sm` | カードのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.1 | 0.08em | | `note` | 注釈・日付 | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.05em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Inter | 700 | 10px | 1.2 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.08em | - 見出しは、小さな緑の四角 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 ```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-6c77c8d9`（元 LP の URL から採番） - **元 LP**: https://www.tokyu-cnst.co.jp/co-creation/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。