紺線画×淡色パステルの落ち着いた採用 LP

Navy Line-Illustration Calm Recruit LP

紺の線画イラストと紺の細い枠線で統一した採用サイト。淡いブルーグレー・クリーム・ミントのパステル面でセクションを分け、太めの丸みのあるゴシックで誠実でやさしい印象にしている。

求人・採用信頼・誠実やさしい・柔らかい親しみ・手作り感シンプル・ミニマルSPPC

ダウンロード

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

COLORS

配色

地は白、カード内は淡いブルーグレーで統一する
大きなセクションはクリーム・ミント・水色の面で切り替え、1セクション1色にする
見出し・枠線・アイコン線・通常ボタンはすべて同じ紺
コーラルは募集要項の主CTAとイラスト差し色に限定する
吹き出しラベルはピンク・ミント・クリームを順に使い分ける
本文は濃いグレー、純黒は使わない

TYPOGRAPHY

書体

displayファーストビューの大見出しゴシック／ Zen Kaku Gothic New 900 ／ 24px ／行間 1.6

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

headline-lgセクションのリード見出し（紺・中央揃え）ゴシック／ Zen Kaku Gothic New 700 ／ 19px ／行間 1.6

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

headline-smカード見出しゴシック／ Zen Kaku Gothic New 700 ／ 15px ／行間 1.6

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

body-md本文ゴシック／ Zen Kaku Gothic New 500 ／ 13px ／行間 2.0

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

accentセクション頭の英字筆記体タイトル欧文スクリプト／ Pacifico 400 ／ 26px ／行間 1.2

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

note吹き出しラベル・小見出しの点付きラベル・日付ゴシック／ Zen Kaku Gothic New 700 ／ 12px ／行間 1.4

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

label-buttonボタン文字ゴシック／ Zen Kaku Gothic New 700 ／ 13px ／行間 1.2

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

全体に字間を0.08em前後広げてゆったり見せる
見出しは紺の太字、本文はグレーの中太
リード本文は中央揃え、カード内本文は左揃え
英字の筆記体タイトルはセクション面の上辺にかかるように置く
小見出しラベルは先頭に「・」を付けた短い語にする

PAGE STRUCTURE

セクション構成

ファーストビュー会社の価値を一言で伝える紺枠の角丸パネルに2行の大見出しとリード、下半分にアイソメトリックの街並み線画
会社紹介どんな会社かを伝える吹き出しラベル、中央揃えの紺見出しとリード文
特長安定性や働きやすさを4点で示すアイコン付き特長カードを4枚縦積みにし、最後に紺ボタン
仕事のリアル職種と仕事の流れを見せるクリーム面に筆記体英字と集合イラスト、見出しと本文、円形イラストの4工程を矢印でつなぐ
長く働ける理由職場の空気や制度を伝える中央揃えのリードのあと、色違いの吹き出しラベルを載せたカード3枚と紺ボタン
FAQ導線不安の解消へ誘導する水色面に人物イラストと見出し、枠線ピルボタンを2つ
新着情報最新の動きを示す左寄せ見出しと一覧リンク、日付タブ付きカードを4件
募集要項応募へ誘導するミント面に筆記体英字と社員の集合イラスト、見出し、コーラルの主CTA
問い合わせ導線疑問を解消する入口をまとめる淡いブルーグレー面にリンクタイル3つと電話番号タイル
フッター会社情報とリンクロゴ、住所、枠線ボタン、テキストリンク、コピーライト

COMPONENTS

部品

紺のピルボタン button-primary白文字と右向き山括弧付き。セクション末尾の詳細導線
コーラルの主CTAボタン button-cta募集要項への導線。ミント面の上に置く
枠線ピルボタン button-outline淡色地に紺枠と紺文字。FAQやフッターのサブ導線
吹き出しラベル speech-label紺枠と下向きの尾。セクション名やカード名を示す
アイコン付き特長カード feature-card左に紺線アイコン、右に2行見出し、下に本文
工程ステップ process-step円形人物イラスト、職種名、短い2行説明。紺の太い下矢印でつなぐ
日付タブ付きお知らせカード news-card上辺に紺の日付タブ、丸矢印アイコン付きタイトル、2行省略の本文
アイコン付きリンクタイル link-tile白地に紺枠、左にイラストアイコン、右に丸矢印付きの短いラベル

守ること

イラストは紺の均一な線と淡色塗りで統一する
カード・ボタン・ラベルの枠線は紺の同じ太さにする
セクションごとにパステル面を1色選んで切り替える
本文は短い文で改行し、行間を2.0程度とる
英字の筆記体タイトルを大きなセクションの頭に添える

