青紫×黄色CTAのAIスクール LP

Electric Violet Tech School LP

鮮やかな青紫の帯セクションと白・薄グレーの地を交互に重ね、黄色のピル型CTAで行動を促すITスクール向けLP。大きな数字の実績、理由カード、料金比較、FAQで情報を厚く積む訴求型の構成。

教育・スクール・資格クール・先進的信頼・誠実情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

地は白と薄グレーを基本に、要所で全幅の青紫帯を挟む
青紫は斜めグラデ(明→濃)でテック感を出す
主CTAは必ず黄色ピル型、紫地の上でも目立たせる
強調語は紫文字か黄色マーカー、紫帯ラベル白抜きで示す
赤はキャンペーン告知のみに限定
紫地の文字は白、白地の数字は青紫で大きく

TYPOGRAPHY

書体

display実績の大きな数字欧文サンセリフ／ Montserrat 800 ／ 56px ／行間 1.0

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

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

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

headline-mdカード見出し・理由見出しゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

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

headline-sm帯ラベル・小見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 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英字ラベル(REASON.1等)欧文サンセリフ／ Montserrat 700 ／ 13px ／行間 1.2

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

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

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

数字は欧文の極太で大きく、単位は小さく添える
見出しの強調語は紫色や白抜き帯にする
英字ラベルを見出し上下に小さく添える
本文は行間広めで小さく抑える
見出しは中央揃え、カード内は左揃え

PAGE STRUCTURE

セクション構成

ファーストビュー価値提案と実績で惹きつける淡紫背景に笑顔の人物、白抜き帯キャッチ、満足度など円形実績、黄色CTA
受講生成果カード具体的な成果を示す紫帯に横並びカード、時間短縮の矢印比較
キャンペーン告知今申し込む理由赤地バナーに大きな割引額
市場背景と実績数字必要性の提示紫カード+3Dキャラ、下に大きな%数字3つ
学ぶべき理由論理的な説得紫グラデ地に白カード、REASON番号とグラフ・ロゴ
受講生の声社会的証明濃紫帯にカルーセルカード、黄色ボタン
選ばれる理由差別化番号付き3カードにイラスト
おすすめ対象自分ごと化円形吹き出しに悩みを短文で配置
スクール紹介コンセプト説明紫帯に円形アイコンの数式図
カリキュラム・サポート・講師中身の具体化白カード内に紫帯見出し、画像と文の交互配置、講師円形写真
コース一覧選択肢の提示タブ切替と3列コースカード
料金プラン価格比較2プラン並列、紫枠特典リスト、決済方法
ステップ申込の不安解消暗い写真背景に3ステップカード
よくある質問疑問解消カテゴリ見出し付きFAQリスト、濃色フッター

COMPONENTS

部品

黄色ピルCTA button-primary左にアイコン、右に矢印付きの無料相談ボタン
紫ピルボタン button-secondary詳細を見る系の右矢印付きボタン
CTA帯 cta-band紫地に短い誘導文、小さな吹き出しラベル、黄色ボタン
実績数字ブロック stat-number小見出し+巨大な紫数字+単位+短い説明
紫帯見出し heading-bandカード内の小見出しを紫の横長帯に白文字で
番号付き理由カード reason-card01等の番号と見出し、イラスト、短文を枠付きで
料金プランカード price-card紫グラデのプラン名帯、大きな月額、特典リストを枠ボックスで
ステップカード step-card円形STEP番号を上に載せ、紫帯タイトルと説明
FAQ行 faq-rowQアイコン+質問+右矢印、下線区切り
固定縦型CTA side-fixed-cta画面右端の黄色縦書きボタン

守ること

紫帯と白地を交互に置きリズムを作る
CTAは黄色ピルに統一し複数回配置
数字は大きく紫で見せる
強調語に紫色や帯ラベルを使う
カードは番号や英字ラベルで整理する

DON'T

避けること

黄色以外の色で主CTAを作らない
暖色系の地色を広く使わない
明朝体や手書き書体を混ぜない
赤をキャンペーン以外で使わない
余白を詰めすぎて情報を詰め込まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青紫×黄色CTAのAIスクール LP（Electric Violet Tech School LP）

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

Overview

