赤アクセント×薄灰地のBtoBコンサルLP

Red Accent Clean BtoB Consulting LP

白と薄いグレーの地に、見出しの一部と帯だけを赤で強調するBtoBサービスLP。CTAは黄色のピル型ボタンで目立たせる。アイソメトリックのイラストと白いカードで、情報量が多くても整理されて見えるようにしている。

BtoB・SaaS・ITサービス信頼・誠実シンプル・ミニマル情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

白地と薄灰地を、セクションごとに交互に切り替える
赤は見出しの末尾の強調語、ピル型ラベル、帯見出しだけに使う
黄色はCTAボタン専用にする。ほかの装飾には使わない
黒の全幅帯は中間CTAの区切りとして2回まで使う
本文は黒に近い濃色だけで組み、色数を増やさない

TYPOGRAPHY

書体

displayファーストビューのメインコピー（赤）ゴシック／ Noto Sans JP 900 ／ 28px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し（末尾の語を赤にする）ゴシック／ Noto Sans JP 900 ／ 22px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdカードや特長の小見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-smFAQの質問・事例の見出しゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・出典ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent実績の数値、特長の番号（灰色の大きな欧文）欧文サンセリフ／ Montserrat 800 ／ 40px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文字ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

見出しは中央揃えの2行で組み、1行目を小さく、2行目に赤い強調語を入れる
数値は欧文の極太書体で大きくし、単位は小さく添える
特長の番号は薄い灰色の大きな欧文数字にする
本文は行間1.8で左揃えにする

PAGE STRUCTURE

セクション構成

ヘッダーナビゲーションと電話による導線白地に、ロゴ、メニュー、電話番号、黄色ボタンを横に並べる
ファーストビュー価値の提示と実績での信頼づけピル型ラベル、赤い大見出し、数値2つ、黄色ボタン2つを置き、右にアイソメトリックイラスト
導入企業ロゴ社会的な証明白地に、ロゴを多列のグリッドで並べる
サービス概要サービスの定義中央見出しの下に、本文を折りたたんで載せ、赤枠の「もっと見る」ボタンを置く
悩みの提起共感灰地に、イラスト付きの悩みを4つ横に並べる。要点は赤文字にする
特長強みの提示赤いラベルと赤い帯を置き、番号付きの3項目をイラストと左右交互に並べる
得意領域対応分野の提示白い枠の中に、イラストと説明を2×2のグリッドで並べる
中間CTA問い合わせへの誘導黒帯に黄色ボタン2つと電話番号を置く
サービス内容提供内容の詳細灰地に、アイコンと文章の横長の白カードを縦に積む
料金プラン価格の提示4枚の料金カードを並べ、その下に関連サービスの灰色ボックスを置く
スタッフ紹介人による信頼づけ円形の顔写真のカードを3列×2段で並べる
実績事例成果の証明赤い帯見出しのカードに、課題・施策・成果と棒グラフ、画面キャプチャを入れる
お客様の声・FAQ不安の解消サムネイル付きのリンク一覧と、Q付きのアコーディオン
ご利用の流れ手順の明示灰地に、赤い番号付きのステップカードを5つ縦に並べる

COMPONENTS

部品

黄色CTAボタン button-primary問い合わせと資料請求の主ボタン。右端に矢印の小さな丸を付ける
赤いピル型ラベル label-pill「解決します」型の見出しの前に置く、赤地に白文字のラベル
赤い帯見出し highlight-bandキーコピーを赤い四角の帯に白抜きで入れる。2行に分けて組む
実績数値 stat-badge黒丸のラベルの横に、大きな数値と小さな単位を並べる
料金カード price-card上部にピル型のプラン名を置き、赤い価格と、期間・対象を区切り線で縦に並べる
コンサルタントカード profile-card円形の顔写真、名前、役職、紹介文を中央揃えで並べる
FAQアコーディオン faq-item白い枠線の行で、左に赤いQ、右に赤い＋を置く
流れのステップ step-card左上に赤い番号丸を置き、線画アイコンと見出し・説明を白カードに入れる
黒帯の中間CTA cta-band黒い全幅帯に、白文字の案内、黄色ボタン2つ、大きな電話番号を入れる

守ること

強調は見出しの一部の語だけ赤にする
CTAは必ず黄色のピル型にする
白地と灰地を交互にして、セクションの区切りを明確にする
実績は数値を大きく見せる
イラストは青・赤・黄のアイソメトリックで統一する

DON'T

避けること

