---
version: alpha
name: Pop Blue Yellow Construction Recruit LP
description: 鮮やかな青・黄・黄緑を斜めの面で切り替える、元気な建設会社の新卒採用LP。黒い細線で縁取った大きな角丸の写真と、ヘルメット姿のフラットイラストを組み合わせる。英字の極太見出しを二重にずらして重ね、白とライトグレーの地に情報をカードで並べる。
colors:
  primary: '#3A86FE'
  cta: '#FFF436'
  on-cta: '#130B00'
  secondary: '#82F676'
  background: '#FFFFFF'
  background-alt: '#F5F5F5'
  tint-1: '#FAFEB2'
  tint-2: '#EDF4FE'
  surface: '#F5F4F9'
  text: '#1A1A1A'
  line: '#232323'
  accent-1: '#61544F'
  accent-2: '#8DB0D8'
  marker: '#FEF534'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.04em
  accent:
    fontFamily: Oswald
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
rounded:
  sm: 8px
  md: 20px
  lg: 32px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 96px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  news-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 90px
  heading-double-en:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 110px
  heading-slash:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 32px
  tag-pill:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 32px
  task-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 110px
  speech-label:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 44px
  stat-card:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.lg}'
    height: 280px
  offset-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 480px
  marker-heading:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 90px
---

# DESIGN.md — 青×黄×緑のポップな建設業採用 LP（Pop Blue Yellow Construction Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: 斜め切り替え・原色ポップ・黒細線の縁取り・二重英字見出し・ヘルメットイラスト・大きな角丸
- **地の質感**: グラデーションは使わず、ベタ塗りの原色を使う。黒の細線（1px前後）で写真・カード・ボタンを縁取り、コミック風の手触りを出す。
- **形**: 角丸の大きな写真枠、ピル型ボタン、斜めの帯や星形の爆発シェイプ、ドーム状の円弧で区切るセクション、六角形や雲形の切り抜き写真。
- **温度感**: 明るく快活で若々しい。現場の誠実さを青で、元気さを黄と黄緑で表す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#3A86FE` | ブランドの青。FVの斜め面・英字見出し・アイコン・矢印丸 | 6% | 画素の実測 |
| `cta` | `#FFF436` | エントリー等の主ボタンの黄色 | 7% | 画素の実測 |
| `on-cta` | `#130B00` | 黄ボタン上の黒文字 | 0% | 画素の実測 |
| `secondary` | `#82F676` | セクション地の黄緑。吹き出しラベルにも使う | 5% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 25% | 画素の実測 |
| `background-alt` | `#F5F5F5` | 教育・フッター等のライトグレー地 | 20% | 画素の実測 |
| `tint-1` | `#FAFEB2` | インタビューセクションの淡いレモン地 | 4% | 画素の実測 |
| `tint-2` | `#EDF4FE` | 数字カードの淡い青地 | 2% | 画素の実測 |
| `surface` | `#F5F4F9` | コラム・業務カードのごく淡いグレー | 4% | 画素の実測 |
| `text` | `#1A1A1A` | 見出しと本文の黒 | 3% | 推定 |
| `line` | `#232323` | 写真・カード・ボタンの黒い細線 | 0% | 画素の実測 |
| `accent-1` | `#61544F` | 二重英字見出しの奥側のダークグレー | 1% | 画素の主要色に補正 |
| `accent-2` | `#8DB0D8` | 二重英字見出しの手前側のくすみ水色 | 1% | 推定 |
| `marker` | `#FEF534` | 見出し背面の黄色マーカー帯 | 1% | 画素の実測 |

