赤地×白カードの手描き線画採用 LP

Bold Red Card Recruitment LP

真紅の地に、大きな角丸の白カードを左右交互にはみ出させて重ねていく新卒採用 LP。黒い太字の欧文見出しがカードの縁にかかり、モノクロに黄色を差した手描き人物イラストが添えられる。黒枠のピル型ボタンで、親しみと力強さを両立させている。

求人・採用力強い・インパクト親しみ・手作り感ポップ・元気SPPC

ダウンロード

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

COLORS

配色

地は常に真紅にし、内容は白カードに載せる
使う色は赤・白・黒の3色に限る。黄色はイラストにだけ差す
白カード内の強調は赤文字（数字・地名・英単語の頭文字）で行う
赤地の上の文章は白文字・中央揃えにする
ボタンは白地に黒枠と黒文字にし、赤地の上で目立たせる

TYPOGRAPHY

書体

displayFVの大コピー（手書き風の極太）手書き・筆／ Dela Gothic One 700 ／ 52px ／行間 1.3

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

headline-lgセクション名の欧文大見出し欧文サンセリフ／ Montserrat 800 ／ 40px ／行間 1.1

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

headline-md和文セクション見出し（縦書き含む）ゴシック／ Noto Sans JP 900 ／ 34px ／行間 1.2

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

headline-smカード内の小見出し・理念の英単語ゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.4

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

body-md本文ゴシック／ Noto Sans JP 700 ／ 12px ／行間 1.7

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

note補足・入社年ゴシック／ Noto Sans JP 500 ／ 9px ／行間 1.5

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

accentFVの縦書きサブコピー丸ゴシック／ Zen Maru Gothic 400 ／ 28px ／行間 1.6

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

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

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

欧文見出しは黒の極太で、文字間を広げて白カードの上端に半分かける
和文の見出しは縦書きにしてカードの左外に置くことがある
本文は太字寄りにし、字間を0.1em前後と広めにとる
理念リストは英単語の頭文字だけを赤くする
メッセージ文は中央揃えの短い改行で詩のように組む

PAGE STRUCTURE

セクション構成

ファーストビュー企業の想いを印象づける赤地に白の手書き風極太コピーと縦書きサブコピーを置き、モノクロ線画の手がバトンを渡す絵を添える
企業紹介理念体系を図で示す欧文見出しをカードにかけ、右寄せの白カードに理念図を収める
拠点紹介全国展開を伝える左付けの白カードにグレーの地図を置き、円形写真のピンと赤い地名を配す
理念・価値観大切にする考えを伝える縦書きの和文見出しを左外に置き、頭文字を赤くした英単語のリストを並べる
誇りの補足理念を短く締めるグレーの角丸ボックスにスタンプ風のマークを添える
仕事紹介業務内容と役割を説明する赤地に字間を広げた白見出しを置き、左右の白い縦線で挟んだ中央揃えの白文と主ボタンを並べる
社員インタビュー働く人を見せる斜めカット写真のカードを3枚、左右交互に配置する
メッセージ採用担当から学生へ呼びかける欧文見出しと円形の顔写真を置き、中央揃えの白カードに詩的な本文を組む
CTA募集要項へ誘導する広い赤地の中央に黒枠のピル型ボタンを1つだけ置く

COMPONENTS

部品

黒枠ピル主ボタン button-primary白地に黒の太枠を付け、黒文字に右向きの山括弧を添える
小型詳細ボタン button-smallインタビューカード内に置く、小さな黒枠のピル型ボタン
ヘッダーENTRY button-entry赤地に白枠と白文字で作るピル型ボタン。右上に固定する
はみ出し大角丸カード card-bleed片側を画面端に付けた白カード。左右交互に配置する
社員インタビューカード interview-card斜めにカットした写真と入社年・職種、黒線、詳細ボタンで構成する
はみ出し欧文見出し heading-overlap黒の極太欧文を、カード上端の赤地との境にまたがせる
理念リスト value-list頭文字を赤くした英単語、括弧書きの小さな和訳、本文の順に組む
グレー補足ボックス info-box淡いグレーの角丸ボックス。右上にロゴ風のスタンプを添える
円形写真の拠点ピン map-pinグレーの地図上に円形写真を置き、赤い線と赤い地名でつなぐ

