DESIGN.md — 藤色×マゼンタグラデの社員キャリア採用 LP（Lavender Gradient Career Interview Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、信頼・誠実、やさしい・柔らかい
• キーワード: 藤色パネル・マゼンタ紫グラデ・白地ラベル見出し・交互配置カード・光の縦ライン
• 地の質感: フラットな面に、背景で淡い黄・白の縦ラインが光の筋のように流れる。写真以外は質感なしのベタ塗り。
• 形: 角丸24px前後の大きなパネルとカード。円形のケース番号バッジ。FV 下端は中央が下に尖る形。
• 温度感: やや寒色寄りのニュートラル。藤色と灰ピンクの地に、マゼンタの暖かいアクセント。

Colors

• 地は生成りグレー、情報の塊は藤色パネルに載せる。
• 英字見出しとアクセントはマゼンタ→紫の横グラデーションで塗る。
• 社員カードの下帯は人ごとに緑・シアン・紫・ピンクを割り当て、番号バッジと揃える。
• 藤色上の本文は白、見出しは白ラベルに黒文字で可読性を確保する。
• 黒はナビボタンのみに限定し、右端にグラデの矢印タブを付ける。
• case-card は文字 #F5FBFE × 背景 #ACBAD5 のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#5672A9、4.6:1）を使う。
• case-badge は文字 #F5FBFE × 背景 #23C59B のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#178266、4.55:1）を使う。
• card-footer-band は文字 #F5FBFE × 背景 #23C59B のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#178266、4.55:1）を使う。
• button-primary は文字 #FBFBFB × 背景 #E3138A のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC1286、4.54:1）を使う。
• corner-badge は文字 #F5FBFE × 背景 #E50E88 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB0D82、4.58:1）を使う。

Typography

• 英字大見出しは2〜3行に分け、最終行だけ小さくする。
• 英字見出しは文字にグラデーションを掛ける。
• 和文見出しは白ベタのラベルを行ごとに敷く。
• FV キャッチは縦書きで、白帯の上に置く。
• 本文は太めのゴシック白文字で中央揃え。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードは左右に交互にずらす
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
• カードは幅約 80% で左寄せ・右寄せを交互に置く。
• カード上端左に円形番号バッジをはみ出させる。
• FV パネルは全幅、下端中央を下に尖らせる。
• セクション見出しは中央揃え。
• ナビボタンは縦に 8px 間隔で積む。

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を作る。
• 番号バッジは白い輪と淡い影で浮かせる。
• ナビボタンは右下に黒い縁取りでずらした立体感。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸 12〜16px の横長矩形でカード内に余白をとって配置
• セクション境界: FV 下端は中央が下に尖る曲線。他はパネルの角丸で区切る
• カード・パネルは大きな角丸。
• CTA はピル型に円形の矢印アイコン。
• 番号バッジは正円に小さな点を添える。
• ナビ矢印タブは片側だけ丸めた形。

Components

• 社員インタビューカード（case-card）: 藤色の角丸カードに写真・白ラベル職種名・マゼンタ英字・2行コピー、下に色付き帯
• ケース番号バッジ（case-badge）: 白縁の正円に CASE と2桁番号、カードの帯色と同色
• 入社年・氏名帯（card-footer-band）: カード下端のグラデ帯に入社年と年目、右端に矢印
• 白ラベル見出し（label-heading）: 行ごとに白ベタを敷いた和文見出し、強調語はマゼンタ
• 詳細ボタン（button-primary）: マゼンタ→紫のピル型、右端に白丸線の矢印
• 成長機会ナビ（nav-button-dark）: 黒い角丸ボタン、右端にグラデの矢印タブ
• キャリア分布グラフ（career-chart）: 白カードに年次の点線目盛り、顔写真のピンを配置、下にグラデ軸
• カテゴリ円バッジ（corner-badge）: パネル右上に重ねるグラデの正円ラベル

Do's and Don'ts

Do - 英字見出しは必ずマゼンタ→紫グラデにする。 - カードは左右交互にずらしてリズムを出す。 - 人ごとに帯とバッジの色を揃える。 - 背景に淡い黄・白の縦ラインを散らす。 - 和文見出しは白ラベルで載せる。

Don't - 原色の赤や青のベタ面を広く使わない。 - 角の尖った四角カードにしない。 - 藤色の上に細い黒本文を置かない。 - 強い影や立体効果を多用しない。 - グラデを本文に使わない。

Page Structure

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

1. ファーストビュー（企画の主題とキャリアの多様さを示す）: 藤色パネルに職種円とビジネスパーソンのイラスト、縦書きキャッチ、グラデ英字大見出し、白のリード文
2. キャリア分布（登場社員の年次と職種を一覧で見せる）: 白ラベル見出しの下に白カードのグラフ、顔写真ピンを配置
3. 社員インタビュー一覧（個別の記事へ誘導する）: 番号バッジ付き藤色カードを6枚、左右交互に配置、途中に階段イラスト
4. 制度紹介（キャリア形成支援を伝える）: 藤色パネルに会議写真、グラデ英字、白ラベル見出し、ピル型詳細ボタン、右上に円バッジ
5. 関連ナビ（他の成長機会ページへ回遊させる）: グラデ英字見出しと罫線、黒い角丸ボタンを縦に3つ

Imagery

• 社員写真はオフィスで自然光、腰上の構図で穏やかな表情。
• 背景は明るくぼかした窓・観葉植物。
• FV はフラットなビジネスパーソンと上昇する白い矢印のイラスト。
• 職種はグラデの円にネットワーク線で結ぶ。
• アイソメトリックな階段と年号でキャリアの成長を表す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカードを2カラムでずらし、千鳥状に並べる。
• PC の FV はイラストを左、縦書きキャッチを右上、英字見出しとリードを横並び。
• 制度紹介は PC で写真左・テキスト右の横並び。
• ナビボタンは PC で横3列。
• PC のコンテンツ幅は約 900px で中央寄せ。

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