DESIGN.md — 青グラデと円形写真の誠実な採用 LP（Ocean Blue Gradient Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、やさしい・柔らかい
• キーワード: 青グラデーション・円形写真・大きな曲線区切り・ピル型ボタン・手書き風コピー・人物中心
• 地の質感: フラットな面にグラデーションをかける。影はほぼ付けない。
• 形: 円・弧・ピル型を主役にした柔らかい形。
• 温度感: 青の寒色を主にしつつ、人物写真で温かみを出す。

Colors

• 上半分は水色から濃紺への縦グラデーション地にし、文字は白にする。
• 中盤は淡い水色グレーから白へ移る明るい地にし、見出しを明るい青にする。
• ボタンは濃い青（primary）の塗りに白文字を基本とする。
• 最後の ENTRY 帯は再び水色グラデーションにし、白塗りのボタンに青文字を載せる。
• 暖色は使わない。温かみは写真で出す。
• interview-card は文字 #167DC8 × 背景 #FFFFFF のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#157AC3、4.56:1）を使う。

Typography

• 大見出しは 2 行に分け、文末を句点で締める。
• 見出しの上に小ラベルを置く 2 段構成にする。
• 手書き風の書体は FV のキャッチだけに使う。
• 本文は小さめにし、行間を 2.0 前後にとって軽く見せる。
• 英字の大見出しは字間を広くとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューカードだけ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出しとラベルは左揃え、ボタンは中央に置く。
• 円形写真は画面幅の 75〜90% で中央に置く。
• ボタンは幅約 75% で縦に並べ、間隔は 16px 前後。
• ワークライフバランスの写真は左端まで裁ち落とす。
• ENTRY 帯だけ中央揃えにする。

Elevation & Depth

• 影はほぼ使わない。
• 階層は面の色差と半透明のリングで表す。
• カードも影なしで角丸だけにする。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は円形で切り抜き、外側に太い半透明のリングを付ける。カードの写真は角丸の長方形にする。
• セクション境界: 画面幅いっぱいの大きな弧（上に凸・下に凸）で区切る
• ボタンはすべてピル型にする。
• 写真上のボタンは白い細線で縁取る。
• セクションの境界は直線ではなく曲線にする。
• インタビュー写真の右下に白い角丸ラベルを重ねる。

Components

• 青いピル型の誘導ボタン（button-primary）: 矢印アイコンと短いラベルを並べる。グラデーション地の上では白い細線の縁取りを付ける。
• 白いエントリーボタン（button-entry）: 青地の上に置く大きめの白いピル型。文字は青で、矢印を付ける。
• 白線の縁取りボタン（button-outline）: 透明な地に白い細線と白文字。ENTRY 帯の補助導線に使う。
• リング付き円形写真（photo-ring）: 人物を円形に切り抜き、外側に半透明の太いリングを重ねる。
• ラベル＋大見出し（section-heading）: 小さいラベルの下に、2 行の太い見出しを置く。
• 社員インタビューカード（interview-card）: 角丸写真の右下に所属ラベルを重ね、下に青い見出しと右矢印、さらに一行の要約を置く。横スクロールで並べる。
• 曲線のセクション区切り（curve-divider）: 次のセクションの色で塗った大きな弧。

Do's and Don'ts

Do - 面は青のグラデーションと淡い水色の 2 系統で構成する。 - 人物写真は円形にリングを付けて見せる。 - ボタンは矢印付きのピル型に揃える。 - セクションは大きな弧でつなぐ。 - 見出しは小ラベルと 2 行の大見出しで組む。

Don't - 赤や橙などの強い暖色を入れない。 - 四角い直線的な区切りや鋭い角を使わない。 - 濃い影や立体的なボタンにしない。 - 手書き風の書体を本文や見出しに広げない。 - 1 つのセクションに文字を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（企業の想いを感情に訴えて伝える）: ぼかした人物写真に暗めの被せを敷き、手書き風の大きなキャッチと白い本文を重ねる。下に動画ボタンを置き、弧で次のセクションへつなぐ。
2. トップメッセージ（代表者の考えを伝える）: 水色グラデーション地に、ラベル・白い大見出し・リング付きの円形顔写真・ボタンを縦に並べる。
3. 会社を知る（事業と組織を紹介する）: 濃い青の地に大見出しと円形写真を置き、下に 2 つの誘導ボタンを縦に並べる。
4. 働き方（成長できる環境を訴求する）: 弧の下から淡い地に切り替える。青文字の見出し、淡いリング付きの円形写真、青ボタン 2 つで構成する。
5. 社員インタビュー（働く人の個性とキャリアを見せる）: 角丸の写真カードを横スクロールで並べ、下に一覧へのボタンを置く。
6. ワークライフバランス（福利厚生と支援制度を伝える）: 白地に見出し、裁ち落としの角丸写真、ボタンを並べる。
7. エントリー CTA（応募へ誘導する）: 弧で水色グラデーションに切り替え、大きな英字見出し・短い呼びかけ・縁取りボタン・白い大きなボタン 2 つを置く。

Imagery

• 接客中の社員を自然光で撮り、自然な笑顔をとらえる。
• 店舗の棚や店内を背景にして、浅い被写界深度でぼかす。
• 白や明るい服装で、清潔感のある色調にそろえる。
• FV 用には人物の横顔をぼかした写真を使う。
• イラストは使わず、写真と幾何学的な円だけで構成する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はテキストと円形写真を左右 2 カラムにし、左右を交互に入れ替える。
• PC の誘導ボタンは、細線の円が重なったリンクカードに置き換える。
• PC のインタビューは 3〜4 枚を並べ、左右の矢印で送るカルーセルにする。
• PC の ENTRY は左に文章、右にボタンを縦に積む 2 カラムにする。
• PC の FV は中央揃えにし、下端を大きな弧で切る。

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