DESIGN.md — ピンク×水色の波グラデ採用サイト LP（Pastel Gradient Wave Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、クール・先進的、かわいい
• キーワード: パステルグラデーション・波形の境界・円形切り抜き写真・巨大欧文ループ・黄緑の楕円ボタン・余白多め
• 地の質感: 白地にピンクと水色のグラデをかすみのように重ねる。部分的に細かい粒子ノイズが入る。
• 形: 円・大きな角丸・波線を組み合わせる。直線の区切りはほぼ使わない。
• 温度感: やや暖かめのニュートラル。ピンクの温かさと水色の涼しさが半々。

Colors

• 地は白にする。ピンクと水色は波形のグラデーション面として、セクションの境目にだけ流す。
• ピンクと水色は交互に使い、ページ全体を流れるように見せる。
• 主 CTA は水色→ピンクの横グラデーションにし、文字は白にする。
• サブボタンは淡い黄緑の面に濃グレーの細い枠と文字。黄緑はボタンと写真上の番号だけに使う。
• 文字は真っ黒を使わず、濃いグレーにする。
• 装飾の巨大欧文は不透明度を落とした淡いピンクか水色にし、本文の邪魔をしない。
• button-primary は文字 #FFFFFF × 背景 #D8AFC0 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AF5B7E、4.54:1）を使う。

Typography

• 見出しは小さな英字ラベルと太い日本語見出しの 2 段で組む。
• コンセプト文は中央揃えにし、行間を 2 倍以上とる。
• 装飾の欧文は細いウェイトで画面からはみ出すほど大きくし、横にループさせる。
• 数字は細めの欧文を巨大にし、淡いグラデで重ねて飾りにする。
• 本文は 12〜14px の濃グレーで、左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出し・本文が左、写真が右の 2 カラム。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 12px と狭め。写真は画面端まで抜ける配置も使う。
• 見出し→リード文→楕円ボタンの順で縦に並べる。
• 職種カードは左右交互にずらし、少し傾けて重ねる。
• セクションの間は波形のグラデ面でつなぐ。
• サブセクションどうしは細い横線で区切る。

Elevation & Depth

• 影はほぼ使わない。平面的に作る。
• 奥行きは写真の重なりとカードの傾きで出す。
• グラデのかすみ面を、写真の背後に敷いて浮かせる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 正円、または片側だけ大きく角を丸めた角丸。カード写真は 16px の角丸で少し傾ける。
• セクション境界: ピンクと水色のグラデーションの波線。大きな角丸で白い面を被せる切り替えも使う。
• サブボタンは横長の楕円（ピル型より丸みが強い）にする。
• 主 CTA は全幅のピル型にする。
• 直角の写真は全幅のものだけにする。

Components

• グラデーション CTA（button-primary）: 全幅のピル型。水色→ピンクの横グラデに白い太字。2 つを縦に並べる。
• 黄緑の楕円サブボタン（button-oval）: 淡い黄緑の楕円に細いグレーの枠線。ラベルの右に矢印を置く。
• 英字ラベル付き見出し（section-heading）: 小さな英字ラベルの下に、太い日本語見出しを置き、その下にリード文を続ける。
• 巨大欧文ループ帯（loop-text）: 細字の巨大欧文を淡色で横に流す。手前に商品の切り抜き画像を散らす。
• 傾いた職種写真カード（job-card）: 角丸写真の左上に英字の職種名、左下に黄緑の大きな番号。左右交互に傾けて重ねる。
• グラデ数字装飾（number-deco）: 水色〜紫の淡いグラデをかけた巨大数字を、見出しの背後に重ねる。
• 球体ハンバーガーボタン（nav-menu-button）: 右上に置く、光沢のある濃紺の円。中に白い三本線を入れる。
• フッターリンク一覧（footer-nav）: 白地に縦並びのテキストリンク。外部リンクは下線と斜め矢印で示す。

Do's and Don'ts

Do - 写真は円形か大きな角丸で切り抜き、大小を重ねて配置する。 - セクションの境界には、ピンクと水色の波グラデを使う。 - 見出しは英字ラベルと日本語見出しのセットにする。 - サブボタンは黄緑の楕円で統一する。 - 余白を広くとり、軽い印象を保つ。

Don't - 濃い原色や黒のベタ面を広く使わない。 - 直線の帯や四角い箱で、セクションを区切らない。 - 影の強いカードや立体ボタンにしない。 - 装飾の欧文を濃い色にして、本文と競合させない。 - CTA を単色にしない（グラデを保つ）。

Page Structure

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

1. ファーストビュー（職場の雰囲気を伝える）: 円形と角丸に切り抜いた社員写真を左右に重ね、下にパステルの波を敷く。
2. 商品ループ帯（扱っている商品を印象づける）: 商品の切り抜き画像と小さなロゴを横一列に流す。
3. コンセプト（企業の想いを伝える）: 中央揃えの短い詩的な文を 5 行並べ、最後に太字の一文で締める。
4. 巨大欧文装飾（リズムを作り、ブランドを想起させる）: 淡いピンクの細い欧文を画面からはみ出させ、商品画像を手前に添える。
5. 私たちについて（会社の姿勢を示す）: 英字ラベル・2 行の見出し・本文・楕円ボタンを置き、右下に円形写真を 2 枚重ねる。
6. 職種紹介（仕事内容へ誘導する）: ピンクのグラデ背景に、番号付きの傾いた写真カード 3 枚を左右交互に配置する。
7. 数字で見る会社（働き方を数値で伝える）: 大きな角丸の白い面に見出しを置き、背後に淡いグラデの巨大数字を重ねる。
8. 研修・サポート（成長支援を伝える）: 水色の波の下に、見出し・一行のリード・MORE ボタンを置き、細線で区切る。
9. 家族・学校向け案内（周囲の安心感を得る）: 研修セクションと同じ型で並べ、続けて片側角丸の大きな写真を入れる。
10. エントリー CTA（応募へ導く）: 淡い水色の粒子背景に、薄いグレーのコピーと太い英字見出しを置き、グラデのピル型ボタンを 2 つ並べる。
11. フッター（回遊と企業情報を示す）: 全幅の集合写真の下に、ロゴ風キャッチ・縦並びリンク・社章・波形のピンクの帯を置く。

Imagery

• 自然光の明るいオフィスで、社員が自然に会話・作業している写真。白・水色・ベージュの服装。
• 写真は高明度・低コントラストにし、青みがかった柔らかいトーンにそろえる。
• 商品は白背景の切り抜きで小さく散らす。
• 装飾はパステルの波グラデ、細かい粒子ノイズ、細字の巨大欧文で構成する。
• イラストやアイコンはほぼ使わず、写真と文字で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はテキストを左、写真やカードを右に置く 2 カラムにする。
• PC のファーストビューは、多数の写真を横一列に並べて画面端まで続ける。
• PC の職種カードは、3 枚を横に並べるカルーセル風にする。
• PC の CTA は 2 つのボタンを横並びにし、中幅にする。
• PC のフッターは、左にリンク、右にロゴ風キャッチの 2 カラムにする。

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