---
version: alpha
name: Lime Accent Monochrome Staffing Corporate LP
description: 白地と淡いグレーの地に黒のピル型ボタンを置き、ライムグリーンの斜線や菱形で軽快さを出した人材派遣・紹介の企業サイト型 LP。欧文セリフの大きな透かし文字と明朝見出しで上品にまとめ、FV直下に企業向け（緑）と求職者向け（ピンク）の 2 色の誘導帯を置いて、見る人を振り分ける。
colors:
  background: '#FFFFFF'
  background-alt: '#F4F5F9'
  primary: '#D2FF02'
  secondary: '#5ECE06'
  accent-1: '#FE5474'
  tint-1: '#B2F280'
  tint-2: '#AAF2BD'
  cta: '#252323'
  on-cta: '#F0F0F0'
  text: '#3A393C'
  text-body: '#555555'
  accent-2: '#84BBFC'
  line: '#E3E0DB'
  surface: '#FFFFFF'
  secondary-accessible: '#397C04'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 52px
    fontWeight: 400
    lineHeight: 0.95
  accent:
    fontFamily: Playfair Display
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.0
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.03em
  note:
    fontFamily: Playfair Display
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    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: 40px
  audience-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    height: 82px
  heading-slash:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 48px
  numbered-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 62px
  flow-step:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 80px
  tab-switch:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 44px
  case-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 360px
  contact-button:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 58px
---

# DESIGN.md — 白×黒にライム差し色の人材サービスLP（Lime Accent Monochrome Staffing Corporate LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル、清潔・爽やか
- **キーワード**: 白地・黒ピルボタン・ライムの斜線・菱形の写真コラージュ・欧文セリフの透かし文字・明朝見出し
- **地の質感**: フラットな単色面。CONTACT 帯だけ黄緑のグラデーション
- **形**: 四角い写真と白カード。ボタンはピル型。FV は 45° に傾けた菱形タイル
- **温度感**: 白と黒が中心のややクールな印象。ライムとピンクで明るさを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFFF` | 基本背景 | 43% | 画素の実測 |
| `background-alt` | `#F4F5F9` | 強み・事例セクションの淡グレー地 | 12% | 画素の実測 |
| `primary` | `#D2FF02` | ブランドのライム（菱形・斜線） | 2% | 画素の実測 |
| `secondary` | `#5ECE06` | 企業向け誘導帯のグリーン | 2% | 画素の実測 |
| `accent-1` | `#FE5474` | 求職者向け誘導帯のピンク | 2% | 画素の実測 |
| `tint-1` | `#B2F280` | 事業内容セクションの黄緑帯 | 5% | 画素の実測 |
| `tint-2` | `#AAF2BD` | CONTACT 帯の淡いミントグリーン | 5% | 画素の実測 |
| `cta` | `#252323` | 黒いピル型ボタン | 4% | 画素の実測 |
| `on-cta` | `#F0F0F0` | ボタンの文字 | 0% | 画素の実測 |
| `text` | `#3A393C` | 見出しの文字 | 1% | 画素の実測 |
| `text-body` | `#555555` | 本文の文字 | 2% | 推定 |
| `accent-2` | `#84BBFC` | フロー STEP の円アイコン（水色） | 2% | 画素の実測 |
| `line` | `#E3E0DB` | フッターの区切り線・タグの枠線 | 0% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | 番号付きの特長カード・事例カード | 4% | 画素の実測 |
| `secondary-accessible` | `#397C04` | AA を満たす補正値（計算） |  | 計算 |

- 地は白と淡いグレーを交互に置き、黄緑の帯は事業内容と CONTACT だけに使う。
- 主ボタンはすべて黒地に白文字のピル型でそろえる。
- ライムは見出し横の斜線と FV の菱形だけに使い、面を広く塗らない。
- 企業向けは緑、求職者向けはピンクと、対象ごとに色を分ける。
- ボタン内のアイコンは黄緑の線で描き、黒地の上で目立たせる。
- フロー図の円だけを水色にして、ほかのセクションと区別する。
- `audience-band` は文字 `#F0F0F0` × 背景 `#5ECE06` のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#397C04`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの欧文ロゴ型タイトル | 欧文セリフ | Playfair Display | 400 | 52px | 0.95 | 0.0em |
| `accent` | セクション背景の大きな欧文透かし文字 | 欧文セリフ | Playfair Display | 400 | 50px | 1.0 | 0.0em |
| `headline-lg` | セクション見出し（明朝） | 明朝 | Noto Serif JP | 400 | 20px | 1.4 | 0.02em |
| `headline-md` | カード・事業名の見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em |
| `headline-sm` | 番号付き特長や STEP の短い見出し | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.03em |
| `note` | 番号 01〜03 の斜体セリフ数字 | 欧文セリフ | Playfair Display | 400 | 34px | 1.0 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em |

