紫→青グラデの信頼系BtoB SaaS LP

Purple-to-Blue Gradient BtoB SaaS LP

深い紫から明るい青へ流れる斜めグラデーションを帯として使い、白・生成りグレーの地と交互に重ねるBtoB SaaS向けLP。白い角丸カードに太めのゴシックで課題・活用シーン・機能・料金を整理する。ロゴ一覧・ニュース・イベント・コラムのカードを並べて信頼感を出す。

BtoB・SaaS・ITサービス信頼・誠実クール・先進的情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

地は白と生成りグレーを交互に置き、要所だけ紫→青の斜めグラデ帯を挟む
グラデは左上が深紫、右下が明るい青
見出し内のキーワードだけ紫や青の文字にする
グラデ帯の上には白いカードを浮かせ、文字は濃色にする
赤は課題セクションの警告表現だけに限定する
主CTAは紫の塗り、サブCTAは白地に紫枠

TYPOGRAPHY

書体

displayFVの大見出し・ロゴ横キャッチゴシック／ Noto Sans JP 900 ／ 28px ／行間 1.4

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

headline-lgセクション見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.5

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

headline-mdカード見出し・活用シーン名ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.4

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

body-mdカード本文・説明文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.7

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

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

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

accent01〜04の大きな番号・数字強調欧文サンセリフ／ Montserrat 800 ／ 26px ／行間 1.1

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

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

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

見出しはすべて中央揃えの太ゴシック
見出し内のキーワードだけ色を変えて大きくする
数字は欧文の極太書体で目立たせる
本文は13px前後で短い文にまとめる
明朝や手書き書体は使わない

PAGE STRUCTURE

セクション構成

ファーストビュー価値提案とCTAを示す紫グラデの曲線帯の下にキャッチ・製品ロゴ・PC画面モック・人物丸写真と2つのCTA
導入実績信頼を示す導入事例の写真カード3枚とロゴの横スクロール列
動画紹介短時間で理解させる動画サムネと『○秒でわかる』大見出しを横並び
課題提起業界の課題を示すアイコン付きグレーカード3枚と赤い爆発形の警告吹き出し
解決策の提示製品の位置づけを示す紫枠の角丸カードに人物写真2枚と循環矢印、中央にロゴ
活用シーン用途を具体化するグラデ帯の上の大きな白カードに番号付き4事例を2×2で並べる
機能一覧機能の幅広さを示すグレーの機能タイルを4列グリッドで並べる
料金プラン価格帯を示すグラデ帯に白プランカード3枚。中央を強調
ニュース活動実績を示す記事カード3枚ともっと見るボタン
導入企業ロゴ信頼の補強白地にロゴを4列で並べる
イベント情報見込み客を集める横長のイベントバナーとセミナーカード3枚
お役立ち情報コラムへ誘導する記事サムネカード3枚
最終CTA資料請求を促すグラデ帯にロゴ・キャッチと2つのピルCTA

COMPONENTS

部品

資料請求ボタン button-primary紫〜青グラデか紫塗りのピル型。上に小さなマイクロコピーを添える
問い合わせボタン button-secondary白地に紫の枠と文字のピル型
もっと見るボタン button-more一覧の下中央に置く、白地の小さなピル
課題カード card-issueグレー面にアイコン・色付き見出し・説明文を縦に並べる
番号付き活用シーンカード card-usecase大きな番号＋見出し、藍色の四角ラベル＋線画イラスト、説明文、詳細リンク
機能タイル chip-feature淡いグレーの角丸タイルに機能名を2行以内で中央揃え
料金プランカード card-plan白カードの上部にプラン名のピルラベル。おすすめは紫で強調し枠を太くする
記事サムネイルカード card-articleサムネ画像＋日付＋2行タイトルの白カード

守ること

紫→青の斜めグラデは帯ごとに同じ向きで使う
白地と生成りグレー地を交互にしてリズムを作る
導入企業ロゴを早めに出して信頼を示す
カードの角丸と影の強さをページ内で揃える
数字や番号は欧文の極太書体で大きくする

DON'T

避けること

