DESIGN.md — 朱色ノイズと階段イラストの新卒採用LP（Coral Grain Isometric Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、クール・先進的、ポップ・元気
• キーワード: 朱色グラデーション・ノイズ質感・アイソメトリック階段・太い欧文見出し・数字カード・前進
• 地の質感: 赤〜コーラルの面に細かいグレインノイズを重ね、紙刷りのようなざらつきを出す。生成り地はフラット。
• 形: 角丸は小さめ（4px前後）。カードは薄い影付きの白〜生成りの長方形。斜めの階段モチーフが唯一の動き。
• 温度感: 暖色主体で熱量が高い。水色の差し色で医療らしい清潔感を添える。

Colors

• 地は生成り、強調セクションはノイズ入り朱〜コーラルのグラデーション面で交互に切り替える
• 見出し英字・数字・ラベルバッジはすべて同じ赤で統一する
• 水色は階段の天面と見出し前の小さな四角マーカーだけに使う
• 赤地の上の文字とボタンは白、白ボタンの文字は赤にする
• 黒は本文と小ラベルのみに抑え、面には使わない
• button-primary は文字 #FDFBF5 × 背景 #FC3A45 のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E90411、4.52:1）を使う。
• button-white は文字 #F01C2C × 背景 #FDFBF5 のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E60F1F、4.56:1）を使う。
• tab-switch は文字 #FDFBF5 × 背景 #F01C2C のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E60F1F、4.56:1）を使う。
• number-card は文字 #F01C2C × 背景 #FFFFFF のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E60F1F、4.54:1）を使う。
• label-badge は文字 #FDFBF5 × 背景 #F01C2C のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E60F1F、4.56:1）を使う。
• story-card は文字 #F01C2C × 背景 #FDFDF3 のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E60F1F、4.54:1）を使う。
• step-card は文字 #F01C2C × 背景 #FFFFFF のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E60F1F、4.54:1）を使う。
• phone-frame は文字 #FDFBF5 × 背景 #F68A6A のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D63B0D、4.52:1）を使う。

Typography

• 見出しは『水色マーカー＋小さな和文ラベル』→『巨大な赤の英字』の2段構成
• 英字は極太のジオメトリック体、和文はゴシックを広めの字間で組む
• 和文コピーは短い行を2行ずつ区切り、段落間に1行分の空きをとる
• 数字は単位まで同じ太さ・同じ赤で大きく中央に置く
• 小英字ラベルは全角相当の字間でトラッキングを広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は左見出し＋右コンテンツの 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右余白は約18pxで見出しは左揃え
• 赤のバナー帯は画面幅いっぱい、カードは90%幅で中央
• 数字カードは縦に積み、カード間は約24px
• ステップカードは下向きシェブロンでつなぐ
• スライダーの下に赤の矢印ナビ（← | →）を置く

Elevation & Depth

• カードは柔らかく薄い影（0 2px 8px rgba(0,0,0,.08)）
• スマホ型フレームは大きく拡散した影で浮かせる
• 赤セクションは影なしのフラット面

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。人物の顔写真のみ円形切り抜き
• セクション境界: 直線で切り替え。FV下端はグラデーションで生成りに近づけて終える
• ボタン・バッジは角丸3〜4pxの長方形
• 記事カードはグラデーションの太枠で内側の生成り面を囲む
• エントリーブロックのみ角丸12〜16px
• ピル型や丸い吹き出しは使わない

Components

• 赤塗りボタン（button-primary）: 資料閲覧・エントリー補助用の横長ボタン。白文字で字間広め
• 白地ボタン（button-white）: 赤セクション上で使う白地＋赤文字のボタン。矢印を添える
• 英字セクション見出し（section-heading）: 水色四角マーカー＋和文小ラベルの下に極太赤英字
• 切替タブ（tab-switch）: 選択中は赤塗り白文字、非選択は赤線アウトライン
• 数字カード（number-card）: 左上に赤バッジのラベル、中央に巨大数字、右下にLEARN MORE＋丸プラス
• 赤ラベルバッジ（label-badge）: 小さな赤塗り白文字の項目名タグ
• 記事カード（story-card）: グラデーション太枠に生成り面、赤見出しと円形の人物写真
• 選考ステップカード（step-card）: 左にSTEP＋2桁番号、右に赤見出しと説明。下向き矢印で連結
• スマホ型ストーリー枠（phone-frame）: コーラルの角丸フレームに縦長写真、SNSストーリー風の進捗バーとリアクション

Do's and Don'ts

Do - 赤・コーラルの面には必ず細かいノイズを重ねる - 英字見出しは極太で画面幅いっぱい近くまで大きく組む - 見出し前の水色マーカーを全セクションで繰り返す - 数値で社風を伝えるときは1カード1数字にする - 最後は角丸の赤グラデーションブロックでエントリーを締める

Don't - 赤以外の強い色を見出しに使わない - 水色を面積の大きい背景に使わない - ピル型ボタンや大きな角丸を多用しない - ノイズのない平坦な原色の赤ベタにしない - 本文を詰めた字間・狭い行間で組まない

Page Structure

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

1. ファーストビュー（挑戦と前進のメッセージを示す）: 全面ノイズ朱色に階段イラスト、右下に極太英字コピーと和文サブ、右上に白地エントリーボタン
2. メッセージ（想いを短い詩的な文で伝える）: 階段イラストを背景に白い和文を2行ずつ段落で縦に並べ、スクロールでコーラルへグラデーション
3. 事業紹介（事業を3つに分けて紹介）: 英字見出し＋3つのタブ、写真カードのカルーセルに事業名・説明・詳細ボタン
4. 社員ストーリー（先輩の体験談へ誘導）: 赤ノイズ帯に英字見出しと白ボタン、下にグラデ枠の記事カードを2枚
5. 一日の流れ（働く様子をリアルに見せる）: 社員名タブの下にスマホ型フレームでストーリー風写真スライダー
6. 数字で見る会社（制度や環境を定量で示す）: 赤ノイズ帯の見出し後、数字カードを縦に8枚並べる
7. 理念・価値観（ミッションと価値観を伝える）: 2択タブで切替、赤ノイズ面に白文字で縦線区切りの価値観リスト
8. 会社資料（詳細資料へ誘導）: 白カード内に埋め込みスライドと赤塗りボタン
9. 選考フロー（応募から内定までを示す）: 4枚のステップカードを下矢印で連結、末尾に灰色注釈
10. エントリーCTA（応募を促す）: 角丸の赤グラデブロックに英字見出し、白の主ボタンと赤の小ボタン2つ、右下に階段イラスト

Imagery

• アイソメトリックな階段イラスト。側面はコーラル・ピーチ、天面だけ水色
• イラスト全体にグレインノイズをかけ、刷り物のような質感にする
• 人物写真は自然光のオフィスや業務風景で、表情のある実写
• 顔写真は円形に切り抜き、名前と所属を小さく添える
• スマホUIを模した枠で写真を見せ、SNS風の絵文字リアクションを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左に英字見出し・右にコンテンツの2カラムに分ける
• PCの数字カードは2列グリッドにする
• PCのステップカードは横4列に並べる
• PCのFVは英字コピーを右上に置き、階段を斜めに大きく流す
• PCのスマホ型フレームは中央に置き、左右に次のカードを覗かせる

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