業種: 教育・スクール・資格／ 雰囲気: クール・先進的、信頼・誠実、情報量多め・訴求型
キーワード: 青紫グラデーション・黄色CTA・大きな数字・白カード・テック感・実績訴求
地の質感: フラットな単色面と斜めの紫グラデーション。薄い格子や大きな英字の透かしで奥行きを出す
形: 角丸小さめのカード、ピル型ボタン、円形アイコン、見出しの帯ラベル
温度感: クールな青紫の地に暖色の黄色を差すメリハリ型

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#543AFD`	ブランドの青紫。帯セクション・見出し帯・ボタン	15%	画素の実測
`dark-section`	`#1C134E`	濃紺紫のグラデ終端・フッター寄りの濃色	7%	画素の主要色に補正
`secondary`	`#A088D6`	ファーストビュー背景の淡い紫	6%	画素の実測
`cta`	`#F7C531`	主CTAの黄色ボタン	1%	推定
`on-cta`	`#1C134E`	黄色ボタン上の文字	0%	画素の主要色に補正
`background`	`#FFFFFF`	基本の白地	42%	画素の実測
`background-alt`	`#FFFFFF`	カード群を載せる薄グレー地	9%	画素の実測
`text`	`#1F1F1F`	見出し・本文の黒文字	2%	画素の実測
`on-dark`	`#FBF7FF`	紫地上の白文字	1%	画素の実測
`accent-1`	`#F5B82E`	数字・強調語の黄色	0%	推定
`line`	`#6957D4`	料金カードやリストの紫枠線	0%	画素の主要色に補正
`tint-1`	`#B6B3CE`	料金ラベルの淡い紫面	1%	画素の主要色に補正
`accent-2`	`#D92B2B`	キャンペーン帯の赤	1%	推定
`text-muted`	`#888888`	注釈・補足のグレー文字	0%	推定

地は白と薄グレーを基本に、要所で全幅の青紫帯を挟む
青紫は斜めグラデ(明→濃)でテック感を出す
主CTAは必ず黄色ピル型、紫地の上でも目立たせる
強調語は紫文字か黄色マーカー、紫帯ラベル白抜きで示す
赤はキャンペーン告知のみに限定
紫地の文字は白、白地の数字は青紫で大きく

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	実績の大きな数字	欧文サンセリフ	Montserrat	800	56px	1.0	0.0em
`headline-lg`	セクション大見出し	ゴシック	Noto Sans JP	700	24px	1.4	0.05em
`headline-md`	カード見出し・理由見出し	ゴシック	Noto Sans JP	700	18px	1.5	0.03em
`headline-sm`	帯ラベル・小見出し	ゴシック	Noto Sans JP	700	15px	1.5	0.03em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.02em
`note`	注釈・出典	ゴシック	Noto Sans JP	400	10px	1.6	0.0em
`accent`	英字ラベル(REASON.1等)	欧文サンセリフ	Montserrat	700	13px	1.2	0.12em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	15px	1.2	0.05em

数字は欧文の極太で大きく、単位は小さく添える
見出しの強調語は紫色や白抜き帯にする
英字ラベルを見出し上下に小さく添える
本文は行間広めで小さく抑える
見出しは中央揃え、カード内は左揃え
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。カードは横スクロールか縦積み
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
全幅の紫帯と中央寄せ白カードを交互に配置
実績数字は3つ並び(SPは縦積み)
理由やサポートは番号付きカードで3つ
料金は2プラン並列比較
FAQはカテゴリ見出し+アコーディオン行
CTA帯をセクション間に複数回挿入

Elevation & Depth

白カードに薄い影(0 4px 16px rgba(0,0,0,.08))
紫帯上の白カードは影でわずかに浮かせる
ボタンは影なしフラット
固定サイドCTAは黄色で最前面

Shapes

角丸: 小 4px ／中 8px ／大 12px。ボタンはピル型。
写真の切り抜き: 人物写真は角丸矩形か円形、FVは人物切り抜き
セクション境界: 直線の切り替え。紫帯は斜めグラデで区切る
ボタンはピル型
カードは角丸小〜中
アイコンは円形の白背景
料金プランカードは紫枠線

Components

