真紅×白カードのポップな菓子メーカー採用 LP

Bold Red Playful Confectionery Recruiting LP

ページの大部分を鮮やかな赤で塗り、白い角丸カードと白文字で情報を並べる採用サイト。キャラクターと社員写真を不定形の赤いブロブで切り抜いて、元気で親しみやすい印象を作る。下部は生成り地に切り替え、境界はジグザグの波形にする。

求人・採用ポップ・元気力強い・インパクト親しみ・手作り感SPPC

ダウンロード

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

COLORS

配色

ページの上から 6 割は赤一色の地にし、文字は白にする
カードは白で、見出しとボタンは赤、本文はダークグレーにする
会社紹介は生成り地、フッターは白地に切り替える
強調色は赤だけ。ほかの色はキャラクターと写真に任せる
区切り線は赤地なら白の点線、白地なら赤の点線にする

TYPOGRAPHY

書体

displayファーストビューのキャッチ丸ゴシック／ M PLUS Rounded 1c 800 ／ 32px ／行間 1.4

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

headline-lgセクションの見出し（和文）丸ゴシック／ M PLUS Rounded 1c 800 ／ 28px ／行間 1.3

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

headline-mdカードの部門名ゴシック／ Zen Kaku Gothic New 900 ／ 26px ／行間 1.3

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

accent見出し下の英字ラベル、巨大な透かし欧文サンセリフ／ Quicksand 700 ／ 14px ／行間 1.2

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

body-lg赤地のリード文丸ゴシック／ M PLUS Rounded 1c 700 ／ 18px ／行間 2.2

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

body-mdカード本文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 2.0

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

headline-smリスト項目と FAQ の質問丸ゴシック／ M PLUS Rounded 1c 700 ／ 17px ／行間 1.6

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

label-buttonボタンの文字ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.2

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

和文の見出しの下には、必ず小さな英字ラベルを添える
見出しは太い丸ゴシックで、柔らかく元気な印象にする
カードの背面に、セクション名の英字を淡い赤で大きく敷く
番号は赤い丸の点と 2 桁の数字で示す

PAGE STRUCTURE

セクション構成

ヘッダーロゴとメニューを示す赤地の上に白いピル型のバーを浮かせ、左にロゴ、右にハンバーガーメニューを置く
ファーストビューコンセプトを伝える白の丸ゴシックで 2 行のキャッチを置き、社員とキャラクターを散らして配置する
メッセージ企業の想いを伝える赤地に白い太字の長文を置き、行間を広く取る
仕事紹介職種を案内する職種カードを 3 枚、縦に積む
働く環境下層ページへ誘導する点線区切りのリンクリストを 3 行並べる
よくある質問不安を解消するタブとアコーディオンで、質問を 6 件並べる
写真ギャラリー職場の雰囲気を見せる角丸写真を横に流し、下端をジグザグにして生成り地へつなぐ
会社紹介企業情報へ誘導する生成り地に赤い見出しを置き、写真リンクカードを 4 枚並べる
スローガンバナーブランドの印象で締める巨大な白い英字のスローガンの下に、キャラクターと社員の集合写真を置く
フッターサイトマップを示す白地に赤いキャッチを置き、赤の点線を上に付けた 2 列のリンクとロゴを並べる

COMPONENTS

部品

職種カード job-card白の角丸カード。ブロブ切り抜きの写真、番号、見出し、英字ラベル、本文、背面の英字透かしで構成し、ボタンは下端にまたがせる
ピル型ボタン button-primary赤地に白文字。右端に白丸の矢印を置く
和英 2 段の見出し section-heading大きな和文の見出しの下に、太い英字の小ラベルを添える
点線区切りのリンクリスト link-list見出しと英字の小ラベルに、右側の矢印アイコンを添える。行は白の点線で区切る
FAQ のタブ faq-tabs白いピル枠の中に 3 つのタブを並べ、選択中は赤で塗る
FAQ のアコーディオン faq-item白丸の Q アイコン、白い太字の質問、右端のプラス記号。行は点線で区切る
写真リンクカード photo-link-card角丸の写真の下に、ラベルと赤丸の外部リンクアイコンを置く
キャラ集合バナー zigzag-banner赤地に巨大な白い英字のスローガンを置き、キャラクターと社員を横一列に並べる。下端はジグザグにする

