白×青の爽やかな地域金融採用 LP

Clean Blue Regional Recruit LP

白地にロイヤルブルーの英字見出しを置き、角丸写真をばらばらに散らした爽やかな採用サイト型。淡いグレーの角丸パネルでセクションを区切り、背景には大きな鳥のシルエットを薄い青で敷いて、地域に根ざす誠実さと軽やかさを両立させている。

求人・採用清潔・爽やか信頼・誠実シンプル・ミニマルSPPC

ダウンロード

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

COLORS

配色

地は白と淡グレー(#F5F5F5)を交互に使い、グレーは角丸の大パネルにする
見出しの英字と日本語キャッチはロイヤルブルーで統一する
最後のエントリー誘導だけ濃紺の面に白文字と白ボタンを置き、反転させる
背景装飾の鳥シルエットは極淡の青で、文字の邪魔をしない
サブボタンは白地に青の細い枠と青文字だけにする
暖色は使わず、温かみは人物写真で足す

TYPOGRAPHY

書体

displayFV写真上の白い大コピーゴシック／ Zen Kaku Gothic New 400 ／ 46px ／行間 1.3

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

headline-lgセクション英字見出し欧文サンセリフ／ Ubuntu 500 ／ 32px ／行間 1.2

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

headline-mdセクションのキャッチ見出しゴシック／ Zen Kaku Gothic New 700 ／ 24px ／行間 1.5

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

headline-sm英字見出し下の日本語ラベル・写真上のキャプションゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.5

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

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

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

accentFVの英字手書き風添え文字欧文スクリプト／ Caveat 500 ／ 28px ／行間 1.1

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

label-buttonボタン文字ゴシック／ Zen Kaku Gothic New 500 ／ 14px ／行間 1.4

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

note日付・職種ラベルゴシック／ Noto Sans JP 400 ／ 12px ／行間 1.6

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

セクション見出しは青い英字を大きく置き、その下に黒の小さい日本語を添える二段構成にする
本文は字間をやや広げ、行間2.0でゆったり組む
写真に重ねる人物コピーは縦書きの白帯で入れる
入社年は数字だけ太く大きくする
FVコピーは細めの白文字で、英字の筆記体を斜めに重ねる

PAGE STRUCTURE

セクション構成

ファーストビュー働く姿を見せ、ビジョンを印象付ける社員2人の全面写真に白い大コピーと青い筆記体の英字を重ね、左下を角丸にする
新着情報バー最新の募集告知濃紺ラベルと日付、下線付きの青いリンクを1行で置き、下に細線を引く
私たちについて組織の理念と地域を紹介英字見出し、中央寄せの青いキャッチ、本文の順。角丸写真を散らし、地域地図と枠線ボタンを置く
仕事紹介職種や役割を紹介グレーの角丸パネル内に見出し・本文を置き、角丸写真2枚をずらして並べ、ボタンを付ける
社員紹介先輩社員の人柄を伝える縦書きコピーが付く人物カードを横スクロールで並べる
座談会社内の関係性を伝える番号ラベル、写真とキャプション帯、詳しく見るボタンを2回繰り返す。グレーパネル上に置く
採用情報リンク募集要項・制度・FAQへ誘導写真に白字を重ねた角丸タイルを2カラムで並べる
CTAエントリーへ誘導濃紺の角丸バナーに白見出し・短い本文・白のピル型ボタンを置く
お知らせ詳細な告知を掲載青い細線枠のスクロール領域に日付と本文を入れる

COMPONENTS

部品

英字＋和文の見出し section-title青い英字見出しの下に黒の日本語ラベルを置く
枠線ピルボタン button-outline白地に青い1px枠と青文字、右に▶を付ける
新着ラベル news-badge濃紺の小さい角丸ラベルに白文字。右に日付と下線リンク
写真＋キャプション帯 photo-caption-card角丸写真の下部に白い半透明帯を重ね、青い太字で2行を置く
社員紹介カード people-card縦長の角丸写真に縦書きの白帯コピー、下に職種と入社年
採用リンクタイル link-tile暗めの写真に白い英字と小さな和文をのせる
エントリーバナー entry-banner濃紺の角丸面に鳥の影、白見出しと白いピル型CTAを置く
エントリーCTA button-primary白地に青文字の大きなピル型ボタン
座談会番号 session-label淡い青の英字と大きめの数字、横に黒の小テーマを置く

守ること

英字見出しはすべて同じ青と同じ書体にそろえる
写真は角丸にして、大きさと位置をずらして軽やかに並べる
背景に大きな鳥や地図のシルエットを極淡色で敷く
セクションは白とグレーの角丸パネルを交互にする
人物写真は自然光の明るい笑顔を使う

DON'T

避けること

赤やオレンジなどの暖色を強調色に使わない
ボタンを塗りつぶしの青にしない（エントリーの反転部だけ例外）
濃い影や立体的なグラデーションを付けない
写真を四角いままグリッドに詰め込まない
本文の行間を詰めない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 白×青の爽やかな地域金融採用 LP（Clean Blue Regional Recruit LP）

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

Overview

業種: 求人・採用／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
キーワード: 白地・ロイヤルブルー・英字見出し・角丸写真の散らし配置・鳥のシルエット・グレーパネル
地の質感: フラットで余白が広い。影はほぼ使わず、色面と角丸で区切る
形: 16px前後の角丸写真と角丸パネル、細い青線のピル型ボタン
温度感: やや涼しげ。青と白が中心で、人物写真の笑顔が温かみを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#265FB6`	英字見出し・強調見出し	3%	画素の実測
`secondary`	`#134AA5`	濃紺のCTAバナー面	3%	画素の実測
`background`	`#FFFFFF`	ページの地	42%	画素の実測
`background-alt`	`#F6F6F6`	角丸グレーパネルの地	17%	画素の実測
`text`	`#242B3A`	見出しと本文の文字	4%	画素の主要色に補正
`text-muted`	`#90908F`	日付・小見出し	1%	画素の実測
`tint-1`	`#EBEFFA`	背景の鳥シルエット・地図の淡色	4%	画素の実測
`tint-2`	`#B2CAF0`	地図の中間青	2%	画素の実測
`accent-1`	`#316BCE`	地図の強調エリア	1%	画素の実測
`accent-2`	`#7184A9`	セッション番号の淡い青	1%	画素の実測
`marker`	`#1F3F7F`	新着ラベル	1%	推定
`cta`	`#FDFEFE`	エントリーボタン面	1%	画素の実測
`on-cta`	`#395A98`	エントリーボタン文字	1%	画素の実測
`line`	`#5D7AB4`	ボタン枠・区切り線	1%	画素の実測

地は白と淡グレー(#F5F5F5)を交互に使い、グレーは角丸の大パネルにする
見出しの英字と日本語キャッチはロイヤルブルーで統一する
最後のエントリー誘導だけ濃紺の面に白文字と白ボタンを置き、反転させる
背景装飾の鳥シルエットは極淡の青で、文字の邪魔をしない
サブボタンは白地に青の細い枠と青文字だけにする
暖色は使わず、温かみは人物写真で足す

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV写真上の白い大コピー	ゴシック	Zen Kaku Gothic New	400	46px	1.3	0.02em
`headline-lg`	セクション英字見出し	欧文サンセリフ	Ubuntu	500	32px	1.2	0.0em
`headline-md`	セクションのキャッチ見出し	ゴシック	Zen Kaku Gothic New	700	24px	1.5	0.05em
`headline-sm`	英字見出し下の日本語ラベル・写真上のキャプション	ゴシック	Zen Kaku Gothic New	700	16px	1.5	0.05em
`body-md`	本文	ゴシック	Zen Kaku Gothic New	400	15px	2.0	0.08em
`accent`	FVの英字手書き風添え文字	欧文スクリプト	Caveat	500	28px	1.1	0.0em
`label-button`	ボタン文字	ゴシック	Zen Kaku Gothic New	500	14px	1.4	0.05em
`note`	日付・職種ラベル	ゴシック	Noto Sans JP	400	12px	1.6	0.03em

セクション見出しは青い英字を大きく置き、その下に黒の小さい日本語を添える二段構成にする
本文は字間をやや広げ、行間2.0でゆったり組む
写真に重ねる人物コピーは縦書きの白帯で入れる
入社年は数字だけ太く大きくする
FVコピーは細めの白文字で、英字の筆記体を斜めに重ねる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。採用リンクは 2 カラムのタイル
本文ブロックの幅: 画面幅の約 89%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
左右の余白は約20pxにして、見出しは左揃えにする
写真は大きさを変え、左右にずらして散らす
グレーパネルは画面端近くまで広げ、角を丸くする
ボタンは中央に置き、幅は約70%にする
人物カードは横スクロールで次のカードを少しはみ出させる

Elevation & Depth

影は基本的に使わず、フラットな面で構成する
写真上のキャプションは半透明の白い角丸帯で浮かせる
ニュース枠は青の細線で囲むだけにする

Shapes

角丸: 小 8px ／中 14px ／大 24px。ボタンはピル型。
写真の切り抜き: 角丸の長方形。サイズ違いで不揃いに配置
セクション境界: 直線で区切らず、角丸のグレーパネルの出入りで切り替える
FV写真は左下だけ大きく角丸にする
ボタンは完全なピル型で、右端に小さな三角矢印を付ける
採用リンクのタイルは角丸8px程度にする

Components

英字＋和文の見出し（section-title）: 青い英字見出しの下に黒の日本語ラベルを置く
枠線ピルボタン（button-outline）: 白地に青い1px枠と青文字、右に▶を付ける
新着ラベル（news-badge）: 濃紺の小さい角丸ラベルに白文字。右に日付と下線リンク
写真＋キャプション帯（photo-caption-card）: 角丸写真の下部に白い半透明帯を重ね、青い太字で2行を置く
社員紹介カード（people-card）: 縦長の角丸写真に縦書きの白帯コピー、下に職種と入社年
採用リンクタイル（link-tile）: 暗めの写真に白い英字と小さな和文をのせる
エントリーバナー（entry-banner）: 濃紺の角丸面に鳥の影、白見出しと白いピル型CTAを置く
エントリーCTA（button-primary）: 白地に青文字の大きなピル型ボタン
座談会番号（session-label）: 淡い青の英字と大きめの数字、横に黒の小テーマを置く

Do's and Don'ts

Do - 英字見出しはすべて同じ青と同じ書体にそろえる - 写真は角丸にして、大きさと位置をずらして軽やかに並べる - 背景に大きな鳥や地図のシルエットを極淡色で敷く - セクションは白とグレーの角丸パネルを交互にする - 人物写真は自然光の明るい笑顔を使う

Don't - 赤やオレンジなどの暖色を強調色に使わない - ボタンを塗りつぶしの青にしない（エントリーの反転部だけ例外） - 濃い影や立体的なグラデーションを付けない - 写真を四角いままグリッドに詰め込まない - 本文の行間を詰めない

Page Structure

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

ファーストビュー（働く姿を見せ、ビジョンを印象付ける）: 社員2人の全面写真に白い大コピーと青い筆記体の英字を重ね、左下を角丸にする
新着情報バー（最新の募集告知）: 濃紺ラベルと日付、下線付きの青いリンクを1行で置き、下に細線を引く
私たちについて（組織の理念と地域を紹介）: 英字見出し、中央寄せの青いキャッチ、本文の順。角丸写真を散らし、地域地図と枠線ボタンを置く
仕事紹介（職種や役割を紹介）: グレーの角丸パネル内に見出し・本文を置き、角丸写真2枚をずらして並べ、ボタンを付ける
社員紹介（先輩社員の人柄を伝える）: 縦書きコピーが付く人物カードを横スクロールで並べる
座談会（社内の関係性を伝える）: 番号ラベル、写真とキャプション帯、詳しく見るボタンを2回繰り返す。グレーパネル上に置く
採用情報リンク（募集要項・制度・FAQへ誘導）: 写真に白字を重ねた角丸タイルを2カラムで並べる
CTA（エントリーへ誘導）: 濃紺の角丸バナーに白見出し・短い本文・白のピル型ボタンを置く
お知らせ（詳細な告知を掲載）: 青い細線枠のスクロール領域に日付と本文を入れる

Imagery

スーツ姿の若手社員が笑い合う、自然光の明るい写真にする
地域の街並み・城・自然の風景写真で地元らしさを出す
地域の地図を2〜3段階の青のフラットなシルエットで描く
大きな鳥（カモメ）のシルエットを淡い青で背景に敷く
座談会は会議室で向かい合う複数人を横長で撮る
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はテキストと散らした写真を2カラムに分け、左右に配置する
PC の座談会は写真とグレーの情報パネルを左右交互に重ねる
PC の社員カードは4枚ほどを横に並べ、左右矢印ボタンで送る
PC の採用タイルは3列で、高さを段違いにずらす
PC のCTAバナーは横長にし、文章を左、ボタンを右に置く
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: Clean Blue Regional Recruit LP
description: 白地にロイヤルブルーの英字見出しを置き、角丸写真をばらばらに散らした爽やかな採用サイト型。淡いグレーの角丸パネルでセクションを区切り、背景には大きな鳥のシルエットを薄い青で敷いて、地域に根ざす誠実さと軽やかさを両立させている。
colors:
  primary: '#265FB6'
  secondary: '#134AA5'
  background: '#FFFFFF'
  background-alt: '#F6F6F6'
  text: '#242B3A'
  text-muted: '#90908F'
  tint-1: '#EBEFFA'
  tint-2: '#B2CAF0'
  accent-1: '#316BCE'
  accent-2: '#7184A9'
  marker: '#1F3F7F'
  cta: '#FDFEFE'
  on-cta: '#395A98'
  line: '#5D7AB4'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Ubuntu
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Caveat
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.1
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
rounded:
  sm: 8px
  md: 14px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-title:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 70px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  news-badge:
    backgroundColor: '{colors.marker}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 22px
  photo-caption-card:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 210px
  people-card:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 420px
  link-tile:
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 120px
  entry-banner:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 210px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 54px
  session-label:
    textColor: '{colors.accent-2}'
    typography: '{typography.headline-sm}'
    height: 30px
---

# DESIGN.md — 白×青の爽やかな地域金融採用 LP（Clean Blue Regional Recruit LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
- **キーワード**: 白地・ロイヤルブルー・英字見出し・角丸写真の散らし配置・鳥のシルエット・グレーパネル
- **地の質感**: フラットで余白が広い。影はほぼ使わず、色面と角丸で区切る
- **形**: 16px前後の角丸写真と角丸パネル、細い青線のピル型ボタン
- **温度感**: やや涼しげ。青と白が中心で、人物写真の笑顔が温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#265FB6` | 英字見出し・強調見出し | 3% | 画素の実測 |
| `secondary` | `#134AA5` | 濃紺のCTAバナー面 | 3% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地 | 42% | 画素の実測 |
| `background-alt` | `#F6F6F6` | 角丸グレーパネルの地 | 17% | 画素の実測 |
| `text` | `#242B3A` | 見出しと本文の文字 | 4% | 画素の主要色に補正 |
| `text-muted` | `#90908F` | 日付・小見出し | 1% | 画素の実測 |
| `tint-1` | `#EBEFFA` | 背景の鳥シルエット・地図の淡色 | 4% | 画素の実測 |
| `tint-2` | `#B2CAF0` | 地図の中間青 | 2% | 画素の実測 |
| `accent-1` | `#316BCE` | 地図の強調エリア | 1% | 画素の実測 |
| `accent-2` | `#7184A9` | セッション番号の淡い青 | 1% | 画素の実測 |
| `marker` | `#1F3F7F` | 新着ラベル | 1% | 推定 |
| `cta` | `#FDFEFE` | エントリーボタン面 | 1% | 画素の実測 |
| `on-cta` | `#395A98` | エントリーボタン文字 | 1% | 画素の実測 |
| `line` | `#5D7AB4` | ボタン枠・区切り線 | 1% | 画素の実測 |

- 地は白と淡グレー(#F5F5F5)を交互に使い、グレーは角丸の大パネルにする
- 見出しの英字と日本語キャッチはロイヤルブルーで統一する
- 最後のエントリー誘導だけ濃紺の面に白文字と白ボタンを置き、反転させる
- 背景装飾の鳥シルエットは極淡の青で、文字の邪魔をしない
- サブボタンは白地に青の細い枠と青文字だけにする
- 暖色は使わず、温かみは人物写真で足す

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV写真上の白い大コピー | ゴシック | Zen Kaku Gothic New | 400 | 46px | 1.3 | 0.02em |
| `headline-lg` | セクション英字見出し | 欧文サンセリフ | Ubuntu | 500 | 32px | 1.2 | 0.0em |
| `headline-md` | セクションのキャッチ見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.05em |
| `headline-sm` | 英字見出し下の日本語ラベル・写真上のキャプション | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 400 | 15px | 2.0 | 0.08em |
| `accent` | FVの英字手書き風添え文字 | 欧文スクリプト | Caveat | 500 | 28px | 1.1 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.4 | 0.05em |
| `note` | 日付・職種ラベル | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.03em |

- セクション見出しは青い英字を大きく置き、その下に黒の小さい日本語を添える二段構成にする
- 本文は字間をやや広げ、行間2.0でゆったり組む
- 写真に重ねる人物コピーは縦書きの白帯で入れる
- 入社年は数字だけ太く大きくする
- FVコピーは細めの白文字で、英字の筆記体を斜めに重ねる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。採用リンクは 2 カラムのタイル
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 左右の余白は約20pxにして、見出しは左揃えにする
- 写真は大きさを変え、左右にずらして散らす
- グレーパネルは画面端近くまで広げ、角を丸くする
- ボタンは中央に置き、幅は約70%にする
- 人物カードは横スクロールで次のカードを少しはみ出させる

## Elevation & Depth

- 影は基本的に使わず、フラットな面で構成する
- 写真上のキャプションは半透明の白い角丸帯で浮かせる
- ニュース枠は青の細線で囲むだけにする

## Shapes

- **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 角丸の長方形。サイズ違いで不揃いに配置
- **セクション境界**: 直線で区切らず、角丸のグレーパネルの出入りで切り替える
- FV写真は左下だけ大きく角丸にする
- ボタンは完全なピル型で、右端に小さな三角矢印を付ける
- 採用リンクのタイルは角丸8px程度にする

## Components

- **英字＋和文の見出し**（`section-title`）: 青い英字見出しの下に黒の日本語ラベルを置く
- **枠線ピルボタン**（`button-outline`）: 白地に青い1px枠と青文字、右に▶を付ける
- **新着ラベル**（`news-badge`）: 濃紺の小さい角丸ラベルに白文字。右に日付と下線リンク
- **写真＋キャプション帯**（`photo-caption-card`）: 角丸写真の下部に白い半透明帯を重ね、青い太字で2行を置く
- **社員紹介カード**（`people-card`）: 縦長の角丸写真に縦書きの白帯コピー、下に職種と入社年
- **採用リンクタイル**（`link-tile`）: 暗めの写真に白い英字と小さな和文をのせる
- **エントリーバナー**（`entry-banner`）: 濃紺の角丸面に鳥の影、白見出しと白いピル型CTAを置く
- **エントリーCTA**（`button-primary`）: 白地に青文字の大きなピル型ボタン
- **座談会番号**（`session-label`）: 淡い青の英字と大きめの数字、横に黒の小テーマを置く

## Do's and Don'ts

**Do**
- 英字見出しはすべて同じ青と同じ書体にそろえる
- 写真は角丸にして、大きさと位置をずらして軽やかに並べる
- 背景に大きな鳥や地図のシルエットを極淡色で敷く
- セクションは白とグレーの角丸パネルを交互にする
- 人物写真は自然光の明るい笑顔を使う

**Don't**
- 赤やオレンジなどの暖色を強調色に使わない
- ボタンを塗りつぶしの青にしない（エントリーの反転部だけ例外）
- 濃い影や立体的なグラデーションを付けない
- 写真を四角いままグリッドに詰め込まない
- 本文の行間を詰めない

## Page Structure

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

1. **ファーストビュー**（働く姿を見せ、ビジョンを印象付ける）: 社員2人の全面写真に白い大コピーと青い筆記体の英字を重ね、左下を角丸にする
2. **新着情報バー**（最新の募集告知）: 濃紺ラベルと日付、下線付きの青いリンクを1行で置き、下に細線を引く
3. **私たちについて**（組織の理念と地域を紹介）: 英字見出し、中央寄せの青いキャッチ、本文の順。角丸写真を散らし、地域地図と枠線ボタンを置く
4. **仕事紹介**（職種や役割を紹介）: グレーの角丸パネル内に見出し・本文を置き、角丸写真2枚をずらして並べ、ボタンを付ける
5. **社員紹介**（先輩社員の人柄を伝える）: 縦書きコピーが付く人物カードを横スクロールで並べる
6. **座談会**（社内の関係性を伝える）: 番号ラベル、写真とキャプション帯、詳しく見るボタンを2回繰り返す。グレーパネル上に置く
7. **採用情報リンク**（募集要項・制度・FAQへ誘導）: 写真に白字を重ねた角丸タイルを2カラムで並べる
8. **CTA**（エントリーへ誘導）: 濃紺の角丸バナーに白見出し・短い本文・白のピル型ボタンを置く
9. **お知らせ**（詳細な告知を掲載）: 青い細線枠のスクロール領域に日付と本文を入れる

## Imagery

- スーツ姿の若手社員が笑い合う、自然光の明るい写真にする
- 地域の街並み・城・自然の風景写真で地元らしさを出す
- 地域の地図を2〜3段階の青のフラットなシルエットで描く
- 大きな鳥（カモメ）のシルエットを淡い青で背景に敷く
- 座談会は会議室で向かい合う複数人を横長で撮る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はテキストと散らした写真を2カラムに分け、左右に配置する
- PC の座談会は写真とグレーの情報パネルを左右交互に重ねる
- PC の社員カードは4枚ほどを横に並べ、左右矢印ボタンで送る
- PC の採用タイルは3列で、高さを段違いにずらす
- PC のCTAバナーは横長にし、文章を左、ボタンを右に置く
- 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-f60f6bf6`（元 LP の URL から採番）
- **元 LP**: https://www.shinkin.co.jp/sagami/saiyou/
- **解析に使った画像**: 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.shinkin.co.jp/sagami/saiyou/（公開状況により表示できない場合があります）
この 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