桜ピンクと白の淡い医療法人採用 LP

Soft Sakura Pink Medical Recruit LP

白地に淡い桜ピンクを効かせた医療・介護法人の採用サイト。細字の英字見出し、ドット柄の見出し帯、ぼかし縁の写真と斜線柄パネルの重ねで、やさしく清潔な印象を作る。

求人・採用やさしい・柔らかい清潔・爽やか信頼・誠実上品・高級SPPC

ダウンロード

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

COLORS

配色

地は白が基本で、ピンクは淡いぼかしやパターンで面に敷く
濃いピンクはボタン文字・枠とお知らせの強調語だけに使う
見出しの文字は中間の桜ピンクで細く入れる
本文は黒でなく濃いグレーにして柔らかく見せる
メッセージ背景はピンクのハート形ぼかしやグラデーションを使う
フッターは淡いグレーの斜線地で本文と分ける

TYPOGRAPHY

書体

displayFV中央のキャッチゴシック／ Noto Sans JP 500 ／ 22px ／行間 1.4

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

headline-lg英字のセクション見出し欧文サンセリフ／ Josefin Sans 300 ／ 26px ／行間 1.2

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

headline-md漢字のセクション見出し・写真パネル見出しゴシック／ Noto Sans JP 300 ／ 22px ／行間 1.3

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

headline-sm福利厚生カードの小見出しゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.4

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

body-md本文・お知らせゴシック／ Noto Sans JP 400 ／ 10px ／行間 2.0

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

note小見出し横の補足・注釈ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.6

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

label-button枠線ボタンの文字ゴシック／ Noto Sans JP 700 ／ 9px ／行間 1.4

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

見出しは細いウェイトで字間を広めにとる
英字見出しは大きくてもLightにする
本文は小さめで行間2.0、字間を少しあける
小見出しには括弧付きの補足を小さく続ける
お知らせは日付と本文を横に並べ、強調語だけ濃いピンクの太字にする

PAGE STRUCTURE

セクション構成

ヘッダー法人ロゴとメニュー白地に左ロゴ、右端にピンクの正方形メニュー
ファーストビュー職場の理念を一言で伝える空を背景に白衣の人物写真。上部中央に短いキャッチ
メッセージ法人の想いを伝える左に英字見出し、右に本文。背景にピンクのぼかし
お知らせ採用イベントや更新情報英字見出し＋日付付きの点線区切りリスト
福利厚生働きやすさの訴求漢字見出し＋写真カードの2列グリッドと太枠の案内ボックス
採用区分への導線新卒・中途・職種別ページへ誘導ぼかし写真と斜線柄パネルの重ねを4つ縦に並べる
フッター連絡先と関連リンク斜線グレー地に左ロゴと住所、右に枠線リンクボタンを縦積み

COMPONENTS

部品

枠線ボタン button-outline白地に濃いピンクの細枠と太字の文字。リンク用の四角いボタン
英字見出し heading-en細字・字間広めの英字をピンクで左揃え
ドット帯見出し dot-label写真の下に敷くピンクドット柄の帯。ピンク文字の小見出しと括弧の補足
福利厚生カード benefit-card写真＋ドット帯見出し＋短い説明の縦積み。2列で並べる
お知らせ行 news-row日付と見出しを横並び。下に点線を引く
写真重ね導線パネル nav-panel縁をぼかした写真の右下に斜線柄のピンクパネルを重ね、桜アイコンと細字見出しを置く
ピンク太枠の案内ボックス framed-box太いピンク枠の中に案内文と枠線ボタンを置く
ハンバーガーボタン menu-buttonヘッダー右端のピンク塗りの正方形に白い三本線

守ること

白を広く残し、ピンクは淡く使う
見出しは細字で字間を広くする
写真は明るく白っぽい人物写真にする
導線パネルは写真とパターンをずらして重ねる
ボタンは白地に枠線を付けて控えめにする

DON'T

避けること

濃いピンクやビビッドな色で大きな面を塗らない
太い角ゴシックの見出しにしない
角丸やピル型ボタン、強い影を使わない
暗い写真や彩度の高い写真を使わない
文字を詰めて情報を密に並べない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 桜ピンクと白の淡い医療法人採用 LP（Soft Sakura Pink Medical Recruit LP）

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

Overview

