赤×白の製造業採用インタビュー LP

Bold Red Manufacturing Recruit Interview LP

白とライトグレーの地に鮮やかな赤を太い帯と円で効かせた製造業の採用サイト。社員の切り抜き写真に縦書きの黒帯コピーを重ね、大きな英字見出しと番号で力強く誠実な印象をつくる。

求人・採用力強い・インパクト信頼・誠実クール・先進的PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白とライトグレーの2色で区切る
赤は見出し帯・番号・円ボタン・CTAだけに使う
赤を使う面は大きく、濃さを変えない
縦書きコピーは黒帯の上に白文字
背景の大きな英字はごく淡いグレーで透かす
本文はグレー、氏名と見出しは黒にして強弱をつける

TYPOGRAPHY

書体

displayページタイトルの英字欧文サンセリフ／ Montserrat 800 ／ 36px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg赤い導入キャッチゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-md写真上の縦書きコピーゴシック／ Noto Sans JP 900 ／ 18px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm社員の氏名ゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accent#01のような番号欧文サンセリフ／ Montserrat 800 ／ 34px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文・紹介文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note所属・英字の小ラベル欧文サンセリフ／ Montserrat 600 ／ 10px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文字ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

英字見出しは極太で大きく、和文の小見出しを下に添える
縦書きコピーは2行にして黒帯に入れる
番号は赤の英字で写真の左下に重ねる
英字ラベルは字間を広めにとる
本文は13px前後、行間を広くとる

PAGE STRUCTURE

セクション構成

ヘッダーナビゲーションとエントリー導線白地に左ロゴ、右に赤い四角のENTRYボタン
ファーストビューインタビューページであることを示す赤いタイトル帯と、右上に現場で働く人の写真
導入文企画の趣旨を伝える赤い太字キャッチ2行と短いグレー本文
社員インタビュー一覧登場する社員を紹介するグレー地に切り抜き人物カードを2枚。縦書きコピーと赤い番号を重ねる
次のコンテンツ誘導事業紹介ページへ回遊させる製品を並べた全幅写真の中央に大きな赤円を置く
エントリーCTA応募へ誘導する透かし英字の上に赤い見出しを置き、矢印と白・赤2つのボタンを並べる
フッターサイト内リンクと関連サイトへの導線ロゴ、赤い縦線つき見出しのリンク群、右に赤アイコンのボタン、下にバナーを並べる

COMPONENTS

部品

赤いタイトル帯 title-band画面左から伸びる赤い帯に、白い極太英字と和文サブタイトルを入れる
縦書き黒帯コピー vertical-copy人物写真の右上に重ねる縦書きの黒帯2行
社員カード staff-cardグレー面に切り抜いた人物、赤い番号、氏名、赤い丸の詳細ボタンを入れる
赤丸の詳細ボタン circle-more白い三点リーダーを入れた小さな赤い正円
次ページへの大きな赤円 next-circle全幅の写真の中央に置く赤い円。アイコン・見出し・矢印を入れる
エントリーボタン button-primary赤い面にアイコンと白文字を入れた長方形のボタン
募集要項ボタン button-secondary白い面に赤い枠線と赤いアイコンをつけたボタン
NEXT CONTENTS ラベル next-label写真の右上に貼る赤い小さな帯ラベル

守ること

赤は大きな面で大胆に使う
人物写真は笑顔や身振りのある全身寄りで撮る
番号と英字ラベルで情報に順序をつける
白とグレーの面を交互に置いてリズムをつくる
CTAの前に下向き矢印を並べて視線を集める

DON'T

避けること

赤以外の強い色を使わない
角丸を大きくしてやわらかくしない
グラデーションや装飾的な影を使わない
本文を赤で長く書かない
写真の上に細い文字を直接載せない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 赤×白の製造業採用インタビュー LP（Bold Red Manufacturing Recruit Interview LP）

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

Overview

