DESIGN.md — 青×水色とオレンジCTAの法人向けサービスLP（Bright Blue Isometric BtoB Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 青と水色・白カード・線画の人物イラスト・オレンジCTA・立方体パターン・黄色マーカー
• 地の質感: フラットな単色面。青いセクションには、薄いアイソメトリック立方体パターンを重ねる
• 形: 角丸8px前後のカード、ピル型ボタン、帯状の見出しラベル
• 温度感: 爽やかな寒色が中心。CTAと強調だけ暖色にする

Colors

• 地の色は、白・淡い水色・明るい青・濃い青の4段階で交互に切り替え、セクションを区切る
• 青い地の上には白カードを置き、本文は濃いグレーで書く
• CTAはオレンジだけにする。他の要素にオレンジは使わない
• キーワードは青文字、青い帯への白抜き、黄色マーカーのいずれかで強調する
• 2つのプランは、青の帯とオレンジの帯で色分けする
• フォームの必須ラベルは赤、任意ラベルはグレーにする
• button-primary は文字 #FFFFFF × 背景 #FE8A33 のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C25401、4.6:1）を使う。
• button-tel は文字 #FE8A33 × 背景 #FEFEFE のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C25401、4.56:1）を使う。
• worry-card は文字 #5896C2 × 背景 #FEFEFE のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#3D7BA7、4.54:1）を使う。
• step-card は文字 #5896C2 × 背景 #FEFEFE のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#3D7BA7、4.54:1）を使う。

Typography

• 見出しは太字ゴシックで中央揃えにする
• 見出しのキーワードだけを青文字や青帯の白抜きにする
• 本文は中央揃えの短い行で、改行位置を整える
• カード内の本文は左揃えにする
• 大きな数字（実績・番号）は太字で、色を変えて目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カードは縦に積み、サービス4種は2×2にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地の色を全幅で切り替える
• 見出し→補足リード→本体→CTA帯の順で組む
• 比較プランは並べて同じ高さに揃える
• CTA帯は、問い合わせボタンと電話ボタンを並べて中盤と後半に繰り返す
• FAQは全幅の青帯を縦に積むアコーディオンにする

Elevation & Depth

• 白カードは影なし、または非常に薄い影で地の色から浮かせる
• CTAボタンには軽いドロップシャドウを付ける
• ファーストビューのフォームパネルは半透明の白にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真はファーストビューの背景のみ。他は切り抜きの線画イラスト
• セクション境界: 直線で地の色を切り替える。区切り位置に斜めのパターン地を挟むこともある
• カードは角丸8px前後
• CTAと電話ボタンは完全なピル型
• 見出しラベルは角丸の小さな帯にする
• FAQの帯は角丸を小さくする

Components

• 問い合わせCTA（button-primary）: オレンジのピル型ボタン。左にメールアイコン、右に矢印を置き、上に黒い小さな吹き出しラベルを載せる
• 電話ボタン（button-tel）: 白のピル型ボタン。オレンジの電話番号と受付時間を入れる
• 悩みカード（worry-card）: 白カード。青文字の悩み文の下に、悩む人物のイラストを置く
• プラン比較カード（plan-card）: 白カードの中にイラスト、色帯のプラン名、黄色マーカーの説明、黒ラベル付きのおすすめ文を入れる
• ステップカード（step-card）: 白カード。右上に大きな淡色の番号、左にSTEPラベルと見出しを置き、カード間に丸い矢印を挟む
• サービス種別カード（service-card）: 淡い黄色のカード。上に青い円形アイコン、青の見出し、箇条書きを入れる
• お客様の声カード（voice-card）: 上に人物イラストと黄色の属性タグ、白カードに青の太字見出しと本文を入れる
• FAQ帯（faq-item）: 青の帯に白文字で「Q.」付きの質問を書き、右端に丸囲みの＋を置く
• フォーム行（form-row）: 必須・任意のラベル、項目名、角丸の入力欄を横に並べ、行の間に線を引く
• 青帯キーワード（heading-highlight）: 見出しの中のサービス名を、青の帯に白抜き文字で強調する

Do's and Don'ts

Do - 地の色を4段階の青系で切り替え、リズムを作る - CTA帯は中盤と後半に2回以上置く - 人物は統一した線画イラストで描き、オレンジや黄色をポイントに入れる - 大事な一言は黄色マーカーか青帯で強調する - 仕組みは図解（箱と矢印）で示す

Don't - CTA以外にオレンジを多用しない - 写真を多用して重たくしない - 暗い色や黒を背景に使わない - 明朝体や手書き書体を混ぜない - カードの角丸を大きくしすぎない

Page Structure

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

1. ヘッダー（電話と問い合わせへの導線）: 白地にロゴを置き、右に黄色の電話枠とオレンジ・青のボタンを並べる
2. ファーストビュー（対象とサービスの提示）: 青グラデーションと建物の写真を背景にする。左に対象タグ・太字コピー・円形の実績バッジ、右に資料請求パネルを置く
3. 悩みの提起（共感）: 淡い水色の地に悩みカードを3枚並べ、下に青帯で解決を示す
4. サービス説明（仕組みの理解）: 白地に説明文を置き、青い箱とオレンジ・グレーの矢印で関係図を描く
5. メリット・プラン（収益メリットと選択肢）: 立方体柄の青い地に丸バッジと人物を並べたイラストを置き、2プランの比較カードを並べる
6. CTA（問い合わせ誘導）: 濃い青の帯に、白見出しとオレンジ・白の2ボタンを置く
7. 選ばれる理由（信頼の付与）: 淡い水色の地に、文章とイラストを入れた横長の白カードを積む
8. 導入の流れ（手軽さの訴求）: 青い地に黄色ラベルの見出しを置き、2ステップのカードを矢印でつなぐ
9. サービス一覧（対応範囲の提示）: 白地に図解を置き、アイコン付きの黄色カードを4枚並べる
10. お客様の声（実績の証明）: 青い地に、人物イラスト付きの白カードを2列で並べる
11. よくある質問（不安の解消）: 淡い水色の地に青い帯のアコーディオンを並べる
12. お問い合わせフォーム（コンバージョン）: 白地にラベル付きの入力欄を並べ、スクロール式の規約枠、同意チェック、オレンジのピル型送信ボタンを置く
13. フッター（運営情報）: 淡い水色の地にロゴと運営会社を置き、最下部に青の著作権帯を敷く

Imagery

• スーツ姿の人物を、黒い線画と青・オレンジ・黄色の部分塗りで描く
• 背景に薄い白のアイソメトリック立方体パターンを敷く
• サービスアイコンは白抜きのピクトグラムを青い円に入れる
• ファーストビューのみ、住宅模型と手元の写真を青いトーンで使う
• 仕組みは、角丸の青い箱とシンプルな矢印で図解する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの3列の悩みカードは、SPでは縦積みにする
• PCで横並びの2ボタンCTAは、SPでは縦に積んで全幅にする
• 仕組みの図解は、SPでは縦方向の流れに組み替える
• お客様の声とプラン比較は、SPでは1列にする
• フォームのラベルと入力欄は、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 行書くと起動時に読み込まれる。