深紅×ペンキ飛沫の熱血新卒採用LP

Bold Red Paint Splash Recruit LP

白とごく薄いグレーを地にして、深紅の帯見出しと黒い矢印ボタンで引き締めた新卒採用サイトです。スーツ姿の社員の集合写真に、マゼンタ・シアン・黄色のペンキ飛沫を重ねています。若さと熱量を出しつつ、金融らしい誠実さも保つ作りです。

求人・採用力強い・インパクトポップ・元気信頼・誠実情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

地は白と#F7F9F8を交互に使い、セクションを区切る
見出しは深紅の帯に白文字。下に小さな英字ラベルを付ける
主力の訴求セクションは1つだけ深紅の全面地にする
ボタンとリンクの矢印は黒地か白枠で統一する
マゼンタ・シアン・黄は飛沫装飾とカード地だけに使い、文字には使わない
ENTRYは赤のベタ塗り長方形にする

TYPOGRAPHY

書体

displayFVの大コピー（筆の擦れ風）装飾・ディスプレイ／ Dela Gothic One 400 ／ 44px ／行間 1.1

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

headline-lgセクション見出し（赤帯）ゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.3

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

headline-mdFV下のリード帯ゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

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

headline-sm見出し上の赤い小キャッチ・リンク名ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.5

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

body-md本文ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.9

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

accent英字ラベル（ABOUT等）欧文サンセリフ／ Montserrat 800 ／ 11px ／行間 1.2

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

note日付・写真キャプションゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

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

label-buttonボタン・ENTRY欧文サンセリフ／ Montserrat 700 ／ 15px ／行間 1.2

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

見出しは極太ゴシックで赤帯の中に白抜きにする
見出しの直下に英字ラベルを小さく添える
見出しの上に赤字の短いキャッチを置く
本文は太めのゴシックで行間を広く取る
英字は大文字で字間を広げる
FVだけ擦れた筆風のディスプレイ書体を使う

PAGE STRUCTURE

セクション構成

ファーストビュー勢いと一体感を伝える社員の集合写真にペンキ飛沫を重ね、筆風の大コピーを配置する。上部に横書きのコピー、左下に赤いバナーを置く
メッセージ理念と求める人物像を伝える赤帯のリード2行の下に、短い行の本文を左寄せで置く
ニュース最新情報を伝える見出しと黒ボタンを左、日付付きの一覧を右に置く
会社紹介事業の概要を伝える赤帯見出しと2列のリンクリストを左、オフィス写真を右に置く
仕事紹介仕事の魅力を動画で伝える全幅の赤地に動画プレイヤーと矢印付きのリンクリストを並べる
社員紹介人と環境を見せるインタビューとデータの写真カードを2枚並べる
委員会活動社風を見せる縦長の社員カードを4枚横に並べ、赤バッジを付ける
対談本音を伝える薄グレー地に番号付きの対談バナーを2枚置く
仕事観価値観を伝える原色3色のカードを3枚並べる
人材育成成長環境を伝える大きな英字を透かした写真カードを2枚置く
保護者向け家族の安心感を得るグレーのグラデ帯に明朝風の見出しと社員写真を置く
写真スライダー・募集要項職場の雰囲気と応募導線横スクロールの写真の後に、暗い写真に白抜き英字を載せた大バナーを置く
エントリーCTA応募を促す白い背景に全身の集合写真を置き、上部に赤いENTRYボタンを重ねる

COMPONENTS

部品

赤帯見出し heading-band白抜きの極太見出しを赤い矩形に入れ、下に英字ラベルの小帯を付ける
ENTRYボタン button-entry赤のベタ塗り長方形。英字の下にカナを小さく添える
黒矢印ボタン button-dark-arrow黒の長方形の左に文字、右に白枠矢印を置く
英字付きリンクリスト link-list赤い英字ラベルと日本語名を2段で組み、右に矢印、下に細線を引く
写真カード photo-card人物写真の下端に黒帯を敷き、タイトルと矢印を入れる
社員カード member-card縦長の人物写真に名前を重ね、赤の所属バッジとハッシュタグを付ける
原色カード color-spirit-card黄・ピンク・シアンの地に黒帯の大文字コピーと人物を載せる
リード帯 lead-bandFV直下に赤帯を2行重ねて理念を伝える

守ること

見出しは必ず赤帯と英字ラベルのセットで作る
ペンキ飛沫を各セクションに1〜2個、端からはみ出させて置く
社員はスーツ姿の笑顔の写真を多用する
ボタンは黒または赤の直角長方形に矢印を付ける
白と薄グレーの地を交互に使い、赤を際立たせる

