紺×シアンの斜めカットが効いた現場系採用LP

Bold Navy & Cyan Slash Recruit LP

濃紺とシアンブルーを軸に、斜めのスラッシュ装飾と細長い欧文見出しで力強さを出した整備・物流系の採用LP。白とライトグレーの面を交互に置き、数字のインフォグラフィックや番号付きフローで情報を整理している。

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

ダウンロード

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

COLORS

配色

白とライトグレーのセクションを交互に置く
数字・番号・ボタンは濃紺で統一
斜め装飾と棒グラフは紺→シアンのグラデーション
本文中のキーワードだけ紺の文字色にする
締めのエントリーバナーは黒地に白文字
フッターは濃紺ベタ

TYPOGRAPHY

書体

displayセクションの英字大見出し欧文サンセリフ／ Oswald 700 ／ 36px ／行間 1.1

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

headline-lgリード見出し（紺）ゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.6

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

headline-md職種名・カード見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

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

headline-sm英見出し上の和文ラベルゴシック／ Noto Sans JP 700 ／ 11px ／行間 1.4

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

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

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

accentインフォグラフィックの大きな数字・番号欧文サンセリフ／ Oswald 700 ／ 48px ／行間 1.0

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

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

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

note注釈・単位ゴシック／ Noto Sans JP 500 ／ 9px ／行間 1.5

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

英字見出しは細長いコンデンス体で大きく黒
英字見出しの上に紺の二本斜線＋小さな和文ラベル
数字は極太コンデンス体で、単位は小さく添える
本文は中太ゴシックで行間広め

PAGE STRUCTURE

セクション構成

ファーストビュー採用ページであることと現場の雰囲気を伝えるシアン帯に和文ラベルと巨大英字。下に斜めで区切った3枚の現場人物写真
リード・動画会社の事業と求める人物像を伝える紺の太字リード見出し3行と本文。下に募集動画のサムネイルと注釈
募集職種職種ごとの仕事内容を紹介写真付きグレーカードを縦に3枚。番号・見出し・本文・詳細リンク
数字で見る会社規模や働き方を数字で見せるグレー地に白カードを並べ、大きな紺数字や棒グラフ・人型アイコンで表現
待遇・福利厚生働きやすさを具体的に示す集合写真の下に線区切りのリスト。斜線アイコン付き見出しと強調語入り本文
写真ギャラリー帯現場の空気感を補足横長の写真を3枚つなげた全幅帯
選考フロー応募から内定までの流れを示す紺の正方形アイコンと番号付きのグレー帯を5つ縦に並べる
募集要項・エントリー職種別要項と応募へ導くグレー地に紺の斜めカットボタン3本、黒のエントリーバナー、電話ボックス
フッター会社情報と拠点を掲載濃紺ベタに白文字で拠点住所を中央揃え

COMPONENTS

部品

追従エントリーボタン sticky-entry画面下に固定する紺→シアンのグラデ帯。封筒アイコンと英字小見出し＋和文
英字セクション見出し section-heading紺の二本斜線＋和文ラベルの下に大きなコンデンス英字
職種カード job-card上に写真、下がグレー地。紺の英字番号、見出し、本文、丸矢印付きリンク。右下を斜めカット
数字カード stat-cardグレー地上の白カード。見出し中央、大きな紺数字、アイコンや棒グラフを添える
福利厚生リスト benefit-item白地に線で区切った行。シアンの斜線アイコン付き見出しと本文。強調語は紺
フローステップ flow-stepグレー帯の左に紺の正方形アイコン、紺の番号と見出し、下に説明文
募集要項ボタン button-requirement紺ベタで右端が斜めカット。白文字と白丸の矢印
エントリーバナー entry-banner黒地に英字小見出しと大きな白文字、右に白丸矢印。下に白い電話番号ボックス

守ること

見出しは必ずコンデンス英字＋和文ラベルの2段にする
斜めのカットと平行四辺形を繰り返し使う
数字は大きく、単位は小さくする
白とグレーのセクションを交互にする
現場で働く人物写真を多めに使う