業種: 求人・採用／ 雰囲気: やさしい・柔らかい、清潔・爽やか、信頼・誠実、上品・高級
キーワード: 桜ピンク・白基調・細字の英字見出し・ドット柄・ぼかし写真・斜線柄パネル
地の質感: 白地に淡いピンクのグラデーションぼかし、細かなドット柄と斜線柄を薄く敷く
形: 角丸なしの四角が基本。写真の縁はふわっとぼかす
温度感: 温かく柔らかい。ピンクは淡く、強い色は使わない

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#EFA3B5`	ブランドの桜ピンク（ハンバーガー・枠線）	2%	推定
`background`	`#FFFFFF`	ページの基本地色	45%	画素の主要色に補正
`tint-1`	`#F0F5F9`	斜線柄パネルの淡いピンク	8%	画素の実測
`tint-2`	`#EDDDDE`	ドット柄見出し帯の地	3%	画素の主要色に補正
`accent-1`	`#E79AAE`	英字・漢字見出しのピンク文字	1%	推定
`cta`	`#D93A6E`	枠線ボタンの線・お知らせ強調文字の濃いピンク	1%	推定
`on-cta`	`#FAFAFB`	枠線ボタンの地	2%	画素の実測
`text`	`#333333`	見出し・本文の濃いグレー	4%	推定
`text-muted`	`#666666`	写真パネルの細字見出しグレー	1%	推定
`line`	`#BBABA3`	お知らせ一覧の点線区切り	0%	画素の主要色に補正
`background-alt`	`#FEFEFE`	フッターの淡いグレー斜線地	6%	画素の実測
`secondary`	`#E3EDF2`	メイン写真の淡い空色	10%	画素の主要色に補正
`cta-accessible`	`#D72D65`	AA を満たす補正値（計算）		計算
`accent-1-accessible`	`#B92C51`	AA を満たす補正値（計算）		計算

地は白が基本で、ピンクは淡いぼかしやパターンで面に敷く
濃いピンクはボタン文字・枠とお知らせの強調語だけに使う
見出しの文字は中間の桜ピンクで細く入れる
本文は黒でなく濃いグレーにして柔らかく見せる
メッセージ背景はピンクのハート形ぼかしやグラデーションを使う
フッターは淡いグレーの斜線地で本文と分ける
button-outline は文字 #D93A6E × 背景 #FAFAFB のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D72D65、4.52:1）を使う。
dot-label は文字 #E79AAE × 背景 #EDDDDE のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B92C51、4.52:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV中央のキャッチ	ゴシック	Noto Sans JP	500	22px	1.4	0.12em
`headline-lg`	英字のセクション見出し	欧文サンセリフ	Josefin Sans	300	26px	1.2	0.15em
`headline-md`	漢字のセクション見出し・写真パネル見出し	ゴシック	Noto Sans JP	300	22px	1.3	0.2em
`headline-sm`	福利厚生カードの小見出し	ゴシック	Noto Sans JP	500	13px	1.4	0.08em
`body-md`	本文・お知らせ	ゴシック	Noto Sans JP	400	10px	2.0	0.08em
`note`	小見出し横の補足・注釈	ゴシック	Noto Sans JP	400	8px	1.6	0.05em
`label-button`	枠線ボタンの文字	ゴシック	Noto Sans JP	700	9px	1.4	0.08em

見出しは細いウェイトで字間を広めにとる
英字見出しは大きくてもLightにする
本文は小さめで行間2.0、字間を少しあける
小見出しには括弧付きの補足を小さく続ける
お知らせは日付と本文を横に並べ、強調語だけ濃いピンクの太字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は基本 1 カラム。メッセージは見出しと本文の左右2列、福利厚生は2列カード
本文ブロックの幅: 画面幅の約 94%
余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
写真とピンクのパネルを左右にずらして重ねる
福利厚生は写真＋ドット帯見出し＋説明の2列グリッド
お知らせは点線区切りの1行リスト
余白は大きめにとり、要素を詰め込まない
フッターは連絡先とリンクボタンの縦並びの左右2列

Elevation & Depth

影は使わずフラットにする
奥行きは写真の縁のぼかしとパネルの重ねで出す
枠線ボックスは太いピンクの二重風の枠で目立たせる

Shapes

