DESIGN.md — 鋼青×濃紺×赤CTAのハイクラス転職LP（Steel Blue Executive Career LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、上品・高級、情報量多め・訴求型
• キーワード: ハイクラス・知的・ビジネス写真・斜めカット・白カード・赤CTA
• 地の質感: フラットな面に淡い斜線のグレーテクスチャ。写真の上には濃紺の半透明オーバーレイをかける
• 形: 角丸が小さい長方形のカード。セクション境界は斜めカットと下向きの三角。番号はリボン型のタブ
• 温度感: 寒色寄りでクール。CTAの赤だけが暖色の差し色

Colors

• 地はライトグレーとスチールブルーの帯を交互に置き、内容は白カードに載せる
• 見出し帯と番号タブは濃紺。青帯の上の見出しは白抜きにする
• 赤はCTAボタンだけに使う。左に濃い赤の『所要時間』ラベルを付ける
• 本文中の強調は青い太字にする。色マーカーは使わない
• 写真の背景には濃紺の半透明を重ね、文字は白で載せる
• フッター最下段は黒の細い帯

Typography

• 全体をゴシック1書体で組み、太さの違いで階層を作る
• 番号や英字ラベルは欧文サンセリフにし、細めの字で大きく置く
• 見出しは中央揃え、本文は左揃え
• 年収などの数字は単位より大きく太くする
• 本文の強調は青の太字にし、下線は付けない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの 2〜3 カラムカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードを地の色の上に浮かせて置き、中身をまとめる
• 理由の詳細は1件ずつ大きなカードにし、上中央に番号タブを付ける
• セクションの合間にCTA帯を何度も挟む
• 声は『アイコン＋見出し＋本文』の横長の行を縦に並べる
• 流れは縦の線でつないだステップ番号のリストにする

Elevation & Depth

• 白カードには影をほとんど付けず、地の色との差で浮かせる
• CTAボタンには弱いドロップシャドウを付ける
• 写真の背景は濃紺のオーバーレイで沈めて奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形。FVやセクションの写真は斜めにカットした平行四辺形で切り抜く
• セクション境界: 斜めカットと、中央の下向き三角（V字）
• ボタンは角丸の小さい長方形にする
• 番号タブは下端が尖ったリボン型
• 人物アイコンは円形のイラスト

Components

• 所要時間ラベル付き赤CTA（button-primary）: 左に濃い赤の時間ラベル、右に白い円の矢印。横に長い赤のグラデーションボタン
• 番号リボンタブ（number-tab）: カード上端の中央に置く濃紺のタブ。英字ラベルの下に大きな番号を入れる
• 濃紺の見出しバー（heading-bar）: 問いかけ型の見出しを白抜きで載せる横長の帯
• 理由の3連カード（reason-card）: 青の地の上に白カード。小ラベル・大きな番号・青い見出し・短い説明を入れる
• お客様の声の行（voice-row）: 円形アイコン・太字の見出し・属性を左に、本文を右に置く白い横長ボックス
• 年収アップ事例カード（case-card）: 顔写真の円・見出しの下に、黒の帯（転職前）と青の帯（転職後）を三角でつなぐ。下に『もっと読む』のボタン
• ステップの流れ（step-list）: 縦の線と丸でつないだ濃紺の番号ラベルに、太字の見出しと説明を添える
• FAQアコーディオン（faq-item）: 白いボックスの左に青いQ、右に＋を置く
• メール登録フォーム（signup-form）: 白いカードに見出し・淡い入力欄・注意のリンク・赤い送信ボタン・ログインのリンクを入れる

Do's and Don'ts

Do - 青・濃紺・グレーの寒色で全体をまとめ、赤はCTAだけに使う - 第三者評価のバッジ（金のメダル）をFVとCTA帯に繰り返し置く - 理由・事例・ステップには番号を付けて順に見せる - 写真はスーツ姿のビジネスパーソンにし、濃紺を重ねて使う - 本文の要点を青い太字で強調する

Don't - 丸みの強いピル型やポップな配色にしない - 赤をCTA以外の見出しや装飾に使わない - 派手なグラデーションや強い影を多用しない - 手書き風フォントやイラスト調の装飾を入れない - 白カードを使わずに文字を直接テクスチャに載せない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を伝え、すぐ登録させる）: 斜めに切った人物写真、青い帯の上の白抜きの大見出し、金のバッジ、右に登録フォームのカード
2. 取引企業のロゴ（信頼性を示す）: 白地にロゴを4列×3段のグリッドで並べる
3. 課題の提起（なぜ情報の質が大事かを示す）: 青の帯の見出し、濃紺の問いかけバー、グレーのボックスの本文、下向きの三角
4. サービスの紹介（企業側の情報に強いことを示す）: 平行四辺形の写真と、青い強調を入れた本文の2カラム
5. 強みの概要（3つの理由を一覧で見せる）: 青の地に白カードを3枚並べ、番号を大きく入れる
6. 中間CTA（登録を促す）: 濃紺を重ねた写真の背景に、白い見出しと赤CTA
7. 理由の詳細（各理由を図やグラフで裏付ける）: グレーの斜線テクスチャの地に大きな白カード。番号タブ、2行の見出し、本文と写真や図、チャット風の吹き出し、棒グラフ
8. 実績バナーとCTA（満足度No.1を訴えて登録させる）: 青の地に濃紺のバナー（メダル＋人物）、白い見出し、赤CTA
9. お客様の声（利用者の実感を伝える）: 淡いグレーのパネルに白い横長の行を5つ縦に積む。下にCTA
10. キャリアアップ事例（年収アップの具体例を見せる）: 青の地に2列の事例カード。転職前後の年収を帯で比べ、『もっと読む』を付ける
11. 登録の流れ（手順を示して不安をなくす）: 青の地の白カードに5つのステップを縦に並べ、隅に写真を斜めに入れる
12. よくある質問（疑問を解消する）: グレーの地にQ付きのアコーディオンを6つ
13. 最終CTA（登録で締める）: 暗い写真の背景の左に白い見出し、右に登録フォームのカード
14. フッター（会社情報と規約）: 白地にロゴ、リンク、注釈。最下段は黒の帯

Imagery

• スーツ姿の30〜50代の男女が商談・面談する様子を、明るいオフィスの自然光で撮る
• 背景の写真は彩度を落とし、濃紺〜青の半透明を重ねる
• 人物アイコンは線のシンプルなイラストにし、淡い青の円に入れる
• グラフは青のバーとグレーで描くフラットな横棒グラフ
• 地には淡いグレーの斜めの帯のテクスチャを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約720pxで中央寄せにする。SPは画面幅の90%
• FVはPCでは写真の右にフォームを置く。SPでは写真・見出し・フォームを縦に積む
• 理由の3連カードと事例の2列カードは、SPでは1列にする
• 声の行はPCでは見出しと本文の左右2列。SPでは上下に積む
• CTAボタンはSPでは横幅いっぱい、PCでは幅を約360pxにする

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