DON'T

避けること

角丸やピル型ボタンを使わない
暖色やパステルを入れない
明朝体や手書き体を使わない
ソフトな影やぼかしを多用しない
見出しを細いウェイトにしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 紺×シアンの斜めカットが効いた現場系採用LP（Bold Navy & Cyan Slash Recruit LP）

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

Overview

業種: 求人・採用／ 雰囲気: 力強い・インパクト、信頼・誠実、クール・先進的、情報量多め・訴求型
キーワード: 斜めスラッシュ・濃紺・シアングラデ・コンデンス欧文見出し・現場写真・インフォグラフィック
地の質感: フラットな単色面と青のグラデーション。影はほぼなく、写真の質感で現場感を出す
形: 角丸なしの四角。カードの右下やボタン右端を斜めにカットし、平行四辺形の帯を装飾に使う
温度感: クールで硬派。写真の人物の笑顔で親しみを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#192988`	濃紺。数字・ボタン・フッター	9%	画素の実測
`secondary`	`#0195DF`	シアンブルー。FV帯・斜め装飾	4%	画素の実測
`background`	`#FFFFFF`	基本の白地	34%	画素の実測
`background-alt`	`#EDEEF0`	ライトグレーの帯セクション・カード地	18%	画素の実測
`text`	`#222222`	見出し・本文の黒	4%	推定
`accent-1`	`#192876`	本文中の強調文字の紺	1%	画素の主要色に補正
`dark-section`	`#222222`	エントリーバナーの黒	2%	画素の実測
`cta`	`#192876`	追従CTAのグラデ起点紺	2%	画素の主要色に補正
`on-cta`	`#EEFDFF`	CTA上の白文字	1%	画素の実測
`surface`	`#FEFFFE`	グレー地上の白カード	8%	画素の実測
`line`	`#EDEEF0`	福利厚生リストの区切り線	1%	画素の主要色に補正
`on-dark`	`#F6FEFF`	フッター・黒面上の白文字	1%	画素の実測

白とライトグレーのセクションを交互に置く
数字・番号・ボタンは濃紺で統一
斜め装飾と棒グラフは紺→シアンのグラデーション
本文中のキーワードだけ紺の文字色にする
締めのエントリーバナーは黒地に白文字
フッターは濃紺ベタ

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	セクションの英字大見出し	欧文サンセリフ	Oswald	700	36px	1.1	0.02em
`headline-lg`	リード見出し（紺）	ゴシック	Noto Sans JP	700	20px	1.6	0.04em
`headline-md`	職種名・カード見出し	ゴシック	Noto Sans JP	700	17px	1.5	0.04em
`headline-sm`	英見出し上の和文ラベル	ゴシック	Noto Sans JP	700	11px	1.4	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	500	11px	1.9	0.03em
`accent`	インフォグラフィックの大きな数字・番号	欧文サンセリフ	Oswald	700	48px	1.0	0.0em
`label-button`	ボタン・リンク文字	ゴシック	Noto Sans JP	700	14px	1.4	0.08em
`note`	注釈・単位	ゴシック	Noto Sans JP	500	9px	1.5	0.02em

英字見出しは細長いコンデンス体で大きく黒
英字見出しの上に紺の二本斜線＋小さな和文ラベル
数字は極太コンデンス体で、単位は小さく添える
本文は中太ゴシックで行間広め
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム（インフォグラフィックの一部は 2 カラム）
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
左右余白は約16px
カード同士の間隔は約12〜20px
英字見出しの背面に薄い巨大英字を透かす
写真は横長でカード上部に全幅で置く
セクションの区切りに斜めの帯を入れる
画面下部に追従のエントリーボタンを置く

Elevation & Depth

影はほぼ使わずフラット
白カードはグレー地との色差で浮かせる
追従CTAだけ画面最前面に固定

Shapes

角丸: 小 0px ／中 0px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 角丸なしの横長長方形。FVは斜めの切れ目で写真を分割
セクション境界: 直線。境界に平行四辺形の青い帯を重ねる
カードやボタンは右下を斜めにカット
丸は矢印アイコンの円だけに使う
装飾は平行四辺形を2本並べる

