--- 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/）からご連絡ください。