- 見出しは細めの明朝、本文とボタンは太めのゴシックで、役割ごとに書体を分ける。
- セクション名の英字は薄い白か淡グレーにして、写真や帯の上端に大きく重ねる。
- 番号や電話番号は斜体のセリフ書体にして、ほかと差をつける。
- FV のキャッチは字間を広げた明朝 1 行にする。
- 本文の行間は 2 前後にして、ゆったり読ませる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム、事例はカード横スライダー
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 見出しは左寄せにし、左にライムの斜線を添える。
- 写真は左右に約 6% の余白をとって置く。強み写真だけは全幅にする。
- ボタンは中央寄せで幅約 50%。
- 事業内容は写真・見出し・説明・ボタンの順に縦に積む。
- フローは円アイコンと文字を左右に並べ、↓ 矢印でつなぐ。

## Elevation & Depth

- 影はほぼ使わず、フラットにする。
- カードは白い面を淡グレーの地に置くだけで浮かせる。
- スライダーの矢印は白丸に黄緑の細い枠線にする。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸なしの四角。FV は菱形の写真と 45° のライム面を組み合わせたコラージュ
- **セクション境界**: 直線で背景色を切り替える。事業内容は黄緑の帯を写真の途中までで止める
- ボタンとタグだけを丸くする。
- カードやタブは角丸 0 にする。
- STEP のアイコンは正円にする。

## Components

- **黒ピルボタン**（`button-primary`）: 中央に置く詳細への導線ボタン。
- **対象別誘導帯**（`audience-band`）: FV直下に置く全幅の色帯。見出しと、黒丸矢印付きのサブリンクを入れる。
- **斜線付き見出し**（`heading-slash`）: 左にライムの細い斜線を置き、明朝の見出しを添える。
- **番号付き特長カード**（`numbered-card`）: 白カードの左に斜体のセリフ数字、右に太字の短文を並べる。
- **STEP円アイコン**（`flow-step`）: 水色の円に白い線画のアイコン。横に斜体の STEP 番号とタイトルを並べる。
- **切替タブ**（`tab-switch`）: 選択中は黒地に白文字、ほかは淡グレー地。下に黒い線を引く。
- **事例カード**（`case-card`）: 写真・太字の見出し・枠線のピル型タグ・本文の抜粋を縦に並べる。
- **問い合わせ大ボタン**（`contact-button`）: 黒の大きなピル型ボタン。黄緑の線のアイコンと、電話番号は斜体のセリフで入れる。

## Do's and Don'ts

**Do**
- ボタンは黒のピル型で統一する。
- 見出しの左には必ずライムの斜線を添える。
- 淡グレーと白の地を交互に置いてセクションを区切る。
- 英字のセクション名を大きな透かし文字として重ねる。
- 写真は笑顔のビジネスパーソンや働く現場を使う。

**Don't**
- ライムを本文の文字色や広い面に使わない。
- カードに強い影や大きな角丸をつけない。
- 見出しを太いゴシックの装飾で飾り立てない。
- 誘導帯以外でピンクを使わない。
- 背景に柄やテクスチャを入れない。

## Page Structure

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

1. **ファーストビュー**（企業の印象を伝える）: 左に明朝のキャッチと大きな欧文セリフのタイトル。右に菱形の人物写真とライムの菱形を並べ、縦書きの SCROLL を添える。
2. **対象別の誘導**（企業と求職者を振り分ける）: 緑とピンクの全幅帯を上下に並べ、それぞれにサブリンクを入れる。
3. **会社紹介**（事業の概要を伝える）: 透かし文字の ABOUT を重ね、全幅の人物写真、明朝の 2 段見出し、本文の順に置く。
4. **強み**（選ばれる理由を示す）: 淡グレー地に全幅の写真を置き、番号付きの白カード 3 枚を写真に重ねる。最後に黒ボタン。
5. **事業内容**（サービスを一覧で見せる）: 上部に黄緑の帯を敷き、写真・見出し・説明・ボタンのセットを 3 つ縦に積む。
6. **依頼の流れ**（依頼までの手順を見せる）: タブでサービスを切り替え、水色の円アイコンで 5 つの STEP を縦に並べる。
7. **導入事例**（実績を見せて信頼を得る）: 淡グレー地に事例カードの横スライダーを置き、左右に丸い矢印を付ける。最後に一覧ボタン。
8. **CTA**（問い合わせを促す）: 黄緑のグラデーション帯に透かし文字の CONTACT を重ね、電話とメールの黒い大ボタンを置く。
9. **フッター**（サイト内を案内する）: 罫線で区切った 2 列のリンク、規約リンク、ロゴ、コピーライトを並べる。

## Imagery

- 明るいオフィスで撮った、笑顔のビジネスパーソンの写真を使う。
- 白く飛ばし気味の高明度な写真にし、背景はボケさせる。
- 介護や飲食など、業種がわかる現場の写真も入れる。
- FV は人物写真を菱形に切り抜き、ライム色の菱形と交互に並べる。
- アイコンは白い細線のピクトグラムにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCではFVの写真コラージュを右半分に広げ、ヘッダーにナビと 2 色のボタンを並べる。
- PCでは誘導帯を左右 2 分割にする。
- PCでは会社紹介を文字と写真の 2 カラムにする。
- PCでは強みを写真とカード列の左右配置にする。
- PCでは事業内容とカードを 3 カラム、フローを 5 つ横並びにする。
- PCでは CONTACT の 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-29bb9b03`（元 LP の URL から採番）
- **元 LP**: https://onenext.biz/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（12/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。