守ること

地は真紅で統一し、白カードで情報を区切る
カードを左右交互にはみ出させて動きを出す
黒の線画イラストに黄色だけを差し、カードの角に添える
強調は赤文字に絞る
ボタンは黒枠のピル型に統一する

DON'T

避けること

グラデーションやドロップシャドウを使わない
青・緑などの第4色を面に使わない
カードを画面の中央に浮かせただけの均等配置にしない
写真を長方形のまま並べない
細い明朝体で見出しを組まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 赤地×白カードの手描き線画採用 LP（Bold Red Card Recruitment LP）

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

Overview

業種: 求人・採用／ 雰囲気: 力強い・インパクト、親しみ・手作り感、ポップ・元気
キーワード: 真紅の全面地・白い大角丸カード・左右交互のはみ出し・黒の太字欧文見出し・手描き線画イラスト・黒枠ピルボタン
地の質感: フラットなベタ塗り。グラデーションや影は使わない
形: 片側だけ画面端に接する大きな角丸カード。写真は斜めにカットした平行四辺形か円形
温度感: 温かく情熱的。赤の熱量を白と黒で引き締める

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#E70012`	全面の地色・ブランドレッド	40%	画素の実測
`background`	`#FFFFFF`	白カードの面	32%	画素の主要色に補正
`background-alt`	`#EFEFEF`	カード間に見える淡いグレー地・補足ボックス	5%	画素の実測
`text`	`#050202`	見出しと本文の黒	3%	画素の実測
`on-primary`	`#FFFFFF`	赤地の上の白文字	2%	画素の主要色に補正
`accent-1`	`#E70012`	強調数字・地名・頭文字の赤文字	1%	画素の主要色に補正
`cta`	`#FEFFFE`	主ボタンの白い面	1%	画素の実測
`on-cta`	`#0F0D0F`	ボタン文字・黒枠	0%	画素の実測
`accent-2`	`#F5C400`	イラストの差し色の黄色	0%	推定
`line`	`#010101`	写真カード横の黒い区切り線	0%	画素の実測
`text-muted`	`#DCDEDD`	地図のグレー	2%	画素の実測

地は常に真紅にし、内容は白カードに載せる
使う色は赤・白・黒の3色に限る。黄色はイラストにだけ差す
白カード内の強調は赤文字（数字・地名・英単語の頭文字）で行う
赤地の上の文章は白文字・中央揃えにする
ボタンは白地に黒枠と黒文字にし、赤地の上で目立たせる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大コピー（手書き風の極太）	手書き・筆	Dela Gothic One	700	52px	1.3	0.02em
`headline-lg`	セクション名の欧文大見出し	欧文サンセリフ	Montserrat	800	40px	1.1	0.08em
`headline-md`	和文セクション見出し（縦書き含む）	ゴシック	Noto Sans JP	900	34px	1.2	0.05em
`headline-sm`	カード内の小見出し・理念の英単語	ゴシック	Noto Sans JP	700	17px	1.4	0.08em
`body-md`	本文	ゴシック	Noto Sans JP	700	12px	1.7	0.1em
`note`	補足・入社年	ゴシック	Noto Sans JP	500	9px	1.5	0.1em
`accent`	FVの縦書きサブコピー	丸ゴシック	Zen Maru Gothic	400	28px	1.6	0.1em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	14px	1.0	0.15em

欧文見出しは黒の極太で、文字間を広げて白カードの上端に半分かける
和文の見出しは縦書きにしてカードの左外に置くことがある
本文は太字寄りにし、字間を0.1em前後と広めにとる
理念リストは英単語の頭文字だけを赤くする
メッセージ文は中央揃えの短い改行で詩のように組む
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
白カードは片側を画面端まで伸ばし、反対側だけ角丸にする
カードの付く側を左右交互に入れ替えてリズムを作る
セクション見出しはカード上端から少し飛び出させる
手描きイラストはカードの角に重ねて配置する
ボタンは横幅の約65%で中央に置く

Elevation & Depth

影は使わず、色面の重なりだけで奥行きを出す
ボタンは2px程度の黒枠で浮き立たせる

Shapes

