DESIGN.md — 水色×黄緑の流体ウェーブ新卒採用 LP（Fluid Pastel Wave Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 流体ウェーブ・パステル・緑の丸矢印・余白多め・角丸写真・爽やか
• 地の質感: フラットな単色面。影はほぼなく、うねる有機形状のパステル面だけで動きを出す
• 形: 角丸写真、正円ボタン、波形のセクション境界、円形の数字バッジ
• 温度感: やや涼しげで明るく、ニュートラルな中間

Colors

• 地は生成り白と薄グレーをセクションごとに交互に切り替える
• 境界には水色・淡黄・薄緑のうねるウェーブ面を重ねる
• 緑は丸ボタン・小見出し・日付・数字だけに使い、面では使わない
• 見出しは墨色、本文はやや薄いグレーで階層をつける
• カードは地よりわずかに明るい白で、影なしで区別する
• button-circle-arrow は文字 #FEFEFD × 背景 #4AA73F のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3A8432、4.6:1）を使う。
• button-entry は文字 #FEFEFD × 背景 #4AA73F のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3A8432、4.6:1）を使う。
• stat-circle は文字 #4AA73F × 背景 #FBFBF9 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3A8432、4.59:1）を使う。

Typography

• 見出しは中太で大きく、太字にしすぎない
• 小見出しは緑で大見出しのすぐ上に置く
• 本文は行間 2.0 以上で広く取る
• 数字は緑の太いコンデンス欧文にし、単位は小さく添える
• FV のキャッチは字間を広めに取り、3 行に分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード一覧は 2 カラムで、写真は横にはみ出すカルーセル
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 100px、基本単位 8px、カード内 22px（375px 幅換算）
• 左右の余白は約 20px
• 各セクションは小見出し→大見出し→本文→リンクボタンの順に並べる
• リンクは左寄せの太字文言と緑の丸矢印を横に並べる
• セクション上下にウェーブを入れるため、余白を多めに取る

Elevation & Depth

• 基本は影なしのフラット
• 数字の円バッジにだけごく薄い影をつける
• カードは地との明度差だけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 12px の長方形。帯写真や FV では波形にくり抜く
• セクション境界: 水色・淡黄・薄緑の重なる不規則なウェーブ曲線
• ボタンは正円にする
• タグは角丸なしの細枠
• リンクカードの写真は下辺を半円状にくり抜き、見出しを載せる
• ウェーブは左右非対称の滑らかな曲線にする

Components

• 緑の丸矢印ボタン（button-circle-arrow）: 直径約 46px の緑の正円に白い矢印。左に太字のリンク文言を添える
• エントリー大円ボタン（button-entry）: 直径約 125px の緑の円の中に文言と矢印を 2 行で入れる
• 緑の小見出し（section-eyebrow）: 大見出しの上に置く緑の太字ラベル
• ニュースリスト枠（news-card）: 角丸の白い枠に、緑の日付と枠付きカテゴリタグ、細線区切りの記事を並べる
• 数字の円バッジ（stat-circle）: 白い正円に線画のイラスト、項目名、緑の大きな数字を入れる
• 吹き出しの声カード（voice-bubble）: 白い吹き出しの右上に緑の引用符、下部に薄緑の線画人物を置く
• 細枠タグ（tag-outline）: グレーの細枠に緑の小さな文字を入れる。入社年度や職種に使う
• 写真付きリンクリスト（link-list-card）: 下辺を半円にくり抜いた写真に見出しを載せ、下に細線区切りと緑矢印のリンクを並べる

Do's and Don'ts

Do - セクション境界はパステルの波形でつなぐ - 緑はボタン・小見出し・数字に絞って使う - 写真は角丸で、横にずらして重ねたりカルーセルで見せたりする - 白とグレーの地を交互に切り替えてリズムを出す - 余白と行間を広く取る

Don't - 濃い色や原色を広い面で使わない - 直線のきつい区切り線や角張った帯で区切らない - ボタンを角型やピル型にしない - 強い影やグラデーションのボタンを使わない - 見出しを極太にしない

Page Structure

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

1. ファーストビュー（企業の志と爽やかな印象を伝える）: 水色地に淡黄・ミントのウェーブを重ね、空を見上げる若手 2 人の写真と 3 行のキャッチを置く
2. ニュース（最新情報で信頼感を出す）: グレー地に角丸の白い枠を置き、日付・タグ・記事を 2 件並べ、丸矢印リンクを添える
3. メッセージ（企業理念を伝える）: 角丸写真の横カルーセルで挟み、小見出し・大見出し・長めの本文を置く
4. 数字で知る会社（規模と働きやすさを数字で示す）: 白い円バッジを横に並べ、線画イラストと緑の大きな数字を入れる
5. 職種紹介（仕事のフィールドを伝える）: 波形にくり抜いた現場写真の帯の下に、動画・本文・リンクを置く
6. 社員インタビュー（人物のストーリーを見せる）: 職種の六角ラベル、一言コメント、角丸の人物写真、タグをまとめたスライダー。ドットのページ送りを付ける
7. 座談会（若手のリアルな声を伝える）: 横長の集合写真、太字の副題、本文、リンクを縦に積む
8. 内定者の声（選考を受ける人の共感を得る）: 白い吹き出しカードを互い違いに並べ、緑の引用符と線画の人物を入れる
9. 働く環境（制度や福利厚生を紹介する）: 淡黄のウェーブの上に本文を置き、角丸写真と丸矢印の 2 カラムカードを並べる
10. リンク集（採用情報・会社情報へ誘導する）: 下辺を半円にくり抜いた写真に見出しを載せ、矢印付きのリストを続ける
11. エントリー CTA（応募へ誘導する）: パステルのウェーブと笑顔の人物写真を重ね、3 行のキャッチと緑の大円ボタンを置く

Imagery

• 若手社員の自然光ポートレート。白シャツやスーツで、見上げる・笑顔のポーズ
• 明るい空の下の高層ビル・マンション・オフィス街
• 作業服やヘルメット姿の現場写真で実務感を出す
• 淡い緑・ミントの単色線画で描いた人物イラストやアイコン
• パステル 3 色をうねらせて重ねる抽象ウェーブ装飾
• 写真は青みのある爽やかな色調に寄せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はテキストと写真を左右 2 カラムで並べる
• PC の数字バッジは見出しの周りに散らして配置する
• PC の吹き出しカードとリンク集は横に 3 つ・2 つ並べる
• PC の FV は横長にし、キャッチを右上に配置する
• PC は右端にページトップ用の小さな丸ボタンを各セクションに置く
• ウェーブは 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 行書くと起動時に読み込まれる。