- 地は白とライトグレーを交互に使う。そのうえで、黄緑・レモン・青・黄のカラー面をセクションごとに差し込む。
- 主CTAはすべて黄色の地に黒文字。右端には青丸の矢印アイコンを付ける。
- 青は英字見出し、小見出し前の斜線、アイコン、タグ、矢印ボタンに限って使う。
- 黄色は面・マーカー帯・大きな数字・英字の塗りに使い、黒の細い縁取りを添える。
- カラー面は斜めや円弧で切り替え、水平の帯は避ける。
- グラデーションは使わず、すべてベタ塗りで描く。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVやセクションの英字大見出し（二重にずらして重ねる） | 欧文サンセリフ | Noto Sans JP | 900 | 48px | 1 | -0.02em |
| `headline-lg` | 職種名などの英字見出し（黄の塗りに黒の縁取り） | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.1 | 0.02em |
| `headline-md` | マーカー帯の日本語キャッチ・中見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.5 | 0.04em |
| `headline-sm` | 青の斜線付きの小見出し・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.04em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2 | 0.08em |
| `note` | 英字見出し上の日本語ラベル・カード補足 | ゴシック | Noto Sans JP | 700 | 12px | 1.6 | 0.04em |
| `accent` | 大きな実績数字（黄の塗りに黒の縁取り） | 欧文サンセリフ | Oswald | 700 | 72px | 1 | 0em |
| `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em |

- セクション見出しは3つを組にする。小さな日本語ラベル、その下に英字大見出しを2つ置く（グレーと水色、または青）。英字は上下左右にずらして重ねる。
- 英字見出しは極太にする。黄で塗る場合は黒の細い縁取りを付ける。
- 日本語の小見出しには、左に青い斜線（／）を付ける。
- キャッチは黄色のマーカー帯の上に、太字の黒で2行に組む。
- 本文の行間は2.0前後で、字間はやや広めにとる。
- 実績数字は極端に大きくし、単位は小さく添える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。主な業務カード、資格タグ、インタビュー写真は 2 カラム。
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
- 左右の余白は約24pxとする。
- 職種タブ（3つ）の下は、黒線で囲んだ1枚の白いパネルにまとめる。
- 数字カードや取り組みカードは横スライダーにし、隣のカードを端に少し見せる。
- セクション間は約80〜110pxの余白と、斜めや円弧の色面切り替えで区切る。
- 研修セクションでは、写真と箇条書きを交互に縦に積む。

## Elevation & Depth

- ぼかしたドロップシャドウは使わない。
- 取り組みカードは、黄緑の面を右下に8pxほどずらして敷き、ベタの影にする。
- 立体感は黒い細線の縁取りだけで出す。

## Shapes

- **角丸**: 小 8px ／ 中 20px ／ 大 32px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸24〜32pxの四角に黒い細線で縁取る。インタビューは六角形・雲形・アーチ形で切り抜き、アイコンは円形にする。
- **セクション境界**: 斜めの直線で色面を分ける。ドーム状の円弧で始まるセクションと、星形の爆発シェイプも使う。
- ボタン・タグ・ラベルはピル型にする。
- ファイルのタブ形の上辺を持つカードで動画枠を作る。
- 吹き出しは楕円か角丸で、尻尾を付ける。
- 見出しアイコンは青の丸に白の矢印にする。

## Components

- **黄色ピルCTA**（`button-primary`）: 黄の地に黒い細線、中央に黒の太字。右端に青丸＋白矢印を置く。
- **お知らせカード**（`news-card`）: 白地に黒線の角丸カード。青の日付タグと太字の本文、右に青丸の矢印を置く。
- **二重英字見出し**（`heading-double-en`）: 小さな日本語ラベルの下に、英字見出しを2色でずらして重ねる。
- **斜線付き小見出し**（`heading-slash`）: 左に青い斜線を置き、黒太字で小見出しを書く。
- **資格タグ**（`tag-pill`）: 青ピルに白文字。2列で並べる。
- **業務カード**（`task-card`）: 淡いグレーの地に黒線の角丸。青い丸点＋太字の見出しと、短い説明を入れる。
- **職種吹き出しラベル**（`speech-label`）: 黄緑・青・黄の吹き出し型ピル。少し傾けて写真の上に重ねる。
- **数字カード**（`stat-card`）: 淡い青の大きな角丸カード。黄の縁取り数字と小さい単位を置く。
- **ずらし影カード**（`offset-card`）: 白地に黒線のカード。右下に黄緑のベタ影を敷き、ハッシュタグのピルを付ける。
- **マーカー帯キャッチ**（`marker-heading`）: 行ごとに黄色の帯を敷いた黒太字の2行キャッチ。

## Do's and Don'ts

**Do**
- 青・黄・黄緑の3色をベタで大胆に使う。
- 写真やカードは黒の細線と大きな角丸で統一する。
- セクション見出しは、二重英字＋日本語ラベルの型を毎回守る。
- ヘルメット・作業着姿のフラットイラストを写真の間に配置する。
- CTAは黄色のピルに青丸矢印の形で、ページ内に繰り返し置く。

**Don't**
- グラデーションやぼかし影を使わない。
- 落ち着いた低彩度の配色や明朝体にしない。
- 写真を角張った四角のまま、枠線なしで置かない。
- CTAの色を黄以外に変えない。
- 水平の帯だけでセクションを区切らない。

## Page Structure

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

1. **ファーストビュー**（社員の写真で親しみと活気を伝え、募集の導線を示す）: 青の斜め面に角丸写真を散らし、イラストの人物を重ねる。巨大な英字ロゴを置き、黄色ピルCTAを2つ並べる。お知らせカードと動画サムネイルも置く。
2. **仕事紹介**（事業の意義と部門の連携を示す）: ドーム形の黄緑地に二重英字見出しと中央揃えのリード文を置く。下に3つのタブを並べる。
3. **職種詳細**（職種ごとの役割・やりがい・資格・業務を伝える）: 白いパネルに、縁取り英字の職種名とイラストの吹き出しを置く。マーカーキャッチ、コラムカード、青タグ、業務カードの2列、インタビュー誘導バナーを続ける。
4. **社員インタビュー**（先輩社員の声で働く姿を具体化する）: レモン地に変形切り抜きの写真を2列で並べる。吹き出しラベルと再生ボタン、中央揃えの太字コメントを添える。
5. **特集コンテンツ**（座談会などの読み物へ誘導する）: 青い爆発シェイプの上に、黄色の英字と白地の青文字キャッチを置く。写真はスライダーにし、ページ数の表示を付ける。
6. **教育・キャリア**（研修制度と成長の道筋を示す）: グレー地にキャリアの階段図を置く。研修写真の横スクロールと、対象別の箇条書きを続ける。
7. **数字で見る会社**（実績を数値で印象づける）: 淡い青の数字カードを横スライダーで見せ、青丸の矢印で送る。
8. **福利厚生**（待遇の安心感を伝える）: 黒線のグレーカード1枚に、青アイコン付きの項目を縦に並べる。
9. **未来への取り組み**（社会貢献の活動を紹介する）: 黄緑のずらし影カードを横スライダーにする。各カードにハッシュタグと写真を入れる。
10. **トップメッセージ**（代表の想いで信頼を醸成する）: 黄色の斜め面にマーカーのキャッチ、角丸の人物写真、長文本文を交互に置く。
11. **動画紹介**（会社案内の動画へ誘導する）: フォルダ形のタブが付いたカードに動画サムネイルを入れる。白版と青版の2つを置く。
12. **エントリー**（応募の導線）: 青の英字見出しの下に、募集区分ごとの黄色ピルCTAを縦に3つ並べる。
13. **フッター**（サイトマップと再度のCTA）: 上辺が角丸のグレー地に、青の英字ロゴ、2列のリンク一覧、黄色CTAを置く。

## Imagery

- 写真は作業着・ヘルメット姿の社員を自然光で撮る。笑顔や身振りのある明るい写真にする。
- 写真は黒の細線で縁取った大きな角丸で切り抜く。
- イラストは黒の主線に、ベタ塗りの青・黄緑を使うフラットな人物にする（ヘルメット・ベスト姿）。
- 動画サムネイルは、道路工事の重機をシンプルなフラットイラストで描く。
- アイコンは青一色のシンプルな塗りアイコンにする。
- 装飾には爆発シェイプ、斜めの色面、オレンジの太矢印を使う。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは最大幅を約960pxにする。FVは写真をコラージュし、右に巨大な英字ロゴを置く。
- 職種パネルは、左に本文、右に縦に並べた写真の2カラムにする。
- インタビューは3列、数字カードは3枚を横に並べる。
- 研修セクションは、写真と箇条書きを左右交互に配置する。
- エントリーCTAは3つを横に並べ、間を斜線で区切る。
- SPは1カラムで、スライダーは隣のカードを端に少し見せる。

## 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-76e8d8d2`（元 LP の URL から採番）
- **元 LP**: https://www.dorokogyo.co.jp/recruitment/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-19、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。