赤×白の線画イラスト BtoB SaaS LP

Red Line-Art BtoB SaaS LP

白地に濃い赤を主色にしたBtoBのメール配信SaaS向けLP。赤とピンクの線画イラスト、赤い太字見出し、ドット柄ピンク帯のCTAブロックを何度も繰り返し、資料請求と無料相談へ誘導する訴求型の構成。

BtoB・SaaS・ITサービス信頼・誠実情報量多め・訴求型力強い・インパクト清潔・爽やかPC

ダウンロード

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

COLORS

配色

地は白を基本に、CTAブロックだけ淡ピンクとドット柄で区切る
見出しの強調語のみ赤、残りは濃グレーにして2色で組む
主CTAボタンは濃い赤のピル型、資料DLとデモはサーモン系の面ボタン
イラストは赤・ピンク・黒線の3色に限定する
画面キャプチャ枠だけ青・緑・橙の別色で機能を区別する
FAQ見出し帯は赤の全幅ベタ塗りにして白文字

TYPOGRAPHY

書体

displayFVのメインコピーゴシック／ Noto Sans JP 900 ／ 30px ／行間 1.4

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

headline-lgセクション見出しゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.45

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

headline-mdPOINT見出し・カード見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.5

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

accentPOINT/SYSTEM/CASEなどの英字見出し欧文サンセリフ／ Montserrat 900 ／ 32px ／行間 1.1

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

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

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

note注釈・英字サブラベルゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

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

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

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

見出しは極太ゴシックで、強調語だけ赤にする
POINTなどの英字は赤の極太サンセリフで大きく置き、日本語見出しを下に添える
英字サブラベルは小さく赤で見出しの上に置く
本文は14px前後・行間1.8で詰めすぎない
電話番号は赤の太字で大きく見せる

PAGE STRUCTURE

セクション構成

ファーストビュー価値の提示と資料請求左に特長タグ・太字コピー・丸アイコン3つ、右に赤枠フォーム
CTA相談・資料DLへの誘導ドット帯で挟んだ淡ピンク地。赤ピル・サーモン面ボタン・電話番号
サービス紹介概要と評価の提示左に英字見出しと本文、右に線画と受賞バナー
悩みの提起対象者の共感チェック丸付きの悩み4つを2×2で並べ、解決宣言で締める
選ばれる理由5つの強みを説明POINT番号と赤ブロブ線画を左右交互に置く
中間CTA相談申込赤枠ボックスに見出し、限定バッジ、オレンジ横長ボタン
機能一覧機能の網羅赤枠カードを2列×3段。アイコンイラスト中心
機能詳細画面イメージで理解させる色枠付きの画面キャプチャ2枚と説明文を3回繰り返す
導入事例実績の提示数値を大きく見せた横スライダーカード
利用の流れ導入手順を示す写真付き赤STEP帯3つを三角でつなぐ
よくある質問不安の解消赤ベタ帯の見出しと赤枠アコーディオン
申し込み方法・最終CTA申込への最終誘導淡ピンク地に大きな英字透かしとイラスト、最後にCTAブロック

COMPONENTS

部品

無料相談ボタン button-primary濃い赤のピル型。左にアイコン
資料DL・デモ面ボタン button-docサーモン系の全幅面ボタン。右に丸い下矢印
POINT番号見出し point-heading赤の英字POINTと大きな番号、下に英字サブと太字見出し
機能カード feature-card赤枠カード。上辺に赤ラベル、中央にアイコン、名称と英字ピル
ドット柄CTAブロック dot-cta-bandドット帯で挟み、ロゴ説明・ボタン・電話番号をまとめる
悩みチェック項目 check-card赤いチェック丸と線画人物、強調語を赤にした短文
STEP帯 step-band左に写真、右に赤地白文字。上に円形STEP番号、帯間を三角でつなぐ
FAQ行 faq-item赤枠の行。左に赤丸Q、右端に矢印
FV資料請求フォーム lead-form赤い太枠の中に入力欄を並べ、グレーの送信ピルを置く

守ること

強調語だけを赤にして見出しを読ませる
イラストは赤・ピンクの線画で統一する
CTAブロックを要所ごとに同じ型で繰り返す
英字ラベルと日本語見出しを組み合わせる
機能は枠付きカードとアイコンで整理する