角丸: 小 8px ／中 20px ／大 40px。ボタンはピル型。
写真の切り抜き: 社員写真は斜辺を持つ平行四辺形に切り抜く。拠点や人物は円形にする
セクション境界: 直線の区切りは使わず、大角丸カードの端で地色を切り替える
カードの角丸は40px前後と大きくとる
ボタンとリンクボタンはすべて黒枠のピル型にする
写真の斜めカットは左右で向きを反転させる

Components

黒枠ピル主ボタン（button-primary）: 白地に黒の太枠を付け、黒文字に右向きの山括弧を添える
小型詳細ボタン（button-small）: インタビューカード内に置く、小さな黒枠のピル型ボタン
ヘッダーENTRY（button-entry）: 赤地に白枠と白文字で作るピル型ボタン。右上に固定する
はみ出し大角丸カード（card-bleed）: 片側を画面端に付けた白カード。左右交互に配置する
社員インタビューカード（interview-card）: 斜めにカットした写真と入社年・職種、黒線、詳細ボタンで構成する
はみ出し欧文見出し（heading-overlap）: 黒の極太欧文を、カード上端の赤地との境にまたがせる
理念リスト（value-list）: 頭文字を赤くした英単語、括弧書きの小さな和訳、本文の順に組む
グレー補足ボックス（info-box）: 淡いグレーの角丸ボックス。右上にロゴ風のスタンプを添える
円形写真の拠点ピン（map-pin）: グレーの地図上に円形写真を置き、赤い線と赤い地名でつなぐ

Do's and Don'ts

Do - 地は真紅で統一し、白カードで情報を区切る - カードを左右交互にはみ出させて動きを出す - 黒の線画イラストに黄色だけを差し、カードの角に添える - 強調は赤文字に絞る - ボタンは黒枠のピル型に統一する

Don't - グラデーションやドロップシャドウを使わない - 青・緑などの第4色を面に使わない - カードを画面の中央に浮かせただけの均等配置にしない - 写真を長方形のまま並べない - 細い明朝体で見出しを組まない

Page Structure

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

ファーストビュー（企業の想いを印象づける）: 赤地に白の手書き風極太コピーと縦書きサブコピーを置き、モノクロ線画の手がバトンを渡す絵を添える
企業紹介（理念体系を図で示す）: 欧文見出しをカードにかけ、右寄せの白カードに理念図を収める
拠点紹介（全国展開を伝える）: 左付けの白カードにグレーの地図を置き、円形写真のピンと赤い地名を配す
理念・価値観（大切にする考えを伝える）: 縦書きの和文見出しを左外に置き、頭文字を赤くした英単語のリストを並べる
誇りの補足（理念を短く締める）: グレーの角丸ボックスにスタンプ風のマークを添える
仕事紹介（業務内容と役割を説明する）: 赤地に字間を広げた白見出しを置き、左右の白い縦線で挟んだ中央揃えの白文と主ボタンを並べる
社員インタビュー（働く人を見せる）: 斜めカット写真のカードを3枚、左右交互に配置する
メッセージ（採用担当から学生へ呼びかける）: 欧文見出しと円形の顔写真を置き、中央揃えの白カードに詩的な本文を組む
CTA（募集要項へ誘導する）: 広い赤地の中央に黒枠のピル型ボタンを1つだけ置く

Imagery

黒のラフな線画で人物や手を描き、服などに黄色を一点だけ差す
社員写真は明るいオフィスで撮った自然な笑顔の上半身にする
写真は斜めカットか円形に切り抜く
地図や図版はグレーと赤だけで単純化する
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC でも 1 カラムの縦構成を保ち、カードを中央寄りに広げる
PC の FV では縦書きサブコピーを横書き 1 行に変える
PC の理念リストは英単語と和訳を横並びにする
PC では写真カードを大きくし、文字をやや小さく見せて余白を増やす

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 Card Recruitment LP
description: 真紅の地に、大きな角丸の白カードを左右交互にはみ出させて重ねていく新卒採用 LP。黒い太字の欧文見出しがカードの縁にかかり、モノクロに黄色を差した手描き人物イラストが添えられる。黒枠のピル型ボタンで、親しみと力強さを両立させている。
colors:
  primary: '#E70012'
  background: '#FFFFFF'
  background-alt: '#EFEFEF'
  text: '#050202'
  on-primary: '#FFFFFF'
  accent-1: '#E70012'
  cta: '#FEFFFE'
  on-cta: '#0F0D0F'
  accent-2: '#F5C400'
  line: '#010101'
  text-muted: '#DCDEDD'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.1em
  accent:
    fontFamily: Zen Maru Gothic
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.15em
rounded:
  sm: 8px
  md: 20px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 60px
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: 44px
  button-small:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 24px
  button-entry:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 32px
  card-bleed:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 600px
  interview-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 200px
  heading-overlap:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 50px
  value-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 100px
  info-box:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 130px
  map-pin:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 70px
