深紅グラデと灰の誠実なIT中途採用LP

Crimson Gradient Corporate Recruit LP

深紅から暗赤へのグラデーション帯と、白・薄グレーの地を交互に重ねたIT企業の中途採用LP。写真の上に暗いオーバーレイを敷いた資料請求ブロックを繰り返し、赤い光沢のピル型CTAで誘導する。太字ゴシックの見出しに、四角・ひし形・矢印の赤い記号を組み合わせ、情報を整理して見せる。

求人・採用信頼・誠実力強い・インパクト情報量多め・訴求型SPPC

ダウンロード

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

COLORS

配色

赤い帯は上から下へ深紅→暗赤の縦グラデーションにする
白地と薄グレー地を交互に置いてセクションを区切る
資料請求ブロックは暗いグレーのオーバーレイ写真の上に白カードを載せる
赤は見出しの一部語句・記号・CTAに絞り、本文には使わない
赤い帯の上は白文字か、薄ピンクのパネルで読みやすくする
表の見出しセルは濃茶グレーの地に白文字

TYPOGRAPHY

書体

displayFVの大コピー（白帯・赤帯の上）ゴシック／ Noto Sans JP 900 ／ 30px ／行間 1.3

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

headline-lg資料請求ブロックの大見出し（赤い下線つき）ゴシック／ Noto Sans JP 900 ／ 30px ／行間 1.4

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

headline-mdセクション見出しゴシック／ Noto Sans JP 700 ／ 23px ／行間 1.5

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

headline-smサービス分類の赤い小見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.4

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

body-lgメリットや事例の箇条書きゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.6

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

body-mdリード文・表のセルゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.8

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

note※の注釈ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.7

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

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

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

書体は太いゴシック1種類に統一する
箇条書きは本文も太字で、詰まった力強い印象にする
大見出しの中の重要な語句だけ赤くする
資料請求の見出しは白文字に赤い下線を引く
リード文は中央揃え、箇条書きは左揃え

PAGE STRUCTURE

セクション構成

ファーストビュー対象者と募集職種を伝える社員写真の上に白帯の大コピーと赤帯の職種名を重ね、白丸の吹き出しで対象者を示す
働くメリット入社するメリットを 4 つ示す赤のグラデ帯の上に白い見出しを置き、薄ピンクのパネルに赤い四角の記号で箇条書きする
プロジェクト事例仕事の規模感を伝える白地に赤い L 字罫線を置き、赤いひし形の記号で事例を並べる
資料請求CTA会社説明資料のダウンロードへ誘導する暗いオーバーレイ写真の上に吹き出しラベルと下線つき大見出しを置き、赤い見出しタブ付きの白カードに矢印リストと資料サムネイル、光沢CTAを並べる
キャンペーンバナー入社特典を告知する横長のバナー画像と、その下に右矢印つきのテキストリンクを置く
募集職種職種ごとの詳細ページへ導くグレーのカードを縦に並べ、右端に赤枠の詳細ボタンを置く
提供ソリューション事業の幅広さを示すグレー地にリード文と、赤いひし形の小見出しつきの表を 2 列に組む
取引業界取引先業界の広さを示す赤のグラデ帯に白い角丸アイコンタイルを 3 列×4 段で並べる
資料請求CTA（再掲）最後にもう一度ダウンロードを促す中盤の資料請求ブロックと同じ構成で繰り返す

COMPONENTS

部品

光沢のある赤いピル型CTA button-primary画面幅いっぱいの赤いピル型。上部が明るく、下に影を付ける
詳細を見るボタン button-outline白地に赤い枠と赤い文字の小さなピル型ボタン
薄ピンクのメリットパネル tinted-panel赤帯の上に置き、赤い四角の記号で 4 項目を並べる
L字のコーナー罫線 corner-frame左上と右下に赤い太線の L 字を置き、事例リストを挟む
白枠の吹き出しラベル pill-label暗い地の上に置く、白枠と白文字のピル型ラベル。下に小さなしっぽを付ける
赤いピル型の見出しタブ heading-tab白カードの上端に重ねる赤いピル型の見出し
職種カード job-card薄グレーの横長カード。左に職種名、右に詳細ボタンを置く
縦見出しつきサービス表 service-table左に縦書きの濃茶セル、右に罫線で区切った項目行を並べる
業界アイコンタイル icon-tile白い角丸の正方形に濃茶のピクトグラムを入れ、下に白文字のラベルを付ける

守ること