黄色ピルCTA（button-primary）: 左にアイコン、右に矢印付きの無料相談ボタン
紫ピルボタン（button-secondary）: 詳細を見る系の右矢印付きボタン
CTA帯（cta-band）: 紫地に短い誘導文、小さな吹き出しラベル、黄色ボタン
実績数字ブロック（stat-number）: 小見出し+巨大な紫数字+単位+短い説明
紫帯見出し（heading-band）: カード内の小見出しを紫の横長帯に白文字で
番号付き理由カード（reason-card）: 01等の番号と見出し、イラスト、短文を枠付きで
料金プランカード（price-card）: 紫グラデのプラン名帯、大きな月額、特典リストを枠ボックスで
ステップカード（step-card）: 円形STEP番号を上に載せ、紫帯タイトルと説明
FAQ行（faq-row）: Qアイコン+質問+右矢印、下線区切り
固定縦型CTA（side-fixed-cta）: 画面右端の黄色縦書きボタン

Do's and Don'ts

Do - 紫帯と白地を交互に置きリズムを作る - CTAは黄色ピルに統一し複数回配置 - 数字は大きく紫で見せる - 強調語に紫色や帯ラベルを使う - カードは番号や英字ラベルで整理する

Don't - 黄色以外の色で主CTAを作らない - 暖色系の地色を広く使わない - 明朝体や手書き書体を混ぜない - 赤をキャンペーン以外で使わない - 余白を詰めすぎて情報を詰め込まない

Page Structure

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

ファーストビュー（価値提案と実績で惹きつける）: 淡紫背景に笑顔の人物、白抜き帯キャッチ、満足度など円形実績、黄色CTA
受講生成果カード（具体的な成果を示す）: 紫帯に横並びカード、時間短縮の矢印比較
キャンペーン告知（今申し込む理由）: 赤地バナーに大きな割引額
市場背景と実績数字（必要性の提示）: 紫カード+3Dキャラ、下に大きな%数字3つ
学ぶべき理由（論理的な説得）: 紫グラデ地に白カード、REASON番号とグラフ・ロゴ
受講生の声（社会的証明）: 濃紫帯にカルーセルカード、黄色ボタン
選ばれる理由（差別化）: 番号付き3カードにイラスト
おすすめ対象（自分ごと化）: 円形吹き出しに悩みを短文で配置
スクール紹介（コンセプト説明）: 紫帯に円形アイコンの数式図
カリキュラム・サポート・講師（中身の具体化）: 白カード内に紫帯見出し、画像と文の交互配置、講師円形写真
コース一覧（選択肢の提示）: タブ切替と3列コースカード
料金プラン（価格比較）: 2プラン並列、紫枠特典リスト、決済方法
ステップ（申込の不安解消）: 暗い写真背景に3ステップカード
よくある質問（疑問解消）: カテゴリ見出し付きFAQリスト、濃色フッター

Imagery

明るい笑顔の人物を切り抜き、淡紫背景に合成
受講生・講師は自然光のポートレートを角丸や円形で
AIツールを想起させる3Dのかわいいロボットキャラ
紫と黄色を差し色にしたフラットな人物イラスト
白い円に線画アイコン
画面キャプチャを傾けたモック画像
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは中央最大約760px幅、SPは90%幅の1カラム
実績数字3列はSPで縦積み
理由・コースカードはSPで横スクロール
料金2プランはSPで縦積み
右端固定縦CTAはSPで下部固定の横長ボタンに
見出しはSPで24px前後に縮小

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: Electric Violet Tech School LP
description: 鮮やかな青紫の帯セクションと白・薄グレーの地を交互に重ね、黄色のピル型CTAで行動を促すITスクール向けLP。大きな数字の実績、理由カード、料金比較、FAQで情報を厚く積む訴求型の構成。
colors:
  primary: '#543AFD'
  dark-section: '#1C134E'
  secondary: '#A088D6'
  cta: '#F7C531'
  on-cta: '#1C134E'
  background: '#FFFFFF'
  background-alt: '#FFFFFF'
  text: '#1F1F1F'
  on-dark: '#FBF7FF'
  accent-1: '#F5B82E'
  line: '#6957D4'
  tint-1: '#B6B3CE'
  accent-2: '#D92B2B'
  text-muted: '#888888'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.0
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  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: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.12em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  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
  button-secondary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  cta-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 160px
  stat-number:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 120px
  heading-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 36px
  reason-card:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 200px
  price-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.md}'
    height: 560px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 120px
  faq-row:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 44px
  side-fixed-cta:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 180px