DON'T

避けること

ボタンやカードに角丸を付けない
原色の飛沫色を本文や見出しの文字に使わない
赤の全面地を連続させない
細い明朝体で見出しを組まない
影やグラデーションで立体感を出さない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深紅×ペンキ飛沫の熱血新卒採用LP（Bold Red Paint Splash Recruit LP）

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

Overview

業種: 求人・採用／ 雰囲気: 力強い・インパクト、ポップ・元気、信頼・誠実、情報量多め・訴求型
キーワード: 深紅の帯見出し・ペンキ飛沫・スーツの集合写真・黒い矢印ボタン・英字ラベル・熱血
地の質感: 地はフラットな白と薄グレー。カラフルなペンキ飛沫のテクスチャを散らし、写真には動きを加える。
形: 角丸なしの四角形が基本。見出しは赤い矩形帯、ボタンは黒い長方形に白枠の矢印。
温度感: 赤が主役の暖色寄り。地の白とグレーで冷静さを保つ。

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#AB1C0D`	見出し帯・ワークセクション地	8%	画素の実測
`secondary`	`#914537`	濃い赤のグラデ部・見出し枠	3%	画素の主要色に補正
`cta`	`#C12C21`	ENTRYボタン	1%	画素の実測
`on-cta`	`#FFF0E9`	ENTRY文字	0%	画素の実測
`background`	`#FFFFFF`	基本の地色	30%	画素の実測
`background-alt`	`#F7F9F8`	セクション交互の薄グレー地	13%	画素の実測
`dark-section`	`#0D0D0D`	黒ボタン地	3%	画素の実測
`on-dark`	`#FFFFFF`	黒地上の白文字	0%	画素の主要色に補正
`text`	`#1B1B1B`	本文・見出し文字	5%	画素の実測
`text-muted`	`#8E817D`	日付・補足	1%	画素の主要色に補正
`line`	`#DEDDD9`	リスト区切り線	2%	画素の主要色に補正
`accent-1`	`#E04AA0`	飛沫マゼンタ	2%	推定
`accent-2`	`#3EC3E8`	飛沫シアン	2%	推定
`accent-3`	`#F5D21E`	飛沫イエロー	2%	推定

地は白と#F7F9F8を交互に使い、セクションを区切る
見出しは深紅の帯に白文字。下に小さな英字ラベルを付ける
主力の訴求セクションは1つだけ深紅の全面地にする
ボタンとリンクの矢印は黒地か白枠で統一する
マゼンタ・シアン・黄は飛沫装飾とカード地だけに使い、文字には使わない
ENTRYは赤のベタ塗り長方形にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大コピー（筆の擦れ風）	装飾・ディスプレイ	Dela Gothic One	400	44px	1.1	0.0em
`headline-lg`	セクション見出し（赤帯）	ゴシック	Noto Sans JP	900	24px	1.3	0.04em
`headline-md`	FV下のリード帯	ゴシック	Noto Sans JP	700	17px	1.5	0.06em
`headline-sm`	見出し上の赤い小キャッチ・リンク名	ゴシック	Noto Sans JP	700	13px	1.5	0.04em
`body-md`	本文	ゴシック	Noto Sans JP	500	14px	1.9	0.04em
`accent`	英字ラベル（ABOUT等）	欧文サンセリフ	Montserrat	800	11px	1.2	0.08em
`note`	日付・写真キャプション	ゴシック	Noto Sans JP	400	11px	1.6	0.04em
`label-button`	ボタン・ENTRY	欧文サンセリフ	Montserrat	700	15px	1.2	0.1em

見出しは極太ゴシックで赤帯の中に白抜きにする
見出しの直下に英字ラベルを小さく添える
見出しの上に赤字の短いキャッチを置く
本文は太めのゴシックで行間を広く取る
英字は大文字で字間を広げる
FVだけ擦れた筆風のディスプレイ書体を使う
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SPは1カラム。カードは2列まで（PCは2〜4列）
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
見出しブロックは左寄せ。PCでは右側に説明文を置く
リンクリストは2列グリッドにして細線で区切る
写真カードの下端に黒い帯を敷き、タイトルと矢印を載せる
ペンキ飛沫を見出しの背後や角にはみ出させる
主力のセクションは全幅の赤地にする

Elevation & Depth

影はほぼ使わずフラットにする
写真の上に黒い半透明の帯を重ねて文字を載せる
飛沫は写真や見出しの背面にレイヤーで重ねる