---

# DESIGN.md — 赤地×白カードの手描き線画 採用 LP（Bold Red Card Recruitment LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、親しみ・手作り感、ポップ・元気
- **キーワード**: 真紅の全面地・白い大角丸カード・左右交互のはみ出し・黒の太字欧文見出し・手描き線画イラスト・黒枠ピルボタン
- **地の質感**: フラットなベタ塗り。グラデーションや影は使わない
- **形**: 片側だけ画面端に接する大きな角丸カード。写真は斜めにカットした平行四辺形か円形
- **温度感**: 温かく情熱的。赤の熱量を白と黒で引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E70012` | 全面の地色・ブランドレッド | 40% | 画素の実測 |
| `background` | `#FFFFFF` | 白カードの面 | 32% | 画素の主要色に補正 |
| `background-alt` | `#EFEFEF` | カード間に見える淡いグレー地・補足ボックス | 5% | 画素の実測 |
| `text` | `#050202` | 見出しと本文の黒 | 3% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 赤地の上の白文字 | 2% | 画素の主要色に補正 |
| `accent-1` | `#E70012` | 強調数字・地名・頭文字の赤文字 | 1% | 画素の主要色に補正 |
| `cta` | `#FEFFFE` | 主ボタンの白い面 | 1% | 画素の実測 |
| `on-cta` | `#0F0D0F` | ボタン文字・黒枠 | 0% | 画素の実測 |
| `accent-2` | `#F5C400` | イラストの差し色の黄色 | 0% | 推定 |
| `line` | `#010101` | 写真カード横の黒い区切り線 | 0% | 画素の実測 |
| `text-muted` | `#DCDEDD` | 地図のグレー | 2% | 画素の実測 |

- 地は常に真紅にし、内容は白カードに載せる
- 使う色は赤・白・黒の3色に限る。黄色はイラストにだけ差す
- 白カード内の強調は赤文字（数字・地名・英単語の頭文字）で行う
- 赤地の上の文章は白文字・中央揃えにする
- ボタンは白地に黒枠と黒文字にし、赤地の上で目立たせる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大コピー（手書き風の極太） | 手書き・筆 | Dela Gothic One | 700 | 52px | 1.3 | 0.02em |
| `headline-lg` | セクション名の欧文大見出し | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.08em |
| `headline-md` | 和文セクション見出し（縦書き含む） | ゴシック | Noto Sans JP | 900 | 34px | 1.2 | 0.05em |
| `headline-sm` | カード内の小見出し・理念の英単語 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.08em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.7 | 0.1em |
| `note` | 補足・入社年 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.1em |
| `accent` | FVの縦書きサブコピー | 丸ゴシック | Zen Maru Gothic | 400 | 28px | 1.6 | 0.1em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.15em |

- 欧文見出しは黒の極太で、文字間を広げて白カードの上端に半分かける
- 和文の見出しは縦書きにしてカードの左外に置くことがある
- 本文は太字寄りにし、字間を0.1em前後と広めにとる
- 理念リストは英単語の頭文字だけを赤くする
- メッセージ文は中央揃えの短い改行で詩のように組む
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
- 白カードは片側を画面端まで伸ばし、反対側だけ角丸にする
- カードの付く側を左右交互に入れ替えてリズムを作る
- セクション見出しはカード上端から少し飛び出させる
- 手描きイラストはカードの角に重ねて配置する
- ボタンは横幅の約65%で中央に置く

## Elevation & Depth

- 影は使わず、色面の重なりだけで奥行きを出す
- ボタンは2px程度の黒枠で浮き立たせる

## Shapes

