---
version: alpha
name: Playful Theme Park Recruiting LP
description: 生成りの地に、水色・オレンジ・黄の色面を波形の曲線で切り替えるテーマパーク系の採用 LP。ページを縦に貫く白い小道のようなうねりで流れをつくり、写真は不定形のブロブ型で切り抜く。紺の文字と白地に紺線のピル型ボタンで全体を引き締め、チューリップのイラストを散らしてやわらかく華やかに見せる。
colors:
  primary: '#1E3A7B'
  background: '#FFF2D8'
  surface: '#FFFFFF'
  secondary: '#F47F11'
  accent-1: '#FDBF50'
  accent-2: '#5CCCBC'
  accent-3: '#FEDA05'
  tint-1: '#82CB5E'
  tint-2: '#EE8F9B'
  background-alt: '#FFF9EB'
  dark-section: '#0A3681'
  marker: '#38B4CE'
  tint-2-accessible: '#DF2E44'
typography:
  display:
    fontFamily: Lexend
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  accent:
    fontFamily: Lexend
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.1
    letterSpacing: 0.08em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.06em
  note:
    fontFamily: Lexend
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.02em
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 96px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-pill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 58px
  button-circle-apply:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 110px
  section-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 60px
  staff-card:
    backgroundColor: '{colors.marker}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 320px
  category-card:
    backgroundColor: '{colors.tint-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 250px
  badge-new:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.surface}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 24px
  blob-photo:
    rounded: '{rounded.lg}'
    height: 220px
  menu-button:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.surface}'
    rounded: '{rounded.full}'
    height: 48px
---

# DESIGN.md — 生成り×水色×黄の曲線テーマパーク採用 LP（Playful Theme Park Recruiting LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか
- **キーワード**: 波形の色面・ブロブ型写真・白い小道・チューリップ・紺文字・パステル
- **地の質感**: フラットな塗りに、ゆるいグラデーションを少し足す。イラストはベクターで平面的に描く。
- **形**: 有機的な曲線とブロブ形を主役にし、ボタンはピル型か正円にする。
- **温度感**: 暖かく明るい。生成りと黄の暖色に、水色の爽やかさを合わせる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1E3A7B` | 見出し・本文・ボタン線の紺 | 4% | 推定 |
| `background` | `#FFF2D8` | 生成りのベース地 | 17% | 画素の実測 |
| `surface` | `#FFFFFF` | ボタン・募集要項の白地 | 12% | 画素の実測 |
| `secondary` | `#F47F11` | 英字サブ見出しのオレンジ | 1% | 画素の実測 |
| `accent-1` | `#FDBF50` | 会社紹介セクションの橙黄色面 | 10% | 画素の実測 |
| `accent-2` | `#5CCCBC` | スタッフ紹介の水色〜ターコイズ面 | 12% | 画素の実測 |
| `accent-3` | `#FEDA05` | トピックスの黄色面 | 8% | 画素の実測 |
| `tint-1` | `#82CB5E` | カードラベルの若草色 | 1% | 画素の実測 |
| `tint-2` | `#EE8F9B` | カードラベル・バッジのピンク | 1% | 画素の実測 |
| `background-alt` | `#FFF9EB` | 淡いクリームの帯 | 4% | 画素の実測 |
| `dark-section` | `#0A3681` | フッターの紺 | 2% | 画素の実測 |
| `marker` | `#38B4CE` | スタッフカード下部の青帯 | 2% | 画素の実測 |
| `tint-2-accessible` | `#DF2E44` | AA を満たす補正値（計算） |  | 計算 |

- セクションごとに地の色を切り替える。順番は生成り→橙黄→水色→生成り→黄→白。
- 色の境界は直線にせず、波形の曲線でつなぐ。
- 文字は紺 1 色を基本にする。英字サブ見出しだけオレンジにする。
- 採用区分などのカテゴリには、青・若草・ピンクを 1 色ずつ割り当てる。
- ボタンは白地＋紺の線＋紺の文字に統一する。強い塗りのボタンは使わない。
- フッターだけ濃紺の面にして、ページを締める。
- `badge-new` は文字 `#FFFFFF` × 背景 `#EE8F9B` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#DF2E44`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの欧文ロゴタイプ | 欧文サンセリフ | Lexend | 600 | 40px | 1.1 | 0.0em |
| `headline-lg` | 募集要項など大見出し | ゴシック | Zen Kaku Gothic New | 700 | 36px | 1.3 | 0.02em |
| `headline-md` | セクションのリード見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.6 | 0.04em |
| `headline-sm` | 日本語のセクション名・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.04em |
| `accent` | 英字サブ見出し（オレンジ） | 欧文サンセリフ | Lexend | 600 | 16px | 1.2 | 0.0em |
| `body-md` | メッセージ本文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 2.1 | 0.08em |
| `label-button` | ピル型ボタンのラベル | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.06em |
| `note` | 日付・所属・名前のイニシャル | 欧文サンセリフ | Lexend | 500 | 12px | 1.5 | 0.02em |

- 見出しは、日本語のセクション名の直下にオレンジの英字を小さく添える。
- 本文も太めのゴシックにし、紺で行間を広く組む。
- 詩のような短い行を改行で区切り、段落の間は 1 行空ける。
- 欧文は丸みのある幾何学サンセリフにする。
- ボタン以外では文字を中央に揃えず、基本は左揃えにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードは横スクロールのカルーセル。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
- 左右の余白は約 20px。
- セクションの区切りは、大きな波形の色面と装飾のための余白でつくる。
- カードは 1 枚約 250px 幅で、左右の隣のカードを少し見せる。
- 採用区分のカードは縦に 3 枚並べ、間を 28px 空ける。
- 応募ボタンは正円 3 つを横に並べる。