業種: 求人・採用／ 雰囲気: 力強い・インパクト、信頼・誠実、クール・先進的
キーワード: 鮮烈な赤・白とライトグレー・縦書き黒帯コピー・大きな英字見出し・社員写真・製品の白背景写真
地の質感: フラットで紙のような白地。うすいグレーの面と細かいドット地で奥行きを出す
形: 角ばった長方形の帯とカードに、赤い正円をアクセントとして合わせる
温度感: 白地は冷たいが、赤と人の写真で熱量がある

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#EA061D`	ブランド赤（見出し帯・円・CTA）	8%	画素の実測
`background`	`#FEFEFE`	ページの地	45%	画素の実測
`background-alt`	`#FFFFFF`	セクション背景のライトグレー	15%	画素の実測
`surface`	`#ECEEED`	写真カードの淡いグレー	8%	画素の実測
`cta`	`#EB061D`	エントリーボタン面	2%	画素の実測
`on-cta`	`#FFFFFF`	赤ボタン上の文字	0%	画素の主要色に補正
`text`	`#252526`	見出し・氏名の黒	2%	画素の実測
`text-body`	`#555555`	本文グレー	2%	推定
`text-muted`	`#9EA0A3`	注記・所属の淡いグレー	0%	画素の主要色に補正
`dark-section`	`#020202`	縦書きコピーの黒帯	1%	画素の実測
`line`	`#E0DFDC`	区切り線	0%	画素の主要色に補正
`accent-1`	`#EBECEC`	大きな透かし英字	1%	画素の主要色に補正

地は白とライトグレーの2色で区切る
赤は見出し帯・番号・円ボタン・CTAだけに使う
赤を使う面は大きく、濃さを変えない
縦書きコピーは黒帯の上に白文字
背景の大きな英字はごく淡いグレーで透かす
本文はグレー、氏名と見出しは黒にして強弱をつける

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ページタイトルの英字	欧文サンセリフ	Montserrat	800	36px	1.1	0.0em
`headline-lg`	赤い導入キャッチ	ゴシック	Noto Sans JP	700	20px	1.5	0.05em
`headline-md`	写真上の縦書きコピー	ゴシック	Noto Sans JP	900	18px	1.3	0.05em
`headline-sm`	社員の氏名	ゴシック	Noto Sans JP	700	18px	1.4	0.05em
`accent`	#01のような番号	欧文サンセリフ	Montserrat	800	34px	1.0	0.0em
`body-md`	本文・紹介文	ゴシック	Noto Sans JP	400	13px	1.9	0.03em
`note`	所属・英字の小ラベル	欧文サンセリフ	Montserrat	600	10px	1.4	0.1em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	700	15px	1.3	0.08em

英字見出しは極太で大きく、和文の小見出しを下に添える
縦書きコピーは2行にして黒帯に入れる
番号は赤の英字で写真の左下に重ねる
英字ラベルは字間を広めにとる
本文は13px前後、行間を広くとる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。社員カードは縦に並べる
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
タイトル帯は左端から伸ばし、右側に写真を重ねる
社員カードは写真の下に氏名・所属・紹介文の順
次のコンテンツへの誘導は全幅の写真に赤い円を重ねる
最下部のCTAは白と赤のボタンを横に並べる
フッターはリンク群とバナーを格子状に並べる

Elevation & Depth

影はほぼ使わずフラットに組む
奥行きは写真の重なりと透かし英字で出す
赤い円ボタンにだけごく薄い影をつけてもよい

Shapes

角丸: 小 0px ／中 2px ／大 4px。ボタンは角丸の長方形。
写真の切り抜き: 人物は四角いグレー面の上に切り抜き、製品は白背景で並べる
セクション境界: 直線で背景色を切り替える。帯は四角
カードとボタンは角ばった四角
丸いのは赤い円のアクセントだけ
CTAボタンは枠線つきの長方形

Components