- **角丸**: 小 8px ／ 中 20px ／ 大 40px。ボタンはピル型。
- **写真の切り抜き**: 社員写真は斜辺を持つ平行四辺形に切り抜く。拠点や人物は円形にする
- **セクション境界**: 直線の区切りは使わず、大角丸カードの端で地色を切り替える
- カードの角丸は40px前後と大きくとる
- ボタンとリンクボタンはすべて黒枠のピル型にする
- 写真の斜めカットは左右で向きを反転させる

## Components

- **黒枠ピル主ボタン**（`button-primary`）: 白地に黒の太枠を付け、黒文字に右向きの山括弧を添える
- **小型詳細ボタン**（`button-small`）: インタビューカード内に置く、小さな黒枠のピル型ボタン
- **ヘッダーENTRY**（`button-entry`）: 赤地に白枠と白文字で作るピル型ボタン。右上に固定する
- **はみ出し大角丸カード**（`card-bleed`）: 片側を画面端に付けた白カード。左右交互に配置する
- **社員インタビューカード**（`interview-card`）: 斜めにカットした写真と入社年・職種、黒線、詳細ボタンで構成する
- **はみ出し欧文見出し**（`heading-overlap`）: 黒の極太欧文を、カード上端の赤地との境にまたがせる
- **理念リスト**（`value-list`）: 頭文字を赤くした英単語、括弧書きの小さな和訳、本文の順に組む
- **グレー補足ボックス**（`info-box`）: 淡いグレーの角丸ボックス。右上にロゴ風のスタンプを添える
- **円形写真の拠点ピン**（`map-pin`）: グレーの地図上に円形写真を置き、赤い線と赤い地名でつなぐ

## Do's and Don'ts

**Do**
- 地は真紅で統一し、白カードで情報を区切る
- カードを左右交互にはみ出させて動きを出す
- 黒の線画イラストに黄色だけを差し、カードの角に添える
- 強調は赤文字に絞る
- ボタンは黒枠のピル型に統一する

**Don't**
- グラデーションやドロップシャドウを使わない
- 青・緑などの第4色を面に使わない
- カードを画面の中央に浮かせただけの均等配置にしない
- 写真を長方形のまま並べない
- 細い明朝体で見出しを組まない

## Page Structure

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

1. **ファーストビュー**（企業の想いを印象づける）: 赤地に白の手書き風極太コピーと縦書きサブコピーを置き、モノクロ線画の手がバトンを渡す絵を添える
2. **企業紹介**（理念体系を図で示す）: 欧文見出しをカードにかけ、右寄せの白カードに理念図を収める
3. **拠点紹介**（全国展開を伝える）: 左付けの白カードにグレーの地図を置き、円形写真のピンと赤い地名を配す
4. **理念・価値観**（大切にする考えを伝える）: 縦書きの和文見出しを左外に置き、頭文字を赤くした英単語のリストを並べる
5. **誇りの補足**（理念を短く締める）: グレーの角丸ボックスにスタンプ風のマークを添える
6. **仕事紹介**（業務内容と役割を説明する）: 赤地に字間を広げた白見出しを置き、左右の白い縦線で挟んだ中央揃えの白文と主ボタンを並べる
7. **社員インタビュー**（働く人を見せる）: 斜めカット写真のカードを3枚、左右交互に配置する
8. **メッセージ**（採用担当から学生へ呼びかける）: 欧文見出しと円形の顔写真を置き、中央揃えの白カードに詩的な本文を組む
9. **CTA**（募集要項へ誘導する）: 広い赤地の中央に黒枠のピル型ボタンを1つだけ置く

## Imagery

- 黒のラフな線画で人物や手を描き、服などに黄色を一点だけ差す
- 社員写真は明るいオフィスで撮った自然な笑顔の上半身にする
- 写真は斜めカットか円形に切り抜く
- 地図や図版はグレーと赤だけで単純化する
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも 1 カラムの縦構成を保ち、カードを中央寄りに広げる
- PC の FV では縦書きサブコピーを横書き 1 行に変える
- PC の理念リストは英単語と和訳を横並びにする
- PC では写真カードを大きくし、文字をやや小さく見せて余白を増やす

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

SOURCE

出典と注意

元の LP: https://recruit-smc.work/（公開状況により表示できない場合があります）
この 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 Card Recruitment 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 Card Recruitment LP）