DON'T

避けること

赤以外の濃い色を主色にしない
写真を背景全面に敷かない
大きな角丸や強い影を多用しない
見出し全文を赤にしない
装飾的な明朝体を使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 赤×白の線画イラスト BtoB SaaS LP（Red Line-Art BtoB SaaS LP）

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

Overview

業種: BtoB・SaaS・ITサービス／ 雰囲気: 信頼・誠実、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
キーワード: 赤と白・線画イラスト・太字ゴシック・繰り返しCTA・POINT番号・枠線カード
地の質感: フラットな塗り。ピンク地に白ドット柄の帯をアクセントに使う
形: 角丸は小さめ。赤い細枠のカード、ピル型の小ラベル、赤い円形の背景ブロブ
温度感: 暖色寄りで明るい。赤の熱量を白地で中和する

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#D2090F`	主色・見出し強調・CTA帯	4%	画素の実測
`background`	`#FEFEFE`	ページ地	59%	画素の実測
`background-alt`	`#FFF5F4`	CTAブロックの淡ピンク地	4%	画素の実測
`tint-1`	`#FCE3E4`	ドット柄帯・Contact帯	5%	画素の実測
`secondary`	`#E44349`	資料DLボタン面	3%	画素の実測
`accent-1`	`#F28184`	デモ申込ボタン・ピンク装飾	3%	画素の実測
`cta`	`#F39A1E`	ヘッダー資料DLのオレンジCTA	0%	推定
`on-cta`	`#FFFFFF`	ボタン上の文字	0%	画素の主要色に補正
`text`	`#353535`	見出しの濃グレー	2%	画素の実測
`text-body`	`#444444`	本文	2%	推定
`tint-2`	`#F9E3E5`	淡いピンクの円形背景	3%	画素の実測
`line`	`#B4ACA8`	カード枠線・区切り	1%	画素の主要色に補正
`accent-2`	`#3A8FD0`	画面キャプチャ枠のブルー	2%	推定

地は白を基本に、CTAブロックだけ淡ピンクとドット柄で区切る
見出しの強調語のみ赤、残りは濃グレーにして2色で組む
主CTAボタンは濃い赤のピル型、資料DLとデモはサーモン系の面ボタン
イラストは赤・ピンク・黒線の3色に限定する
画面キャプチャ枠だけ青・緑・橙の別色で機能を区別する
FAQ見出し帯は赤の全幅ベタ塗りにして白文字

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVのメインコピー	ゴシック	Noto Sans JP	900	30px	1.4	0.02em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	900	24px	1.45	0.02em
`headline-md`	POINT見出し・カード見出し	ゴシック	Noto Sans JP	700	20px	1.5	0.0em
`accent`	POINT/SYSTEM/CASEなどの英字見出し	欧文サンセリフ	Montserrat	900	32px	1.1	0.02em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.02em
`note`	注釈・英字サブラベル	ゴシック	Noto Sans JP	400	11px	1.6	0.02em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	16px	1.3	0.04em

見出しは極太ゴシックで、強調語だけ赤にする
POINTなどの英字は赤の極太サンセリフで大きく置き、日本語見出しを下に添える
英字サブラベルは小さく赤で見出しの上に置く
本文は14px前後・行間1.8で詰めすぎない
電話番号は赤の太字で大きく見せる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。機能カードと事例は SP で 1 列
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
POINTはイラストと見出しを左右交互に配置し本文を下に置く
CTAブロックは同じ型をページ中に3回繰り返す
機能一覧はPC2列の赤枠カード、上辺中央にラベルを置く
流れはSTEP帯を下向き三角でつなぐ
FAQは赤枠の1行アコーディオンを縦に並べる

Elevation & Depth

影はほぼ使わずフラットにする
カードは赤またはグレーの1px細枠で区切る
事例カードのみ薄い影で浮かせる

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンはピル型。
写真の切り抜き: イラストは切り抜きで赤い不定形ブロブの上に置く。写真は四角
セクション境界: 直線。ピンク地にドット柄の帯で区切る
主CTAはピル型
ラベル・バッジは小さなピル
カードは角丸ほぼなしの細枠
STEP番号は円形

Components

