DESIGN.md — 真紅×極太ゴシックの新卒採用サイト LP（Bold Red Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 真紅のベタ面・極太見出し・白抜き帯タイトル・写真カードの導線・英字の大見出し
• 地の質感: フラットなベタ塗りが中心。淡色セクションだけ、薄い青灰の文字柄を背景に散らす
• 形: 角丸は小さめの矩形カードと四角い矢印ボタン。吹き出し型の枠と、ピル型ラベルが少し入る
• 温度感: 熱く情熱的。赤の面積が大きく、勢いと若さを感じさせる

Colors

• 地の色は赤ベタと淡色の2つだけを交互に使う
• 赤地では文字・枠線・ボタンを白、淡色地では見出し・本文・ボタンを赤にする
• 黒やグレーの文字は使わない。本文も赤か白にする
• 写真カードの帯見出しは白地に赤文字か、赤地に白文字
• 最後のCTAエリアは赤からオレンジへの縦グラデーションで締める
• 英字の大見出しは、地色より少し濃い赤の透かしとして敷いてもよい
• button-primary は文字 #FFEEEF × 背景 #E40115 のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF0115、4.51:1）を使う。

Typography

• 見出しは極太ディスプレイ書体に限る。細い書体は混ぜない
• 本文も太字で書き、行間を2.0ほど取る
• リード文は中央揃え、カード内の本文は左揃え
• 英字の大見出しのすぐ下に、小さめの和文見出しを詰めて重ねる
• 職種カードの職種名は縦書きの極太で配置する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードと写真グリッドは 2 カラム
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約20pxの余白を取って並べる
• 写真グリッドは画面幅いっぱいに敷き、間隔は約10px
• セクションの上下余白は60〜90px
• CTAボタンは幅約80%で中央に置く

Elevation & Depth

• 影はほぼ付けない。面の色の差で階層を作る
• 写真カードの下部に暗いグラデーションを重ね、白文字を読みやすくする
• 社員紹介のスライダーは、後ろに写真を扇状に重ねて奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸が小さい矩形でトリミングする
• セクション境界: 淡色ブロックは角丸の矩形として赤地に浮かべる。フッターの上端には吹き出し状の突起を付ける
• ボタンは角丸の小さい矩形
• 矢印は四角い枠に入れて右下に置く
• ラベルだけピル型にする
• 吹き出しは線枠と三角のしっぽで作る

Components

• 赤塗りの矢印ボタン（button-primary）: 赤の矩形に白い太字を中央に置き、右端に矢印を付ける
• 白枠のアウトラインボタン（button-outline）: 赤地の上に置く。白い1pxの枠と白文字に矢印を付ける
• 写真リンクカード（photo-link-card）: 写真全面に白地の帯見出しを重ね、右下に赤い四角の矢印を置く
• 職種カード（job-card）: 縦長の写真に暗いグラデをかけ、職種名を白の縦書きにして、白枠の矢印を付ける
• 吹き出し枠の見出し（speech-frame）: 白線の枠の上辺にピル型ラベルを載せ、中に極太の白文字を2行、下にしっぽを付ける
• 英字＋和文の見出し（en-heading）: 英字を極太で大きく置き、和文の小見出しをすぐ下か横に添える
• お知らせカード（news-card）: 白いカードに中央見出しを置き、日付と赤文字の記事を細い線で区切って並べる
• フッターのアコーディオン（accordion-nav）: 淡色地に極太の赤見出しを並べ、右端に＋を付ける

Do's and Don'ts

Do - 赤のベタ面を大胆に広く使う - キャッチは画面幅いっぱいの極太文字で、写真に重ねる - 写真カードのタイトルは白い帯の上に載せる - リンクごとに四角い矢印アイコンを付ける - 淡色ブロックは赤地の上に角丸で浮かせる

Don't - 本文に黒やグレーを使わない - 赤以外の強い色を足さない - 細い書体や明朝体を使わない - ピル型の大きなボタンにしない - 影を強くかけない

Page Structure

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

1. ファーストビュー（採用メッセージで惹きつける）: 社員の作業写真を全面に敷き、下半分に赤の極太キャッチを大きく重ねる
2. メッセージ（求める人物像を伝える）: 赤地に白の太字本文を中央揃えで置き、キャッチを白で再掲する
3. 写真グリッド（職場の雰囲気を見せる）: 2×2の写真を細い間隔で並べる
4. 会社を知る（会社の概要へ誘導する）: 英字の大見出しと社屋写真に短いリードを添え、写真リンクカードを3枚縦に並べる
5. 仕事を知る（職種を紹介する）: 淡色地に赤の見出しとリードを置き、2カラムの職種カードと横長のカードを並べる
6. 社員を知る（社員インタビューへ誘導する）: 英字の透かしの上に見出しを置き、吹き出し枠、写真スライダー、白枠ボタンを順に並べる
7. 対談（座談会の記事へ誘導する）: 写真に極太タイトルを重ね、下の白カードに本文とリンクを置く
8. 社員の本音（本音コンテンツへ誘導する）: 淡色地に文字柄を敷き、赤のロゴ風見出しと赤塗りボタンを置く
9. お知らせ（最新の情報を伝える）: 赤地に白のニュースカードを置く
10. 募集要項CTA（応募へ誘導する）: 赤からオレンジへのグラデに英字の透かしを敷き、新卒・経験者の写真カードとFAQボタンを置く
11. フッター（サイト内を回遊させる）: 吹き出し形の淡色地にアコーディオンのナビとロゴを置く

Imagery

• 白衣やスーツの社員を自然光で撮り、少し横向きの自然な表情を写す
• 研究室・店頭・オフィスなど、実際の職場を背景にする
• 社屋は青空を入れて見上げで撮る
• 写真の上に極太の赤や白の文字を大胆に重ねる
• 淡色背景に、キーワードの文字柄を薄く散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではキャッチを1行の横長にして、写真の下端に重ねる
• メッセージはPCで本文と写真を左右に散らして配置する
• 職種カードはPCで4列の横並びにする
• 会社を知るの和文見出しはPCで縦書きにし、左側に置く
• 社員スライダーはPCで扇状に5枚見せる
• カード類は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 行書くと起動時に読み込まれる。