守ること

赤を大胆に全面に使い、白で情報を整理する
人物とキャラクターを一緒に配置して、親しみを出す
見出しには必ず英字のラベルを添える
区切りには点線とジグザグを使い、遊び心を出す

DON'T

避けること

赤以外の強調色をボタンに使わない
直角のカードや細い明朝体は使わない
写真を矩形のまま人物に使わない（ブロブで切り抜く）
赤地の上に黒文字を置かない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 真紅×白カードのポップな菓子メーカー採用 LP（Bold Red Playful Confectionery Recruiting LP）

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

Overview

業種: 求人・採用／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
キーワード: 真紅の全面地・白い角丸カード・ブロブ形の切り抜き・キャラクター・点線の区切り・ジグザグ境界
地の質感: フラットな単色の面。影はカードにだけ薄く付ける
形: 大きな角丸カード、ピル型ボタン、有機的なブロブ形、ジグザグの波形
温度感: 暖かく、エネルギッシュ

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#E70014`	ブランドの赤（全面の地）	40%	画素の実測
`on-primary`	`#FEF7F6`	赤地の上の白文字	3%	画素の実測
`surface`	`#FFFFFF`	白い角丸カード	18%	画素の実測
`cta`	`#E70014`	カード内のピル型ボタン	2%	画素の実測
`on-cta`	`#FFFFFF`	ボタンの文字	0%	画素の主要色に補正
`background-alt`	`#FFF7EC`	会社紹介の生成り地	9%	画素の実測
`background`	`#FFFFFF`	フッターの白地	8%	画素の実測
`text`	`#D80516`	白地の上の赤い見出し	0%	画素の実測
`text-body`	`#3C3C3C`	カード内の本文	1%	推定
`accent-1`	`#F08080`	英字ラベル（薄い赤）	0%	推定
`tint-1`	`#FFEDE2`	カード背面の巨大な英字透かし	2%	画素の主要色に補正
`secondary`	`#C50011`	写真背後の濃い赤ブロブ	3%	画素の実測
`text-muted`	`#919191`	フッターの補助リンク	0%	画素の実測

ページの上から 6 割は赤一色の地にし、文字は白にする
カードは白で、見出しとボタンは赤、本文はダークグレーにする
会社紹介は生成り地、フッターは白地に切り替える
強調色は赤だけ。ほかの色はキャラクターと写真に任せる
区切り線は赤地なら白の点線、白地なら赤の点線にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューのキャッチ	丸ゴシック	M PLUS Rounded 1c	800	32px	1.4	0.04em
`headline-lg`	セクションの見出し（和文）	丸ゴシック	M PLUS Rounded 1c	800	28px	1.3	0.03em
`headline-md`	カードの部門名	ゴシック	Zen Kaku Gothic New	900	26px	1.3	0.02em
`accent`	見出し下の英字ラベル、巨大な透かし	欧文サンセリフ	Quicksand	700	14px	1.2	0.05em
`body-lg`	赤地のリード文	丸ゴシック	M PLUS Rounded 1c	700	18px	2.2	0.03em
`body-md`	カード本文	ゴシック	Noto Sans JP	400	13px	2.0	0.02em
`headline-sm`	リスト項目と FAQ の質問	丸ゴシック	M PLUS Rounded 1c	700	17px	1.6	0.02em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	700	13px	1.2	0.05em

和文の見出しの下には、必ず小さな英字ラベルを添える
見出しは太い丸ゴシックで、柔らかく元気な印象にする
カードの背面に、セクション名の英字を淡い赤で大きく敷く
番号は赤い丸の点と 2 桁の数字で示す
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。フッターのリンクだけ 2 カラム
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 80px、基本単位 8px、カード内 36px（375px 幅換算）
カードは画面幅の約 90% にし、縦に 24px 間隔で積む
カード内の文字は左右に約 36px の余白を取る
リストは白の点線で区切り、各行の右端に丸い矢印アイコンを置く
写真のギャラリーは横に流れる角丸タイルにし、画面の端で切れるように見せる

Elevation & Depth

カードは基本フラット。会社紹介のカードにだけ薄い影を付ける
キャラクターや写真に影は付けない

Shapes