## Elevation & Depth

- 影はほぼ使わず、フラットに見せる。
- 奥行きは、色面の重なりと白い小道のうねりで表現する。
- 丸ボタンは白地＋紺の線で、背景から浮いて見せる。

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: FVと会社紹介の写真は不定形のブロブ型。カードは角丸 16px の長方形。横長の写真は四辺を少しふくらませたクッション形。
- **セクション境界**: 大きくうねる波形の曲線で区切る。
- カードの左上に、ブロブ形の色ラベルを重ねる。
- スタッフカードの下部は、波形の上辺をもつ色帯にする。
- ＋アイコンは、白地に紺線の正円の中に入れる。
- 応募ボタンは、直径約 110px の正円にする。

## Components

- **ピル型ボタン**（`button-pill`）: 白地＋紺の 2px 線。ラベルを左に、＋や▶のアイコンを右端に置く。
- **正円の応募ボタン**（`button-circle-apply`）: 白地＋紺の細線の正円。中に職種名 2 行と＋を入れる。
- **2 段のセクション見出し**（`section-heading`）: 紺の日本語セクション名の下に、オレンジの英字。続けて大きなリード見出しを置く。
- **スタッフカード**（`staff-card`）: 縦長の写真カード。左上に白い職種ピル、右上に＋の丸ボタンを置く。下部は波形の青帯で、ひと言と名前を白文字で載せる。
- **採用区分カード**（`category-card`）: 横長の写真カード。左上にブロブ形の色ラベルで区分名、右下に＋の丸ボタンを置く。
- **新着バッジ**（`badge-new`）: ピンクまたは若草のピル型。白文字で★を付ける。
- **ブロブ写真**（`blob-photo`）: 不定形に切り抜いた人物写真。大小 2 枚を重ねて配置する。
- **ハンバーガーボタン**（`menu-button`）: 右上に固定する濃紺の正円。白い 2 本線のアイコンを入れる。

## Do's and Don'ts

**Do**
- 地の色は波形で切り替え、白い小道の曲線をセクションをまたいでつなげる。
- チューリップのイラストを、各セクションの境目に散らす。
- 文字とボタンの線は紺に統一する。
- 写真は笑顔の人物を選び、ブロブ形か角丸で切り抜く。
- 英字のサブ見出しは、必ずオレンジで添える。

**Don't**
- 直線の区切りや、角張った箱型のレイアウトにしない。
- 黒や純粋なグレーを文字色に使わない。
- 塗りつぶしの強いボタンや、派手なグラデーションのボタンにしない。
- 影を濃くしない。
- 写真を四角いまま並べない。

## Page Structure

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

1. **ファーストビュー**（街の世界観と、採用サイトであることを伝える）: 生成り地に大きな風景写真を流線形で切り抜き、欧文ロゴと英字の副題を重ねる。小さなブロブ写真 2 枚とチューリップを散らす。
2. **イラスト導入**（FVから会社紹介へ視線をつなぐ）: 空と海と砂浜のフラットなイラストに建物を描き、白い小道の先を建物へ収束させる。
3. **会社紹介**（働く意義をメッセージで語る）: 橙黄の波形の地。ブロブ写真を重ね、短い行の詩的な本文とピル型ボタンを置く。
4. **動画・風景**（街の雰囲気を見せる）: クッション形の横長写真の下に、▶付きのピル型ボタンを置く。
5. **スタッフ紹介**（社員の声で親近感を出す）: 水色〜ターコイズの地。スタッフカードを横スクロールで並べ、下に「もっと見る」ボタンを置く。
6. **採用情報**（採用区分ごとの入口）: 生成り地に、色ラベル付きの写真カードを縦に 3 枚並べる。
7. **トピックス**（最新のお知らせ）: 黄色の波形の地。日付と新着バッジ付きのカードを横スクロールで並べる。
8. **募集要項・応募**（応募への導線）: 白地の大きな角丸ブロック。オレンジの大見出しの下に、正円の応募ボタンを 3 つ並べる。
9. **フッター**（締め）: 上辺が曲線の濃紺の面にする。

## Imagery

- 人物写真は、制服姿のスタッフの自然な笑顔を暖色の照明で撮り、背景をぼかす。
- 風景写真は花畑・運河・洋風建築を、明るくやわらかいトーンで撮る。
- イラストは輪郭線のないフラットなベクターで描き、洋館・空・海・丘を表す。
- チューリップはピンク・白・オレンジで描き、ゆるいグラデーションをかけて浮遊させる。
- 「Welcome」などの手書き風の欧文を、斜線で挟んだあしらいにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでも波形の色面と白い小道は維持し、横幅いっぱいに広げる。
- 会社紹介は、PCでは本文を左・ブロブ写真を右に置く 2 カラムにする。
- スタッフカードは、PCでは 4 枚を横に並べる。
- 採用区分カードは、PCでは 3 枚を横に並べる。
- 募集要項は、PCでは見出しを左・正円ボタン 3 つを右に置く。
- 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-35fffe5f`（元 LP の URL から採番）
- **元 LP**: https://www.huistenbosch.co.jp/recruit/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。