赤い帯には必ず縦グラデーションを付ける
資料請求ブロックはページの中ほどと最後に繰り返す
リストの記号は赤い四角・ひし形・矢印で使い分ける
白地とグレー地を交互にしてリズムを作る
FVでは写真の上に白帯や赤帯の帯状テロップでコピーを載せる

DON'T

避けること

丸ゴシックや明朝を使わない
赤以外の鮮やかな色を足さない
本文の長い段落を赤文字にしない
パステル調や手描きの装飾を入れない
CTAをフラットな四角ボタンにしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深紅グラデと灰の誠実なIT中途採用LP（Crimson Gradient Corporate Recruit LP）

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

Overview

業種: 求人・採用／ 雰囲気: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
キーワード: 深紅グラデーション・コーポレート・太字ゴシック・赤い記号マーカー・資料請求の繰り返し・表組み型サービス一覧
地の質感: フラットな面に縦グラデーションの赤帯。写真には暗いグレーのオーバーレイを敷く
形: 角丸は小〜中のカード、CTAはピル型、L字の赤いコーナー罫線
温度感: 赤の熱量と、グレー・白の冷静さが半々

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#D70127`	ブランド赤（見出し強調・グラデ帯の起点）	11%	画素の実測
`dark-section`	`#7A0F23`	グラデ帯の下端の暗赤	5%	画素の実測
`cta`	`#B40222`	資料DLボタンの赤	2%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`background`	`#FFFFFF`	基本の白地	33%	画素の実測
`background-alt`	`#FEFEFE`	薄グレーの地・職種カード	13%	画素の実測
`tint-1`	`#F2D2D7`	赤帯の上に置く薄ピンクのパネル	7%	画素の実測
`surface`	`#605953`	資料請求ブロックの暗いベージュグレー地	8%	画素の実測
`text`	`#191919`	見出し・本文の黒	3%	画素の実測
`accent-1`	`#4C4442`	表の縦見出しセル・アイコンの濃茶グレー	2%	画素の実測
`line`	`#4A4140`	表の罫線・枠	0%	画素の実測
`on-dark`	`#FEFCFC`	赤・暗い地の上の白文字	1%	画素の実測
`text-muted`	`#5A534F`	注釈のグレー文字	0%	画素の主要色に補正

赤い帯は上から下へ深紅→暗赤の縦グラデーションにする
白地と薄グレー地を交互に置いてセクションを区切る
資料請求ブロックは暗いグレーのオーバーレイ写真の上に白カードを載せる
赤は見出しの一部語句・記号・CTAに絞り、本文には使わない
赤い帯の上は白文字か、薄ピンクのパネルで読みやすくする
表の見出しセルは濃茶グレーの地に白文字

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大コピー（白帯・赤帯の上）	ゴシック	Noto Sans JP	900	30px	1.3	0.02em
`headline-lg`	資料請求ブロックの大見出し（赤い下線つき）	ゴシック	Noto Sans JP	900	30px	1.4	0.02em
`headline-md`	セクション見出し	ゴシック	Noto Sans JP	700	23px	1.5	0.03em
`headline-sm`	サービス分類の赤い小見出し	ゴシック	Noto Sans JP	700	15px	1.4	0.0em
`body-lg`	メリットや事例の箇条書き	ゴシック	Noto Sans JP	700	18px	1.6	0.03em
`body-md`	リード文・表のセル	ゴシック	Noto Sans JP	500	14px	1.8	0.03em
`note`	※の注釈	ゴシック	Noto Sans JP	400	13px	1.7	0.0em
`label-button`	CTAボタンの文字	ゴシック	Noto Sans JP	700	17px	1.3	0.03em

書体は太いゴシック1種類に統一する
箇条書きは本文も太字で、詰まった力強い印象にする
大見出しの中の重要な語句だけ赤くする
資料請求の見出しは白文字に赤い下線を引く
リード文は中央揃え、箇条書きは左揃え
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。業界アイコンは 3 列、サービス表は 2 列
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
赤帯の中にパネルを置くときは左右に 16px の余白を空ける
職種一覧は縦に並べたグレーのカード。右端に詳細ボタンを置く
サービス一覧は縦見出しセルつきの表を 2 列に組む
資料請求ブロックは本文中で 2 回繰り返す
事例リストは L 字のコーナー罫線 2 本で上下を挟む

Elevation & Depth

基本はフラットで影を付けない
CTAボタンだけ下に濃い影と上部のハイライトを付けて立体的にする
白カードは暗い写真地の上に影なしで載せる

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンはピル型。
写真の切り抜き: 写真は角丸なしの全幅で使い、暗いオーバーレイを重ねる。アイコンは白い角丸の正方形タイルに入れる
セクション境界: 直線で区切り、色の切り替えだけで分ける
CTA・サブボタン・吹き出しラベルはピル型にする
パネルとアイコンタイルの角丸は 12〜16px
表と職種カードは角丸 0〜4px の四角にする
メリットの記号は赤い正方形、事例の記号は赤いひし形にする