Shapes

角丸: 小 0px ／中 0px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 角丸なしの長方形。人物は上半身で切り抜く
セクション境界: 直線で切り替え、背景色だけで区切る
ボタン・カード・帯はすべて直角にする
矢印アイコンは白枠の小さな正方形に入れる
見出し帯は文字幅に合わせた矩形にする

Components

赤帯見出し（heading-band）: 白抜きの極太見出しを赤い矩形に入れ、下に英字ラベルの小帯を付ける
ENTRYボタン（button-entry）: 赤のベタ塗り長方形。英字の下にカナを小さく添える
黒矢印ボタン（button-dark-arrow）: 黒の長方形の左に文字、右に白枠矢印を置く
英字付きリンクリスト（link-list）: 赤い英字ラベルと日本語名を2段で組み、右に矢印、下に細線を引く
写真カード（photo-card）: 人物写真の下端に黒帯を敷き、タイトルと矢印を入れる
社員カード（member-card）: 縦長の人物写真に名前を重ね、赤の所属バッジとハッシュタグを付ける
原色カード（color-spirit-card）: 黄・ピンク・シアンの地に黒帯の大文字コピーと人物を載せる
リード帯（lead-band）: FV直下に赤帯を2行重ねて理念を伝える

Do's and Don'ts

Do - 見出しは必ず赤帯と英字ラベルのセットで作る - ペンキ飛沫を各セクションに1〜2個、端からはみ出させて置く - 社員はスーツ姿の笑顔の写真を多用する - ボタンは黒または赤の直角長方形に矢印を付ける - 白と薄グレーの地を交互に使い、赤を際立たせる

Don't - ボタンやカードに角丸を付けない - 原色の飛沫色を本文や見出しの文字に使わない - 赤の全面地を連続させない - 細い明朝体で見出しを組まない - 影やグラデーションで立体感を出さない

Page Structure

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

ファーストビュー（勢いと一体感を伝える）: 社員の集合写真にペンキ飛沫を重ね、筆風の大コピーを配置する。上部に横書きのコピー、左下に赤いバナーを置く
メッセージ（理念と求める人物像を伝える）: 赤帯のリード2行の下に、短い行の本文を左寄せで置く
ニュース（最新情報を伝える）: 見出しと黒ボタンを左、日付付きの一覧を右に置く
会社紹介（事業の概要を伝える）: 赤帯見出しと2列のリンクリストを左、オフィス写真を右に置く
仕事紹介（仕事の魅力を動画で伝える）: 全幅の赤地に動画プレイヤーと矢印付きのリンクリストを並べる
社員紹介（人と環境を見せる）: インタビューとデータの写真カードを2枚並べる
委員会活動（社風を見せる）: 縦長の社員カードを4枚横に並べ、赤バッジを付ける
対談（本音を伝える）: 薄グレー地に番号付きの対談バナーを2枚置く
仕事観（価値観を伝える）: 原色3色のカードを3枚並べる
人材育成（成長環境を伝える）: 大きな英字を透かした写真カードを2枚置く
保護者向け（家族の安心感を得る）: グレーのグラデ帯に明朝風の見出しと社員写真を置く
写真スライダー・募集要項（職場の雰囲気と応募導線）: 横スクロールの写真の後に、暗い写真に白抜き英字を載せた大バナーを置く
エントリーCTA（応募を促す）: 白い背景に全身の集合写真を置き、上部に赤いENTRYボタンを重ねる

Imagery

スーツ姿の若手社員を白〜グレー背景で撮った集合写真（全身・上半身）
マゼンタ・シアン・黄・紫のペンキ飛沫のテクスチャ素材
暖色照明のオフィスや社内イベントのスナップ
人物の背後に大きな英字を透かし文字で重ねる
原色の背景に人物を切り抜いて合成する
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPは見出しと説明を縦に積み、説明文は見出しの下に置く
リンクリストはSPでも2列のまま。幅が狭ければ1列にする
社員カードはSPで2列か横スクロールにする
原色カード3枚はSPでは縦に積む
ENTRYボタンはSPで画面下に追従させる

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 Paint Splash Recruit LP
description: 白とごく薄いグレーを地にして、深紅の帯見出しと黒い矢印ボタンで引き締めた新卒採用サイトです。スーツ姿の社員の集合写真に、マゼンタ・シアン・黄色のペンキ飛沫を重ねています。若さと熱量を出しつつ、金融らしい誠実さも保つ作りです。
colors:
  primary: '#AB1C0D'
  secondary: '#914537'
  cta: '#C12C21'
  on-cta: '#FFF0E9'
  background: '#FFFFFF'
  background-alt: '#F7F9F8'
  dark-section: '#0D0D0D'
  on-dark: '#FFFFFF'
  text: '#1B1B1B'
  text-muted: '#8E817D'
  line: '#DEDDD9'
  accent-1: '#E04AA0'
  accent-2: '#3EC3E8'
  accent-3: '#F5D21E'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.06em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.04em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  label-button:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  heading-band:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 44px
  button-entry:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 56px
  button-dark-arrow:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 44px
  link-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 56px
  photo-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 200px
  member-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 220px
  color-spirit-card:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 110px
  lead-band:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 36px