---

# DESIGN.md — 青紫×黄色CTAのAIスクール LP（Electric Violet Tech School LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型
- **キーワード**: 青紫グラデーション・黄色CTA・大きな数字・白カード・テック感・実績訴求
- **地の質感**: フラットな単色面と斜めの紫グラデーション。薄い格子や大きな英字の透かしで奥行きを出す
- **形**: 角丸小さめのカード、ピル型ボタン、円形アイコン、見出しの帯ラベル
- **温度感**: クールな青紫の地に暖色の黄色を差すメリハリ型

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#543AFD` | ブランドの青紫。帯セクション・見出し帯・ボタン | 15% | 画素の実測 |
| `dark-section` | `#1C134E` | 濃紺紫のグラデ終端・フッター寄りの濃色 | 7% | 画素の主要色に補正 |
| `secondary` | `#A088D6` | ファーストビュー背景の淡い紫 | 6% | 画素の実測 |
| `cta` | `#F7C531` | 主CTAの黄色ボタン | 1% | 推定 |
| `on-cta` | `#1C134E` | 黄色ボタン上の文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 42% | 画素の実測 |
| `background-alt` | `#FFFFFF` | カード群を載せる薄グレー地 | 9% | 画素の実測 |
| `text` | `#1F1F1F` | 見出し・本文の黒文字 | 2% | 画素の実測 |
| `on-dark` | `#FBF7FF` | 紫地上の白文字 | 1% | 画素の実測 |
| `accent-1` | `#F5B82E` | 数字・強調語の黄色 | 0% | 推定 |
| `line` | `#6957D4` | 料金カードやリストの紫枠線 | 0% | 画素の主要色に補正 |
| `tint-1` | `#B6B3CE` | 料金ラベルの淡い紫面 | 1% | 画素の主要色に補正 |
| `accent-2` | `#D92B2B` | キャンペーン帯の赤 | 1% | 推定 |
| `text-muted` | `#888888` | 注釈・補足のグレー文字 | 0% | 推定 |