DON'T

避けること

写真やリアルな人物画像を混ぜない
影・グラデーション・光沢を付けない
コーラルを主CTA以外の大きな面に使わない
原色や蛍光色で強調しない
細すぎる明朝体を使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 紺線画×淡色パステルの落ち着いた採用 LP（Navy Line-Illustration Calm Recruit LP）

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

Overview

業種: 求人・採用／ 雰囲気: 信頼・誠実、やさしい・柔らかい、親しみ・手作り感、シンプル・ミニマル
キーワード: 紺の線画・パステル面・角丸の枠線カード・吹き出しラベル・筆記体の英字見出し・落ち着き
地の質感: フラットな単色塗りに紺の均一な線。背景には薄いグレーの街並み線画をうっすら敷く
形: 角丸20px前後の紺枠カード、ピル型ボタン、吹き出し型ラベル、円形に切り抜いたイラスト
温度感: やや暖かい中間。紺の冷静さをクリームとコーラルで和らげる

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#012372`	見出し文字・枠線・ボタン塗りの紺	4%	画素の実測
`on-primary`	`#F1FBFE`	紺ボタン上の白文字	0%	画素の実測
`background`	`#FFFFFF`	ページ地の白	32%	画素の実測
`surface`	`#F2F4FA`	カード・ヒーロー枠内の淡いブルーグレー	22%	画素の実測
`background-alt`	`#FFF2C5`	仕事紹介セクションのクリーム面	15%	画素の実測
`accent-1`	`#CDE8E1`	募集要項セクションのミント面	9%	画素の実測
`accent-2`	`#D1E2F4`	FAQ導線ブロックの淡い水色面	3%	画素の実測
`cta`	`#DE7766`	募集要項への主CTAのコーラル	1%	画素の実測
`on-cta`	`#FEFAF7`	コーラルボタン上の白文字	0%	画素の実測
`text-body`	`#434344`	本文の濃いグレー	3%	画素の実測
`tint-1`	`#F4D3C3`	吹き出しラベルのピンク面	0%	画素の実測
`tint-2`	`#D4EAE4`	吹き出しラベルのミント面	0%	画素の主要色に補正
`line`	`#C3CDD6`	背景の薄い街並み線画	5%	画素の主要色に補正
`marker`	`#F3DDDC`	見出し下の淡いピンクマーカー	0%	画素の実測
`cta-accessible`	`#CE432C`	AA を満たす補正値（計算）		計算

地は白、カード内は淡いブルーグレーで統一する
大きなセクションはクリーム・ミント・水色の面で切り替え、1セクション1色にする
見出し・枠線・アイコン線・通常ボタンはすべて同じ紺
コーラルは募集要項の主CTAとイラスト差し色に限定する
吹き出しラベルはピンク・ミント・クリームを順に使い分ける
本文は濃いグレー、純黒は使わない
button-cta は文字 #FEFAF7 × 背景 #DE7766 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE432C、4.53:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューの大見出し	ゴシック	Zen Kaku Gothic New	900	24px	1.6	0.08em
`headline-lg`	セクションのリード見出し（紺・中央揃え）	ゴシック	Zen Kaku Gothic New	700	19px	1.6	0.08em
`headline-sm`	カード見出し	ゴシック	Zen Kaku Gothic New	700	15px	1.6	0.08em
`body-md`	本文	ゴシック	Zen Kaku Gothic New	500	13px	2.0	0.08em
`accent`	セクション頭の英字筆記体タイトル	欧文スクリプト	Pacifico	400	26px	1.2	0.0em
`note`	吹き出しラベル・小見出しの点付きラベル・日付	ゴシック	Zen Kaku Gothic New	700	12px	1.4	0.06em
`label-button`	ボタン文字	ゴシック	Zen Kaku Gothic New	700	13px	1.2	0.08em

全体に字間を0.08em前後広げてゆったり見せる
見出しは紺の太字、本文はグレーの中太
リード本文は中央揃え、カード内本文は左揃え
英字の筆記体タイトルはセクション面の上辺にかかるように置く
小見出しラベルは先頭に「・」を付けた短い語にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、カードは縦積み
本文ブロックの幅: 画面幅の約 89%
余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
左右余白は約20px
カード間は約28px
各セクション末尾に中央寄せのピル型ボタンを置く
パステル面のセクションは左右にわずかな余白を残した角丸ブロック
工程は円形イラスト＋下向き矢印で縦につなぐ

Elevation & Depth

影は使わずフラット
立体感は紺の1.5px枠線で出す
面の切り替えは色差のみ

Shapes