Components

追従エントリーボタン（sticky-entry）: 画面下に固定する紺→シアンのグラデ帯。封筒アイコンと英字小見出し＋和文
英字セクション見出し（section-heading）: 紺の二本斜線＋和文ラベルの下に大きなコンデンス英字
職種カード（job-card）: 上に写真、下がグレー地。紺の英字番号、見出し、本文、丸矢印付きリンク。右下を斜めカット
数字カード（stat-card）: グレー地上の白カード。見出し中央、大きな紺数字、アイコンや棒グラフを添える
福利厚生リスト（benefit-item）: 白地に線で区切った行。シアンの斜線アイコン付き見出しと本文。強調語は紺
フローステップ（flow-step）: グレー帯の左に紺の正方形アイコン、紺の番号と見出し、下に説明文
募集要項ボタン（button-requirement）: 紺ベタで右端が斜めカット。白文字と白丸の矢印
エントリーバナー（entry-banner）: 黒地に英字小見出しと大きな白文字、右に白丸矢印。下に白い電話番号ボックス

Do's and Don'ts

Do - 見出しは必ずコンデンス英字＋和文ラベルの2段にする - 斜めのカットと平行四辺形を繰り返し使う - 数字は大きく、単位は小さくする - 白とグレーのセクションを交互にする - 現場で働く人物写真を多めに使う

Don't - 角丸やピル型ボタンを使わない - 暖色やパステルを入れない - 明朝体や手書き体を使わない - ソフトな影やぼかしを多用しない - 見出しを細いウェイトにしない

Page Structure

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

ファーストビュー（採用ページであることと現場の雰囲気を伝える）: シアン帯に和文ラベルと巨大英字。下に斜めで区切った3枚の現場人物写真
リード・動画（会社の事業と求める人物像を伝える）: 紺の太字リード見出し3行と本文。下に募集動画のサムネイルと注釈
募集職種（職種ごとの仕事内容を紹介）: 写真付きグレーカードを縦に3枚。番号・見出し・本文・詳細リンク
数字で見る会社（規模や働き方を数字で見せる）: グレー地に白カードを並べ、大きな紺数字や棒グラフ・人型アイコンで表現
待遇・福利厚生（働きやすさを具体的に示す）: 集合写真の下に線区切りのリスト。斜線アイコン付き見出しと強調語入り本文
写真ギャラリー帯（現場の空気感を補足）: 横長の写真を3枚つなげた全幅帯
選考フロー（応募から内定までの流れを示す）: 紺の正方形アイコンと番号付きのグレー帯を5つ縦に並べる
募集要項・エントリー（職種別要項と応募へ導く）: グレー地に紺の斜めカットボタン3本、黒のエントリーバナー、電話ボックス
フッター（会社情報と拠点を掲載）: 濃紺ベタに白文字で拠点住所を中央揃え

Imagery

作業着姿の社員が働く現場写真。整備場やトラック運転席など
明るく自然光寄り、青みがかった色調で統一
人物は笑顔のアップや集合写真で親しみを出す
人型アイコンや線画アイコンは紺〜シアンのシンプルな形
背景に薄いグレーの巨大英字を透かす
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは本文幅約80%で中央寄せ
職種カードはPCで3カラム横並び
インフォグラフィックはPCで2カラムグリッド
福利厚生リストはPCで2カラム
募集要項ボタンはPCで3つ横並び
PCはヘッダーにグローバルナビ、追従CTAは右下の小さなボックス

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 Navy & Cyan Slash Recruit LP
description: 濃紺とシアンブルーを軸に、斜めのスラッシュ装飾と細長い欧文見出しで力強さを出した整備・物流系の採用LP。白とライトグレーの面を交互に置き、数字のインフォグラフィックや番号付きフローで情報を整理している。
colors:
  primary: '#192988'
  secondary: '#0195DF'
  background: '#FFFFFF'
  background-alt: '#EDEEF0'
  text: '#222222'
  accent-1: '#192876'
  dark-section: '#222222'
  cta: '#192876'
  on-cta: '#EEFDFF'
  surface: '#FEFFFE'
  line: '#EDEEF0'
  on-dark: '#F6FEFF'
