DESIGN.md — 空色グラデと白カードの新卒採用 LP（Sky Blue Gradient Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、ポップ・元気
• キーワード: 空色グラデーション・白カードの重ね・大きな白抜き欧文・社員の自然な写真・丸矢印ボタン
• 地の質感: フラットな面とやわらかな線形グラデーション。写真の上に青の半透明オーバーレイをかける
• 形: 写真は角丸 8px 前後。セクションの上辺だけを大きな角丸にする。ボタンはピル型で右端に丸矢印を付ける
• 温度感: やや寒色寄り。ピンクと緑を CTA のアクセントに使う

Colors

• 地は白・淡い水色・淡い青紫を交互に使い、セクションを切り替える
• 大きな面は左上の水色から右下の青紫へ流れるグラデーションにする
• 写真の背景には青の半透明オーバーレイをかけ、色調をそろえる
• セクションのラベル（英字）は濃い青、見出しは濃いグレーにする
• ピンクと緑は応募 CTA だけに使う
• 背景に敷く大きな欧文は白か淡い線だけで描き、主張させない
• button-entry は文字 #FFFFFF × 背景 #FD5B8B のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA0347、4.56:1）を使う。
• button-career は文字 #FFFFFF × 背景 #44D18C のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#218655、4.56:1）を使う。
• fixed-entry は文字 #FFFFFF × 背景 #FD5B8B のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA0347、4.56:1）を使う。

Typography

• 見出しの上に英字ラベルを小さく置き、2 段で組む
• FV のキャッチは 1 行ずつ白帯に乗せ、写真の上に置く
• 背景の欧文は見出しより背面に置き、一部が写真に隠れてもよい
• 本文は行間 2.0 と広めにとり、短い行で改行する
• 見出しは 1〜2 行に収め、太字は 700 以上にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストカードの 2 カラムを重ねて配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真と白カードは少しずらして重ね、奥行きを出す
• 左右に配置を振り分け、セクションごとに写真の位置を入れ替える
• 大きな欧文は見出しの真上か背面に置く
• ボタンは各セクションの末尾に左寄せで 1〜2 個置く
• CTA ブロックはグラデーションの枠の中に白い箱を入れて作る

Elevation & Depth

• 白カードはごく薄い影（0 4px 16px rgba(60,100,180,0.08)）だけにする
• 動画サムネイルは青の太枠で囲み、影は付けない
• ボタンには影を付けず、白地のボタンは細い枠線だけにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 48px。ボタンはピル型。
• 写真の切り抜き: 横長の長方形を角丸 8px で切り抜く。一部の写真は画面の端まで裁ち落とす
• セクション境界: セクション上辺の左右を大きな角丸（48px 前後）にした面で切り替える
• ボタンはピル型で、右端に水色の丸矢印アイコンを付ける
• 社員カードは上に写真、下に青いグラデーションの帯を置く
• FV の右上には縦に並ぶピル型の固定ボタンを置く

Components

• 新卒エントリーボタン（button-entry）: ピンクのピル型。左に英字と小さな日本語、右に矢印を置く
• キャリア採用ボタン（button-career）: 緑のピル型。エントリーボタンと横に並べる
• 丸矢印付きサブボタン（button-arrow）: 白地のピル型に細い枠線を付け、右端に水色の丸矢印アイコンを置く
• 背景欧文付き見出し（heading-bg-word）: 大きな白抜きの欧文を敷き、その上に英字ラベルと日本語見出しを重ねる
• 写真に重ねる白カード（overlap-card）: 写真の角に重ねた白い箱に、ラベル・見出し・短文・ボタンを入れる
• 社員カード（member-card）: 人物写真の下に青いグラデーションの帯を付け、所属・名前・職種タグを白文字で入れる
• ニュース帯（news-bar）: FV 下に重ねる白いピル型の帯。ラベル・日付・1 行のお知らせと一覧ボタンを並べる
• 固定エントリーボタン（fixed-entry）: 右上に固定する縦並びのピル型ボタン。ピンクと青の 2 つを置く

Do's and Don'ts

Do - 写真は自然光のオフィスで、笑顔で協働する若手社員を写す - セクションごとに写真とカードの左右を入れ替え、リズムを作る - グラデーションは水色から青紫の範囲に収める - 各セクションの末尾に丸矢印ボタンを置き、詳細ページへ誘導する - 背景の大きな欧文はセクション名と同じ単語にする

Don't - 濃い黒や原色の赤を広い面に使わない - ピンクと緑を CTA 以外に使わない - 影や立体的な装飾を強くしない - 本文を詰めて組まない（行間 2.0 前後を保つ） - イラスト主体にせず、実写の社員写真を主役にする

Page Structure

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

1. ファーストビュー（職場の雰囲気とメッセージを一目で伝える）: 社員の集合写真を全面に敷き、青いグラデーションを重ねる。キャッチは 4 行の白帯に乗せ、下にニュース帯を置く
2. 理念メッセージ（会社の価値観を語る）: 左に短い行の本文を縦に並べ、右に人物写真で中を埋めた大きな欧文ロゴを置く
3. 動画紹介（動画で社風を伝える）: 淡い青紫の地に三角の装飾を置く。中央に青枠の動画、右に縦に並ぶサムネイルを配置する
4. 代表メッセージ（会社の想いを伝える）: 大きな欧文を背景に敷き、写真を重ねた青いグラデーション面に見出しと丸ボタンを入れる
5. 写真ギャラリー（日常の様子を見せる）: 角丸の写真を横 2 段に並べ、ずらして配置する
6. 社風（文化・制度へ誘導する）: 上辺を角丸にした水色の地に、大きな写真と白カードを重ねる
7. 事業紹介（仕事内容へ誘導する）: 左に写真、右下に白カードを重ね、背後に大きな欧文を敷く
8. 社員紹介（先輩社員の声へ誘導する）: 縦書きの大きな欧文を左に置く。バナーと 4 人の社員カードを並べ、下にボタンを 2 つ置く
9. 応募 CTA（エントリーを促す）: 青いグラデーションの枠の中に白い箱を入れ、見出しの下にピンクと緑のボタンを並べる
10. ニュース（最新のお知らせを伝える）: オフィス写真の帯に白い箱を重ね、日付と本文の一覧を細い線で区切る
11. フッター（ページトップへ戻る）: 白地の中央にロゴとページトップへのリンクを置く

Imagery

• 明るい窓際のオフィスで、パソコンを囲んで談笑する若手社員を撮る
• 写真は彩度を控えめにし、白と青が基調の清潔な色調にする
• 背景の写真には青の半透明オーバーレイをかける
• 大きな欧文の文字の中に人物写真を切り抜いて入れる装飾を使う
• 三角の大きな幾何学図形を、淡い青で背景に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は写真を全幅にし、白カードは写真の下に少し重ねて縦に積む
• 背景の欧文は SP では 48〜64px に縮め、はみ出す部分は切る
• 社員カードは SP では 2 列にする
• CTA の 2 ボタンは SP では縦に並べる
• 固定エントリーボタンは SP では画面下の固定バーにする

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