暖色の大きな面を使わない
グラデ帯を連続させない
見出しを左寄せにしない
角張ったボタンを使わない
赤の強調を課題以外に広げない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 紫→青グラデの信頼系BtoB SaaS LP（Purple-to-Blue Gradient BtoB SaaS LP）

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

Overview

業種: BtoB・SaaS・ITサービス／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型
キーワード: 紫→青グラデーション・白い角丸カード・導入企業ロゴ・太ゴシック見出し・有機的な円形装飾
地の質感: フラットな面に大きな円や波の淡いシェイプを重ね、軽い影のあるカードを浮かせる
形: 角丸12〜20pxのカード、ピル型ボタン、カーブしたセクション境界
温度感: やや寒色寄り。紫の落ち着きと青の爽やかさの中間

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#422C74`	ブランドの深紫（見出し強調・グラデ起点）	9%	画素の実測
`secondary`	`#6294D1`	グラデ終点の明るい青	7%	画素の実測
`accent-1`	`#4E6AAB`	中間の藍色・番号やラベル	5%	画素の主要色に補正
`background`	`#FFFFFF`	基本の白地	38%	画素の実測
`background-alt`	`#F8F7F5`	生成りグレーの交互セクション地	17%	画素の実測
`surface`	`#FEFEFE`	課題・機能カードの淡いグレー面	6%	画素の実測
`text`	`#36363A`	見出し・本文の濃い文字	3%	画素の実測
`text-muted`	`#888A94`	注釈・日付のグレー文字	1%	推定
`cta`	`#5A3FA0`	資料請求ボタンの紫	1%	推定
`on-cta`	`#FFFFFF`	CTA上の白文字	0%	画素の主要色に補正
`accent-2`	`#CC4B4B`	課題アイコンの赤系強調	1%	画素の実測
`line`	`#B6BBC9`	カードの細い枠線	1%	画素の主要色に補正
`dark-section`	`#301060`	ヘッダー帯の濃紫	2%	推定
`on-dark`	`#EBF5FB`	グラデ帯上の白文字	0%	画素の実測

地は白と生成りグレーを交互に置き、要所だけ紫→青の斜めグラデ帯を挟む
グラデは左上が深紫、右下が明るい青
見出し内のキーワードだけ紫や青の文字にする
グラデ帯の上には白いカードを浮かせ、文字は濃色にする
赤は課題セクションの警告表現だけに限定する
主CTAは紫の塗り、サブCTAは白地に紫枠

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大見出し・ロゴ横キャッチ	ゴシック	Noto Sans JP	900	28px	1.4	0.04em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	700	20px	1.5	0.05em
`headline-md`	カード見出し・活用シーン名	ゴシック	Noto Sans JP	700	16px	1.4	0.03em
`body-md`	カード本文・説明文	ゴシック	Noto Sans JP	400	13px	1.7	0.03em
`note`	注釈・日付	ゴシック	Noto Sans JP	400	10px	1.6	0.02em
`accent`	01〜04の大きな番号・数字強調	欧文サンセリフ	Montserrat	800	26px	1.1	0.0em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	14px	1.2	0.05em

見出しはすべて中央揃えの太ゴシック
見出し内のキーワードだけ色を変えて大きくする
数字は欧文の極太書体で目立たせる
本文は13px前後で短い文にまとめる
明朝や手書き書体は使わない
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。カードはSPで2列または1列、PCでは3〜4列
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
各セクションは中央の見出しで始める
カード群は同じ高さでグリッドに揃える
一覧の下に中央のピル型『もっと見る』ボタンを置く
グラデ帯の中では大きな白カード1枚に内容をまとめる
ロゴは白地にグリッドで並べる

Elevation & Depth

カードは薄い影（0 4px 16px rgba(40,30,80,0.08)）
グラデ帯上の白カードはやや強めの影で浮かせる
ボタンの影はごく弱くする

Shapes

角丸: 小 6px ／中 12px ／大 20px。ボタンはピル型。
写真の切り抜き: 写真やサムネイルは角丸8〜12pxの長方形
セクション境界: FVとフッターは曲線で区切り、他は直線で色を切り替える
カードは必ず角丸にする
ボタンはピル型
グラデ帯の隅に大きな半透明の円を重ねる
課題強調にはギザギザの爆発形の吹き出しを1つだけ使う