角丸: 小 8px ／中 16px ／大 24px。ボタンはピル型。
写真の切り抜き: 人物イラストは紺枠の円形に切り抜く。メインビジュアルは切り抜きなし
セクション境界: 直線。セクションは角丸の色面ブロックで区切る
カードは紺枠＋淡いブルーグレー面＋角丸16px
ラベルは下に小さな尾がある吹き出し型
日付ラベルはカード上辺に重なる紺のタブ形
ファーストビューは紺枠の大きな角丸パネルに入れる

Components

紺のピルボタン（button-primary）: 白文字と右向き山括弧付き。セクション末尾の詳細導線
コーラルの主CTAボタン（button-cta）: 募集要項への導線。ミント面の上に置く
枠線ピルボタン（button-outline）: 淡色地に紺枠と紺文字。FAQやフッターのサブ導線
吹き出しラベル（speech-label）: 紺枠と下向きの尾。セクション名やカード名を示す
アイコン付き特長カード（feature-card）: 左に紺線アイコン、右に2行見出し、下に本文
工程ステップ（process-step）: 円形人物イラスト、職種名、短い2行説明。紺の太い下矢印でつなぐ
日付タブ付きお知らせカード（news-card）: 上辺に紺の日付タブ、丸矢印アイコン付きタイトル、2行省略の本文
アイコン付きリンクタイル（link-tile）: 白地に紺枠、左にイラストアイコン、右に丸矢印付きの短いラベル

Do's and Don'ts

Do - イラストは紺の均一な線と淡色塗りで統一する - カード・ボタン・ラベルの枠線は紺の同じ太さにする - セクションごとにパステル面を1色選んで切り替える - 本文は短い文で改行し、行間を2.0程度とる - 英字の筆記体タイトルを大きなセクションの頭に添える

Don't - 写真やリアルな人物画像を混ぜない - 影・グラデーション・光沢を付けない - コーラルを主CTA以外の大きな面に使わない - 原色や蛍光色で強調しない - 細すぎる明朝体を使わない

Page Structure

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

ファーストビュー（会社の価値を一言で伝える）: 紺枠の角丸パネルに2行の大見出しとリード、下半分にアイソメトリックの街並み線画
会社紹介（どんな会社かを伝える）: 吹き出しラベル、中央揃えの紺見出しとリード文
特長（安定性や働きやすさを4点で示す）: アイコン付き特長カードを4枚縦積みにし、最後に紺ボタン
仕事のリアル（職種と仕事の流れを見せる）: クリーム面に筆記体英字と集合イラスト、見出しと本文、円形イラストの4工程を矢印でつなぐ
長く働ける理由（職場の空気や制度を伝える）: 中央揃えのリードのあと、色違いの吹き出しラベルを載せたカード3枚と紺ボタン
FAQ導線（不安の解消へ誘導する）: 水色面に人物イラストと見出し、枠線ピルボタンを2つ
新着情報（最新の動きを示す）: 左寄せ見出しと一覧リンク、日付タブ付きカードを4件
募集要項（応募へ誘導する）: ミント面に筆記体英字と社員の集合イラスト、見出し、コーラルの主CTA
問い合わせ導線（疑問を解消する入口をまとめる）: 淡いブルーグレー面にリンクタイル3つと電話番号タイル
フッター（会社情報とリンク）: ロゴ、住所、枠線ボタン、テキストリンク、コピーライト

Imagery

紺の均一な線で描くフラットな人物イラスト。作業着・スーツ・白衣など職種がわかる服装
塗りは淡い水色・ミント・クリーム・コーラルの限られた色
メインビジュアルはアイソメトリックの建物と街、製品をかわいく配置
アイコンは紺線に一部ピンクやゴールドの差し色
背景に薄いグレーの街並み線画をうっすら敷く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCはヘッダーにナビとコーラルの小ボタンを横並びにする
PCのファーストビューは左に見出し、右にイラストの横並び
特長カードはPCで2×2、理由カードは3列
工程はPCで横一列に並べ、右向き矢印でつなぐ
新着はPCで2列、問い合わせタイルは4列
パステル面ブロックはPCで最大幅約900pxに収める

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: Navy Line-Illustration Calm Recruit LP
description: 紺の線画イラストと紺の細い枠線で統一した採用サイト。淡いブルーグレー・クリーム・ミントのパステル面でセクションを分け、太めの丸みのあるゴシックで誠実でやさしい印象にしている。
colors:
  primary: '#012372'
  on-primary: '#F1FBFE'
  background: '#FFFFFF'
  surface: '#F2F4FA'
  background-alt: '#FFF2C5'
  accent-1: '#CDE8E1'
  accent-2: '#D1E2F4'
  cta: '#DE7766'
  on-cta: '#FEFAF7'
  text-body: '#434344'
  tint-1: '#F4D3C3'
  tint-2: '#D4EAE4'
  line: '#C3CDD6'
  marker: '#F3DDDC'
  cta-accessible: '#CE432C'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.6
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.08em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Pacifico
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.2
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.06em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.08em
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  button-cta:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  button-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  speech-label:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 32px
  feature-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 180px
  process-step:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 300px
  news-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 170px
  link-tile:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 100px