無料相談ボタン（button-primary）: 濃い赤のピル型。左にアイコン
資料DL・デモ面ボタン（button-doc）: サーモン系の全幅面ボタン。右に丸い下矢印
POINT番号見出し（point-heading）: 赤の英字POINTと大きな番号、下に英字サブと太字見出し
機能カード（feature-card）: 赤枠カード。上辺に赤ラベル、中央にアイコン、名称と英字ピル
ドット柄CTAブロック（dot-cta-band）: ドット帯で挟み、ロゴ説明・ボタン・電話番号をまとめる
悩みチェック項目（check-card）: 赤いチェック丸と線画人物、強調語を赤にした短文
STEP帯（step-band）: 左に写真、右に赤地白文字。上に円形STEP番号、帯間を三角でつなぐ
FAQ行（faq-item）: 赤枠の行。左に赤丸Q、右端に矢印
FV資料請求フォーム（lead-form）: 赤い太枠の中に入力欄を並べ、グレーの送信ピルを置く

Do's and Don'ts

Do - 強調語だけを赤にして見出しを読ませる - イラストは赤・ピンクの線画で統一する - CTAブロックを要所ごとに同じ型で繰り返す - 英字ラベルと日本語見出しを組み合わせる - 機能は枠付きカードとアイコンで整理する

Don't - 赤以外の濃い色を主色にしない - 写真を背景全面に敷かない - 大きな角丸や強い影を多用しない - 見出し全文を赤にしない - 装飾的な明朝体を使わない

Page Structure

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

ファーストビュー（価値の提示と資料請求）: 左に特長タグ・太字コピー・丸アイコン3つ、右に赤枠フォーム
CTA（相談・資料DLへの誘導）: ドット帯で挟んだ淡ピンク地。赤ピル・サーモン面ボタン・電話番号
サービス紹介（概要と評価の提示）: 左に英字見出しと本文、右に線画と受賞バナー
悩みの提起（対象者の共感）: チェック丸付きの悩み4つを2×2で並べ、解決宣言で締める
選ばれる理由（5つの強みを説明）: POINT番号と赤ブロブ線画を左右交互に置く
中間CTA（相談申込）: 赤枠ボックスに見出し、限定バッジ、オレンジ横長ボタン
機能一覧（機能の網羅）: 赤枠カードを2列×3段。アイコンイラスト中心
機能詳細（画面イメージで理解させる）: 色枠付きの画面キャプチャ2枚と説明文を3回繰り返す
導入事例（実績の提示）: 数値を大きく見せた横スライダーカード
利用の流れ（導入手順を示す）: 写真付き赤STEP帯3つを三角でつなぐ
よくある質問（不安の解消）: 赤ベタ帯の見出しと赤枠アコーディオン
申し込み方法・最終CTA（申込への最終誘導）: 淡ピンク地に大きな英字透かしとイラスト、最後にCTAブロック

Imagery

ビジネス人物を黒線・赤・ピンクのフラット線画で描く
人物の背後に赤い不定形ブロブを敷く
機能アイコンは赤・黒・黄の太線アイコンイラスト
画面キャプチャは青・緑・橙の色付きフレームに入れる
STEPには明るいオフィスの人物写真を使う
大きな薄ピンクの英字を透かし装飾にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは2カラムの左右交互、SPはイラスト→見出し→本文の縦積み
FVのフォームはSPでコピーの下へ移す
機能カードはSPで1列
CTAブロックの面ボタンはSPで全幅に縦積み
英字見出しはSPで28〜32pxに縮める
事例スライダーはSPで1枚ずつ表示

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 Line-Art BtoB SaaS LP
description: 白地に濃い赤を主色にしたBtoBのメール配信SaaS向けLP。赤とピンクの線画イラスト、赤い太字見出し、ドット柄ピンク帯のCTAブロックを何度も繰り返し、資料請求と無料相談へ誘導する訴求型の構成。
colors:
  primary: '#D2090F'
  background: '#FEFEFE'
  background-alt: '#FFF5F4'
  tint-1: '#FCE3E4'
  secondary: '#E44349'
  accent-1: '#F28184'
  cta: '#F39A1E'
  on-cta: '#FFFFFF'
  text: '#353535'
  text-body: '#444444'
  tint-2: '#F9E3E5'
  line: '#B4ACA8'
  accent-2: '#3A8FD0'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.45
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  button-doc:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.label-button}'
    height: 56px
  point-heading:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 48px
  feature-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 230px
  dot-cta-band:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 340px
  check-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 90px
  step-band:
    backgroundColor: '{colors.primary}'
    typography: '{typography.body-md}'
    height: 80px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 44px
  lead-form:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 480px