赤いタイトル帯（title-band）: 画面左から伸びる赤い帯に、白い極太英字と和文サブタイトルを入れる
縦書き黒帯コピー（vertical-copy）: 人物写真の右上に重ねる縦書きの黒帯2行
社員カード（staff-card）: グレー面に切り抜いた人物、赤い番号、氏名、赤い丸の詳細ボタンを入れる
赤丸の詳細ボタン（circle-more）: 白い三点リーダーを入れた小さな赤い正円
次ページへの大きな赤円（next-circle）: 全幅の写真の中央に置く赤い円。アイコン・見出し・矢印を入れる
エントリーボタン（button-primary）: 赤い面にアイコンと白文字を入れた長方形のボタン
募集要項ボタン（button-secondary）: 白い面に赤い枠線と赤いアイコンをつけたボタン
NEXT CONTENTS ラベル（next-label）: 写真の右上に貼る赤い小さな帯ラベル

Do's and Don'ts

Do - 赤は大きな面で大胆に使う - 人物写真は笑顔や身振りのある全身寄りで撮る - 番号と英字ラベルで情報に順序をつける - 白とグレーの面を交互に置いてリズムをつくる - CTAの前に下向き矢印を並べて視線を集める

Don't - 赤以外の強い色を使わない - 角丸を大きくしてやわらかくしない - グラデーションや装飾的な影を使わない - 本文を赤で長く書かない - 写真の上に細い文字を直接載せない

Page Structure

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

ヘッダー（ナビゲーションとエントリー導線）: 白地に左ロゴ、右に赤い四角のENTRYボタン
ファーストビュー（インタビューページであることを示す）: 赤いタイトル帯と、右上に現場で働く人の写真
導入文（企画の趣旨を伝える）: 赤い太字キャッチ2行と短いグレー本文
社員インタビュー一覧（登場する社員を紹介する）: グレー地に切り抜き人物カードを2枚。縦書きコピーと赤い番号を重ねる
次のコンテンツ誘導（事業紹介ページへ回遊させる）: 製品を並べた全幅写真の中央に大きな赤円を置く
エントリーCTA（応募へ誘導する）: 透かし英字の上に赤い見出しを置き、矢印と白・赤2つのボタンを並べる
フッター（サイト内リンクと関連サイトへの導線）: ロゴ、赤い縦線つき見出しのリンク群、右に赤アイコンのボタン、下にバナーを並べる

Imagery

人物は作業着やスーツ姿で、明るい表情か身振りのある写真にする
人物は淡いグレーの四角い面の上に切り抜いて置く
製品写真は白背景に俯瞰で並べ、赤い製品を1つ入れて差し色にする
人を描いた線画イラストに赤を少し入れて添える
アイコンは白い線画を赤い円の中に置く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPではタイトル帯を全幅にし、写真はその下に配置する
社員カードは1列に縦積みする
赤円の誘導は写真の下に重ね、円の直径を160px程度にする
CTAボタン2つは縦に並べ、全幅で表示する
フッターのリンクは折りたたむか2列にする

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

---
version: alpha
name: Bold Red Manufacturing Recruit Interview LP
description: 白とライトグレーの地に鮮やかな赤を太い帯と円で効かせた製造業の採用サイト。社員の切り抜き写真に縦書きの黒帯コピーを重ね、大きな英字見出しと番号で力強く誠実な印象をつくる。
colors:
  primary: '#EA061D'
  background: '#FEFEFE'
  background-alt: '#FFFFFF'
  surface: '#ECEEED'
  cta: '#EB061D'
  on-cta: '#FFFFFF'
  text: '#252526'
  text-body: '#555555'
  text-muted: '#9EA0A3'
  dark-section: '#020202'
  line: '#E0DFDC'
  accent-1: '#EBECEC'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 34px
    fontWeight: 800
    lineHeight: 1.0
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  title-band:
    backgroundColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 64px
  vertical-copy:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-md}'
    height: 180px
  staff-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 420px
  circle-more:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.full}'
    height: 32px
  next-circle:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 200px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 64px
  button-secondary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 64px
  next-label:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 20px
---