角丸: 小 0px ／中 0px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 横長の長方形。導線写真は縁を白くぼかす
セクション境界: 直線の区切りは使わず、余白とぼかしで区切る
ボタン・カード・パネルは角丸なしの四角
見出し帯は細かなピンクドット柄
導線パネルは淡いピンクの斜線柄
桜の花のアイコンを見出しの上に小さく置く

Components

枠線ボタン（button-outline）: 白地に濃いピンクの細枠と太字の文字。リンク用の四角いボタン
英字見出し（heading-en）: 細字・字間広めの英字をピンクで左揃え
ドット帯見出し（dot-label）: 写真の下に敷くピンクドット柄の帯。ピンク文字の小見出しと括弧の補足
福利厚生カード（benefit-card）: 写真＋ドット帯見出し＋短い説明の縦積み。2列で並べる
お知らせ行（news-row）: 日付と見出しを横並び。下に点線を引く
写真重ね導線パネル（nav-panel）: 縁をぼかした写真の右下に斜線柄のピンクパネルを重ね、桜アイコンと細字見出しを置く
ピンク太枠の案内ボックス（framed-box）: 太いピンク枠の中に案内文と枠線ボタンを置く
ハンバーガーボタン（menu-button）: ヘッダー右端のピンク塗りの正方形に白い三本線

Do's and Don'ts

Do - 白を広く残し、ピンクは淡く使う - 見出しは細字で字間を広くする - 写真は明るく白っぽい人物写真にする - 導線パネルは写真とパターンをずらして重ねる - ボタンは白地に枠線を付けて控えめにする

Don't - 濃いピンクやビビッドな色で大きな面を塗らない - 太い角ゴシックの見出しにしない - 角丸やピル型ボタン、強い影を使わない - 暗い写真や彩度の高い写真を使わない - 文字を詰めて情報を密に並べない

Page Structure

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

ヘッダー（法人ロゴとメニュー）: 白地に左ロゴ、右端にピンクの正方形メニュー
ファーストビュー（職場の理念を一言で伝える）: 空を背景に白衣の人物写真。上部中央に短いキャッチ
メッセージ（法人の想いを伝える）: 左に英字見出し、右に本文。背景にピンクのぼかし
お知らせ（採用イベントや更新情報）: 英字見出し＋日付付きの点線区切りリスト
福利厚生（働きやすさの訴求）: 漢字見出し＋写真カードの2列グリッドと太枠の案内ボックス
採用区分への導線（新卒・中途・職種別ページへ誘導）: ぼかし写真と斜線柄パネルの重ねを4つ縦に並べる
フッター（連絡先と関連リンク）: 斜線グレー地に左ロゴと住所、右に枠線リンクボタンを縦積み

Imagery

白衣や制服の若手スタッフを明るく自然光で撮る
背景は白や淡い空色の、ハイキーで清潔な写真にする
笑顔の会話や食事など、職場の雰囲気がわかる場面を入れる
導線写真は縁を白くフェードさせる
装飾は桜の花アイコン、ピンクのドット柄と斜線柄、ハート形ぼかし
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はヘッダーを左の縦長サイドバーにしてロゴと縦メニューを置く
PC のFVは右側に横長写真を配置
PC は本文幅を中央約75%に絞り、余白を広くとる
福利厚生はPCでも2列で、案内ボックスは空いたマスに置く
PC は右端にエントリー用の縦タブを固定表示

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: Soft Sakura Pink Medical Recruit LP
description: 白地に淡い桜ピンクを効かせた医療・介護法人の採用サイト。細字の英字見出し、ドット柄の見出し帯、ぼかし縁の写真と斜線柄パネルの重ねで、やさしく清潔な印象を作る。
colors:
  primary: '#EFA3B5'
  background: '#FFFFFF'
  tint-1: '#F0F5F9'
  tint-2: '#EDDDDE'
  accent-1: '#E79AAE'
  cta: '#D93A6E'
  on-cta: '#FAFAFB'
  text: '#333333'
  text-muted: '#666666'
  line: '#BBABA3'
  background-alt: '#FEFEFE'
  secondary: '#E3EDF2'
  cta-accessible: '#D72D65'
  accent-1-accessible: '#B92C51'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.12em
  headline-lg:
    fontFamily: Josefin Sans
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.3
    letterSpacing: 0.2em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-outline:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.cta}'
    typography: '{typography.label-button}'
    height: 36px
  heading-en:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    height: 34px
  dot-label:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    height: 36px
  benefit-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 220px
  news-row:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 42px
  nav-panel:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-muted}'
    typography: '{typography.headline-md}'
    height: 240px
  framed-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 230px
  menu-button:
    backgroundColor: '{colors.primary}'
    height: 44px