typography:
  display:
    fontFamily: Oswald
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  accent:
    fontFamily: Oswald
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  sticky-entry:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 56px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 70px
  job-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 380px
  stat-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 130px
  benefit-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 110px
  flow-step:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 90px
  button-requirement:
    backgroundColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 42px
  entry-banner:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 115px
---

# DESIGN.md — 紺×シアンの斜めカットが効いた現場系採用LP（Bold Navy & Cyan Slash Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、信頼・誠実、クール・先進的、情報量多め・訴求型
- **キーワード**: 斜めスラッシュ・濃紺・シアングラデ・コンデンス欧文見出し・現場写真・インフォグラフィック
- **地の質感**: フラットな単色面と青のグラデーション。影はほぼなく、写真の質感で現場感を出す
- **形**: 角丸なしの四角。カードの右下やボタン右端を斜めにカットし、平行四辺形の帯を装飾に使う
- **温度感**: クールで硬派。写真の人物の笑顔で親しみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#192988` | 濃紺。数字・ボタン・フッター | 9% | 画素の実測 |
| `secondary` | `#0195DF` | シアンブルー。FV帯・斜め装飾 | 4% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 |
| `background-alt` | `#EDEEF0` | ライトグレーの帯セクション・カード地 | 18% | 画素の実測 |
| `text` | `#222222` | 見出し・本文の黒 | 4% | 推定 |
| `accent-1` | `#192876` | 本文中の強調文字の紺 | 1% | 画素の主要色に補正 |
| `dark-section` | `#222222` | エントリーバナーの黒 | 2% | 画素の実測 |
| `cta` | `#192876` | 追従CTAのグラデ起点紺 | 2% | 画素の主要色に補正 |
| `on-cta` | `#EEFDFF` | CTA上の白文字 | 1% | 画素の実測 |
| `surface` | `#FEFFFE` | グレー地上の白カード | 8% | 画素の実測 |
| `line` | `#EDEEF0` | 福利厚生リストの区切り線 | 1% | 画素の主要色に補正 |
| `on-dark` | `#F6FEFF` | フッター・黒面上の白文字 | 1% | 画素の実測 |

- 白とライトグレーのセクションを交互に置く
- 数字・番号・ボタンは濃紺で統一
- 斜め装飾と棒グラフは紺→シアンのグラデーション
- 本文中のキーワードだけ紺の文字色にする
- 締めのエントリーバナーは黒地に白文字
- フッターは濃紺ベタ

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの英字大見出し | 欧文サンセリフ | Oswald | 700 | 36px | 1.1 | 0.02em |
| `headline-lg` | リード見出し（紺） | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.04em |
| `headline-md` | 職種名・カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em |
| `headline-sm` | 英見出し上の和文ラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.9 | 0.03em |
| `accent` | インフォグラフィックの大きな数字・番号 | 欧文サンセリフ | Oswald | 700 | 48px | 1.0 | 0.0em |
| `label-button` | ボタン・リンク文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.08em |
| `note` | 注釈・単位 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.02em |

- 英字見出しは細長いコンデンス体で大きく黒
- 英字見出しの上に紺の二本斜線＋小さな和文ラベル
- 数字は極太コンデンス体で、単位は小さく添える
- 本文は中太ゴシックで行間広め
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（インフォグラフィックの一部は 2 カラム）
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 左右余白は約16px
- カード同士の間隔は約12〜20px
- 英字見出しの背面に薄い巨大英字を透かす
- 写真は横長でカード上部に全幅で置く
- セクションの区切りに斜めの帯を入れる
- 画面下部に追従のエントリーボタンを置く

## Elevation & Depth