# DESIGN.md — 赤×白の製造業 採用インタビュー LP（Bold Red Manufacturing Recruit Interview LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、信頼・誠実、クール・先進的
- **キーワード**: 鮮烈な赤・白とライトグレー・縦書き黒帯コピー・大きな英字見出し・社員写真・製品の白背景写真
- **地の質感**: フラットで紙のような白地。うすいグレーの面と細かいドット地で奥行きを出す
- **形**: 角ばった長方形の帯とカードに、赤い正円をアクセントとして合わせる
- **温度感**: 白地は冷たいが、赤と人の写真で熱量がある

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EA061D` | ブランド赤（見出し帯・円・CTA） | 8% | 画素の実測 |
| `background` | `#FEFEFE` | ページの地 | 45% | 画素の実測 |
| `background-alt` | `#FFFFFF` | セクション背景のライトグレー | 15% | 画素の実測 |
| `surface` | `#ECEEED` | 写真カードの淡いグレー | 8% | 画素の実測 |
| `cta` | `#EB061D` | エントリーボタン面 | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#252526` | 見出し・氏名の黒 | 2% | 画素の実測 |
| `text-body` | `#555555` | 本文グレー | 2% | 推定 |
| `text-muted` | `#9EA0A3` | 注記・所属の淡いグレー | 0% | 画素の主要色に補正 |
| `dark-section` | `#020202` | 縦書きコピーの黒帯 | 1% | 画素の実測 |
| `line` | `#E0DFDC` | 区切り線 | 0% | 画素の主要色に補正 |
| `accent-1` | `#EBECEC` | 大きな透かし英字 | 1% | 画素の主要色に補正 |

- 地は白とライトグレーの2色で区切る
- 赤は見出し帯・番号・円ボタン・CTAだけに使う
- 赤を使う面は大きく、濃さを変えない
- 縦書きコピーは黒帯の上に白文字
- 背景の大きな英字はごく淡いグレーで透かす
- 本文はグレー、氏名と見出しは黒にして強弱をつける

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ページタイトルの英字 | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0.0em |
| `headline-lg` | 赤い導入キャッチ | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em |
| `headline-md` | 写真上の縦書きコピー | ゴシック | Noto Sans JP | 900 | 18px | 1.3 | 0.05em |
| `headline-sm` | 社員の氏名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em |
| `accent` | #01のような番号 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.0 | 0.0em |
| `body-md` | 本文・紹介文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em |
| `note` | 所属・英字の小ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.4 | 0.1em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.08em |

- 英字見出しは極太で大きく、和文の小見出しを下に添える
- 縦書きコピーは2行にして黒帯に入れる
- 番号は赤の英字で写真の左下に重ねる
- 英字ラベルは字間を広めにとる
- 本文は13px前後、行間を広くとる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。社員カードは縦に並べる
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- タイトル帯は左端から伸ばし、右側に写真を重ねる
- 社員カードは写真の下に氏名・所属・紹介文の順
- 次のコンテンツへの誘導は全幅の写真に赤い円を重ねる
- 最下部のCTAは白と赤のボタンを横に並べる
- フッターはリンク群とバナーを格子状に並べる

## Elevation & Depth

- 影はほぼ使わずフラットに組む
- 奥行きは写真の重なりと透かし英字で出す
- 赤い円ボタンにだけごく薄い影をつけてもよい

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物は四角いグレー面の上に切り抜き、製品は白背景で並べる
- **セクション境界**: 直線で背景色を切り替える。帯は四角
- カードとボタンは角ばった四角
- 丸いのは赤い円のアクセントだけ
- CTAボタンは枠線つきの長方形

## Components

- **赤いタイトル帯**（`title-band`）: 画面左から伸びる赤い帯に、白い極太英字と和文サブタイトルを入れる
- **縦書き黒帯コピー**（`vertical-copy`）: 人物写真の右上に重ねる縦書きの黒帯2行
- **社員カード**（`staff-card`）: グレー面に切り抜いた人物、赤い番号、氏名、赤い丸の詳細ボタンを入れる
- **赤丸の詳細ボタン**（`circle-more`）: 白い三点リーダーを入れた小さな赤い正円
- **次ページへの大きな赤円**（`next-circle`）: 全幅の写真の中央に置く赤い円。アイコン・見出し・矢印を入れる
- **エントリーボタン**（`button-primary`）: 赤い面にアイコンと白文字を入れた長方形のボタン
- **募集要項ボタン**（`button-secondary`）: 白い面に赤い枠線と赤いアイコンをつけたボタン
- **NEXT CONTENTS ラベル**（`next-label`）: 写真の右上に貼る赤い小さな帯ラベル