Components

資料請求ボタン（button-primary）: 紫〜青グラデか紫塗りのピル型。上に小さなマイクロコピーを添える
問い合わせボタン（button-secondary）: 白地に紫の枠と文字のピル型
もっと見るボタン（button-more）: 一覧の下中央に置く、白地の小さなピル
課題カード（card-issue）: グレー面にアイコン・色付き見出し・説明文を縦に並べる
番号付き活用シーンカード（card-usecase）: 大きな番号＋見出し、藍色の四角ラベル＋線画イラスト、説明文、詳細リンク
機能タイル（chip-feature）: 淡いグレーの角丸タイルに機能名を2行以内で中央揃え
料金プランカード（card-plan）: 白カードの上部にプラン名のピルラベル。おすすめは紫で強調し枠を太くする
記事サムネイルカード（card-article）: サムネ画像＋日付＋2行タイトルの白カード

Do's and Don'ts

Do - 紫→青の斜めグラデは帯ごとに同じ向きで使う - 白地と生成りグレー地を交互にしてリズムを作る - 導入企業ロゴを早めに出して信頼を示す - カードの角丸と影の強さをページ内で揃える - 数字や番号は欧文の極太書体で大きくする

Don't - 暖色の大きな面を使わない - グラデ帯を連続させない - 見出しを左寄せにしない - 角張ったボタンを使わない - 赤の強調を課題以外に広げない

Page Structure

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

ファーストビュー（価値提案とCTAを示す）: 紫グラデの曲線帯の下にキャッチ・製品ロゴ・PC画面モック・人物丸写真と2つのCTA
導入実績（信頼を示す）: 導入事例の写真カード3枚とロゴの横スクロール列
動画紹介（短時間で理解させる）: 動画サムネと『○秒でわかる』大見出しを横並び
課題提起（業界の課題を示す）: アイコン付きグレーカード3枚と赤い爆発形の警告吹き出し
解決策の提示（製品の位置づけを示す）: 紫枠の角丸カードに人物写真2枚と循環矢印、中央にロゴ
活用シーン（用途を具体化する）: グラデ帯の上の大きな白カードに番号付き4事例を2×2で並べる
機能一覧（機能の幅広さを示す）: グレーの機能タイルを4列グリッドで並べる
料金プラン（価格帯を示す）: グラデ帯に白プランカード3枚。中央を強調
ニュース（活動実績を示す）: 記事カード3枚ともっと見るボタン
導入企業ロゴ（信頼の補強）: 白地にロゴを4列で並べる
イベント情報（見込み客を集める）: 横長のイベントバナーとセミナーカード3枚
お役立ち情報（コラムへ誘導する）: 記事サムネカード3枚
最終CTA（資料請求を促す）: グラデ帯にロゴ・キャッチと2つのピルCTA

Imagery

人物はビジネス服装の明るい写真を切り抜くか丸型で使う
アイコンは単色の線画やシルエット（紫・藍色）
活用シーンのイラストは藍色の細い線画で、ネットワーク・バッジ・書類をモチーフにする
記事サムネは青系グラデに白太字を載せたバナー風
背景には大きな半透明の円や波をあしらう
製品画面はノートPCのモックアップで見せる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPでは課題カード・プランカードを1列で縦に並べる
活用シーンの2×2はSPで1列にする
機能タイルはSPで2列
ロゴはSPで3列か横スクロール
動画セクションはSPで見出しを上、動画を下にする
CTAボタンは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: Purple-to-Blue Gradient BtoB SaaS LP
description: 深い紫から明るい青へ流れる斜めグラデーションを帯として使い、白・生成りグレーの地と交互に重ねるBtoB SaaS向けLP。白い角丸カードに太めのゴシックで課題・活用シーン・機能・料金を整理する。ロゴ一覧・ニュース・イベント・コラムのカードを並べて信頼感を出す。
colors:
  primary: '#422C74'
  secondary: '#6294D1'
  accent-1: '#4E6AAB'
  background: '#FFFFFF'
  background-alt: '#F8F7F5'
  surface: '#FEFEFE'
  text: '#36363A'
  text-muted: '#888A94'
  cta: '#5A3FA0'
  on-cta: '#FFFFFF'
  accent-2: '#CC4B4B'
  line: '#B6BBC9'
  dark-section: '#301060'
  on-dark: '#EBF5FB'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  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
  button-secondary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  button-more:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 32px
  card-issue:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 180px
  card-usecase:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 220px
  chip-feature:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 56px
  card-plan:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 120px
  card-article:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 160px