---

# DESIGN.md — 深紅×ペンキ飛沫の熱血新卒採用LP（Bold Red Paint Splash Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、信頼・誠実、情報量多め・訴求型
- **キーワード**: 深紅の帯見出し・ペンキ飛沫・スーツの集合写真・黒い矢印ボタン・英字ラベル・熱血
- **地の質感**: 地はフラットな白と薄グレー。カラフルなペンキ飛沫のテクスチャを散らし、写真には動きを加える。
- **形**: 角丸なしの四角形が基本。見出しは赤い矩形帯、ボタンは黒い長方形に白枠の矢印。
- **温度感**: 赤が主役の暖色寄り。地の白とグレーで冷静さを保つ。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#AB1C0D` | 見出し帯・ワークセクション地 | 8% | 画素の実測 |
| `secondary` | `#914537` | 濃い赤のグラデ部・見出し枠 | 3% | 画素の主要色に補正 |
| `cta` | `#C12C21` | ENTRYボタン | 1% | 画素の実測 |
| `on-cta` | `#FFF0E9` | ENTRY文字 | 0% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の地色 | 30% | 画素の実測 |
| `background-alt` | `#F7F9F8` | セクション交互の薄グレー地 | 13% | 画素の実測 |
| `dark-section` | `#0D0D0D` | 黒ボタン地 | 3% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒地上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#1B1B1B` | 本文・見出し文字 | 5% | 画素の実測 |
| `text-muted` | `#8E817D` | 日付・補足 | 1% | 画素の主要色に補正 |
| `line` | `#DEDDD9` | リスト区切り線 | 2% | 画素の主要色に補正 |
| `accent-1` | `#E04AA0` | 飛沫マゼンタ | 2% | 推定 |
| `accent-2` | `#3EC3E8` | 飛沫シアン | 2% | 推定 |
| `accent-3` | `#F5D21E` | 飛沫イエロー | 2% | 推定 |

- 地は白と#F7F9F8を交互に使い、セクションを区切る
- 見出しは深紅の帯に白文字。下に小さな英字ラベルを付ける
- 主力の訴求セクションは1つだけ深紅の全面地にする
- ボタンとリンクの矢印は黒地か白枠で統一する
- マゼンタ・シアン・黄は飛沫装飾とカード地だけに使い、文字には使わない
- ENTRYは赤のベタ塗り長方形にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大コピー（筆の擦れ風） | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em |
| `headline-lg` | セクション見出し（赤帯） | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.04em |
| `headline-md` | FV下のリード帯 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.06em |
| `headline-sm` | 見出し上の赤い小キャッチ・リンク名 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.04em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.04em |
| `accent` | 英字ラベル（ABOUT等） | 欧文サンセリフ | Montserrat | 800 | 11px | 1.2 | 0.08em |
| `note` | 日付・写真キャプション | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em |
| `label-button` | ボタン・ENTRY | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.1em |

- 見出しは極太ゴシックで赤帯の中に白抜きにする
- 見出しの直下に英字ラベルを小さく添える
- 見出しの上に赤字の短いキャッチを置く
- 本文は太めのゴシックで行間を広く取る
- 英字は大文字で字間を広げる
- FVだけ擦れた筆風のディスプレイ書体を使う
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。カードは2列まで（PCは2〜4列）
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- 見出しブロックは左寄せ。PCでは右側に説明文を置く
- リンクリストは2列グリッドにして細線で区切る
- 写真カードの下端に黒い帯を敷き、タイトルと矢印を載せる
- ペンキ飛沫を見出しの背後や角にはみ出させる
- 主力のセクションは全幅の赤地にする

## Elevation & Depth