- 影はほぼ使わずフラット
- 白カードはグレー地との色差で浮かせる
- 追従CTAだけ画面最前面に固定

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの横長長方形。FVは斜めの切れ目で写真を分割
- **セクション境界**: 直線。境界に平行四辺形の青い帯を重ねる
- カードやボタンは右下を斜めにカット
- 丸は矢印アイコンの円だけに使う
- 装飾は平行四辺形を2本並べる

## Components

- **追従エントリーボタン**（`sticky-entry`）: 画面下に固定する紺→シアンのグラデ帯。封筒アイコンと英字小見出し＋和文
- **英字セクション見出し**（`section-heading`）: 紺の二本斜線＋和文ラベルの下に大きなコンデンス英字
- **職種カード**（`job-card`）: 上に写真、下がグレー地。紺の英字番号、見出し、本文、丸矢印付きリンク。右下を斜めカット
- **数字カード**（`stat-card`）: グレー地上の白カード。見出し中央、大きな紺数字、アイコンや棒グラフを添える
- **福利厚生リスト**（`benefit-item`）: 白地に線で区切った行。シアンの斜線アイコン付き見出しと本文。強調語は紺
- **フローステップ**（`flow-step`）: グレー帯の左に紺の正方形アイコン、紺の番号と見出し、下に説明文
- **募集要項ボタン**（`button-requirement`）: 紺ベタで右端が斜めカット。白文字と白丸の矢印
- **エントリーバナー**（`entry-banner`）: 黒地に英字小見出しと大きな白文字、右に白丸矢印。下に白い電話番号ボックス

## Do's and Don'ts

**Do**
- 見出しは必ずコンデンス英字＋和文ラベルの2段にする
- 斜めのカットと平行四辺形を繰り返し使う
- 数字は大きく、単位は小さくする
- 白とグレーのセクションを交互にする
- 現場で働く人物写真を多めに使う

**Don't**
- 角丸やピル型ボタンを使わない
- 暖色やパステルを入れない
- 明朝体や手書き体を使わない
- ソフトな影やぼかしを多用しない
- 見出しを細いウェイトにしない

## Page Structure

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

1. **ファーストビュー**（採用ページであることと現場の雰囲気を伝える）: シアン帯に和文ラベルと巨大英字。下に斜めで区切った3枚の現場人物写真
2. **リード・動画**（会社の事業と求める人物像を伝える）: 紺の太字リード見出し3行と本文。下に募集動画のサムネイルと注釈
3. **募集職種**（職種ごとの仕事内容を紹介）: 写真付きグレーカードを縦に3枚。番号・見出し・本文・詳細リンク
4. **数字で見る会社**（規模や働き方を数字で見せる）: グレー地に白カードを並べ、大きな紺数字や棒グラフ・人型アイコンで表現
5. **待遇・福利厚生**（働きやすさを具体的に示す）: 集合写真の下に線区切りのリスト。斜線アイコン付き見出しと強調語入り本文
6. **写真ギャラリー帯**（現場の空気感を補足）: 横長の写真を3枚つなげた全幅帯
7. **選考フロー**（応募から内定までの流れを示す）: 紺の正方形アイコンと番号付きのグレー帯を5つ縦に並べる
8. **募集要項・エントリー**（職種別要項と応募へ導く）: グレー地に紺の斜めカットボタン3本、黒のエントリーバナー、電話ボックス
9. **フッター**（会社情報と拠点を掲載）: 濃紺ベタに白文字で拠点住所を中央揃え

## Imagery

- 作業着姿の社員が働く現場写真。整備場やトラック運転席など
- 明るく自然光寄り、青みがかった色調で統一
- 人物は笑顔のアップや集合写真で親しみを出す
- 人型アイコンや線画アイコンは紺〜シアンのシンプルな形
- 背景に薄いグレーの巨大英字を透かす
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは本文幅約80%で中央寄せ
- 職種カードはPCで3カラム横並び
- インフォグラフィックはPCで2カラムグリッド
- 福利厚生リストはPCで2カラム
- 募集要項ボタンはPCで3つ横並び
- PCはヘッダーにグローバルナビ、追従CTAは右下の小さなボックス

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

SOURCE

出典と注意

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