---

# DESIGN.md — 紫→青グラデの信頼系BtoB SaaS LP（Purple-to-Blue Gradient BtoB SaaS LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、情報量多め・訴求型
- **キーワード**: 紫→青グラデーション・白い角丸カード・導入企業ロゴ・太ゴシック見出し・有機的な円形装飾
- **地の質感**: フラットな面に大きな円や波の淡いシェイプを重ね、軽い影のあるカードを浮かせる
- **形**: 角丸12〜20pxのカード、ピル型ボタン、カーブしたセクション境界
- **温度感**: やや寒色寄り。紫の落ち着きと青の爽やかさの中間

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#422C74` | ブランドの深紫（見出し強調・グラデ起点） | 9% | 画素の実測 |
| `secondary` | `#6294D1` | グラデ終点の明るい青 | 7% | 画素の実測 |
| `accent-1` | `#4E6AAB` | 中間の藍色・番号やラベル | 5% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 38% | 画素の実測 |
| `background-alt` | `#F8F7F5` | 生成りグレーの交互セクション地 | 17% | 画素の実測 |
| `surface` | `#FEFEFE` | 課題・機能カードの淡いグレー面 | 6% | 画素の実測 |
| `text` | `#36363A` | 見出し・本文の濃い文字 | 3% | 画素の実測 |
| `text-muted` | `#888A94` | 注釈・日付のグレー文字 | 1% | 推定 |
| `cta` | `#5A3FA0` | 資料請求ボタンの紫 | 1% | 推定 |
| `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 |
| `accent-2` | `#CC4B4B` | 課題アイコンの赤系強調 | 1% | 画素の実測 |
| `line` | `#B6BBC9` | カードの細い枠線 | 1% | 画素の主要色に補正 |
| `dark-section` | `#301060` | ヘッダー帯の濃紫 | 2% | 推定 |
| `on-dark` | `#EBF5FB` | グラデ帯上の白文字 | 0% | 画素の実測 |

- 地は白と生成りグレーを交互に置き、要所だけ紫→青の斜めグラデ帯を挟む
- グラデは左上が深紫、右下が明るい青
- 見出し内のキーワードだけ紫や青の文字にする
- グラデ帯の上には白いカードを浮かせ、文字は濃色にする
- 赤は課題セクションの警告表現だけに限定する
- 主CTAは紫の塗り、サブCTAは白地に紫枠

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大見出し・ロゴ横キャッチ | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.04em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em |
| `headline-md` | カード見出し・活用シーン名 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.03em |
| `body-md` | カード本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.03em |
| `note` | 注釈・日付 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 01〜04の大きな番号・数字強調 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.1 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em |

- 見出しはすべて中央揃えの太ゴシック
- 見出し内のキーワードだけ色を変えて大きくする
- 数字は欧文の極太書体で目立たせる
- 本文は13px前後で短い文にまとめる
- 明朝や手書き書体は使わない
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードはSPで2列または1列、PCでは3〜4列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 各セクションは中央の見出しで始める
- カード群は同じ高さでグリッドに揃える
- 一覧の下に中央のピル型『もっと見る』ボタンを置く
- グラデ帯の中では大きな白カード1枚に内容をまとめる
- ロゴは白地にグリッドで並べる

## Elevation & Depth

- カードは薄い影（0 4px 16px rgba(40,30,80,0.08)）
- グラデ帯上の白カードはやや強めの影で浮かせる
- ボタンの影はごく弱くする

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 写真やサムネイルは角丸8〜12pxの長方形
- **セクション境界**: FVとフッターは曲線で区切り、他は直線で色を切り替える
- カードは必ず角丸にする
- ボタンはピル型
- グラデ帯の隅に大きな半透明の円を重ねる
- 課題強調にはギザギザの爆発形の吹き出しを1つだけ使う