赤で広い面を塗りつぶさない
グラデーションや強い影を使わない
黄色をCTA以外に使わない
丸ゴシックや手書き書体を使わない
カードの角を大きく丸めない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 赤アクセント×薄灰地のBtoBコンサルLP（Red Accent Clean BtoB Consulting LP）

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

Overview

業種: BtoB・SaaS・ITサービス／ 雰囲気: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
キーワード: 赤の部分強調・黄色CTA・薄灰の地・白カード・アイソメトリックイラスト・実績数値
地の質感: フラットで、影はごく薄い。グラデーションは使わない
形: 四角に近い小さな角丸のカード。CTAはピル型、見出し上のラベルもピル型
温度感: ややクールで誠実な印象。赤と黄で熱量を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#CB141A`	見出しの強調語・ラベル・帯	2%	画素の実測
`on-primary`	`#FFFFFF`	赤い帯の上の文字	0%	画素の主要色に補正
`cta`	`#FEC62D`	主CTAボタン	1%	画素の実測
`on-cta`	`#1B1011`	CTAボタンの文字	0%	画素の主要色に補正
`background`	`#FFFFFF`	メインの白地	46%	画素の実測
`background-alt`	`#F2F2F2`	セクション交互の薄灰地	23%	画素の実測
`surface`	`#FEFEFE`	灰地の上の白カード	8%	画素の実測
`dark-section`	`#111111`	中間CTA帯の黒地	5%	画素の実測
`on-dark`	`#FCFCFC`	黒帯の上の文字	0%	画素の実測
`text`	`#1B1011`	見出しと本文の文字	3%	画素の主要色に補正
`text-muted`	`#777777`	注釈の文字	0%	推定
`line`	`#CFD1D2`	カードとFAQの枠線	1%	画素の主要色に補正
`accent-1`	`#131313`	大きな数字の背景にある黒丸バッジ	0%	画素の実測

白地と薄灰地を、セクションごとに交互に切り替える
赤は見出しの末尾の強調語、ピル型ラベル、帯見出しだけに使う
黄色はCTAボタン専用にする。ほかの装飾には使わない
黒の全幅帯は中間CTAの区切りとして2回まで使う
本文は黒に近い濃色だけで組み、色数を増やさない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューのメインコピー（赤）	ゴシック	Noto Sans JP	900	28px	1.4	0.02em
`headline-lg`	セクション見出し（末尾の語を赤にする）	ゴシック	Noto Sans JP	900	22px	1.5	0.04em
`headline-md`	カードや特長の小見出し	ゴシック	Noto Sans JP	700	17px	1.5	0.02em
`headline-sm`	FAQの質問・事例の見出し	ゴシック	Noto Sans JP	700	14px	1.5	0.0em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.02em
`note`	注釈・出典	ゴシック	Noto Sans JP	400	10px	1.6	0.0em
`accent`	実績の数値、特長の番号（灰色の大きな欧文）	欧文サンセリフ	Montserrat	800	40px	1.1	0.0em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	700	15px	1.3	0.04em

見出しは中央揃えの2行で組み、1行目を小さく、2行目に赤い強調語を入れる
数値は欧文の極太書体で大きくし、単位は小さく添える
特長の番号は薄い灰色の大きな欧文数字にする
本文は行間1.8で左揃えにする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。カード群は SP でも 2 列まで
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
セクションごとに地の色を切り替えて区切る
特長はイラストと文章を左右交互に並べる。SPでは縦に積む
料金は4枚のカードを横に並べる。SPでは2列×2段
実績は赤い帯見出しを付けた白カードで、本文と画像を並べる
中間CTAは黒い全幅帯に黄色ボタンを2つ並べ、電話番号を添える

Elevation & Depth

カードはごく薄い影か、1pxの灰色の線で表す
黒帯とヘッダー以外に強い影は付けない

Shapes

角丸: 小 2px ／中 4px ／大 8px。ボタンはピル型。
写真の切り抜き: 人物は円形に切り抜く。イラストは切り抜きのまま背景に溶け込ませる
セクション境界: 直線で地の色を切り替える
カードの角はほぼ直角にする
CTAとラベルはピル型にする
流れのステップ番号は赤い丸にする

Components