---

# DESIGN.md — 桜ピンクと白の淡い医療法人採用 LP（Soft Sakura Pink Medical Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、信頼・誠実、上品・高級
- **キーワード**: 桜ピンク・白基調・細字の英字見出し・ドット柄・ぼかし写真・斜線柄パネル
- **地の質感**: 白地に淡いピンクのグラデーションぼかし、細かなドット柄と斜線柄を薄く敷く
- **形**: 角丸なしの四角が基本。写真の縁はふわっとぼかす
- **温度感**: 温かく柔らかい。ピンクは淡く、強い色は使わない

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EFA3B5` | ブランドの桜ピンク（ハンバーガー・枠線） | 2% | 推定 |
| `background` | `#FFFFFF` | ページの基本地色 | 45% | 画素の主要色に補正 |
| `tint-1` | `#F0F5F9` | 斜線柄パネルの淡いピンク | 8% | 画素の実測 |
| `tint-2` | `#EDDDDE` | ドット柄見出し帯の地 | 3% | 画素の主要色に補正 |
| `accent-1` | `#E79AAE` | 英字・漢字見出しのピンク文字 | 1% | 推定 |
| `cta` | `#D93A6E` | 枠線ボタンの線・お知らせ強調文字の濃いピンク | 1% | 推定 |
| `on-cta` | `#FAFAFB` | 枠線ボタンの地 | 2% | 画素の実測 |
| `text` | `#333333` | 見出し・本文の濃いグレー | 4% | 推定 |
| `text-muted` | `#666666` | 写真パネルの細字見出しグレー | 1% | 推定 |
| `line` | `#BBABA3` | お知らせ一覧の点線区切り | 0% | 画素の主要色に補正 |
| `background-alt` | `#FEFEFE` | フッターの淡いグレー斜線地 | 6% | 画素の実測 |
| `secondary` | `#E3EDF2` | メイン写真の淡い空色 | 10% | 画素の主要色に補正 |
| `cta-accessible` | `#D72D65` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#B92C51` | AA を満たす補正値（計算） |  | 計算 |