角丸: 小 8px ／中 12px ／大 28px。ボタンはピル型。
写真の切り抜き: 人物は赤いブロブ形の上で切り抜き、上端をはみ出させる。風景の写真は角丸の矩形にする
セクション境界: 赤地から生成り地へはジグザグの波形で切り替える
大きいカードは角丸 28px、写真カードは 12px にする
ボタンとタブはピル型にする
Q のアイコンは白い正円にする

Components

職種カード（job-card）: 白の角丸カード。ブロブ切り抜きの写真、番号、見出し、英字ラベル、本文、背面の英字透かしで構成し、ボタンは下端にまたがせる
ピル型ボタン（button-primary）: 赤地に白文字。右端に白丸の矢印を置く
和英 2 段の見出し（section-heading）: 大きな和文の見出しの下に、太い英字の小ラベルを添える
点線区切りのリンクリスト（link-list）: 見出しと英字の小ラベルに、右側の矢印アイコンを添える。行は白の点線で区切る
FAQ のタブ（faq-tabs）: 白いピル枠の中に 3 つのタブを並べ、選択中は赤で塗る
FAQ のアコーディオン（faq-item）: 白丸の Q アイコン、白い太字の質問、右端のプラス記号。行は点線で区切る
写真リンクカード（photo-link-card）: 角丸の写真の下に、ラベルと赤丸の外部リンクアイコンを置く
キャラ集合バナー（zigzag-banner）: 赤地に巨大な白い英字のスローガンを置き、キャラクターと社員を横一列に並べる。下端はジグザグにする

Do's and Don'ts

Do - 赤を大胆に全面に使い、白で情報を整理する - 人物とキャラクターを一緒に配置して、親しみを出す - 見出しには必ず英字のラベルを添える - 区切りには点線とジグザグを使い、遊び心を出す

Don't - 赤以外の強調色をボタンに使わない - 直角のカードや細い明朝体は使わない - 写真を矩形のまま人物に使わない（ブロブで切り抜く） - 赤地の上に黒文字を置かない

Page Structure

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

ヘッダー（ロゴとメニューを示す）: 赤地の上に白いピル型のバーを浮かせ、左にロゴ、右にハンバーガーメニューを置く
ファーストビュー（コンセプトを伝える）: 白の丸ゴシックで 2 行のキャッチを置き、社員とキャラクターを散らして配置する
メッセージ（企業の想いを伝える）: 赤地に白い太字の長文を置き、行間を広く取る
仕事紹介（職種を案内する）: 職種カードを 3 枚、縦に積む
働く環境（下層ページへ誘導する）: 点線区切りのリンクリストを 3 行並べる
よくある質問（不安を解消する）: タブとアコーディオンで、質問を 6 件並べる
写真ギャラリー（職場の雰囲気を見せる）: 角丸写真を横に流し、下端をジグザグにして生成り地へつなぐ
会社紹介（企業情報へ誘導する）: 生成り地に赤い見出しを置き、写真リンクカードを 4 枚並べる
スローガンバナー（ブランドの印象で締める）: 巨大な白い英字のスローガンの下に、キャラクターと社員の集合写真を置く
フッター（サイトマップを示す）: 白地に赤いキャッチを置き、赤の点線を上に付けた 2 列のリンクとロゴを並べる

Imagery

社員は白背景で全身か半身を撮り、切り抜いて使う
立体的な 3D キャラクターと、グミやキャンディーのモチーフを浮遊させる
人物の背後には、斜めに傾いた赤いブロブ形を敷く
職場の写真は明るく自然光で、作業中の様子を撮る
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はコンテンツ幅を約 70% にして中央に寄せる
PC の職種カードは、左にテキスト、右に写真の横長レイアウトにする
PC の働く環境は、左右に写真を置き、中央にリストを置く
PC のヘッダーはメニューを横に並べ、右端に応募ボタンを置く
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: Bold Red Playful Confectionery Recruiting LP
description: ページの大部分を鮮やかな赤で塗り、白い角丸カードと白文字で情報を並べる採用サイト。キャラクターと社員写真を不定形の赤いブロブで切り抜いて、元気で親しみやすい印象を作る。下部は生成り地に切り替え、境界はジグザグの波形にする。
colors:
  primary: '#E70014'
  on-primary: '#FEF7F6'
  surface: '#FFFFFF'
  cta: '#E70014'
  on-cta: '#FFFFFF'
  background-alt: '#FFF7EC'
  background: '#FFFFFF'
  text: '#D80516'
  text-body: '#3C3C3C'
  accent-1: '#F08080'
  tint-1: '#FFEDE2'
  secondary: '#C50011'
  text-muted: '#919191'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  accent:
    fontFamily: Quicksand
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  body-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 18px
    fontWeight: 700
    lineHeight: 2.2
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 12px
  lg: 28px
  full: 999px