- 地は白と薄グレーを基本に、要所で全幅の青紫帯を挟む
- 青紫は斜めグラデ(明→濃)でテック感を出す
- 主CTAは必ず黄色ピル型、紫地の上でも目立たせる
- 強調語は紫文字か黄色マーカー、紫帯ラベル白抜きで示す
- 赤はキャンペーン告知のみに限定
- 紫地の文字は白、白地の数字は青紫で大きく

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 実績の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 56px | 1.0 | 0.0em |
| `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.05em |
| `headline-md` | カード見出し・理由見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em |
| `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em |
| `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | 英字ラベル(REASON.1等) | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.12em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em |

- 数字は欧文の極太で大きく、単位は小さく添える
- 見出しの強調語は紫色や白抜き帯にする
- 英字ラベルを見出し上下に小さく添える
- 本文は行間広めで小さく抑える
- 見出しは中央揃え、カード内は左揃え
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードは横スクロールか縦積み
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 全幅の紫帯と中央寄せ白カードを交互に配置
- 実績数字は3つ並び(SPは縦積み)
- 理由やサポートは番号付きカードで3つ
- 料金は2プラン並列比較
- FAQはカテゴリ見出し+アコーディオン行
- CTA帯をセクション間に複数回挿入

## Elevation & Depth

- 白カードに薄い影(0 4px 16px rgba(0,0,0,.08))
- 紫帯上の白カードは影でわずかに浮かせる
- ボタンは影なしフラット
- 固定サイドCTAは黄色で最前面

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 人物写真は角丸矩形か円形、FVは人物切り抜き
- **セクション境界**: 直線の切り替え。紫帯は斜めグラデで区切る
- ボタンはピル型
- カードは角丸小〜中
- アイコンは円形の白背景
- 料金プランカードは紫枠線

## Components

- **黄色ピルCTA**（`button-primary`）: 左にアイコン、右に矢印付きの無料相談ボタン
- **紫ピルボタン**（`button-secondary`）: 詳細を見る系の右矢印付きボタン
- **CTA帯**（`cta-band`）: 紫地に短い誘導文、小さな吹き出しラベル、黄色ボタン
- **実績数字ブロック**（`stat-number`）: 小見出し+巨大な紫数字+単位+短い説明
- **紫帯見出し**（`heading-band`）: カード内の小見出しを紫の横長帯に白文字で
- **番号付き理由カード**（`reason-card`）: 01等の番号と見出し、イラスト、短文を枠付きで
- **料金プランカード**（`price-card`）: 紫グラデのプラン名帯、大きな月額、特典リストを枠ボックスで
- **ステップカード**（`step-card`）: 円形STEP番号を上に載せ、紫帯タイトルと説明
- **FAQ行**（`faq-row`）: Qアイコン+質問+右矢印、下線区切り
- **固定縦型CTA**（`side-fixed-cta`）: 画面右端の黄色縦書きボタン

## Do's and Don'ts

**Do**
- 紫帯と白地を交互に置きリズムを作る
- CTAは黄色ピルに統一し複数回配置
- 数字は大きく紫で見せる
- 強調語に紫色や帯ラベルを使う
- カードは番号や英字ラベルで整理する

**Don't**
- 黄色以外の色で主CTAを作らない
- 暖色系の地色を広く使わない
- 明朝体や手書き書体を混ぜない
- 赤をキャンペーン以外で使わない
- 余白を詰めすぎて情報を詰め込まない

## Page Structure

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

1. **ファーストビュー**（価値提案と実績で惹きつける）: 淡紫背景に笑顔の人物、白抜き帯キャッチ、満足度など円形実績、黄色CTA
2. **受講生成果カード**（具体的な成果を示す）: 紫帯に横並びカード、時間短縮の矢印比較
3. **キャンペーン告知**（今申し込む理由）: 赤地バナーに大きな割引額
4. **市場背景と実績数字**（必要性の提示）: 紫カード+3Dキャラ、下に大きな%数字3つ
5. **学ぶべき理由**（論理的な説得）: 紫グラデ地に白カード、REASON番号とグラフ・ロゴ
6. **受講生の声**（社会的証明）: 濃紫帯にカルーセルカード、黄色ボタン
7. **選ばれる理由**（差別化）: 番号付き3カードにイラスト
8. **おすすめ対象**（自分ごと化）: 円形吹き出しに悩みを短文で配置
9. **スクール紹介**（コンセプト説明）: 紫帯に円形アイコンの数式図
10. **カリキュラム・サポート・講師**（中身の具体化）: 白カード内に紫帯見出し、画像と文の交互配置、講師円形写真
11. **コース一覧**（選択肢の提示）: タブ切替と3列コースカード
12. **料金プラン**（価格比較）: 2プラン並列、紫枠特典リスト、決済方法
13. **ステップ**（申込の不安解消）: 暗い写真背景に3ステップカード
14. **よくある質問**（疑問解消）: カテゴリ見出し付きFAQリスト、濃色フッター

## Imagery

- 明るい笑顔の人物を切り抜き、淡紫背景に合成
- 受講生・講師は自然光のポートレートを角丸や円形で
- AIツールを想起させる3Dのかわいいロボットキャラ
- 紫と黄色を差し色にしたフラットな人物イラスト
- 白い円に線画アイコン
- 画面キャプチャを傾けたモック画像
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央最大約760px幅、SPは90%幅の1カラム
- 実績数字3列はSPで縦積み
- 理由・コースカードはSPで横スクロール
- 料金2プランはSPで縦積み
- 右端固定縦CTAはSPで下部固定の横長ボタンに
- 見出しはSPで24px前後に縮小

## 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-5e2ba05a`（元 LP の URL から採番）
- **元 LP**: https://generative-ai.bytech.jp/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

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

似た LP の design.md

教育・スクール・資格水色×紺グラデの大学受験生向け LPSky Blue to Navy Gradient Campus Guide LP 教育・スクール・資格緑グラデとミントの爽快スポーツスクールLPFresh Green Gradient Sports School LP 教育・スクール・資格藤色×生成りの上品な専門学校 LPSoft Lavender Ceremony Vocational School LP 教育・スクール・資格黄色×水色の線画イラストキャリア相談 LPBright Yellow Pop Illustration Career Service LP 教育・スクール・資格くすみパステル×黄色オファーの資格講座LPSoft Pastel Online Certification LP 教育・スクール・資格方眼紙×水色グラデのIT専門学校LPGrid Paper Digital School LP