DESIGN.md — 紺×コーラル赤の法人営業代行 LP（Navy and Coral BtoB Outsourcing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 濃紺・コーラル赤の強調・比較表・フラットイラスト・カード積み上げ・法人向け
• 地の質感: フラットな単色面。薄い影付きの白カードと、料金見出しやフッターの紺グラデーション
• 形: 角丸 4〜16px のカード、角丸の太いボタン、ピル型タグ、吹き出し型の番号バッジ
• 温度感: やや寒色寄り。紺とグレーの冷たさを赤・緑のアクセントで和らげる

Colors

• 地は白と薄グレーをセクションごとに交互に敷き、FV・中間 CTA 帯・スケジュールだけ薄青グレーにする
• 見出しと文字は濃紺で統一し、黒は使わない
• 本文中の重要語はコーラル赤の文字色で部分強調する
• CTA は緑（資料請求）と赤（商談）の 2 色を必ず並べる
• 比較表は自社列を赤枠・赤ヘッダー、他社列をグレーにして差を出す
• 料金見出しとフッターは紺から青への横グラデーション
• button-primary は文字 #FFFFFF × 背景 #4CAF8A のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#398367、4.55:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #DD5B5B のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D73D3D、4.54:1）を使う。

Typography

• すべて太めのゴシックでそろえ、明朝は使わない
• 見出しは中央揃えで、強調部は赤の文字色＋下線
• 数字は一回り大きく太くして目立たせる
• 本文は 12px 前後で行間を広めにする
• FV 見出しのキーワード上に傍点を打つ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。取引先ロゴは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右余白は 12〜16px と狭めにして情報を詰める
• セクション見出しの下に紺の細線を全幅で引くことがある
• 中間に CTA 帯を挟み、人物写真とボタン 2 つを並べる
• カードは縦に 12px ずつ間を空けて積む

Elevation & Depth

• 声カード・料金カード・フォームは薄くぼかした影
• CTA ボタンは下側に濃い色の縁を付けて立体感を出す
• ポイントカードは影なしで赤の細枠

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 4px 程度の横長長方形。人物は切り抜きで背景に重ねる
• セクション境界: 直線の色面切り替え。装飾的な波・斜めは使わない
• 業種タグだけ紺線のピル型
• 番号は紺の丸に下向きの角を付けた吹き出し形
• Point ラベルは赤の角丸タブをカード上辺に重ねる

Components

• 資料請求ボタン（button-primary）: 緑地に白の大文字＋アイコン付き補足 1 行。下縁は濃い緑
• 商談希望ボタン（button-secondary）: 赤地で資料請求ボタンと同じ形。横並びか縦並びにする
• 事例詳細ボタン（button-dark）: 全幅の紺ボタンに白太字
• 比較表（comparison-table）: 紺の見出し帯、左に紺の項目列。自社列は赤枠＋赤点、他社列はグレー
• ポイントカード（point-card）: 赤の細枠の角丸カード。上辺に赤い Point ラベルを重ねる
• お客様の声カード（voice-card）: 白カードにロゴ、紺の「対象サービス」バッジ、灰帯のタグ、本文、社名
• 導入ステップカード（step-card）: 薄青グレー地の白カード。左に STEP 番号、イラスト、工程名
• FAQ（faq-item）: 紺丸の Q と太字の質問、紺線、赤 A と回答
• 料金カード（price-card）: 紺グラデの見出し帯に白文字＋白地赤文字バッジ。灰枠内に大きな価格
• 問い合わせフォーム（form）: 角丸の白カードにラジオ、薄青グレーの入力欄、赤の必須マーク、小さな送信ボタン

Do's and Don'ts

Do - 強調語は赤文字にし、1 文に 1〜2 か所までに抑える - CTA は緑と赤の 2 種をセットで FV と中間に置く - 数字（社数・人数・価格）は大きく太く見せる - 地色を交互に変えてセクションの区切りを見せる - 説明図は青系のフラットイラストでそろえる

Don't - 黒や原色の青を文字に使わない - 明朝体や手書き体を混ぜない - CTA をピル型や線だけのボタンにしない - セクション境界に波や斜めの装飾を入れない - 赤の強調を見出し以外の広い面に使わない

Page Structure

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

1. ファーストビュー（実績規模とサービス内容を一目で伝える）: 薄青グレー地に赤リボンのキャンペーン帯、紺の大見出し、ロゴ、右にアンバサダー写真、下に 2 色 CTA
2. 取引先ロゴ（導入実績で信頼を出す）: 紺の吹き出しラベルと白枠のロゴカードを 2 列で並べる
3. 悩みの提起（ターゲットの課題に共感する）: 薄グレー地にチェック付きの悩み 4 行を線で区切り、悩む人物イラストを添える
4. 選ばれる理由（差別化の理由を 2 つ示す）: 「お任せください」の斜めラベル、イラスト＋紺の番号吹き出し＋赤強調入り本文
5. 他社比較（自社の優位性を表で示す）: 紺の見出し帯と、赤枠の自社列とグレーの他社列の比較表
6. 機能紹介（独自データと運用内容を説明する）: 2 行見出し＋下線、Point カードと管理画面のスクリーンショット
7. 中間 CTA（読み途中で問い合わせへ誘導する）: 薄青グレー帯に人物の切り抜き写真と緑・赤のボタンを縦積み
8. 導入事例（具体的な成功例を見せる）: 横長写真、会社名、要約文、紺の全幅ボタンを繰り返す
9. お客様の声（利用者の評価を見せる）: 影付き白カードを縦に 3 枚、その下に業種のピル型タグを並べる
10. 導入ステップ（開始までの流れを示す）: 薄青グレー地に STEP01〜05 の白カードを積む
11. よくある質問（不安を解消する）: Q と A のアイコン付きリストを紺線で区切る
12. 料金プラン（価格を明示する）: 紺グラデ見出しの料金カードを 3 枚、価格の一部を赤字
13. キャンペーンバナー（今申し込む理由を作る）: オレンジ〜赤の紙吹雪バナーに白の太い斜体文字
14. 問い合わせフォーム・フッター（申込を受け、会社情報を示す）: 薄グレー地に角丸フォームカード、紺グラデのフッターに会社概要の表

Imagery

• 人物写真は明るいオフィスや白背景で撮り、笑顔のビジネスパーソンを使う
• アンバサダーは切り抜きで背景色の上に重ねる
• 説明図は紺・青・ライトブルーに赤を少し差したフラットなベクターイラスト
• 悩みパートは線画に赤・青緑の髪色を付けた人物イラスト
• 管理画面のスクショは赤い円で拡大して要点を示す
• キャンペーンバナーは赤橙のグラデーションに金の紙吹雪
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダー右に問い合わせボタンと電話番号を置く
• PC の FV は左にテキストと横並びの CTA、右に人物写真
• 取引先ロゴは PC で 5 列×2 段
• 理由・事例・声は PC で 2〜3 列に並べる
• 導入ステップは PC で矢印形の横並び 5 枚
• 料金カードは PC で 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 行書くと起動時に読み込まれる。