---

# DESIGN.md — 紺線画×淡色パステルの落ち着いた採用 LP（Navy Line-Illustration Calm Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、やさしい・柔らかい、親しみ・手作り感、シンプル・ミニマル
- **キーワード**: 紺の線画・パステル面・角丸の枠線カード・吹き出しラベル・筆記体の英字見出し・落ち着き
- **地の質感**: フラットな単色塗りに紺の均一な線。背景には薄いグレーの街並み線画をうっすら敷く
- **形**: 角丸20px前後の紺枠カード、ピル型ボタン、吹き出し型ラベル、円形に切り抜いたイラスト
- **温度感**: やや暖かい中間。紺の冷静さをクリームとコーラルで和らげる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#012372` | 見出し文字・枠線・ボタン塗りの紺 | 4% | 画素の実測 |
| `on-primary` | `#F1FBFE` | 紺ボタン上の白文字 | 0% | 画素の実測 |
| `background` | `#FFFFFF` | ページ地の白 | 32% | 画素の実測 |
| `surface` | `#F2F4FA` | カード・ヒーロー枠内の淡いブルーグレー | 22% | 画素の実測 |
| `background-alt` | `#FFF2C5` | 仕事紹介セクションのクリーム面 | 15% | 画素の実測 |
| `accent-1` | `#CDE8E1` | 募集要項セクションのミント面 | 9% | 画素の実測 |
| `accent-2` | `#D1E2F4` | FAQ導線ブロックの淡い水色面 | 3% | 画素の実測 |
| `cta` | `#DE7766` | 募集要項への主CTAのコーラル | 1% | 画素の実測 |
| `on-cta` | `#FEFAF7` | コーラルボタン上の白文字 | 0% | 画素の実測 |
| `text-body` | `#434344` | 本文の濃いグレー | 3% | 画素の実測 |
| `tint-1` | `#F4D3C3` | 吹き出しラベルのピンク面 | 0% | 画素の実測 |
| `tint-2` | `#D4EAE4` | 吹き出しラベルのミント面 | 0% | 画素の主要色に補正 |
| `line` | `#C3CDD6` | 背景の薄い街並み線画 | 5% | 画素の主要色に補正 |
| `marker` | `#F3DDDC` | 見出し下の淡いピンクマーカー | 0% | 画素の実測 |
| `cta-accessible` | `#CE432C` | AA を満たす補正値（計算） |  | 計算 |

