DESIGN.md — 紺×ゴールドの専門職向け転職支援 LP（Navy and Gold Professional Career Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、シンプル・ミニマル
• キーワード: 濃紺・くすみゴールド・セクション地色の切替・番号付きカード・人物イラスト・登録フォーム
• 地の質感: フラットな単色面が中心。一部のセクションだけ淡いベージュのストライプ地。影はごく薄い。
• 形: 四角いカードに小さな角丸。番号は円形、帯見出しは長方形。
• 温度感: やや寒色寄り。紺と水色で誠実さを出し、ゴールドとベージュで温かみを加える。

Colors

• セクションごとに地色をグレー→白→ストライプ生成り→濃紺→水色→ベージュの順で切り替え、区切りにする
• 濃紺は信頼の核として、体験談セクションの地と見出し帯に使う
• ゴールドは見出しの一部の語、番号、カードの画像枠に限って使う
• 赤はCTAボタンと『無料』などの強調語だけに使う
• カードやフォームは必ず白面にして、色付きの地から浮かせる

Typography

• 見出しは中央揃えで、キーワードだけをゴールドか赤に変える
• 見出しの下に小さな英字ラベルを添える
• 本文は左揃えの小さめゴシックで、行間を広めにとる
• 年収などの数値は大きく太くし、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由カードとエージェント機能は縦に積む。PC では 3〜4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは全幅の地色帯で、中身は中央寄せにする
• 見出し→アイコンかイラスト→カード群の順に並べる
• ステップはアイコン付きの横長カードを縦に並べ、最後のステップだけゴールド地にする
• フォームはラベルと入力欄を2列で組み、SP では縦に積む

Elevation & Depth

• カードはごく薄い影(0 2px 6px rgba(0,0,0,.08))にとどめる
• ボタンにも弱い影をつける
• フォーム欄は影なしで細い枠線のみ

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角く切る。人物は円形アイコンで、イラストは切り抜いて配置する
• セクション境界: 直線で地色を切り替える。CTA 前だけ下向き矢印の三角を置く
• 番号は赤い円形のバッジにする
• 見出し帯は角丸なしの長方形にする
• ボタンは角丸4px程度の長方形にする

Components

• 赤の登録ボタン（button-primary）: 左に小さな『無料』ラベルが付いた赤い長方形ボタン
• 濃紺の帯見出し（heading-band）: 全幅の濃紺帯に白文字、キーワードはゴールドにする
• 番号付き理由カード（reason-card）: 上部はゴールドの画像枠で赤丸の番号を重ね、下部は白地に本文を入れる
• 体験談カード（voice-card）: 円形の人物写真と属性ラベル（濃紺の小帯）、転職前後の年収を矢印でつなぎ、右に本文を置く
• タイプ別の人物イラスト（persona-figure）: 吹き出しの悩み→立ち姿イラスト→ゴールドの半円ラベル→チェックリストを縦に並べる
• 流れのステップカード（step-card）: 左に写真、右にゴールドの STEP 番号と説明を置いた横長のグレーカード
• 会員登録フォーム（form-block）: 濃紺帯の小見出しの下に、ラベルと入力欄を組み、最後に大きな送信ボタンを置く
• 英字サブラベル（section-label-en）: 見出し下に添える小さなゴールドの英字

Do's and Don'ts

Do - 地色の切り替えでセクションを明確に分ける - 濃紺とゴールドの組み合わせで専門性を出す - 実績は数値を大きく見せる - CTA は赤一色にそろえ、ファーストビュー、中盤、フォーム前に置く - 人物はスーツ姿のフラットなイラストで統一する

Don't - ビビッドなパステルや蛍光色を使わない - 角丸を大きくしすぎず、ピル型も使わない - 赤を装飾に乱用しない - 装飾フォントや手書き書体を使わない - グラデーションの強い背景を使わない

Page Structure

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

1. ファーストビュー（対象業界と専門サービスであることを伝える）: 左にスーツ姿の人物写真、右に大きな見出しと赤い CTA。淡い青灰色の地
2. 問題提起の帯（業界専門サービスを選ぶべき理由を一言で示す）: 濃紺の全幅帯に白文字。キーワードはゴールドにする
3. 選ばれる理由（強みを3つ示す）: グレー地に番号付きカードを3枚並べる
4. 対象者別スタイル（読者が自分のタイプを見つけられるようにする）: 吹き出し、人物イラスト、ゴールドのラベル、チェックリストを4タイプ分並べる
5. 利用者の声（年収アップの実例で信頼を得る）: 濃紺地に白い体験談カードを縦に並べる
6. 中間 CTA（無料であることを強調する）: 濃紺帯に、赤とゴールドの強調文字を入れる
7. サービス説明（マッチングの仕組みを伝える）: 水色地に、ロゴの載ったPCのイラストと人物群、説明文を置く
8. エージェントサービス（支援内容を4つ示す）: ベージュ地に、円形のイラストと番号付きの説明を4つ並べ、最後に赤い CTA
9. ご利用の流れ（登録から入社までの手順を示す）: 写真付きのステップカードを縦に並べ、最終ステップはゴールド地。最後に赤い下向き矢印
10. 登録フォーム（その場で会員登録させる）: グレー地に、端末アイコン付きの見出し、ソーシャルログイン、濃紺帯の小見出し、入力欄を置く
11. フッター（著作権表示）: 黒に近い細い帯

Imagery

• ビジネススーツの日本人男女の写真を明るいオフィスで撮る
• 人物イラストは濃紺スーツのフラットな全身図で、線を使わない
• PCや書類などのアイコンは紺と水色とゴールドの簡素なフラット調にする
• 体験談の人物は円形に切り抜いたイラストか写真にする
• 背景には淡い縦ストライプを部分的に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のコンテンツ幅は約960pxで中央寄せにする
• 理由カードは PC で3列、SP で1列
• 対象者タイプは PC で4列、SP では2列×2段か縦積み
• 体験談カードは PC で左に数値・右に本文、SP では上下に積む
• フォームは PC でラベルを左に置き、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 行書くと起動時に読み込まれる。