黄色CTAボタン（button-primary）: 問い合わせと資料請求の主ボタン。右端に矢印の小さな丸を付ける
赤いピル型ラベル（label-pill）: 「解決します」型の見出しの前に置く、赤地に白文字のラベル
赤い帯見出し（highlight-band）: キーコピーを赤い四角の帯に白抜きで入れる。2行に分けて組む
実績数値（stat-badge）: 黒丸のラベルの横に、大きな数値と小さな単位を並べる
料金カード（price-card）: 上部にピル型のプラン名を置き、赤い価格と、期間・対象を区切り線で縦に並べる
コンサルタントカード（profile-card）: 円形の顔写真、名前、役職、紹介文を中央揃えで並べる
FAQアコーディオン（faq-item）: 白い枠線の行で、左に赤いQ、右に赤い＋を置く
流れのステップ（step-card）: 左上に赤い番号丸を置き、線画アイコンと見出し・説明を白カードに入れる
黒帯の中間CTA（cta-band）: 黒い全幅帯に、白文字の案内、黄色ボタン2つ、大きな電話番号を入れる

Do's and Don'ts

Do - 強調は見出しの一部の語だけ赤にする - CTAは必ず黄色のピル型にする - 白地と灰地を交互にして、セクションの区切りを明確にする - 実績は数値を大きく見せる - イラストは青・赤・黄のアイソメトリックで統一する

Don't - 赤で広い面を塗りつぶさない - グラデーションや強い影を使わない - 黄色をCTA以外に使わない - 丸ゴシックや手書き書体を使わない - カードの角を大きく丸めない

Page Structure

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

ヘッダー（ナビゲーションと電話による導線）: 白地に、ロゴ、メニュー、電話番号、黄色ボタンを横に並べる
ファーストビュー（価値の提示と実績での信頼づけ）: ピル型ラベル、赤い大見出し、数値2つ、黄色ボタン2つを置き、右にアイソメトリックイラスト
導入企業ロゴ（社会的な証明）: 白地に、ロゴを多列のグリッドで並べる
サービス概要（サービスの定義）: 中央見出しの下に、本文を折りたたんで載せ、赤枠の「もっと見る」ボタンを置く
悩みの提起（共感）: 灰地に、イラスト付きの悩みを4つ横に並べる。要点は赤文字にする
特長（強みの提示）: 赤いラベルと赤い帯を置き、番号付きの3項目をイラストと左右交互に並べる
得意領域（対応分野の提示）: 白い枠の中に、イラストと説明を2×2のグリッドで並べる
中間CTA（問い合わせへの誘導）: 黒帯に黄色ボタン2つと電話番号を置く
サービス内容（提供内容の詳細）: 灰地に、アイコンと文章の横長の白カードを縦に積む
料金プラン（価格の提示）: 4枚の料金カードを並べ、その下に関連サービスの灰色ボックスを置く
スタッフ紹介（人による信頼づけ）: 円形の顔写真のカードを3列×2段で並べる
実績事例（成果の証明）: 赤い帯見出しのカードに、課題・施策・成果と棒グラフ、画面キャプチャを入れる
お客様の声・FAQ（不安の解消）: サムネイル付きのリンク一覧と、Q付きのアコーディオン
ご利用の流れ（手順の明示）: 灰地に、赤い番号付きのステップカードを5つ縦に並べる

Imagery

青・赤・黄を基調としたアイソメトリックのビジネスイラスト（PC、グラフ、人物）
悩みのパートは、フラットな人物と画面の小さなイラスト
手順のパートは、赤と紺の線画アイコン
人物は白背景のスーツ姿で、円形に切り抜く
実績は、赤い棒グラフとサイトの画面キャプチャで示す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは中央に約900pxの幅で置く。SPは1カラムにする
PCで4列の悩み・料金は、SPでは2列にする
特長の左右交互レイアウトは、SPではイラストを上に置いて縦に積む
スタッフの3列は、SPでは1〜2列にする
黒帯のCTAボタン2つは、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 行書くと起動時に読み込まれる。

---
version: alpha
name: Red Accent Clean BtoB Consulting LP
description: 白と薄いグレーの地に、見出しの一部と帯だけを赤で強調するBtoBサービスLP。CTAは黄色のピル型ボタンで目立たせる。アイソメトリックのイラストと白いカードで、情報量が多くても整理されて見えるようにしている。
colors:
  primary: '#CB141A'
  on-primary: '#FFFFFF'
  cta: '#FEC62D'
  on-cta: '#1B1011'
  background: '#FFFFFF'
  background-alt: '#F2F2F2'
  surface: '#FEFEFE'
  dark-section: '#111111'
  on-dark: '#FCFCFC'
  text: '#1B1011'
  text-muted: '#777777'
  line: '#CFD1D2'
  accent-1: '#131313'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.04em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  label-pill:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 32px
  highlight-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 36px
  stat-badge:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 56px
  price-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 200px
  profile-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 260px
  faq-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  step-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 90px
  cta-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 200px