spacing:
  unit: 8px
  card: 36px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  job-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 480px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  section-heading:
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    height: 70px
  link-list:
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 82px
  faq-tabs:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  faq-item:
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 56px
  photo-link-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 260px
  zigzag-banner:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 420px
---

# DESIGN.md — 真紅×白カードのポップな菓子メーカー採用 LP（Bold Red Playful Confectionery Recruiting LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感
- **キーワード**: 真紅の全面地・白い角丸カード・ブロブ形の切り抜き・キャラクター・点線の区切り・ジグザグ境界
- **地の質感**: フラットな単色の面。影はカードにだけ薄く付ける
- **形**: 大きな角丸カード、ピル型ボタン、有機的なブロブ形、ジグザグの波形
- **温度感**: 暖かく、エネルギッシュ

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E70014` | ブランドの赤（全面の地） | 40% | 画素の実測 |
| `on-primary` | `#FEF7F6` | 赤地の上の白文字 | 3% | 画素の実測 |
| `surface` | `#FFFFFF` | 白い角丸カード | 18% | 画素の実測 |
| `cta` | `#E70014` | カード内のピル型ボタン | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタンの文字 | 0% | 画素の主要色に補正 |
| `background-alt` | `#FFF7EC` | 会社紹介の生成り地 | 9% | 画素の実測 |
| `background` | `#FFFFFF` | フッターの白地 | 8% | 画素の実測 |
| `text` | `#D80516` | 白地の上の赤い見出し | 0% | 画素の実測 |
| `text-body` | `#3C3C3C` | カード内の本文 | 1% | 推定 |
| `accent-1` | `#F08080` | 英字ラベル（薄い赤） | 0% | 推定 |
| `tint-1` | `#FFEDE2` | カード背面の巨大な英字透かし | 2% | 画素の主要色に補正 |
| `secondary` | `#C50011` | 写真背後の濃い赤ブロブ | 3% | 画素の実測 |
| `text-muted` | `#919191` | フッターの補助リンク | 0% | 画素の実測 |

- ページの上から 6 割は赤一色の地にし、文字は白にする
- カードは白で、見出しとボタンは赤、本文はダークグレーにする
- 会社紹介は生成り地、フッターは白地に切り替える
- 強調色は赤だけ。ほかの色はキャラクターと写真に任せる
- 区切り線は赤地なら白の点線、白地なら赤の点線にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ | 丸ゴシック | M PLUS Rounded 1c | 800 | 32px | 1.4 | 0.04em |
| `headline-lg` | セクションの見出し（和文） | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.3 | 0.03em |
| `headline-md` | カードの部門名 | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.02em |
| `accent` | 見出し下の英字ラベル、巨大な透かし | 欧文サンセリフ | Quicksand | 700 | 14px | 1.2 | 0.05em |
| `body-lg` | 赤地のリード文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 18px | 2.2 | 0.03em |
| `body-md` | カード本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.02em |
| `headline-sm` | リスト項目と FAQ の質問 | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.6 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em |

- 和文の見出しの下には、必ず小さな英字ラベルを添える
- 見出しは太い丸ゴシックで、柔らかく元気な印象にする
- カードの背面に、セクション名の英字を淡い赤で大きく敷く
- 番号は赤い丸の点と 2 桁の数字で示す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。フッターのリンクだけ 2 カラム
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 80px、基本単位 8px、カード内 36px（375px 幅換算）
- カードは画面幅の約 90% にし、縦に 24px 間隔で積む
- カード内の文字は左右に約 36px の余白を取る
- リストは白の点線で区切り、各行の右端に丸い矢印アイコンを置く
- 写真のギャラリーは横に流れる角丸タイルにし、画面の端で切れるように見せる

## Elevation & Depth

- カードは基本フラット。会社紹介のカードにだけ薄い影を付ける
- キャラクターや写真に影は付けない

## Shapes

