---
version: alpha
name: Dark Charcoal Orange Marker Recruiting LP
description: ほぼ黒のチャコール地に、鮮やかなオレンジを帯マーカーや丸い矢印ボタンとして効かせた新卒採用サイト。斜めに傾けた角丸の社員写真と、太い極太ゴシックのコピーで若々しい勢いを出す。角を切り欠いたような角丸カードとグリッチ風の細かいドット装飾が、先進的なムードを作る。
colors:
  background: '#232323'
  primary: '#FF9400'
  cta: '#FE9401'
  on-cta: '#171717'
  on-primary: '#010204'
  surface: '#4F4F4F'
  background-alt: '#2A2A2A'
  secondary: '#505050'
  text: '#FEFEFE'
  accent-1: '#FA9407'
  dark-section: '#010101'
  line: '#575757'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 46px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.04em
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.04em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 2.3
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.06em
  label-button:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 12px
  md: 20px
  lg: 32px
  full: 999px
spacing:
  unit: 8px
  card: 28px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  marker-headline:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 56px
  button-more:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  button-arrow:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 52px
  section-title:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 60px
  notch-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 280px
  photo-collage:
    rounded: '{rounded.md}'
    height: 700px
  entry-block:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 300px
  inline-link:
    textColor: '{colors.accent-1}'
    typography: '{typography.body-md}'
    height: 24px
  sns-circle:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text}'
    rounded: '{rounded.full}'
    height: 64px
---

# DESIGN.md — 黒地×オレンジマーカーの新卒採用 LP（Dark Charcoal Orange Marker Recruiting LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル
- **キーワード**: チャコール地・オレンジ帯マーカー・斜め写真コラージュ・切り欠き角丸カード・グリッチドット・丸矢印ボタン
- **地の質感**: フラットな黒地に、細かい白ドットやノイズ線を散らしたデジタルなざらつき。カードは半透明グレーのすりガラス風。
- **形**: 大きめ角丸のカードが段差状に組み合わさり、ボタン部分だけ外にはみ出す切り欠き形。ボタンはピルと正円。
- **温度感**: 暗めで落ち着いた地に、暖色オレンジでエネルギーを添える。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#232323` | ページ全体の地色 | 55% | 画素の実測 |
| `primary` | `#FF9400` | ブランドのオレンジ。マーカー帯・矢印ボタン・英字見出し | 8% | 画素の実測 |
| `cta` | `#FE9401` | 丸い矢印ボタン | 1% | 画素の実測 |
| `on-cta` | `#171717` | オレンジ上の矢印・文字 | 0% | 画素の主要色に補正 |
| `on-primary` | `#010204` | オレンジ帯上の極太見出し | 2% | 画素の実測 |
| `surface` | `#4F4F4F` | 半透明グレーの情報カード | 10% | 画素の実測 |
| `background-alt` | `#2A2A2A` | 暗めのカード地 | 6% | 画素の実測 |
| `secondary` | `#505050` | MOREピルボタンの地 | 2% | 画素の実測 |
| `text` | `#FEFEFE` | 本文・見出しの白文字 | 4% | 画素の実測 |
| `accent-1` | `#FA9407` | 本文中のオレンジリンク文字 | 0% | 画素の主要色に補正 |
| `dark-section` | `#010101` | SNS丸ボタン・最暗部 | 3% | 画素の実測 |
| `line` | `#575757` | グリッチ風の細線・ドット装飾 | 0% | 画素の実測 |

- 地はチャコール1色で通し、セクションの切替は色ではなくカードで行う。
- オレンジは帯マーカー・丸矢印ボタン・英字見出し・本文中リンクに限定する。
- 強調したいコピーはオレンジ帯を敷き、上に黒の極太文字を載せる。
- 白本文中の一文だけをオレンジ帯で抜き、白文字のまま強調する。
- 最後のエントリー枠だけオレンジ全面塗りにして、内側の矢印ボタンを黒に反転する。
- カードは明度違いのグレー2〜3段階で奥行きを出す。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ（オレンジ帯付き） | ゴシック | Noto Sans JP | 900 | 46px | 1.4 | 0.04em |
| `accent` | セクションの英字見出し（細身・オレンジ） | 欧文サンセリフ | Montserrat | 300 | 40px | 1.1 | 0.02em |
| `headline-md` | カード見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em |
| `headline-sm` | 英字見出しに添える和文の小見出し（下にオレンジ帯） | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.04em |
| `body-lg` | FVのリード文（行間広め） | ゴシック | Noto Sans JP | 700 | 18px | 2.3 | 0.05em |
| `body-md` | カード本文 | ゴシック | Noto Sans JP | 700 | 14px | 2.0 | 0.06em |
| `label-button` | MORE等のボタン文字 | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.04em |

- 和文は太めのゴシックで統一し、本文も700で白抜きの視認性を確保する。
- 英字見出しは細いウェイトで大きく、和文見出しは太く小さくして対比させる。
- 和文小見出しは英字見出しの右下に重ね、下半分にオレンジ帯を敷く。
- キャッチは短い句で改行し、1行ずつオレンジ帯を敷く。
- 本文は短い文節で頻繁に改行し、行間を2倍前後に取る。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。FV のみ写真コラージュを右側に重ねる。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 90px、基本単位 8px、カード内 28px（375px 幅換算）
- 左右の余白は約20pxで、カードはほぼ全幅に置く。
- カードの右下は切り欠いて、丸矢印ボタンをはみ出させる。
- 写真カードと説明カードは少しずつずらして重ね、段差をつける。
- MOREボタンは横長ピル＋右にオレンジ正円の矢印をセットで置く。
- 背景に小さな白四角や細線を散らし、余白を間延びさせない。