- 地は白が基本で、ピンクは淡いぼかしやパターンで面に敷く
- 濃いピンクはボタン文字・枠とお知らせの強調語だけに使う
- 見出しの文字は中間の桜ピンクで細く入れる
- 本文は黒でなく濃いグレーにして柔らかく見せる
- メッセージ背景はピンクのハート形ぼかしやグラデーションを使う
- フッターは淡いグレーの斜線地で本文と分ける
- `button-outline` は文字 `#D93A6E` × 背景 `#FAFAFB` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D72D65`、4.52:1）を使う。
- `dot-label` は文字 `#E79AAE` × 背景 `#EDDDDE` のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B92C51`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV中央のキャッチ | ゴシック | Noto Sans JP | 500 | 22px | 1.4 | 0.12em |
| `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Josefin Sans | 300 | 26px | 1.2 | 0.15em |
| `headline-md` | 漢字のセクション見出し・写真パネル見出し | ゴシック | Noto Sans JP | 300 | 22px | 1.3 | 0.2em |
| `headline-sm` | 福利厚生カードの小見出し | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.08em |
| `body-md` | 本文・お知らせ | ゴシック | Noto Sans JP | 400 | 10px | 2.0 | 0.08em |
| `note` | 小見出し横の補足・注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.05em |
| `label-button` | 枠線ボタンの文字 | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.08em |

- 見出しは細いウェイトで字間を広めにとる
- 英字見出しは大きくてもLightにする
- 本文は小さめで行間2.0、字間を少しあける
- 小見出しには括弧付きの補足を小さく続ける
- お知らせは日付と本文を横に並べ、強調語だけ濃いピンクの太字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は基本 1 カラム。メッセージは見出しと本文の左右2列、福利厚生は2列カード
- **本文ブロックの幅**: 画面幅の約 94%
- **余白**: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
- 写真とピンクのパネルを左右にずらして重ねる
- 福利厚生は写真＋ドット帯見出し＋説明の2列グリッド
- お知らせは点線区切りの1行リスト
- 余白は大きめにとり、要素を詰め込まない
- フッターは連絡先とリンクボタンの縦並びの左右2列

## Elevation & Depth

- 影は使わずフラットにする
- 奥行きは写真の縁のぼかしとパネルの重ねで出す
- 枠線ボックスは太いピンクの二重風の枠で目立たせる

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 横長の長方形。導線写真は縁を白くぼかす
- **セクション境界**: 直線の区切りは使わず、余白とぼかしで区切る
- ボタン・カード・パネルは角丸なしの四角
- 見出し帯は細かなピンクドット柄
- 導線パネルは淡いピンクの斜線柄
- 桜の花のアイコンを見出しの上に小さく置く

## Components

- **枠線ボタン**（`button-outline`）: 白地に濃いピンクの細枠と太字の文字。リンク用の四角いボタン
- **英字見出し**（`heading-en`）: 細字・字間広めの英字をピンクで左揃え
- **ドット帯見出し**（`dot-label`）: 写真の下に敷くピンクドット柄の帯。ピンク文字の小見出しと括弧の補足
- **福利厚生カード**（`benefit-card`）: 写真＋ドット帯見出し＋短い説明の縦積み。2列で並べる
- **お知らせ行**（`news-row`）: 日付と見出しを横並び。下に点線を引く
- **写真重ね導線パネル**（`nav-panel`）: 縁をぼかした写真の右下に斜線柄のピンクパネルを重ね、桜アイコンと細字見出しを置く
- **ピンク太枠の案内ボックス**（`framed-box`）: 太いピンク枠の中に案内文と枠線ボタンを置く
- **ハンバーガーボタン**（`menu-button`）: ヘッダー右端のピンク塗りの正方形に白い三本線

## Do's and Don'ts

**Do**
- 白を広く残し、ピンクは淡く使う
- 見出しは細字で字間を広くする
- 写真は明るく白っぽい人物写真にする
- 導線パネルは写真とパターンをずらして重ねる
- ボタンは白地に枠線を付けて控えめにする

**Don't**
- 濃いピンクやビビッドな色で大きな面を塗らない
- 太い角ゴシックの見出しにしない
- 角丸やピル型ボタン、強い影を使わない
- 暗い写真や彩度の高い写真を使わない
- 文字を詰めて情報を密に並べない

## Page Structure

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

1. **ヘッダー**（法人ロゴとメニュー）: 白地に左ロゴ、右端にピンクの正方形メニュー
2. **ファーストビュー**（職場の理念を一言で伝える）: 空を背景に白衣の人物写真。上部中央に短いキャッチ
3. **メッセージ**（法人の想いを伝える）: 左に英字見出し、右に本文。背景にピンクのぼかし
4. **お知らせ**（採用イベントや更新情報）: 英字見出し＋日付付きの点線区切りリスト
5. **福利厚生**（働きやすさの訴求）: 漢字見出し＋写真カードの2列グリッドと太枠の案内ボックス
6. **採用区分への導線**（新卒・中途・職種別ページへ誘導）: ぼかし写真と斜線柄パネルの重ねを4つ縦に並べる
7. **フッター**（連絡先と関連リンク）: 斜線グレー地に左ロゴと住所、右に枠線リンクボタンを縦積み

## Imagery

- 白衣や制服の若手スタッフを明るく自然光で撮る
- 背景は白や淡い空色の、ハイキーで清潔な写真にする
- 笑顔の会話や食事など、職場の雰囲気がわかる場面を入れる
- 導線写真は縁を白くフェードさせる
- 装飾は桜の花アイコン、ピンクのドット柄と斜線柄、ハート形ぼかし
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーを左の縦長サイドバーにしてロゴと縦メニューを置く
- PC のFVは右側に横長写真を配置
- PC は本文幅を中央約75%に絞り、余白を広くとる
- 福利厚生はPCでも2列で、案内ボックスは空いたマスに置く
- PC は右端にエントリー用の縦タブを固定表示

## 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-652d0362`（元 LP の URL から採番）
- **元 LP**: https://recruit.daijukai.net/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（3/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://recruit.daijukai.net/（公開状況により表示できない場合があります）
この 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