Components

光沢のある赤いピル型CTA（button-primary）: 画面幅いっぱいの赤いピル型。上部が明るく、下に影を付ける
詳細を見るボタン（button-outline）: 白地に赤い枠と赤い文字の小さなピル型ボタン
薄ピンクのメリットパネル（tinted-panel）: 赤帯の上に置き、赤い四角の記号で 4 項目を並べる
L字のコーナー罫線（corner-frame）: 左上と右下に赤い太線の L 字を置き、事例リストを挟む
白枠の吹き出しラベル（pill-label）: 暗い地の上に置く、白枠と白文字のピル型ラベル。下に小さなしっぽを付ける
赤いピル型の見出しタブ（heading-tab）: 白カードの上端に重ねる赤いピル型の見出し
職種カード（job-card）: 薄グレーの横長カード。左に職種名、右に詳細ボタンを置く
縦見出しつきサービス表（service-table）: 左に縦書きの濃茶セル、右に罫線で区切った項目行を並べる
業界アイコンタイル（icon-tile）: 白い角丸の正方形に濃茶のピクトグラムを入れ、下に白文字のラベルを付ける

Do's and Don'ts

Do - 赤い帯には必ず縦グラデーションを付ける - 資料請求ブロックはページの中ほどと最後に繰り返す - リストの記号は赤い四角・ひし形・矢印で使い分ける - 白地とグレー地を交互にしてリズムを作る - FVでは写真の上に白帯や赤帯の帯状テロップでコピーを載せる

Don't - 丸ゴシックや明朝を使わない - 赤以外の鮮やかな色を足さない - 本文の長い段落を赤文字にしない - パステル調や手描きの装飾を入れない - CTAをフラットな四角ボタンにしない

Page Structure

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

ファーストビュー（対象者と募集職種を伝える）: 社員写真の上に白帯の大コピーと赤帯の職種名を重ね、白丸の吹き出しで対象者を示す
働くメリット（入社するメリットを 4 つ示す）: 赤のグラデ帯の上に白い見出しを置き、薄ピンクのパネルに赤い四角の記号で箇条書きする
プロジェクト事例（仕事の規模感を伝える）: 白地に赤い L 字罫線を置き、赤いひし形の記号で事例を並べる
資料請求CTA（会社説明資料のダウンロードへ誘導する）: 暗いオーバーレイ写真の上に吹き出しラベルと下線つき大見出しを置き、赤い見出しタブ付きの白カードに矢印リストと資料サムネイル、光沢CTAを並べる
キャンペーンバナー（入社特典を告知する）: 横長のバナー画像と、その下に右矢印つきのテキストリンクを置く
募集職種（職種ごとの詳細ページへ導く）: グレーのカードを縦に並べ、右端に赤枠の詳細ボタンを置く
提供ソリューション（事業の幅広さを示す）: グレー地にリード文と、赤いひし形の小見出しつきの表を 2 列に組む
取引業界（取引先業界の広さを示す）: 赤のグラデ帯に白い角丸アイコンタイルを 3 列×4 段で並べる
資料請求CTA（再掲）（最後にもう一度ダウンロードを促す）: 中盤の資料請求ブロックと同じ構成で繰り返す

Imagery

スーツやジャケット姿の社員が笑顔で話す、明るいオフィスの写真
資料請求の背景はPC作業中の人物写真にグレーのオーバーレイを重ねる
アイコンは濃茶 1 色の太いピクトグラム
資料のサムネイルはスライドを数枚重ねて見せる
記号は赤い四角・ひし形・矢印のシンプルな図形
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは中央に約 70% 幅で配置し、文字を小さく抑える
PCでは職種カードを 2 列にする
PCではサービス表を 4 列にする
PCでは業界アイコンを 6 列にする
PCでは資料請求カードを左にリスト、右にサムネイルの 2 カラムにする
PCではメリットの箇条書きを各 1 行にまとめる

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: Crimson Gradient Corporate Recruit LP
description: 深紅から暗赤へのグラデーション帯と、白・薄グレーの地を交互に重ねたIT企業の中途採用LP。写真の上に暗いオーバーレイを敷いた資料請求ブロックを繰り返し、赤い光沢のピル型CTAで誘導する。太字ゴシックの見出しに、四角・ひし形・矢印の赤い記号を組み合わせ、情報を整理して見せる。
colors:
  primary: '#D70127'
  dark-section: '#7A0F23'
  cta: '#B40222'
  on-cta: '#FFFFFF'
  background: '#FFFFFF'
  background-alt: '#FEFEFE'
  tint-1: '#F2D2D7'
  surface: '#605953'
  text: '#191919'
  accent-1: '#4C4442'
  line: '#4A4140'
  on-dark: '#FEFCFC'
  text-muted: '#5A534F'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 23px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 72px
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: 60px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 32px
  tinted-panel:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.lg}'
    height: 540px
  corner-frame:
    textColor: '{colors.primary}'
    height: 40px
  pill-label:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 36px
  heading-tab:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 50px
  job-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 84px
  service-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 300px
  icon-tile:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 100px
