DESIGN.md — 深紅×金×黒の士業向け転職支援 LP（Crimson Gold Professional Career LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、上品・高級、情報量多め・訴求型、力強い・インパクト
• キーワード: 深紅・金のグラデーション・黒地のダイヤ柄・明朝見出し・比較表・カルーセル
• 地の質感: 白と淡グレーのフラットな地に、黒地セクションの斜め格子とカードの赤いグラデーションで重みを出す
• 形: 角丸の小さいカードと四角い帯が中心。CTA ボタンだけピル型
• 温度感: 温かみのある赤と、冷たい黒・紺の対比。全体は硬めでフォーマル

Colors

• 地は白と淡グレーを交互に使い、強みの章だけ黒地にして重みを出す
• 深紅は CTA 帯・強みカード・比較表の自社列・本文の強調語に限って使う
• 金はグラデーションの帯と強調語の下線付き大きな文字にだけ使う。黒地か赤地の上に置く
• 本文中の強調は深紅の太字にする
• 事例の『転職後』ブロックは紺の地に白文字、金で数値を強調する
• サブボタンはダークグレーか白地＋赤文字にし、主 CTA の赤と区別する

Typography

• 見出しは明朝、本文・ボタン・表はゴシックにする
• 章番号は深紅の欧文セリフを大きく置き、見出しを横に並べる
• 数値は単位より 2〜3 倍大きくして太く見せる
• 黒地・赤地の上の明朝見出しは白、強調語だけ金にする
• 本文は小さめにして行間を広く取り、情報量を見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表とカルーセルは横にはみ出させる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 章は『番号＋見出し＋グレーの下線』→説明文→図版やカードの順にする
• 強みカードは黒地の上に縦に 3 枚積む
• 口コミと事例は横スワイプのカルーセルにし、下にドットのページャーを置く
• CTA 帯は章の間ごとに繰り返す
• 比較表は自社の列を赤くして浮き上がらせる

Elevation & Depth

• FV 下の状況選択カードは白地に柔らかい影をつけ、写真に重ねる
• 口コミカード・事例カードは薄い影＋角丸 8px
• 比較表の自社列は影と上へのはみ出しで前に出す
• 黒地セクションの強みカードは細い白枠で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物写真は四角か円形のアバター。FV は複数の人物写真を斜めに分割してつなぐ
• セクション境界: 直線で切り替える（斜めや波線は使わない）
• CTA 帯の中のボタンは白いピル型＋右に円の矢印アイコン
• FV の選択ボタンは角丸 4px の四角
• 見出しの帯は左右がフェードする金のグラデーション
• 『60秒で』のバッジは斜めに傾けた白い平行四辺形

Components

• 状況選択カード（status-selector）: 白いカードの中に問いかけを 1 行置き、赤い主ボタンとグレーのサブボタンを横に 2 つ並べる
• 月桂樹の実績バッジ（laurel-badge）: 金の月桂樹で挟み、赤枠のラベル＋太い赤の大きな数値で No.1 や満足度を見せる
• 強みカード（黒地）（strength-card）: 赤いグラデーションのカードに金帯の番号付き見出しを載せ、金の強調語で要点を見せる
• 番号付き章見出し（numbered-heading）: 深紅のセリフ数字、その横に明朝の見出し、下にグレーの細線と赤の短い線
• 口コミカード（review-card）: イラストのアバター、赤字の名前、属性を縦線で区切って並べ、赤い星 5 つ、淡ピンク地の本文を載せる
• 比較表（comparison-table）: 灰色の項目列と赤い自社列、白い他社列。◎○△の記号と短い説明を入れる
• CTA 帯（cta-band）: 赤地に斜めの白バッジ、握手する人のイラスト、白いピル型ボタン 2 つを縦に並べる
• キャリア事例カード（case-card）: 転職前（白）→転職後（紺）を矢印形でつなぎ、下に赤いラベル付きのポイント枠を置く

Do's and Don'ts

Do - 見出しは明朝、本文はゴシックで一貫させる - 赤・黒・金の 3 色で権威を出し、白とグレーで余白を作る - 実績の数値は大きく、単位は小さくする - CTA 帯を章の間に何度も繰り返す - 比較表では自社の列だけ赤くして目立たせる

Don't - パステルや蛍光色を足さない - 白地の上に金の文字を直接置かない - 見出しを丸ゴシックにしない - ボタンの形を章ごとに変えない - 赤の面積を本文エリアにまで広げない

Page Structure

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

1. ヘッダー（ブランドを示し、登録へ誘導する）: 白地の左にロゴ、右に白枠のボタンと赤いボタン
2. ファーストビュー（専門性と価値を宣言する）: スーツ姿の人物と都市の写真を分割してつなぎ、白い明朝の 2 行キャッチ＋説明文を載せる
3. 状況選択（その場で行動を分岐させる）: 写真に重なる白いカードに 2 択のボタン
4. 実績バッジ（第三者評価で信頼を得る）: 月桂樹のバッジ 2 つ、PC とスマホのモック、赤字の数値、注釈
5. 紹介先ロゴ（取引先の格を見せる）: 白地に中央寄せの見出しと説明、ロゴを横スクロールで並べる
6. 強みの要約（3 つの強みを印象づける）: 黒地のダイヤ柄の上に、金帯見出しの赤いカードを 3 枚置く
7. 強み 1：実績と口コミ（利用者の声で裏づける）: 番号付きの見出し、説明文、口コミのカルーセル
8. CTA（手軽さを伝えて申込を促す）: 赤い帯、斜めのバッジ、イラスト、白いピル型ボタン 2 つ
9. 強み 2：情報量（競合との差を示す）: 番号付きの見出し、説明文、自社列が赤い比較表
10. 強み 3：戦略提案と事例（具体的な成果を見せる）: 《》で挟んだ明朝の小見出しと、転職前→転職後の事例カルーセル
11. CTA（もう一度申込を促す）: 前の CTA 帯と同じ形
12. コンサルタント紹介（担当者の顔を見せて安心してもらう）: 人物写真と経歴のカルーセル。背景に薄い大きな英字
13. 最終 CTA（悩みに共感して行動を後押しする）: 写真のコラージュに赤い透過パネルを重ね、悩みのカギ括弧 3 行、明朝のメッセージ、白いピル型ボタン 2 つ
14. フッター（コピーライト表記）: 黒い細い帯に白の小さな文字

Imagery

• 人物はスーツ姿のビジネスパーソン。明るいオフィスや都市を背景に、自然光で笑顔を撮る
• FV は複数の人物と都市の写真を縦の帯に分割してつなぎ、下を暗くして文字を読ませる
• 口コミのアバターはフラットな人物イラストを淡ピンクの円に入れる
• CTA 帯には握手するビジネスマンのフラットなイラストを置く
• 黒地には斜めの格子やダイヤ模様の質感を薄く入れる
• 金は月桂樹とグラデーションの帯に使い、メタリックな光沢を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではヘッダー直下の FV を横長にし、状況選択カードを写真の右側に重ねる
• PC では実績バッジとデバイスのモックを横 1 列にまとめる
• PC では強みカード 3 枚を横に並べ、間に × 記号を挟む
• PC では口コミ・事例・コンサルタントのカードを 4 枚程度見せる
• PC の CTA 帯ではボタン 2 つを横に並べる
• 比較表は PC では他社 2 列まで全部見せ、SP では横にはみ出させる

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