DESIGN.md — 紺×金の信頼感ある採用コンサルLP（Navy and Gold Executive Consulting LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: 紺と金・重厚・誠実・参謀・戦略・ビジネス写真・比較表
• 地の質感: 紺の面に斜めのグラデーションの帯をうっすら重ねる。明るいセクションは淡いグレーに石目調のノイズを敷く
• 形: 角が少し丸い白カード、金の細枠で囲んだ写真、丸く切り抜いた人物写真、角に金のリボンバッジ
• 温度感: 冷静で知的な寒色ベースに、金で少し温かみと格を足す

Colors

• 紺の面のセクションと白・淡いグレーのセクションを交互に並べる
• 金はCTA・罫線・番号・リボン・強調語だけに使い、広い面には塗らない
• 紺地の上の文字は白にし、強調語だけ金にする
• 明るい地の見出しは紺文字にして、下に金の下線か点を添える
• プラン比較表は列ごとに色を変えて区別する（緑・紫・えんじ・黒）
• button-primary は文字 #FEFBE9 × 背景 #BB962B のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8B7020、4.55:1）を使う。

Typography

• 和文は太めのゴシックに統一し、字間を広め（0.06〜0.1em）にとる
• 見出しの下には、全大文字で字間の広い欧文セリフのサブ見出しを細く添える
• 数字の実績は数字だけ2倍ほどの大きさにして強調する
• 本文は中央揃えにせず左揃え。見出しは中央揃え
• 紺セクションの末尾に、欧文の巨大な透かし文字を薄く置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では理由とステップを3〜4列、お客様の声を2列に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードとボックスは左右に約18pxの余白をとって置く
• 各セクションは中央揃えの見出し、欧文サブ見出し、本文の順に並べる
• 理由ブロックは写真、小見出し、金線、本文の縦の繰り返し
• 比較表はSPでは横スクロールにし、「スクロールできます」の案内を出す
• 紺地の本文ボックスは細い枠線で囲む

Elevation & Depth

• 白カードには淡くて広い影（0 6px 20px rgba(0,0,0,.08)）を付ける
• 紺地の上の要素には影を付けず、枠線で区切る
• フォームのカードは柔らかい影で浮かせる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の写真は金の細枠で囲む。人物とステップの写真は金の輪付きの円で切り抜く
• セクション境界: 直線で切り替え、紺地に斜めの光の帯を入れる。フォームの手前は金の横線で区切る
• ボタンは角丸が小さい長方形にし、右に丸い再生アイコンを置く
• REASONバッジは写真の左上に重ねた金の旗型リボン
• 見出し上の金の3点ドットをアクセントにする
• ラベルは紺の小さい長方形にする

Components

• 金のCTAボタン（button-primary）: 金の長方形に白太字、右に丸い矢印アイコン。上に斜線で挟んだ一言を添える
• 悩みカード（worry-card）: 白カードの上部に、チェックアイコン付きの紺の見出しと紺の下線。その下に本文
• 理由ブロック（reason-block）: 金枠の写真の左上に、番号とREASONの金リボン。下に中央揃えの小見出しと金線、本文
• セクション見出し（heading-section）: 紺の太字見出しに、金の下線と3点ドット。下に欧文サブ見出し
• 実績ビフォーアフターカード（result-card）: 紺の帯ラベルの下に淡い青灰の面で課題を示し、下向きの矢印形で白い成果の面へつなぐ。数字は特大
• お客様の声カード（voice-card）: 金のドット付きの見出しに続けて写真と社名のプレート。紺地に業種・課題のラベル表と白文字の本文
• プラン比較表（plan-table）: 紺地の表。列の見出しは色分けし、価格を大きく出す。項目は◎○—で示し、左端に金の縦帯の分類ラベル
• 流れステップ（flow-step）: 金の欧文番号に続けて、金の輪付きの円写真、紺の太字見出し、説明文。最後のステップは金の円にSTARTと入れる
• 問い合わせフォーム（form-card）: 白カードの中に、紺の必須ラベル付きの項目名と淡いグレーの入力欄。送信ボタンは金
• FAQ項目（faq-item）: 紺地に白丸のQアイコンと白文字の質問、右に金の三角。項目の間は金の細線

Do's and Don'ts

Do - 紺と金の2色を軸にし、ほかの色は図解と表だけに使う - 見出しには必ず欧文セリフのサブ見出しを添える - 実績は数字を大きくし、ビフォーアフターで見せる - 写真はスーツのビジネスシーンで統一し、金の枠か円で囲む - 紺地のセクションの間に明るい地のセクションを入れて、ページにリズムを作る

Don't - パステルやポップな色を使わない - ピル型やぷっくりしたボタンにしない - 金を大きな面に塗らない - 手書き風や丸文字の書体を使わない - カードの角を大きく丸めすぎない

Page Structure

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

1. ファーストビュー（サービスの立ち位置と、無料相談への入口を示す）: 紺地に白枠の帯でリード文、太字のサービス名、金のCTA。下に握手の写真と、月桂樹で飾った強み3点
2. 悩みの提起（採用の課題に共感する）: 石目調のグレー地。悩んでいる人物のイラストと中央見出し、チェック付きの白カード4枚
3. 解決策の提示（支援のコンセプトを図で示す）: 紺地に、ティールの円2つを×でつなぐ図。金の帯から矢印で白い成果の箱へつなぎ、枠付きの説明文を置く
4. 選ばれる理由（強みを6つ示す）: 白地に、金リボンの番号付き写真、小見出し、金線、本文を繰り返す
5. 提供サービス例（支援メニューを一覧にする）: 淡いグレー地に紺の細枠の白ボックス。金ドット付きのカテゴリと箇条書き
6. 代表紹介（専門家の実績で信頼を得る）: 紺地に金輪の丸い人物写真と肩書。資格・実績・講演・メディアは白ラベルの見出しと箇条書き。最後に記事の切り抜き画像
7. 解決事例（成果を数字で示す）: 白地にビフォーアフターのカード2枚。数字を特大にする
8. お客様の声（導入企業の評価を見せる）: 写真と社名プレートの下に、紺のカードで属性ラベルと本文
9. 料金プラン（4つのプランを比べてもらう）: 紺地に色分けした比較表。下に淡い青灰の注記ボックス
10. ご利用の流れ（契約までの手順を示す）: 白地に、金番号と円写真の4ステップを縦に並べる
11. お問い合わせフォーム（相談の申込を受け付ける）: 金線で区切ったグレー地に白カードのフォーム。送信ボタンは金
12. よくある質問（不安を解消する）: 濃紺地に、Q丸アイコンと金線で区切ったアコーディオン
13. 代表メッセージ・最終CTA（思いを伝えて相談へ導く）: 紺地に金の細枠で囲んだメッセージと丸い人物写真。最後に写真背景と金のCTA

Imagery

• スーツ姿の手元・握手・打ち合わせの写真。顔は写さず、寒色寄りの自然光で撮る
• 代表の人物写真は笑顔のバストアップにし、金の輪付きの円で切り抜く
• 悩みの場面は、頭を抱えるスーツの男性を線画のイラストで描く
• 月桂樹の白い線のアイコンで強みを飾る
• 新聞やWeb記事の切り抜き画像を、金の枠で囲んで信頼の材料にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを左テキスト・右写真の2分割にし、強み3点は横並びにする
• PCでは悩みカードを2×2、理由を3列×2段、ステップを4列にする
• PCでは代表紹介の写真と経歴を横並びにする
• SPで横スクロールの比較表は、PCでは4列を全部表示する
• PCのコンテンツ幅は約1000pxにし、中央に置く

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