DESIGN.md — グレー地×紫桃グラデの明朝採用 LP（Editorial Serif Gradient Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、信頼・誠実、シンプル・ミニマル
• キーワード: 誌面風・欧文セリフ見出し・明朝本文・紫→珊瑚グラデ・紙のグレー地・黒ピルボタン
• 地の質感: うっすら紙のざらつきがある明るいグレー地。白のカードを重ねて層を作る
• 形: 写真とカードは角丸なしの矩形。ボタンと矢印アイコンだけをピル型・正円にする
• 温度感: ニュートラル寄りのやや冷たい色。グラデーションで人の温かさを少し足す

Colors

• 地は淡いグレーを基本にし、カードや一覧の帯だけを白にして層を作る
• 色はモノトーンが基本。差し色は紫→ピンク→珊瑚のグラデーションに限る
• グラデーションは見出し左の縦バー、キーフレーズのマーカー、英字ラベル、エントリー帯に使う
• 主ボタンは黒地に白文字。サブボタンは白地に黒枠
• 職種バッジだけは青灰・ベージュ茶のくすみ色で区別する
• 最後の CTA 帯は、グラデーション帯と暗いグレー帯の 2 段で締める
• badge-category は文字 #FCFEFF × 背景 #7E9AA2 のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#5E7A82、4.53:1）を使う。
• cta-band は文字 #FCFEFF × 背景 #B97AD6 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A351C9、4.54:1）を使う。
• marker-phrase は文字 #FCFEFF × 背景 #EE7A8E のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E32445、4.51:1）を使う。

Typography

• セクション見出しは、大きな欧文セリフの下に小さな和文明朝を添える 2 段構成にする
• 見出しの左には太さ 4px 前後のグラデーション縦バーを付ける
• コンセプト文は明朝で中央揃えにし、段落の間を 1 行分あける
• 社員インタビューの一言は、写真の下端に白帯の明朝で重ねる
• 背景に巨大な白抜きのセリフ文字を薄く敷き、奥行きを出す
• カード見出しには黒の細い下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。最後の採用情報だけ 3 カラムのタイル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算）
• 写真は左寄せ、白カードは右寄せにずらして重ね、段差をつける
• インタビューは横スクロールのカルーセル。次のカードの端を見せる
• Workstyle の一覧は白帯の上で、区切り線と右端の丸い矢印で並べる
• 背景に、紫〜珊瑚の細い曲線をまたがせて流れを出す

Elevation & Depth

• 影は基本的に付けず、白とグレーの面の差で層を見せる
• 円形の特集バッジだけ、淡いグレーの太いリングで浮かせる
• 丸い矢印ボタンは淡いグレーの塗りだけで、影は付けない

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。横長 3:2 程度。特集だけ正円の白パネルを重ねる
• セクション境界: 直線で切り替える。背景色の変化と、セクションをまたぐ細いグラデーションの曲線で区切る
• カード・写真・タイルは角を立てる
• ボタンはピル型、矢印は正円にする
• グラデーションは左上→右下の斜め方向

Components

• グラデ縦バー付き英字見出し（section-heading）: 左にグラデーションの縦バー。大きな欧文セリフの下に小さな和文明朝を添える
• 黒ピルボタン（button-primary）: 黒地に白の欧文セリフ。幅 160px 前後
• 黒枠ピルボタン（button-outline）: 白地に黒枠。和文ゴシック太字のサブ導線
• 写真＋ずらし白カード（offset-card）: 写真の右下に白カードを重ねる。中身は下線付きの明朝見出し、説明文、ボタン
• 社員インタビューカード（interview-card）: 写真の下端に白帯の一言を重ね、その下に職種バッジ・名前・所属を並べる。左右に黒の丸い矢印
• 職種バッジ（badge-category）: くすみ色の角丸ラベルに白文字
• 矢印付きリンクリスト（link-list-item）: グラデーション色の英字ラベルと明朝の項目名。右に淡いグレーの丸い矢印、下に区切り線
• アイコン 3 連タイル（icon-tile）: 白の正方形にグラデーション線のアイコンと、下線付きの太字リンク
• エントリー誘導帯（cta-band）: 写真の上にグラデーションをかけ、白の欧文セリフ・縦の区切り線・和文の補足・白い丸の矢印を置く
• グラデーション地のキーフレーズ（marker-phrase）: 短いフレーズを、グラデーションの帯の上に白い明朝で置く

Do's and Don'ts

Do - 見出しは欧文セリフ＋和文明朝のペアで統一する - 差し色は紫→珊瑚のグラデーション 1 種類だけにする - 写真とカードをずらして重ね、誌面のようなリズムを作る - 白抜きの巨大な英字を背景に敷き、奥行きを出す - ボタンは黒のピル型か白枠で、控えめに置く

Don't - 原色ベタや蛍光色のボタンを使わない - カードや写真に角丸や強い影を付けない - 丸ゴシックやポップな手書き書体を混ぜない - グラデーションを広い面に乱用しない（エントリー帯だけにする） - 1 つの画面に情報を詰め込まず、余白を削らない

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で印象づける）: 人物と街の写真を上下につなげる。中央に白帯の明朝の大コピーを重ね、左端にグラデーションのバーを付ける
2. コンセプトメッセージ（企業の価値観を伝える）: 中央揃えの明朝文を段落ごとに並べる。末尾はグラデーション地のキーフレーズで締める
3. はじめに（会社の概要と将来像へ誘導する）: 写真の上に白の明朝見出しを載せた横長バナーを 2 枚、左右にずらして並べる
4. 特集コンテンツ（特設コンテンツを告知する）: 写真の帯の中央に白い正円パネルを置き、黒のピルボタンを添える。上下に白抜きの巨大な英字を敷く
5. 事業と仕事（事業分野と職種を紹介する）: 写真の右下にずらした白カードを重ね、2 組並べる
6. 社員インタビュー（働く人のリアルを伝える）: 職種ごとの横スクロールカルーセル。最後に一覧ボタンを置く
7. 働き方とキャリア（制度やキャリアを案内する）: 白帯の上の矢印付きリンクリストと、座談会の写真カルーセル（ページ番号付き）
8. 採用情報（募集要項や FAQ へ誘導する）: 英字見出しと和文を縦線で区切り、その下に白のアイコンタイルを 3 つ並べる
9. CTA（エントリーとインターンシップへ誘導する）: グラデーションの写真帯と暗いグレーの写真帯を縦に 2 段積み、それぞれに白い丸の矢印を置く

Imagery

• スーツの社員を自然光の下で撮った、落ち着いた表情の人物写真
• 都市の再開発、緑のある街並み、建物の俯瞰写真
• 彩度を少し落とした、クールで清潔なトーン
• 手元や資料などの物撮りでストーリーを補う
• アイコンは紫→珊瑚グラデーションの細い線画
• 背景に、セクションをまたぐ細いグラデーションの曲線を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンセプト文を左寄せにし、右側に写真を段違いに散らして配置する
• PC の写真カードと白カードは横並びで左右交互にずらす
• PC のインタビューは左に職種見出しと矢印、右に 2 枚のカードを並べる
• PC の英字見出しは 1 行に収める
• PC の Workstyle はリストを左、写真を右の 2 カラムにする
• PC のエントリー帯とインターン帯は左右 2 分割にする

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