## Elevation & Depth

- 影はほぼ使わず、グレーの明度差で重なりを表す。
- 情報カードは半透明グレーにうっすらグラデをかけた、すりガラス風にする。
- 写真の上に重ねるカードは不透明に近い暗グレーにして、文字を読みやすく保つ。

## Shapes

- **角丸**: 小 12px ／ 中 20px ／ 大 32px。ボタンはピル型。
- **写真の切り抜き**: 角丸の長方形に切り抜く。FV では写真を約20°傾けてタイル状に並べる。
- **セクション境界**: 区切り線は使わず、余白と浮かせたカードで区切る。
- カードは大きい角丸にし、ボタンの部分だけ逆角丸で切り欠く。
- 矢印ボタンは直径約52pxの正円。
- 見出しの帯マーカーは角丸なしの長方形。
- 写真同士は狭い間隔で重ね気味に配置する。

## Components

- **オレンジ帯見出し**（`marker-headline`）: 1行ずつオレンジ帯を敷き、黒の極太文字を載せたキャッチ。
- **MOREボタンセット**（`button-more`）: グレーの横長ピルに白の英字、右にオレンジ正円の矢印ボタンを並べる。
- **丸矢印ボタン**（`button-arrow`）: オレンジの正円に黒の細い矢印。外部リンクのときは外部リンクアイコンにする。
- **英字＋和文見出し**（`section-title`）: 細身のオレンジ英字を大きく置き、右下に下線帯付きの白い和文を重ねる。
- **切り欠き情報カード**（`notch-card`）: 大きな角丸のグレーカード。右下を切り欠いて丸矢印ボタンを収める。
- **斜め社員写真コラージュ**（`photo-collage`）: 角丸の社員写真を斜めのグリッドに並べ、画面右側からはみ出させる。
- **エントリー誘導ブロック**（`entry-block`）: オレンジ全面の角丸ブロック。薄い英字の上に黒い太字コピーを重ね、黒い丸矢印ボタンを置く。
- **本文中オレンジリンク**（`inline-link`）: 白本文の中で、リンク部分だけオレンジ文字にする。
- **SNS丸ボタン**（`sns-circle`）: 暗グレーの正円に白のSNSアイコン。エントリーブロックの下辺に食い込ませる。

## Do's and Don'ts

**Do**
- 地はチャコール1色で通し、オレンジは要所だけに絞る。
- 主要な導線には必ずオレンジの丸矢印ボタンを添える。
- 写真は角丸にして傾けたり重ねたりし、動きを出す。
- 見出しは細い英字と太い和文をセットで使う。
- 背景に小さな白四角やノイズ線を散らす。

**Don't**
- 白や淡色の地のセクションを挟まない。
- オレンジ以外の有彩色をアクセントに足さない。
- ボタンを角ばった四角にしない。
- ドロップシャドウや立体的な装飾を多用しない。
- 本文を細いウェイトにして読みにくくしない。

## Page Structure

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

1. **ヘッダー**（ロゴとメニューへの導線）: 左にロゴと採用サイト表記、右に白い角丸の正方形ハンバーガーを置く。
2. **ファーストビュー**（メッセージで共感を得る）: オレンジ帯付きの極太キャッチを3行、右側に斜めに並べた社員写真コラージュ。
3. **メッセージ**（企業の姿勢を伝える）: 白の太字を短く改行して縦に並べ、2か所だけオレンジ帯で強調する。最後にMOREボタン。
4. **社員インタビュー**（働く人を見せる）: 角丸写真の上に切り欠き説明カードを重ね、英字＋和文の見出しとMOREボタンを置く。
5. **事業紹介**（仕事内容をイメージさせる）: 全幅の角丸写真に英字見出しを食い込ませ、下部に暗いカードを重ねて説明を入れる。
6. **採用情報**（募集要項へ誘導する）: 暗グレーの切り欠きカードに見出し・本文・オレンジリンク・丸矢印ボタン。
7. **会社概要**（企業情報へ誘導する）: 明るめのグレーの切り欠きカードに外部リンクアイコンのボタン。
8. **エントリーCTA**（応募を促す）: オレンジ全面の角丸ブロックに、薄い英字と黒の太字コピー、黒の丸矢印。下辺にSNS丸ボタンを置く。

## Imagery

- 社員写真は自然光のオフィスで撮った素の表情のスナップ。スーツと私服を混ぜる。
- 写真は角丸の縦長にトリミングし、斜めのグリッドで重ねる。
- 事業写真は現場を暗めのセピア調で撮り、ノイズ感を残す。
- 装飾は白やグレーの小さな正方形・細い横線・点線を散らしたグリッチ風にする。
- アイコンは線の細いシンプルな矢印とSNSロゴだけにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は左にキャッチと本文、右に斜めの写真コラージュを置く2分割のFVにする。
- PC のキャッチは2行に詰め、文字サイズを相対的に小さくする。
- インタビューは PC で左に写真、右に説明カードの横並びにする。
- 採用情報と会社概要のカードは PC で2カラムに並べる。
- エントリーブロックは PC で横長にし、ボタンを右下に置く。
- コンテンツ幅は PC で約70%に収め、中央に寄せる。

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