DESIGN.md — 生成り×くすみパステルの保育園採用 LP（Soft Organic Blob Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、ナチュラル、上品・高級、シンプル・ミニマル
• キーワード: 生成り・くすみパステル・ブロブ形・明朝見出し・大きな余白・大きな欧文の透かし文字
• 地の質感: ほぼフラット。ブロブの中にごく淡いグラデーションと格子模様、背景にぼんやりした光の円を置く
• 形: 不定形のブロブ、円形の写真切り抜き、角丸がほぼない白カード
• 温度感: 暖かめ。ピーチ寄りのやわらかい暖色

Colors

• 地は生成りで統一し、真っ白な地は使わない
• 強調はピーチ・ミント・青の 3 色のブロブで分け、1 ブロブに 1 色だけ使う
• コーラルピンクは ENTRY ボタンなど主要な導線だけに使う
• 最後の CTA セクションだけはピーチの面で塗り、その上に白カードを置く
• 文字は黒にせず、濃い暖色グレーを使う
• 大きな欧文は背景に白で溶け込ませる
• button-entry-circle は文字 #FCFCFA × 背景 #EE6E7A のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E41C2F、4.54:1）を使う。
• round-badge は文字 #FCFCFA × 背景 #B59B8C のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#8D6D5B、4.57:1）を使う。

Typography

• 見出しは明朝で字間を 0.2em ほど広く取る
• 本文は行間 2 以上で 1 行を短く区切り、段落ごとに余白を入れる
• 見出しの下に小さな英字ラベルを添える
• 数字は細い欧文セリフを特大で使い、見出しと組み合わせる
• 太字を多用しない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は本文とブロブの 2 カラムで、左右をずらして配置
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 余白を広く取り、要素どうしの間隔は 80px 以上空ける
• ブロブは左右交互にずらし、少し重ねて置く
• 写真は円形やブロブ形で切り抜き、一部を画面の端からはみ出させる
• 園の紹介は横スクロールのカルーセルにして、進捗バーを付ける
• ヘッダーは固定せず、右上にハンバーガーメニューと ENTRY の丸ボタンを置く

Elevation & Depth

• ブロブとページの地には影を付けない
• 白カード・ボタンにはごく薄い影（0 4px 16px rgba(0,0,0,0.05)）を付ける
• 背景にぼかした淡い光の円を置いて奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: ファーストビューは大きな楕円、ストーリーは円とブロブの組み合わせ、園の写真は角丸のない長方形
• セクション境界: 直線で切り替える。背景色の切り替えだけで区切る
• 装飾の主役は不定形のブロブにする
• ENTRY ボタンは正円にする
• 矢印は細い線の横矢印か、丸の中の矢印にする
• 四角いカードは角丸をほぼ付けない

Components

• ENTRY の丸ボタン（button-entry-circle）: 右上に置くコーラルの正円ボタン
• ブロブの導線カード（blob-card）: パステルのブロブに白い見出しラベル・短い説明・細い矢印を重ねる
• 番号付きストーリーのリスト（story-list-item）: 小さな番号・タイトル・丸い矢印を横に並べ、下に区切り線を引く
• 特大数字の見出し（big-number-heading）: 欧文セリフの大きな数字の横に、明朝の見出しを添える
• 園の紹介カード（facility-card）: 写真に白い園名タグを重ね、下にアクセスと住所を書く
• CTA の白カードボタン（cta-white-card）: ピーチ地に置く白い長方形。日本語ラベル・英字サブ・丸矢印を入れる
• 丸い告知バッジ（round-badge）: ローズブラウンの円に、白の小さな告知文を入れる
• カルーセルの操作部（carousel-nav）: 白い丸の前後ボタンと、細い進捗バーを並べる

Do's and Don'ts

Do - 生成りの地と、くすんだパステルを守る - 見出しは明朝で字間を広く取る - 写真やブロブを有機的な形で切り抜き、左右に揺らして置く - 大きな欧文を背景に薄く入れる - 余白を贅沢に取る

Don't - 彩度の高い原色や黒い地を使わない - 角張ったボタンや太い枠線を多用しない - 情報を詰め込んだ訴求バナーを置かない - 影を強く付けない - 本文を長い行のまま組まない

Page Structure

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

1. ファーストビュー（職場の明るさと仲間感を伝える）: 右上に大きな楕円で切り抜いた集合写真を置き、左にロゴ×テーマ語、右下に丸バッジを添える
2. 欧文の透かし帯（ブランドの空気感を出す）: 白い大きな欧文セリフを、画面幅いっぱいに薄く流す
3. メッセージ（理念と、求職者への呼びかけ）: 左に明朝の見出しと短い行の本文、右に 3 色のブロブの導線カードを縦に交互に並べる
4. 職員の物語（キャリアの実例へ誘導する）: 左に円とブロブで切り抜いた写真のコラージュ、右に特大数字の見出しと番号付きリストを置く
5. 施設の紹介（勤務先の候補を見せる）: 写真カードを横スクロールで並べ、白丸の矢印と進捗バーを付ける
6. CTA（採用情報とエントリーへ誘導する）: ピーチの全幅帯に明朝の見出しを置き、白カードのボタンを 2 つ横に並べる
7. フッター（連絡先とサイトマップを載せる）: 生成りの地の左にロゴと住所、右に細い矢印付きのリンクを 2 列で並べる

Imagery

• 写真は自然光で明るく、少し彩度を落とし、白っぽい服装で統一する
• 人物はジャンプや笑顔など動きのある自然なカットにする
• 施設の写真は木目や暖色の内装が見える広角で撮る
• ブロブはパステルの淡いグラデーションに、細かい格子や網目のテクスチャを重ねる
• 背景にぼかした淡い円形の光をいくつか散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では本文とブロブを縦に積み、ブロブは左右交互に寄せる
• ファーストビューの楕円写真は SP では画面幅を超えるほど大きく置く
• 物語のコラージュは SP では写真を上、リストを下にする
• 園のカルーセルは SP で 1.2 枚見える幅にする
• CTA の 2 ボタンは SP では縦に積み、幅を 100% にする
• 透かし欧文は SP では 40px 前後に縮める

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 行書くと起動時に読み込まれる。