- **角丸**: 小 8px ／ 中 12px ／ 大 28px。ボタンはピル型。
- **写真の切り抜き**: 人物は赤いブロブ形の上で切り抜き、上端をはみ出させる。風景の写真は角丸の矩形にする
- **セクション境界**: 赤地から生成り地へはジグザグの波形で切り替える
- 大きいカードは角丸 28px、写真カードは 12px にする
- ボタンとタブはピル型にする
- Q のアイコンは白い正円にする

## Components

- **職種カード**（`job-card`）: 白の角丸カード。ブロブ切り抜きの写真、番号、見出し、英字ラベル、本文、背面の英字透かしで構成し、ボタンは下端にまたがせる
- **ピル型ボタン**（`button-primary`）: 赤地に白文字。右端に白丸の矢印を置く
- **和英 2 段の見出し**（`section-heading`）: 大きな和文の見出しの下に、太い英字の小ラベルを添える
- **点線区切りのリンクリスト**（`link-list`）: 見出しと英字の小ラベルに、右側の矢印アイコンを添える。行は白の点線で区切る
- **FAQ のタブ**（`faq-tabs`）: 白いピル枠の中に 3 つのタブを並べ、選択中は赤で塗る
- **FAQ のアコーディオン**（`faq-item`）: 白丸の Q アイコン、白い太字の質問、右端のプラス記号。行は点線で区切る
- **写真リンクカード**（`photo-link-card`）: 角丸の写真の下に、ラベルと赤丸の外部リンクアイコンを置く
- **キャラ集合バナー**（`zigzag-banner`）: 赤地に巨大な白い英字のスローガンを置き、キャラクターと社員を横一列に並べる。下端はジグザグにする

## Do's and Don'ts

**Do**
- 赤を大胆に全面に使い、白で情報を整理する
- 人物とキャラクターを一緒に配置して、親しみを出す
- 見出しには必ず英字のラベルを添える
- 区切りには点線とジグザグを使い、遊び心を出す

**Don't**
- 赤以外の強調色をボタンに使わない
- 直角のカードや細い明朝体は使わない
- 写真を矩形のまま人物に使わない（ブロブで切り抜く）
- 赤地の上に黒文字を置かない

## Page Structure

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

1. **ヘッダー**（ロゴとメニューを示す）: 赤地の上に白いピル型のバーを浮かせ、左にロゴ、右にハンバーガーメニューを置く
2. **ファーストビュー**（コンセプトを伝える）: 白の丸ゴシックで 2 行のキャッチを置き、社員とキャラクターを散らして配置する
3. **メッセージ**（企業の想いを伝える）: 赤地に白い太字の長文を置き、行間を広く取る
4. **仕事紹介**（職種を案内する）: 職種カードを 3 枚、縦に積む
5. **働く環境**（下層ページへ誘導する）: 点線区切りのリンクリストを 3 行並べる
6. **よくある質問**（不安を解消する）: タブとアコーディオンで、質問を 6 件並べる
7. **写真ギャラリー**（職場の雰囲気を見せる）: 角丸写真を横に流し、下端をジグザグにして生成り地へつなぐ
8. **会社紹介**（企業情報へ誘導する）: 生成り地に赤い見出しを置き、写真リンクカードを 4 枚並べる
9. **スローガンバナー**（ブランドの印象で締める）: 巨大な白い英字のスローガンの下に、キャラクターと社員の集合写真を置く
10. **フッター**（サイトマップを示す）: 白地に赤いキャッチを置き、赤の点線を上に付けた 2 列のリンクとロゴを並べる

## Imagery

- 社員は白背景で全身か半身を撮り、切り抜いて使う
- 立体的な 3D キャラクターと、グミやキャンディーのモチーフを浮遊させる
- 人物の背後には、斜めに傾いた赤いブロブ形を敷く
- 職場の写真は明るく自然光で、作業中の様子を撮る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツ幅を約 70% にして中央に寄せる
- PC の職種カードは、左にテキスト、右に写真の横長レイアウトにする
- PC の働く環境は、左右に写真を置き、中央にリストを置く
- PC のヘッダーはメニューを横に並べ、右端に応募ボタンを置く
- 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-838b7d24`（元 LP の URL から採番）
- **元 LP**: https://www.nobel.co.jp/recruit/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 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.nobel.co.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