DESIGN.md — 赤×緑アクセントの白地スーパー新卒採用LP（Vivid Red Retail Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、清潔・爽やか、信頼・誠実、力強い・インパクト
• キーワード: 白地・赤の英字大見出し・緑のサブコピー・角丸写真コラージュ・弧のライン装飾・吹き出しカード
• 地の質感: フラットな白地。背景に赤と緑の薄い弧を重ねて動きを出す
• 形: 小さめ角丸の写真とカード、片端に弧の切り込みが入った角丸ボタン、円形の矢印ボタン
• 温度感: 明るく暖かい。赤の熱量を白と緑で中和

Colors

• 地は白が基本。赤は英字見出し・ボタン・終盤の帯に集中させる
• 日本語のサブコピーは緑で、赤見出しと対にする
• セクションラベルの頭に緑の小さな丸を置く
• 背景の弧装飾は薄い赤と薄い緑の2本セットで透明感を保つ
• 赤ベタ面ではボタンを白地・赤文字に反転する
• 最終セクションは暗い写真にオーバーレイして白文字
• button-primary は文字 #FEF1F0 × 背景 #E4010C のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E1010C、4.52:1）を使う。

Typography

• 見出しは『緑丸＋日本語ラベル』→『赤の英字大見出し』→『緑の日本語サブコピー』の3段で組む
• 英字見出しは太い大文字。長い語は2〜3行に折る
• 本文は行間を広く（2.0前後）、短い3〜4行にまとめる
• 強調語は赤い小さな地の上に白文字で置く
• 数字や日付は欧文サンセリフ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真は2〜3枚の非対称コラージュ
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは写真コラージュ→テキスト→ボタンの順
• テキストとボタンは左寄せ
• 写真は大小をずらして重ならない程度に配置
• セクション間は大きめの白余白で区切る
• 終盤の赤帯と写真帯は全幅

Elevation & Depth

• お知らせカードとカード部品はごく淡いぼかし影
• 写真には影を付けない
• 吹き出しカードは緑の細枠で浮かせる

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 小さめ角丸の矩形。カード上部の写真は下辺を弧状に切る
• セクション境界: FV下端は下に膨らむ弧＋赤い細線。その他は余白とベタ面の直線切替
• ボタンは角丸長方形で、右端に白い弧の切り込み線を入れる
• 矢印ボタンは赤い円か赤枠の円
• 吹き出しは角丸で下にしっぽ、右下角に緑の三角と二重矢印
• SNSアイコンは円形で横に並べる

Components

• VIEW MOREボタン（button-primary）: 赤の角丸長方形。白い英字は左寄せ、右端に白い弧ラインを入れる
• 反転ボタン（button-inverse）: 赤帯の上で使う白地・赤文字の同形ボタン
• 3段見出し（section-heading）: 緑丸ラベル＋赤の英字大見出し＋緑のサブコピー
• お知らせカード（news-card）: 白カードに日付・赤地の白文字タグ・本文。下段は前後の円ボタンと一覧リンク
• 社員コメント吹き出し（speech-card）: 緑枠の白い吹き出しに部署名（緑）、コメント（太字）、入社年（グレー）
• 円形矢印ボタン（circle-arrow）: 赤い円に白い山形矢印。スライダー操作とリンクに使う
• 写真付きリンクカード（feature-card）: 上部の写真は下辺を弧に、下に見出し・本文と右下の円矢印。淡いグレー枠
• スライダーインジケータ（slider-dots）: 短い横棒が3本。現在位置は濃い赤、他は薄い赤

Do's and Don'ts

Do - 赤は英字見出し・ボタン・帯に絞り、白地を広く残す - 日本語サブコピーは必ず緑で赤見出しと対にする - 背景に薄い赤と緑の弧を2本セットで流す - 写真は人物の笑顔と売場・社屋を角丸でコラージュする - セクションごとにVIEW MOREボタンで詳細へ誘導する

Don't - 赤と緑を同じ面積でベタに使わない（クリスマス配色に見える） - 英字見出しを細字や明朝にしない - 写真に強い影や太い枠を付けない - ボタンを完全なピル型にしない - 本文を長くしない（4行以内）

Page Structure

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

1. ファーストビュー（企業の世界観を一言で伝える）: 街並みの空撮写真に白い斜体英字キャッチと短い日本語。下端は弧で切り赤線。右上に赤いENTRYとメニュー
2. SNSリンク（公式SNSへの導線）: 弧の境界に円形SNSアイコン5つを並べる
3. お知らせ（最新の採用情報を知らせる）: 大きな薄緑の英字を背景に白カード。日付・赤タグ・円ボタン
4. 企業メッセージ（価値観と想いを伝える）: 社屋と売場写真の3枚コラージュ＋3段見出し＋本文＋ボタン
5. キャリアパス（成長の道筋を示す）: 業務風景2枚のずらし配置＋3段見出し＋ボタン
6. 部門紹介（店舗各部門の仕事を紹介）: オフィス写真2枚＋2行の英字見出し＋本文、下に食卓写真の横並び
7. 社員インタビュー（先輩の声で働く姿を具体化）: 緑枠の吹き出しと人物写真のスライダー。赤い円矢印とインジケータ
8. 研修・活躍推進（育成制度を伝える）: 下辺が弧の写真付き白カード。右下に円矢印
9. 募集要項（応募へ誘導）: 全幅の赤ベタ面に白の英字見出し、ロゴモチーフを薄く大きく敷き、白い反転ボタン
10. インターン・説明会（イベント参加を促す）: 暗くした街の写真の上に白い英字見出しとボタン

Imagery

• 売場・社屋・オフィスを明るい自然光で撮る
• 社員は制服やスーツで、カメラ目線の笑顔
• 家族の食卓など暮らしの温かい場面を入れる
• FVと最終セクションは街の高所からの広角写真
• 装飾は薄い赤と緑の細い弧ライン、大きな薄色の英字
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは写真コラージュとテキストを左右2カラムで交互に配置
• PCのSNSアイコンは右端に縦に固定
• お知らせはPCで1行の横長バーにする
• インタビューはPCで3人を並べたスライダー
• 募集要項と説明会帯はPCでボタンを右寄せ
• PCの見出しサイズはSPの約1.3倍

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