## Do's and Don'ts

**Do**
- 赤は大きな面で大胆に使う
- 人物写真は笑顔や身振りのある全身寄りで撮る
- 番号と英字ラベルで情報に順序をつける
- 白とグレーの面を交互に置いてリズムをつくる
- CTAの前に下向き矢印を並べて視線を集める

**Don't**
- 赤以外の強い色を使わない
- 角丸を大きくしてやわらかくしない
- グラデーションや装飾的な影を使わない
- 本文を赤で長く書かない
- 写真の上に細い文字を直接載せない

## Page Structure

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

1. **ヘッダー**（ナビゲーションとエントリー導線）: 白地に左ロゴ、右に赤い四角のENTRYボタン
2. **ファーストビュー**（インタビューページであることを示す）: 赤いタイトル帯と、右上に現場で働く人の写真
3. **導入文**（企画の趣旨を伝える）: 赤い太字キャッチ2行と短いグレー本文
4. **社員インタビュー一覧**（登場する社員を紹介する）: グレー地に切り抜き人物カードを2枚。縦書きコピーと赤い番号を重ねる
5. **次のコンテンツ誘導**（事業紹介ページへ回遊させる）: 製品を並べた全幅写真の中央に大きな赤円を置く
6. **エントリーCTA**（応募へ誘導する）: 透かし英字の上に赤い見出しを置き、矢印と白・赤2つのボタンを並べる
7. **フッター**（サイト内リンクと関連サイトへの導線）: ロゴ、赤い縦線つき見出しのリンク群、右に赤アイコンのボタン、下にバナーを並べる

## Imagery

- 人物は作業着やスーツ姿で、明るい表情か身振りのある写真にする
- 人物は淡いグレーの四角い面の上に切り抜いて置く
- 製品写真は白背景に俯瞰で並べ、赤い製品を1つ入れて差し色にする
- 人を描いた線画イラストに赤を少し入れて添える
- アイコンは白い線画を赤い円の中に置く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPではタイトル帯を全幅にし、写真はその下に配置する
- 社員カードは1列に縦積みする
- 赤円の誘導は写真の下に重ね、円の直径を160px程度にする
- CTAボタン2つは縦に並べ、全幅で表示する
- フッターのリンクは折りたたむか2列にする

## 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-80f4294d`（元 LP の URL から採番）
- **元 LP**: https://www.ypc-g.com/recruit/voice/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.ypc-g.com/recruit/voice/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

求人・採用紺×ピンクのぼかし球体が漂う薬局採用 LPNavy and Pink Gradient Orb Recruitment LP 求人・採用流体スプラッシュ×紺の自治体採用 LPFluid Paint Splash Public Recruitment LP 求人・採用鮮やかな青とネオン線画の新卒採用 LPVivid Blue Neon Line Recruit LP 求人・採用若葉グリーン×オレンジCTAの介護職採用LPFresh Green Care Recruitment LP 求人・採用ターコイズ×ネオン黄のスポーツ求人メディア LPSports Career Media Grid Magazine 求人・採用ティール×レモンの幾何学柄採用サイト LPTeal and Lemon Geometric Recruiting LP

配色

書体

セクション構成

部品

守ること

避けること

design.md 全文

DESIGN.md — 赤×白の製造業 採用インタビュー LP（Bold Red Manufacturing Recruit Interview LP）

Overview

Colors

Typography

Layout

Elevation & Depth

Shapes

Components

Do's and Don'ts

Page Structure

Imagery

Responsive Behavior

Agent Prompt Guide

出典と注意

似た LP の design.md

DESIGN.md — 赤×白の製造業採用インタビュー LP（Bold Red Manufacturing Recruit Interview LP）