- 地は白、カード内は淡いブルーグレーで統一する
- 大きなセクションはクリーム・ミント・水色の面で切り替え、1セクション1色にする
- 見出し・枠線・アイコン線・通常ボタンはすべて同じ紺
- コーラルは募集要項の主CTAとイラスト差し色に限定する
- 吹き出しラベルはピンク・ミント・クリームを順に使い分ける
- 本文は濃いグレー、純黒は使わない
- `button-cta` は文字 `#FEFAF7` × 背景 `#DE7766` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE432C`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.6 | 0.08em |
| `headline-lg` | セクションのリード見出し（紺・中央揃え） | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.6 | 0.08em |
| `headline-sm` | カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.6 | 0.08em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.08em |
| `accent` | セクション頭の英字筆記体タイトル | 欧文スクリプト | Pacifico | 400 | 26px | 1.2 | 0.0em |
| `note` | 吹き出しラベル・小見出しの点付きラベル・日付 | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.4 | 0.06em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.2 | 0.08em |

- 全体に字間を0.08em前後広げてゆったり見せる
- 見出しは紺の太字、本文はグレーの中太
- リード本文は中央揃え、カード内本文は左揃え
- 英字の筆記体タイトルはセクション面の上辺にかかるように置く
- 小見出しラベルは先頭に「・」を付けた短い語にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、カードは縦積み
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
- 左右余白は約20px
- カード間は約28px
- 各セクション末尾に中央寄せのピル型ボタンを置く
- パステル面のセクションは左右にわずかな余白を残した角丸ブロック
- 工程は円形イラスト＋下向き矢印で縦につなぐ

## Elevation & Depth

- 影は使わずフラット
- 立体感は紺の1.5px枠線で出す
- 面の切り替えは色差のみ

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 人物イラストは紺枠の円形に切り抜く。メインビジュアルは切り抜きなし
- **セクション境界**: 直線。セクションは角丸の色面ブロックで区切る
- カードは紺枠＋淡いブルーグレー面＋角丸16px
- ラベルは下に小さな尾がある吹き出し型
- 日付ラベルはカード上辺に重なる紺のタブ形
- ファーストビューは紺枠の大きな角丸パネルに入れる

## Components

- **紺のピルボタン**（`button-primary`）: 白文字と右向き山括弧付き。セクション末尾の詳細導線
- **コーラルの主CTAボタン**（`button-cta`）: 募集要項への導線。ミント面の上に置く
- **枠線ピルボタン**（`button-outline`）: 淡色地に紺枠と紺文字。FAQやフッターのサブ導線
- **吹き出しラベル**（`speech-label`）: 紺枠と下向きの尾。セクション名やカード名を示す
- **アイコン付き特長カード**（`feature-card`）: 左に紺線アイコン、右に2行見出し、下に本文
- **工程ステップ**（`process-step`）: 円形人物イラスト、職種名、短い2行説明。紺の太い下矢印でつなぐ
- **日付タブ付きお知らせカード**（`news-card`）: 上辺に紺の日付タブ、丸矢印アイコン付きタイトル、2行省略の本文
- **アイコン付きリンクタイル**（`link-tile`）: 白地に紺枠、左にイラストアイコン、右に丸矢印付きの短いラベル

## Do's and Don'ts

**Do**
- イラストは紺の均一な線と淡色塗りで統一する
- カード・ボタン・ラベルの枠線は紺の同じ太さにする
- セクションごとにパステル面を1色選んで切り替える
- 本文は短い文で改行し、行間を2.0程度とる
- 英字の筆記体タイトルを大きなセクションの頭に添える

**Don't**
- 写真やリアルな人物画像を混ぜない
- 影・グラデーション・光沢を付けない
- コーラルを主CTA以外の大きな面に使わない
- 原色や蛍光色で強調しない
- 細すぎる明朝体を使わない

## Page Structure

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

1. **ファーストビュー**（会社の価値を一言で伝える）: 紺枠の角丸パネルに2行の大見出しとリード、下半分にアイソメトリックの街並み線画
2. **会社紹介**（どんな会社かを伝える）: 吹き出しラベル、中央揃えの紺見出しとリード文
3. **特長**（安定性や働きやすさを4点で示す）: アイコン付き特長カードを4枚縦積みにし、最後に紺ボタン
4. **仕事のリアル**（職種と仕事の流れを見せる）: クリーム面に筆記体英字と集合イラスト、見出しと本文、円形イラストの4工程を矢印でつなぐ
5. **長く働ける理由**（職場の空気や制度を伝える）: 中央揃えのリードのあと、色違いの吹き出しラベルを載せたカード3枚と紺ボタン
6. **FAQ導線**（不安の解消へ誘導する）: 水色面に人物イラストと見出し、枠線ピルボタンを2つ
7. **新着情報**（最新の動きを示す）: 左寄せ見出しと一覧リンク、日付タブ付きカードを4件
8. **募集要項**（応募へ誘導する）: ミント面に筆記体英字と社員の集合イラスト、見出し、コーラルの主CTA
9. **問い合わせ導線**（疑問を解消する入口をまとめる）: 淡いブルーグレー面にリンクタイル3つと電話番号タイル
10. **フッター**（会社情報とリンク）: ロゴ、住所、枠線ボタン、テキストリンク、コピーライト

## Imagery

- 紺の均一な線で描くフラットな人物イラスト。作業着・スーツ・白衣など職種がわかる服装
- 塗りは淡い水色・ミント・クリーム・コーラルの限られた色
- メインビジュアルはアイソメトリックの建物と街、製品をかわいく配置
- アイコンは紺線に一部ピンクやゴールドの差し色
- 背景に薄いグレーの街並み線画をうっすら敷く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCはヘッダーにナビとコーラルの小ボタンを横並びにする
- PCのファーストビューは左に見出し、右にイラストの横並び
- 特長カードはPCで2×2、理由カードは3列
- 工程はPCで横一列に並べ、右向き矢印でつなぐ
- 新着はPCで2列、問い合わせタイルは4列
- パステル面ブロックはPCで最大幅約900pxに収める

## 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-0b5a3852`（元 LP の URL から採番）
- **元 LP**: https://www.asahipen.jp/recruit/
- **解析に使った画像**: 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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.asahipen.jp/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