DESIGN.md — 水色×コーラルの法人向け営業代行LP（Light Blue Corporate BPO Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的
• キーワード: 淡い水色の地・青の英字ラベル・コーラル色のCTA・線画の人物イラスト・白カード・黄色マーカー
• 地の質感: フラットな面に、淡い水色の大きな曲線の波形を重ねる。影はごく弱い
• 形: 角丸は小さめ（4〜8px）。ボタンは角丸の長方形。セクション境界に緩やかな波形を使う
• 温度感: 寒色寄りで爽やか。CTAだけ暖色にして目立たせる

Colors

• 地は淡い水色にし、カードは白にして浮かせる
• 見出しは濃紺。英字の小ラベルと番号は青にする
• CTAはコーラル1色だけを使い、ほかの要素には暖色を使わない
• 資料DLの帯セクションは青の全幅面にして、白文字で書く
• 強調したい語には黄色の半マーカーを敷き、文字は太字にする
• button-primary は文字 #FFFFFF × 背景 #FE6C63 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA0F02、4.6:1）を使う。
• service-tag-box は文字 #019CED × 背景 #FFFFFF のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CBD、4.55:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #019CED のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CBD、4.55:1）を使う。
• case-card は文字 #019CED × 背景 #FFFFFF のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CBD、4.55:1）を使う。

Typography

• 見出しの上には青い英字の小ラベルを置き、2段組みの見出しにする
• 番号（01〜05）は細めのMontserratで大きく、色は青
• 本文は控えめなグレーにし、行間は広めの1.8
• 強調語は太字にして黄色マーカーを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは1列、フローは縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは中央揃えの見出しから始める
• 理由ブロックは番号・見出し・本文を左揃えで並べ、区切り線で分ける
• 事例はカードを横スクロールのカルーセルにし、矢印ボタンを付ける
• サービス一覧は写真付きの白カードをグリッドに並べる
• 資料DLの青帯はページの中盤と末尾に繰り返す

Elevation & Depth

• カードとFAQには、ごく薄い影（0 2px 8px rgba(0,60,120,.08)）を付ける
• CTAボタンには弱い影を付けて押せる感じを出す
• その他はフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: カード上部に横長の長方形で配置し、角丸なしで裁ち落とす
• セクション境界: 淡い水色の大きな波形曲線、または直線で切り替える青帯
• ボタンは角丸4pxの長方形にし、右端に矢印アイコンを付ける
• 悩み枠は線だけの角丸の枠にし、上部に円形のバッジを重ねる
• 事例のカルーセルの矢印は丸ボタンにする

Components

• コーラルのCTA（button-primary）: 資料DL・問い合わせのボタン。白文字で、右に矢印を付ける
• 英字ラベル付き見出し（section-label）: 青い小さな英字と、濃紺の日本語見出しを中央に縦に並べる
• サービス名の枠（service-tag-box）: FVでサービス名を3つ並べる、青い枠線の白いボックス
• 悩みの枠（concern-panel）: 左右2つの枠に悩みを並べ、中央に人物イラスト、上に円形のバッジを置く
• 番号付きの理由（reason-item）: 大きな青番号・太字見出し・本文を区切り線で並べる
• 資料DLの青帯（cta-band）: 全幅の青い面。左にイラスト、右に白文字の説明とCTAを置く
• 事例カード（case-card）: 写真・青の見出し・概要・青い小タグで構成する白カード
• 導入フローのステップ（flow-step）: 白カードの中に番号・見出し・説明を入れ、5段階を矢印形の区切りでつなぐ
• FAQのアコーディオン（faq-item）: 青い「Q」・質問文・右端の青い丸＋アイコンを持つ白いバー

Do's and Don'ts

Do - 地は淡い水色にし、白カードで情報をまとめる - 強調語は青い文字か黄色マーカーで示す - 人物イラストは青と白の線画で統一する - CTAはコーラル1色にし、ページ内で繰り返し置く - 見出しは必ず英字ラベルとセットにする

Don't - CTA以外の要素に赤やオレンジを使わない - 濃い暗色の背景を広い面に使わない - ボタンを大きな丸のピル型にしない - 太い影や立体的な装飾を付けない - フォントの種類を増やさない

Page Structure

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

1. ファーストビュー（提供価値と対応サービスを一目で伝える）: 大きなコピーの一部を青にし、サービス枠を3つ並べてCTAを置く。右には線画の人物
2. 悩みの提起（ターゲット別に課題を示して共感を得る）: 左右の枠に悩みを3〜4個ずつ並べ、黄色マーカーで強調。中央に考え込む人物
3. 選ばれる理由（強みを3つ示す）: 大きな番号01〜03と見出し・本文を並べ、横にイラストを添える
4. 資料DLの帯（資料DLで中盤のリードを獲得する）: 青い全幅帯にグラフのイラストと白文字、コーラルのCTA
5. 事例（導入実績で信頼を得る）: 写真付きの事例カードをカルーセルにし、タグを付ける
6. サービス一覧（提供業務の範囲を示す）: 写真・青見出し・説明の白カード6枚をグリッドに並べ、下にCTA
7. 導入までの流れ（導入の手順を示して不安をなくす）: 水色の角丸枠の中に、5ステップの白カードを横につなぐ
8. よくある質問（疑問を解消する）: Qアイコン付きの白いアコーディオンを縦に4つ
9. 最終CTA（資料DLを最後にもう一度促す）: 中盤と同じ青帯を繰り返す

Imagery

• 人物はスーツ姿の線画イラスト。青・水色・白・グレーで塗る
• 写真はオフィスや店頭で働くビジネスパーソンを自然光で撮ったもの
• グラフや矢印のイラストで成長を表現する
• 背景には淡い水色の大きな曲線の波形を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではFVのイラストをコピーの下に回し、サービス枠は3つを縦に並べるか小さくする
• 悩みの左右枠は縦に積み、人物イラストは枠の間に置く
• サービスのカードはSPでは1〜2列にする
• フローの5ステップはSPでは縦に並べ、下向きの矢印でつなぐ
• 青帯はSPではイラストを上、文字とCTAを下にする
• ヘッダーはSPではハンバーガーメニューと小さいCTAにする

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