---

# DESIGN.md — 深紅グラデと灰の誠実なIT中途採用LP（Crimson Gradient Corporate Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 深紅グラデーション・コーポレート・太字ゴシック・赤い記号マーカー・資料請求の繰り返し・表組み型サービス一覧
- **地の質感**: フラットな面に縦グラデーションの赤帯。写真には暗いグレーのオーバーレイを敷く
- **形**: 角丸は小〜中のカード、CTAはピル型、L字の赤いコーナー罫線
- **温度感**: 赤の熱量と、グレー・白の冷静さが半々

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#D70127` | ブランド赤（見出し強調・グラデ帯の起点） | 11% | 画素の実測 |
| `dark-section` | `#7A0F23` | グラデ帯の下端の暗赤 | 5% | 画素の実測 |
| `cta` | `#B40222` | 資料DLボタンの赤 | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 33% | 画素の実測 |
| `background-alt` | `#FEFEFE` | 薄グレーの地・職種カード | 13% | 画素の実測 |
| `tint-1` | `#F2D2D7` | 赤帯の上に置く薄ピンクのパネル | 7% | 画素の実測 |
| `surface` | `#605953` | 資料請求ブロックの暗いベージュグレー地 | 8% | 画素の実測 |
| `text` | `#191919` | 見出し・本文の黒 | 3% | 画素の実測 |
| `accent-1` | `#4C4442` | 表の縦見出しセル・アイコンの濃茶グレー | 2% | 画素の実測 |
| `line` | `#4A4140` | 表の罫線・枠 | 0% | 画素の実測 |
| `on-dark` | `#FEFCFC` | 赤・暗い地の上の白文字 | 1% | 画素の実測 |
| `text-muted` | `#5A534F` | 注釈のグレー文字 | 0% | 画素の主要色に補正 |