---

# DESIGN.md — 赤×白の線画イラスト BtoB SaaS LP（Red Line-Art BtoB SaaS LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
- **キーワード**: 赤と白・線画イラスト・太字ゴシック・繰り返しCTA・POINT番号・枠線カード
- **地の質感**: フラットな塗り。ピンク地に白ドット柄の帯をアクセントに使う
- **形**: 角丸は小さめ。赤い細枠のカード、ピル型の小ラベル、赤い円形の背景ブロブ
- **温度感**: 暖色寄りで明るい。赤の熱量を白地で中和する

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#D2090F` | 主色・見出し強調・CTA帯 | 4% | 画素の実測 |
| `background` | `#FEFEFE` | ページ地 | 59% | 画素の実測 |
| `background-alt` | `#FFF5F4` | CTAブロックの淡ピンク地 | 4% | 画素の実測 |
| `tint-1` | `#FCE3E4` | ドット柄帯・Contact帯 | 5% | 画素の実測 |
| `secondary` | `#E44349` | 資料DLボタン面 | 3% | 画素の実測 |
| `accent-1` | `#F28184` | デモ申込ボタン・ピンク装飾 | 3% | 画素の実測 |
| `cta` | `#F39A1E` | ヘッダー資料DLのオレンジCTA | 0% | 推定 |
| `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#353535` | 見出しの濃グレー | 2% | 画素の実測 |
| `text-body` | `#444444` | 本文 | 2% | 推定 |
| `tint-2` | `#F9E3E5` | 淡いピンクの円形背景 | 3% | 画素の実測 |
| `line` | `#B4ACA8` | カード枠線・区切り | 1% | 画素の主要色に補正 |
| `accent-2` | `#3A8FD0` | 画面キャプチャ枠のブルー | 2% | 推定 |

- 地は白を基本に、CTAブロックだけ淡ピンクとドット柄で区切る
- 見出しの強調語のみ赤、残りは濃グレーにして2色で組む
- 主CTAボタンは濃い赤のピル型、資料DLとデモはサーモン系の面ボタン
- イラストは赤・ピンク・黒線の3色に限定する
- 画面キャプチャ枠だけ青・緑・橙の別色で機能を区別する
- FAQ見出し帯は赤の全幅ベタ塗りにして白文字

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのメインコピー | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.02em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.45 | 0.02em |
| `headline-md` | POINT見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.0em |
| `accent` | POINT/SYSTEM/CASEなどの英字見出し | 欧文サンセリフ | Montserrat | 900 | 32px | 1.1 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em |
| `note` | 注釈・英字サブラベル | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.04em |

- 見出しは極太ゴシックで、強調語だけ赤にする
- POINTなどの英字は赤の極太サンセリフで大きく置き、日本語見出しを下に添える
- 英字サブラベルは小さく赤で見出しの上に置く
- 本文は14px前後・行間1.8で詰めすぎない
- 電話番号は赤の太字で大きく見せる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。機能カードと事例は SP で 1 列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- POINTはイラストと見出しを左右交互に配置し本文を下に置く
- CTAブロックは同じ型をページ中に3回繰り返す
- 機能一覧はPC2列の赤枠カード、上辺中央にラベルを置く
- 流れはSTEP帯を下向き三角でつなぐ
- FAQは赤枠の1行アコーディオンを縦に並べる

## Elevation & Depth

- 影はほぼ使わずフラットにする
- カードは赤またはグレーの1px細枠で区切る
- 事例カードのみ薄い影で浮かせる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: イラストは切り抜きで赤い不定形ブロブの上に置く。写真は四角
- **セクション境界**: 直線。ピンク地にドット柄の帯で区切る
- 主CTAはピル型
- ラベル・バッジは小さなピル
- カードは角丸ほぼなしの細枠
- STEP番号は円形

## Components