## Components

- **資料請求ボタン**（`button-primary`）: 紫〜青グラデか紫塗りのピル型。上に小さなマイクロコピーを添える
- **問い合わせボタン**（`button-secondary`）: 白地に紫の枠と文字のピル型
- **もっと見るボタン**（`button-more`）: 一覧の下中央に置く、白地の小さなピル
- **課題カード**（`card-issue`）: グレー面にアイコン・色付き見出し・説明文を縦に並べる
- **番号付き活用シーンカード**（`card-usecase`）: 大きな番号＋見出し、藍色の四角ラベル＋線画イラスト、説明文、詳細リンク
- **機能タイル**（`chip-feature`）: 淡いグレーの角丸タイルに機能名を2行以内で中央揃え
- **料金プランカード**（`card-plan`）: 白カードの上部にプラン名のピルラベル。おすすめは紫で強調し枠を太くする
- **記事サムネイルカード**（`card-article`）: サムネ画像＋日付＋2行タイトルの白カード

## Do's and Don'ts

**Do**
- 紫→青の斜めグラデは帯ごとに同じ向きで使う
- 白地と生成りグレー地を交互にしてリズムを作る
- 導入企業ロゴを早めに出して信頼を示す
- カードの角丸と影の強さをページ内で揃える
- 数字や番号は欧文の極太書体で大きくする

**Don't**
- 暖色の大きな面を使わない
- グラデ帯を連続させない
- 見出しを左寄せにしない
- 角張ったボタンを使わない
- 赤の強調を課題以外に広げない

## Page Structure

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

1. **ファーストビュー**（価値提案とCTAを示す）: 紫グラデの曲線帯の下にキャッチ・製品ロゴ・PC画面モック・人物丸写真と2つのCTA
2. **導入実績**（信頼を示す）: 導入事例の写真カード3枚とロゴの横スクロール列
3. **動画紹介**（短時間で理解させる）: 動画サムネと『○秒でわかる』大見出しを横並び
4. **課題提起**（業界の課題を示す）: アイコン付きグレーカード3枚と赤い爆発形の警告吹き出し
5. **解決策の提示**（製品の位置づけを示す）: 紫枠の角丸カードに人物写真2枚と循環矢印、中央にロゴ
6. **活用シーン**（用途を具体化する）: グラデ帯の上の大きな白カードに番号付き4事例を2×2で並べる
7. **機能一覧**（機能の幅広さを示す）: グレーの機能タイルを4列グリッドで並べる
8. **料金プラン**（価格帯を示す）: グラデ帯に白プランカード3枚。中央を強調
9. **ニュース**（活動実績を示す）: 記事カード3枚ともっと見るボタン
10. **導入企業ロゴ**（信頼の補強）: 白地にロゴを4列で並べる
11. **イベント情報**（見込み客を集める）: 横長のイベントバナーとセミナーカード3枚
12. **お役立ち情報**（コラムへ誘導する）: 記事サムネカード3枚
13. **最終CTA**（資料請求を促す）: グラデ帯にロゴ・キャッチと2つのピルCTA

## Imagery

- 人物はビジネス服装の明るい写真を切り抜くか丸型で使う
- アイコンは単色の線画やシルエット（紫・藍色）
- 活用シーンのイラストは藍色の細い線画で、ネットワーク・バッジ・書類をモチーフにする
- 記事サムネは青系グラデに白太字を載せたバナー風
- 背景には大きな半透明の円や波をあしらう
- 製品画面はノートPCのモックアップで見せる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPでは課題カード・プランカードを1列で縦に並べる
- 活用シーンの2×2はSPで1列にする
- 機能タイルはSPで2列
- ロゴはSPで3列か横スクロール
- 動画セクションはSPで見出しを上、動画を下にする
- CTAボタンは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-f706f6ed`（元 LP の URL から採番）
- **元 LP**: https://logo-labo.com/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この 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