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

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

Overview

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

Colors

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

Typography

• 見出しは、日本語のセクション名の直下にオレンジの英字を小さく添える。
• 本文も太めのゴシックにし、紺で行間を広く組む。
• 詩のような短い行を改行で区切り、段落の間は 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。