- **無料相談ボタン**（`button-primary`）: 濃い赤のピル型。左にアイコン
- **資料DL・デモ面ボタン**（`button-doc`）: サーモン系の全幅面ボタン。右に丸い下矢印
- **POINT番号見出し**（`point-heading`）: 赤の英字POINTと大きな番号、下に英字サブと太字見出し
- **機能カード**（`feature-card`）: 赤枠カード。上辺に赤ラベル、中央にアイコン、名称と英字ピル
- **ドット柄CTAブロック**（`dot-cta-band`）: ドット帯で挟み、ロゴ説明・ボタン・電話番号をまとめる
- **悩みチェック項目**（`check-card`）: 赤いチェック丸と線画人物、強調語を赤にした短文
- **STEP帯**（`step-band`）: 左に写真、右に赤地白文字。上に円形STEP番号、帯間を三角でつなぐ
- **FAQ行**（`faq-item`）: 赤枠の行。左に赤丸Q、右端に矢印
- **FV資料請求フォーム**（`lead-form`）: 赤い太枠の中に入力欄を並べ、グレーの送信ピルを置く

## Do's and Don'ts

**Do**
- 強調語だけを赤にして見出しを読ませる
- イラストは赤・ピンクの線画で統一する
- CTAブロックを要所ごとに同じ型で繰り返す
- 英字ラベルと日本語見出しを組み合わせる
- 機能は枠付きカードとアイコンで整理する

**Don't**
- 赤以外の濃い色を主色にしない
- 写真を背景全面に敷かない
- 大きな角丸や強い影を多用しない
- 見出し全文を赤にしない
- 装飾的な明朝体を使わない

## Page Structure

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

1. **ファーストビュー**（価値の提示と資料請求）: 左に特長タグ・太字コピー・丸アイコン3つ、右に赤枠フォーム
2. **CTA**（相談・資料DLへの誘導）: ドット帯で挟んだ淡ピンク地。赤ピル・サーモン面ボタン・電話番号
3. **サービス紹介**（概要と評価の提示）: 左に英字見出しと本文、右に線画と受賞バナー
4. **悩みの提起**（対象者の共感）: チェック丸付きの悩み4つを2×2で並べ、解決宣言で締める
5. **選ばれる理由**（5つの強みを説明）: POINT番号と赤ブロブ線画を左右交互に置く
6. **中間CTA**（相談申込）: 赤枠ボックスに見出し、限定バッジ、オレンジ横長ボタン
7. **機能一覧**（機能の網羅）: 赤枠カードを2列×3段。アイコンイラスト中心
8. **機能詳細**（画面イメージで理解させる）: 色枠付きの画面キャプチャ2枚と説明文を3回繰り返す
9. **導入事例**（実績の提示）: 数値を大きく見せた横スライダーカード
10. **利用の流れ**（導入手順を示す）: 写真付き赤STEP帯3つを三角でつなぐ
11. **よくある質問**（不安の解消）: 赤ベタ帯の見出しと赤枠アコーディオン
12. **申し込み方法・最終CTA**（申込への最終誘導）: 淡ピンク地に大きな英字透かしとイラスト、最後にCTAブロック

## Imagery

- ビジネス人物を黒線・赤・ピンクのフラット線画で描く
- 人物の背後に赤い不定形ブロブを敷く
- 機能アイコンは赤・黒・黄の太線アイコンイラスト
- 画面キャプチャは青・緑・橙の色付きフレームに入れる
- STEPには明るいオフィスの人物写真を使う
- 大きな薄ピンクの英字を透かし装飾にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは2カラムの左右交互、SPはイラスト→見出し→本文の縦積み
- FVのフォームはSPでコピーの下へ移す
- 機能カードはSPで1列
- CTAブロックの面ボタンはSPで全幅に縦積み
- 英字見出しはSPで28〜32pxに縮める
- 事例スライダーはSPで1枚ずつ表示

## 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-e54ab725`（元 LP の URL から採番）
- **元 LP**: https://www.synergy-marketing.co.jp/lp/synergy/best_mailing_system/mass_delivery.html?
- **解析に使った画像**: 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.synergy-marketing.co.jp/lp/synergy/best_mailing_system/mass_delivery.html?（公開状況により表示できない場合があります）
この 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