---

# DESIGN.md — 赤アクセント×薄灰地のBtoBコンサルLP（Red Accent Clean BtoB Consulting LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
- **キーワード**: 赤の部分強調・黄色CTA・薄灰の地・白カード・アイソメトリックイラスト・実績数値
- **地の質感**: フラットで、影はごく薄い。グラデーションは使わない
- **形**: 四角に近い小さな角丸のカード。CTAはピル型、見出し上のラベルもピル型
- **温度感**: ややクールで誠実な印象。赤と黄で熱量を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#CB141A` | 見出しの強調語・ラベル・帯 | 2% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 赤い帯の上の文字 | 0% | 画素の主要色に補正 |
| `cta` | `#FEC62D` | 主CTAボタン | 1% | 画素の実測 |
| `on-cta` | `#1B1011` | CTAボタンの文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | メインの白地 | 46% | 画素の実測 |
| `background-alt` | `#F2F2F2` | セクション交互の薄灰地 | 23% | 画素の実測 |
| `surface` | `#FEFEFE` | 灰地の上の白カード | 8% | 画素の実測 |
| `dark-section` | `#111111` | 中間CTA帯の黒地 | 5% | 画素の実測 |
| `on-dark` | `#FCFCFC` | 黒帯の上の文字 | 0% | 画素の実測 |
| `text` | `#1B1011` | 見出しと本文の文字 | 3% | 画素の主要色に補正 |
| `text-muted` | `#777777` | 注釈の文字 | 0% | 推定 |
| `line` | `#CFD1D2` | カードとFAQの枠線 | 1% | 画素の主要色に補正 |
| `accent-1` | `#131313` | 大きな数字の背景にある黒丸バッジ | 0% | 画素の実測 |