- 赤い帯は上から下へ深紅→暗赤の縦グラデーションにする
- 白地と薄グレー地を交互に置いてセクションを区切る
- 資料請求ブロックは暗いグレーのオーバーレイ写真の上に白カードを載せる
- 赤は見出しの一部語句・記号・CTAに絞り、本文には使わない
- 赤い帯の上は白文字か、薄ピンクのパネルで読みやすくする
- 表の見出しセルは濃茶グレーの地に白文字

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大コピー（白帯・赤帯の上） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em |
| `headline-lg` | 資料請求ブロックの大見出し（赤い下線つき） | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.02em |
| `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 23px | 1.5 | 0.03em |
| `headline-sm` | サービス分類の赤い小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em |
| `body-lg` | メリットや事例の箇条書き | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em |
| `body-md` | リード文・表のセル | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em |
| `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em |
| `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.03em |

- 書体は太いゴシック1種類に統一する
- 箇条書きは本文も太字で、詰まった力強い印象にする
- 大見出しの中の重要な語句だけ赤くする
- 資料請求の見出しは白文字に赤い下線を引く
- リード文は中央揃え、箇条書きは左揃え
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。業界アイコンは 3 列、サービス表は 2 列
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
- 赤帯の中にパネルを置くときは左右に 16px の余白を空ける
- 職種一覧は縦に並べたグレーのカード。右端に詳細ボタンを置く
- サービス一覧は縦見出しセルつきの表を 2 列に組む
- 資料請求ブロックは本文中で 2 回繰り返す
- 事例リストは L 字のコーナー罫線 2 本で上下を挟む

## Elevation & Depth

- 基本はフラットで影を付けない
- CTAボタンだけ下に濃い影と上部のハイライトを付けて立体的にする
- 白カードは暗い写真地の上に影なしで載せる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸なしの全幅で使い、暗いオーバーレイを重ねる。アイコンは白い角丸の正方形タイルに入れる
- **セクション境界**: 直線で区切り、色の切り替えだけで分ける
- CTA・サブボタン・吹き出しラベルはピル型にする
- パネルとアイコンタイルの角丸は 12〜16px
- 表と職種カードは角丸 0〜4px の四角にする
- メリットの記号は赤い正方形、事例の記号は赤いひし形にする

## Components

- **光沢のある赤いピル型CTA**（`button-primary`）: 画面幅いっぱいの赤いピル型。上部が明るく、下に影を付ける
- **詳細を見るボタン**（`button-outline`）: 白地に赤い枠と赤い文字の小さなピル型ボタン
- **薄ピンクのメリットパネル**（`tinted-panel`）: 赤帯の上に置き、赤い四角の記号で 4 項目を並べる
- **L字のコーナー罫線**（`corner-frame`）: 左上と右下に赤い太線の L 字を置き、事例リストを挟む
- **白枠の吹き出しラベル**（`pill-label`）: 暗い地の上に置く、白枠と白文字のピル型ラベル。下に小さなしっぽを付ける
- **赤いピル型の見出しタブ**（`heading-tab`）: 白カードの上端に重ねる赤いピル型の見出し
- **職種カード**（`job-card`）: 薄グレーの横長カード。左に職種名、右に詳細ボタンを置く
- **縦見出しつきサービス表**（`service-table`）: 左に縦書きの濃茶セル、右に罫線で区切った項目行を並べる
- **業界アイコンタイル**（`icon-tile`）: 白い角丸の正方形に濃茶のピクトグラムを入れ、下に白文字のラベルを付ける

## Do's and Don'ts

**Do**
- 赤い帯には必ず縦グラデーションを付ける
- 資料請求ブロックはページの中ほどと最後に繰り返す
- リストの記号は赤い四角・ひし形・矢印で使い分ける
- 白地とグレー地を交互にしてリズムを作る
- FVでは写真の上に白帯や赤帯の帯状テロップでコピーを載せる

**Don't**
- 丸ゴシックや明朝を使わない
- 赤以外の鮮やかな色を足さない
- 本文の長い段落を赤文字にしない
- パステル調や手描きの装飾を入れない
- CTAをフラットな四角ボタンにしない

## Page Structure

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

1. **ファーストビュー**（対象者と募集職種を伝える）: 社員写真の上に白帯の大コピーと赤帯の職種名を重ね、白丸の吹き出しで対象者を示す
2. **働くメリット**（入社するメリットを 4 つ示す）: 赤のグラデ帯の上に白い見出しを置き、薄ピンクのパネルに赤い四角の記号で箇条書きする
3. **プロジェクト事例**（仕事の規模感を伝える）: 白地に赤い L 字罫線を置き、赤いひし形の記号で事例を並べる
4. **資料請求CTA**（会社説明資料のダウンロードへ誘導する）: 暗いオーバーレイ写真の上に吹き出しラベルと下線つき大見出しを置き、赤い見出しタブ付きの白カードに矢印リストと資料サムネイル、光沢CTAを並べる
5. **キャンペーンバナー**（入社特典を告知する）: 横長のバナー画像と、その下に右矢印つきのテキストリンクを置く
6. **募集職種**（職種ごとの詳細ページへ導く）: グレーのカードを縦に並べ、右端に赤枠の詳細ボタンを置く
7. **提供ソリューション**（事業の幅広さを示す）: グレー地にリード文と、赤いひし形の小見出しつきの表を 2 列に組む
8. **取引業界**（取引先業界の広さを示す）: 赤のグラデ帯に白い角丸アイコンタイルを 3 列×4 段で並べる
9. **資料請求CTA（再掲）**（最後にもう一度ダウンロードを促す）: 中盤の資料請求ブロックと同じ構成で繰り返す

## Imagery

- スーツやジャケット姿の社員が笑顔で話す、明るいオフィスの写真
- 資料請求の背景はPC作業中の人物写真にグレーのオーバーレイを重ねる
- アイコンは濃茶 1 色の太いピクトグラム
- 資料のサムネイルはスライドを数枚重ねて見せる
- 記号は赤い四角・ひし形・矢印のシンプルな図形
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは中央に約 70% 幅で配置し、文字を小さく抑える
- PCでは職種カードを 2 列にする
- PCではサービス表を 4 列にする
- PCでは業界アイコンを 6 列にする
- PCでは資料請求カードを左にリスト、右にサムネイルの 2 カラムにする
- PCではメリットの箇条書きを各 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-5d77862d`（元 LP の URL から採番）
- **元 LP**: https://recruit.shiftinc.jp/lp/career/aoj_02/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この 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