DESIGN.md — 紫グラデ×白地のメディア企業採用 LP（Violet Gradient Media Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、シンプル・ミニマル、信頼・誠実
• キーワード: 紫→青グラデーション・斜めカット・大きな欧文見出し・黒帯ラベル・白×ラベンダー交互・編集的
• 地の質感: フラットな面。写真にはグラデーションを半透明で重ね、ほかは単色の面と細線だけ
• 形: 斜めの面と細い円を組み合わせる。カードはほぼ角なし。ボタンはピル型の枠線か円形
• 温度感: やや寒色寄りのニュートラル。紫が熱量を足す

Colors

• 地はセクションごとに白と淡いラベンダーを交互に敷く
• 紫→青のグラデーションは FV・ロゴ・大きな図形だけに使う
• 本文中の色はリード見出しの紫ひとつにとどめる
• セクションラベルは必ず黒帯に白文字
• フッターはチャコールの地に白文字。補足の英字はグレー
• タグはカテゴリ別に淡い紫・橙・水色の地を使い、同系色の点を添える

Typography

• 見出しは英字大見出し＋日本語の補足 1 行のセットで組む
• 英字見出しは幾何学系サンセリフの中太。日本語は添え物に回す
• 本文は行間を 2.0 前後と広く取り、左揃えにする
• FV の大コピーだけ太い斜体で強く見せる
• ボタンの英字は大文字で字間を広く取る
• カード見出しの横に、縦線で区切った英字の補足を灰色で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。記事カードだけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 左右の余白は 12〜16px と狭く、写真は本文の幅いっぱいに置く
• 黒帯ラベルは画面の左端に付け、その下に大見出しを置く
• セクションの区切りは地色の切り替えで示す
• 職種一覧は細線で区切ったアコーディオン
• セクションの上下に 56〜72px の余白を取る

Elevation & Depth

• 基本はフラット
• 埋め込みスライドだけ薄い影を付ける
• 写真ブロックの下にごく淡い影を敷くことがある

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 四角形で角丸なし。人物は縦長、環境写真は横長
• セクション境界: FV は斜めの面で分割。それ以降は水平な境界か、わずかな斜め
• サブボタンは白地に黒の枠線を引いたピル型
• 主 CTA は細い白線の正円の中に英字を置く
• タグは小さなピル型で淡い地に点を添える
• 斜めの面は 45 度前後で統一する

Components

• 円形エントリー CTA（entry-circle）: 細い白線の正円の中央に、字間の広い英字。FV の右とフッターに置く
• VIEW MORE ボタン（button-outline）: 白地に黒の 2px 枠線を引いたピル型。中央寄せ
• 黒帯ラベル（section-label）: 左端に付けた黒帯に白の小さな日本語。大見出しの上に置く
• 英字大見出しセット（section-heading）: 大きな欧文見出しの下に、日本語の補足を 1 行添える
• 職種アコーディオン（accordion-role）: 太字の職種名を左、＋アイコンを右に置き、上下を細線で区切る
• 記事・動画カード（media-card）: 16:9 のサムネイル、種別アイコン付きの太字タイトル、カテゴリタグの順に縦に並べる
• カテゴリタグ（category-tag）: 淡い色の地に色の点と小さな文字を置いたピル型
• 写真＋本文ブロック（photo-text-block）: 幅いっぱいの写真の下に、日本語見出し・英字の補足・本文を置く

Do's and Don'ts

Do - 見出しは英字大見出し＋黒帯ラベル＋日本語の補足で統一する - セクションごとに白とラベンダーを交互に敷く - グラデーションは紫から青へ、左上から右下に流す - 写真は人物と職場の自然光で撮ったスナップにする - 本文は行間を広く取り、読み物として組む

Don't - 本文や面に原色の赤・緑を使わない - ボタンを塗りつぶしの派手なボタンにしない - 角丸の大きいカードや強い影を使わない - グラデーションを本文セクションの地に使わない - 見出しを日本語だけの大見出しにしない

Page Structure

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

1. ファーストビュー（ミッションを印象づけ、応募へ導く）: 職場の写真に紫→青のグラデーションを重ね、斜めの面で分割する。白の太い斜体コピーと円形 CTA を置く
2. 行動規範（組織の価値観を伝える）: 白地。英字大見出し、紫のリード見出し、本文、枠線のピル型ボタンの順に並べる
3. カルチャー資料（組織の詳細を伝える）: ラベンダーの地にスライドビューアを埋め込み、薄い影を付ける
4. 代表メッセージ（トップの想いを伝える）: 縦長の人物写真の下に長文を置き、署名を右揃えにする
5. 募集職種（職種の一覧を示す）: ラベンダーの地に、細線で区切ったアコーディオンを 8 行並べる
6. 働く環境（オフィス・働き方・福利厚生を伝える）: 写真と本文のブロックを地色を変えながら縦に積む。福利厚生は箇条書きにする
7. 関連コンテンツ（動画や記事で理解を深めてもらう）: 2 カラムのサムネイルカードに、カテゴリタグを付ける
8. フッター CTA・ナビ（回遊させ、応募へ導く）: チャコールの地。グラデーションのロゴ、日本語｜英字のナビ、円形の CTA を置く

Imagery

• 職場や収録スタジオを広角で撮り、自然光で明るく写す
• 人物は自然な笑顔のスナップ。背景には緑や職場を入れる
• FV の写真には紫→青のグラデーションを半透明で重ね、斜めの面で切る
• サムネイルは動画らしく、太字テロップの入った鮮やかなデザインでよい
• ロゴの P 字型など、大きなグラデーション図形をアクセントにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では黒帯ラベルを縦書きにし、見出しの左に置く
• PC ではメッセージを写真左・本文右の 2 カラムにする
• PC では働く環境の写真を 3 枚横に並べ、写真と本文を左右交互に置く
• PC では記事カードを 4 カラムにする
• PC のフッターはロゴ・ナビ 2 列・円形 CTA を横に並べる
• PC ではコンテンツ幅を約 65% に収め、中央に寄せる

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