- 白地と薄灰地を、セクションごとに交互に切り替える
- 赤は見出しの末尾の強調語、ピル型ラベル、帯見出しだけに使う
- 黄色はCTAボタン専用にする。ほかの装飾には使わない
- 黒の全幅帯は中間CTAの区切りとして2回まで使う
- 本文は黒に近い濃色だけで組み、色数を増やさない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのメインコピー（赤） | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.02em |
| `headline-lg` | セクション見出し（末尾の語を赤にする） | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.04em |
| `headline-md` | カードや特長の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em |
| `headline-sm` | FAQの質問・事例の見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em |
| `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | 実績の数値、特長の番号（灰色の大きな欧文） | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.04em |

- 見出しは中央揃えの2行で組み、1行目を小さく、2行目に赤い強調語を入れる
- 数値は欧文の極太書体で大きくし、単位は小さく添える
- 特長の番号は薄い灰色の大きな欧文数字にする
- 本文は行間1.8で左揃えにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カード群は SP でも 2 列まで
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションごとに地の色を切り替えて区切る
- 特長はイラストと文章を左右交互に並べる。SPでは縦に積む
- 料金は4枚のカードを横に並べる。SPでは2列×2段
- 実績は赤い帯見出しを付けた白カードで、本文と画像を並べる
- 中間CTAは黒い全幅帯に黄色ボタンを2つ並べ、電話番号を添える

## Elevation & Depth

- カードはごく薄い影か、1pxの灰色の線で表す
- 黒帯とヘッダー以外に強い影は付けない

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
- **写真の切り抜き**: 人物は円形に切り抜く。イラストは切り抜きのまま背景に溶け込ませる
- **セクション境界**: 直線で地の色を切り替える
- カードの角はほぼ直角にする
- CTAとラベルはピル型にする
- 流れのステップ番号は赤い丸にする

## Components

- **黄色CTAボタン**（`button-primary`）: 問い合わせと資料請求の主ボタン。右端に矢印の小さな丸を付ける
- **赤いピル型ラベル**（`label-pill`）: 「解決します」型の見出しの前に置く、赤地に白文字のラベル
- **赤い帯見出し**（`highlight-band`）: キーコピーを赤い四角の帯に白抜きで入れる。2行に分けて組む
- **実績数値**（`stat-badge`）: 黒丸のラベルの横に、大きな数値と小さな単位を並べる
- **料金カード**（`price-card`）: 上部にピル型のプラン名を置き、赤い価格と、期間・対象を区切り線で縦に並べる
- **コンサルタントカード**（`profile-card`）: 円形の顔写真、名前、役職、紹介文を中央揃えで並べる
- **FAQアコーディオン**（`faq-item`）: 白い枠線の行で、左に赤いQ、右に赤い＋を置く
- **流れのステップ**（`step-card`）: 左上に赤い番号丸を置き、線画アイコンと見出し・説明を白カードに入れる
- **黒帯の中間CTA**（`cta-band`）: 黒い全幅帯に、白文字の案内、黄色ボタン2つ、大きな電話番号を入れる

## Do's and Don'ts

**Do**
- 強調は見出しの一部の語だけ赤にする
- CTAは必ず黄色のピル型にする
- 白地と灰地を交互にして、セクションの区切りを明確にする
- 実績は数値を大きく見せる
- イラストは青・赤・黄のアイソメトリックで統一する

**Don't**
- 赤で広い面を塗りつぶさない
- グラデーションや強い影を使わない
- 黄色をCTA以外に使わない
- 丸ゴシックや手書き書体を使わない
- カードの角を大きく丸めない

## Page Structure

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

1. **ヘッダー**（ナビゲーションと電話による導線）: 白地に、ロゴ、メニュー、電話番号、黄色ボタンを横に並べる
2. **ファーストビュー**（価値の提示と実績での信頼づけ）: ピル型ラベル、赤い大見出し、数値2つ、黄色ボタン2つを置き、右にアイソメトリックイラスト
3. **導入企業ロゴ**（社会的な証明）: 白地に、ロゴを多列のグリッドで並べる
4. **サービス概要**（サービスの定義）: 中央見出しの下に、本文を折りたたんで載せ、赤枠の「もっと見る」ボタンを置く
5. **悩みの提起**（共感）: 灰地に、イラスト付きの悩みを4つ横に並べる。要点は赤文字にする
6. **特長**（強みの提示）: 赤いラベルと赤い帯を置き、番号付きの3項目をイラストと左右交互に並べる
7. **得意領域**（対応分野の提示）: 白い枠の中に、イラストと説明を2×2のグリッドで並べる
8. **中間CTA**（問い合わせへの誘導）: 黒帯に黄色ボタン2つと電話番号を置く
9. **サービス内容**（提供内容の詳細）: 灰地に、アイコンと文章の横長の白カードを縦に積む
10. **料金プラン**（価格の提示）: 4枚の料金カードを並べ、その下に関連サービスの灰色ボックスを置く
11. **スタッフ紹介**（人による信頼づけ）: 円形の顔写真のカードを3列×2段で並べる
12. **実績事例**（成果の証明）: 赤い帯見出しのカードに、課題・施策・成果と棒グラフ、画面キャプチャを入れる
13. **お客様の声・FAQ**（不安の解消）: サムネイル付きのリンク一覧と、Q付きのアコーディオン
14. **ご利用の流れ**（手順の明示）: 灰地に、赤い番号付きのステップカードを5つ縦に並べる

## Imagery

- 青・赤・黄を基調としたアイソメトリックのビジネスイラスト（PC、グラフ、人物）
- 悩みのパートは、フラットな人物と画面の小さなイラスト
- 手順のパートは、赤と紺の線画アイコン
- 人物は白背景のスーツ姿で、円形に切り抜く
- 実績は、赤い棒グラフとサイトの画面キャプチャで示す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央に約900pxの幅で置く。SPは1カラムにする
- PCで4列の悩み・料金は、SPでは2列にする
- 特長の左右交互レイアウトは、SPではイラストを上に置いて縦に積む
- スタッフの3列は、SPでは1〜2列にする
- 黒帯のCTAボタン2つは、SPでは縦に積んで全幅にする

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-a32a5352`（元 LP の URL から採番）
- **元 LP**: https://www.plan-b.co.jp/solution/seo/consulting/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.plan-b.co.jp/solution/seo/consulting/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

BtoB・SaaS・ITサービス白×紺ブルーの採用AI SaaS LPClean Blue Corporate SaaS Recruitment LP BtoB・SaaS・ITサービス紺×水色の清潔感ある店舗向けSaaS LPClean Slate Navy Wellness SaaS LP BtoB・SaaS・ITサービス黄緑×黄×黒のポップなBtoB広告サービスLPLime Yellow Pop BtoB Marketing LP BtoB・SaaS・ITサービス藍紫×白グレーの静かなAI SaaS LPIndigo Minimal AI SaaS Pre-Registration LP BtoB・SaaS・ITサービス水色×オレンジの店舗向けSaaS特典LPBright Sky Blue SaaS Campaign LP BtoB・SaaS・ITサービス若草グリーン×オレンジCTAのBtoB SaaS LPFresh Green Corporate SaaS LP