- 影はほぼ使わずフラットにする
- 写真の上に黒い半透明の帯を重ねて文字を載せる
- 飛沫は写真や見出しの背面にレイヤーで重ねる

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形。人物は上半身で切り抜く
- **セクション境界**: 直線で切り替え、背景色だけで区切る
- ボタン・カード・帯はすべて直角にする
- 矢印アイコンは白枠の小さな正方形に入れる
- 見出し帯は文字幅に合わせた矩形にする

## Components

- **赤帯見出し**（`heading-band`）: 白抜きの極太見出しを赤い矩形に入れ、下に英字ラベルの小帯を付ける
- **ENTRYボタン**（`button-entry`）: 赤のベタ塗り長方形。英字の下にカナを小さく添える
- **黒矢印ボタン**（`button-dark-arrow`）: 黒の長方形の左に文字、右に白枠矢印を置く
- **英字付きリンクリスト**（`link-list`）: 赤い英字ラベルと日本語名を2段で組み、右に矢印、下に細線を引く
- **写真カード**（`photo-card`）: 人物写真の下端に黒帯を敷き、タイトルと矢印を入れる
- **社員カード**（`member-card`）: 縦長の人物写真に名前を重ね、赤の所属バッジとハッシュタグを付ける
- **原色カード**（`color-spirit-card`）: 黄・ピンク・シアンの地に黒帯の大文字コピーと人物を載せる
- **リード帯**（`lead-band`）: FV直下に赤帯を2行重ねて理念を伝える

## Do's and Don'ts

**Do**
- 見出しは必ず赤帯と英字ラベルのセットで作る
- ペンキ飛沫を各セクションに1〜2個、端からはみ出させて置く
- 社員はスーツ姿の笑顔の写真を多用する
- ボタンは黒または赤の直角長方形に矢印を付ける
- 白と薄グレーの地を交互に使い、赤を際立たせる

**Don't**
- ボタンやカードに角丸を付けない
- 原色の飛沫色を本文や見出しの文字に使わない
- 赤の全面地を連続させない
- 細い明朝体で見出しを組まない
- 影やグラデーションで立体感を出さない

## Page Structure

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

1. **ファーストビュー**（勢いと一体感を伝える）: 社員の集合写真にペンキ飛沫を重ね、筆風の大コピーを配置する。上部に横書きのコピー、左下に赤いバナーを置く
2. **メッセージ**（理念と求める人物像を伝える）: 赤帯のリード2行の下に、短い行の本文を左寄せで置く
3. **ニュース**（最新情報を伝える）: 見出しと黒ボタンを左、日付付きの一覧を右に置く
4. **会社紹介**（事業の概要を伝える）: 赤帯見出しと2列のリンクリストを左、オフィス写真を右に置く
5. **仕事紹介**（仕事の魅力を動画で伝える）: 全幅の赤地に動画プレイヤーと矢印付きのリンクリストを並べる
6. **社員紹介**（人と環境を見せる）: インタビューとデータの写真カードを2枚並べる
7. **委員会活動**（社風を見せる）: 縦長の社員カードを4枚横に並べ、赤バッジを付ける
8. **対談**（本音を伝える）: 薄グレー地に番号付きの対談バナーを2枚置く
9. **仕事観**（価値観を伝える）: 原色3色のカードを3枚並べる
10. **人材育成**（成長環境を伝える）: 大きな英字を透かした写真カードを2枚置く
11. **保護者向け**（家族の安心感を得る）: グレーのグラデ帯に明朝風の見出しと社員写真を置く
12. **写真スライダー・募集要項**（職場の雰囲気と応募導線）: 横スクロールの写真の後に、暗い写真に白抜き英字を載せた大バナーを置く
13. **エントリーCTA**（応募を促す）: 白い背景に全身の集合写真を置き、上部に赤いENTRYボタンを重ねる

## Imagery

- スーツ姿の若手社員を白〜グレー背景で撮った集合写真（全身・上半身）
- マゼンタ・シアン・黄・紫のペンキ飛沫のテクスチャ素材
- 暖色照明のオフィスや社内イベントのスナップ
- 人物の背後に大きな英字を透かし文字で重ねる
- 原色の背景に人物を切り抜いて合成する
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPは見出しと説明を縦に積み、説明文は見出しの下に置く
- リンクリストはSPでも2列のまま。幅が狭ければ1列にする
- 社員カードはSPで2列か横スクロールにする
- 原色カード3枚はSPでは縦に積む
- ENTRYボタンはSPで画面下に追従させる

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

SOURCE

出典と注意

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