黒×深紅グロスと金数字のXRスクール LP

Dark Charcoal Red Gloss Tech School LP

チャコール黒とライトグレーの帯が交互に続き、深紅の光沢ピルボタンと金色のセリフ数字を差し色にした、先端技術系スクールの訴求型 LP。斜めのグレー幾何模様が背景に入り、写真とスクリーンショットをたくさん並べてカリキュラムを具体的に見せる。

教育・スクール・資格クール・先進的信頼・誠実情報量多め・訴求型力強い・インパクトSPPC

ダウンロード

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

COLORS

配色

白・淡いグレー・チャコールの3段の地をセクションごとに交互に切り替える
主CTAには赤のグロスピルだけを使い、黒地の帯の上に縦に並べる
番号（01〜03）と枠線は金で、セリフ体の大きな数字にする
本文中の強調は赤の太字に限る
数値の訴求は赤の大きな数字にする
青とオレンジは卒業生の進路カードの色分けだけに使う

TYPOGRAPHY

書体

displayFVの講座名ゴシック／ Noto Sans JP 700 ／ 22px ／行間 1.4

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

headline-lgセクション見出し（中央揃え）ゴシック／ Noto Sans JP 500 ／ 24px ／行間 1.5

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

headline-mdカリキュラム項目名ゴシック／ Noto Sans JP 500 ／ 26px ／行間 1.35

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

headline-smラベル箱の見出しゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.6

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

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

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

accent金の番号数字欧文セリフ／ Playfair Display 700 ／ 80px ／行間 1.0

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

note出典・キャプションゴシック／ Noto Sans JP 400 ／ 12px ／行間 1.6

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

label-buttonボタンの文字ゴシック／ Noto Sans JP 500 ／ 18px ／行間 1.4

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

基本はゴシック1書体で通し、番号だけ欧文セリフにする
ステージ見出しの箱は明朝にして格調を出す
セクション見出しは中央揃えで2〜3行に収める
本文は左揃えで、行間は1.8前後と広めにとる
数値の訴求は36px以上の赤い太字にする

PAGE STRUCTURE

セクション構成

ファーストビュー先端技術の印象と講座名を伝える赤い光の人物写真の上に、ロゴ・講座名・金のメダルバッジ2つ・日程ボックスを重ねる
CTA群申込・相談・資料請求に誘導する黒地に赤グロスピルを3つ縦に並べる
認定・給付金訴求費用面の不安を下げるグレーの幾何模様の地に中央揃えの見出し、黒いラベル箱、本文、CTA、バナーを置く
スクール紹介学校の概要を伝えるグレーのラベル箱をチャコール帯にまたがせ、白文字の本文と教室写真を続ける
個別相談の案内気軽な相談を促す黒い箱見出し2段、本文、CTA、質問の吹き出しと人物写真を並べる
カリキュラム学べる内容を具体的に見せる金の二重線のステージ枠のあと、スクショ・見出し・説明を縦に繰り返す
資料ダウンロード資料請求に誘導するチャコール帯に資料の画像、オレンジの小見出し、本文、CTAを置く
選ばれる理由差別化を示す金の番号とグレーのラベル箱を3回繰り返し、図解を入れる
卒業生の進路成果を示す青・青・オレンジの色帯見出しと事例カードを並べる
インタビュー実例で信頼を補強する斜めのグレー帯の上にカードのカルーセルを置く
市場メリット学ぶ必然性を数字で示す金の番号と、暗い地・明るい地を交互にしたブロックに赤い大きな数値を置く
リモート受講・サポート受講環境の安心を伝えるアイコンのブロックを暗・明交互に並べ、スペック表を続ける
受講生データ・教室実績と施設を見せる円グラフ、アンケートのグラフ、施設写真を縦に並べる

COMPONENTS

部品

赤グロスピルCTA button-primary赤の縦グラデーションに光沢を乗せ、ベージュの縁取りと左端に斜めの濃い赤の模様を入れる
グレー見出しラベル箱 label-box暗い帯の上端にまたがるライトグレーの長方形。文字は太字
金セリフ番号 number-gold01〜03 の大きな金色セリフ数字をラベル箱に重ねる
金二重線ステージ枠 stage-frame白地に金の二重線を引き、明朝体の見出しを中央に置く
説明会日程ボックス event-box黒地に金の細い線で囲み、日付を3つ並べて詳細リンクを添える
質問吹き出し speech-bubble白いピル型の吹き出しを3つずらして並べ、円形に切り抜いた人物写真を添える
進路別活躍事例カード case-card色帯の見出し→シェブロン矢印→淡い色の枠カードの順に並べ、円形顔写真と経歴を載せる
インタビューカルーセル interview-card白いカードに写真・氏名・黒いピル型の詳細ボタンを載せ、左右の矢印と赤いドットで送る

守ること

暗い帯と明るい帯を交互に置いて、リズムを作る
CTAは赤グロスピルに統一する
番号は金のセリフ数字で大きく見せる
実際の画面や教室の写真で具体性を出す
数値には出典を小さく添える

DON'T

避けること

CTAにフラットな単色や別の色を使わない
パステルや丸い可愛らしい装飾を入れない
金色を本文の文字に使わない
見出しの箱を角丸にしない
赤を広い面積の背景に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×深紅グロスと金数字のXRスクール LP（Dark Charcoal Red Gloss Tech School LP）

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

Overview

業種: 教育・スクール・資格／ 雰囲気: クール・先進的、信頼・誠実、情報量多め・訴求型、力強い・インパクト
キーワード: チャコール帯・深紅グロスボタン・金セリフ数字・斜め幾何背景・スクショ多用
地の質感: ボタンは赤の縦グラデーションと光沢、ベージュの縁取り。背景には淡いグレーの斜め三角模様が入る
形: ボタンはピル型。見出しボックスは角丸なしの長方形。人物は円形に切り抜く
温度感: クールなモノトーンに、熱を感じる赤と金を少しだけ足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#AA0A01`	ブランド深紅・ボタン地	3%	画素の実測
`cta`	`#C0140F`	主CTAの赤	2%	推定
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`background`	`#FEFEFE`	基本背景（白）	29%	画素の実測
`background-alt`	`#F3F3F3`	淡いグレー帯	12%	画素の実測
`dark-section`	`#323232`	チャコール帯	18%	画素の実測
`on-dark`	`#DEDEDE`	暗い地の白文字	1%	画素の実測
`surface`	`#CCCCCC`	見出しラベル箱のグレー	4%	画素の実測
`text`	`#272727`	見出し文字	2%	画素の実測
`text-body`	`#555555`	本文グレー	3%	推定
`accent-1`	`#C9A03A`	金色の番号・枠線	0%	推定
`accent-2`	`#C00000`	赤の強調文字	0%	推定
`accent-3`	`#0BA3E3`	活躍事例の青	2%	画素の実測
`secondary`	`#F16301`	企業向けのオレンジ	1%	画素の実測

白・淡いグレー・チャコールの3段の地をセクションごとに交互に切り替える
主CTAには赤のグロスピルだけを使い、黒地の帯の上に縦に並べる
番号（01〜03）と枠線は金で、セリフ体の大きな数字にする
本文中の強調は赤の太字に限る
数値の訴求は赤の大きな数字にする
青とオレンジは卒業生の進路カードの色分けだけに使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの講座名	ゴシック	Noto Sans JP	700	22px	1.4	0.02em
`headline-lg`	セクション見出し（中央揃え）	ゴシック	Noto Sans JP	500	24px	1.5	0.03em
`headline-md`	カリキュラム項目名	ゴシック	Noto Sans JP	500	26px	1.35	0.0em
`headline-sm`	ラベル箱の見出し	ゴシック	Noto Sans JP	700	16px	1.6	0.0em
`body-md`	本文	ゴシック	Noto Sans JP	400	15px	1.85	0.02em
`accent`	金の番号数字	欧文セリフ	Playfair Display	700	80px	1.0	0.0em
`note`	出典・キャプション	ゴシック	Noto Sans JP	400	12px	1.6	0.0em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	500	18px	1.4	0.02em

基本はゴシック1書体で通し、番号だけ欧文セリフにする
ステージ見出しの箱は明朝にして格調を出す
セクション見出しは中央揃えで2〜3行に収める
本文は左揃えで、行間は1.8前後と広めにとる
数値の訴求は36px以上の赤い太字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
CTAは黒地の帯に3つ縦に並べ、ページの途中で繰り返す
ラベル箱をグレー帯と暗い帯の境目にまたがせる
番号はラベル箱の左下にはみ出すように重ねる
カリキュラムは画像→見出し→説明の順に縦に積む
表は全幅で、見出し行をグレーにする

Elevation & Depth

CTAボタンの下に濃い影を落とし、立体感を出す
インタビューカードには薄い影を付ける
その他の部品は影なしのフラットにする

Shapes

角丸: 小 0px ／中 4px ／大 30px。ボタンはピル型。
写真の切り抜き: 写真は角丸なしの長方形。人物は円形に切り抜く
セクション境界: 直線で色を切り替える。背景の一部に斜めの帯を入れる
見出しの箱は角丸なし
ステージ枠は金の二重線
吹き出しはピル型の白地に細い線

Components

赤グロスピルCTA（button-primary）: 赤の縦グラデーションに光沢を乗せ、ベージュの縁取りと左端に斜めの濃い赤の模様を入れる
グレー見出しラベル箱（label-box）: 暗い帯の上端にまたがるライトグレーの長方形。文字は太字
金セリフ番号（number-gold）: 01〜03 の大きな金色セリフ数字をラベル箱に重ねる
金二重線ステージ枠（stage-frame）: 白地に金の二重線を引き、明朝体の見出しを中央に置く
説明会日程ボックス（event-box）: 黒地に金の細い線で囲み、日付を3つ並べて詳細リンクを添える
質問吹き出し（speech-bubble）: 白いピル型の吹き出しを3つずらして並べ、円形に切り抜いた人物写真を添える
進路別活躍事例カード（case-card）: 色帯の見出し→シェブロン矢印→淡い色の枠カードの順に並べ、円形顔写真と経歴を載せる
インタビューカルーセル（interview-card）: 白いカードに写真・氏名・黒いピル型の詳細ボタンを載せ、左右の矢印と赤いドットで送る

Do's and Don'ts

Do - 暗い帯と明るい帯を交互に置いて、リズムを作る - CTAは赤グロスピルに統一する - 番号は金のセリフ数字で大きく見せる - 実際の画面や教室の写真で具体性を出す - 数値には出典を小さく添える

Don't - CTAにフラットな単色や別の色を使わない - パステルや丸い可愛らしい装飾を入れない - 金色を本文の文字に使わない - 見出しの箱を角丸にしない - 赤を広い面積の背景に使わない

Page Structure

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

ファーストビュー（先端技術の印象と講座名を伝える）: 赤い光の人物写真の上に、ロゴ・講座名・金のメダルバッジ2つ・日程ボックスを重ねる
CTA群（申込・相談・資料請求に誘導する）: 黒地に赤グロスピルを3つ縦に並べる
認定・給付金訴求（費用面の不安を下げる）: グレーの幾何模様の地に中央揃えの見出し、黒いラベル箱、本文、CTA、バナーを置く
スクール紹介（学校の概要を伝える）: グレーのラベル箱をチャコール帯にまたがせ、白文字の本文と教室写真を続ける
個別相談の案内（気軽な相談を促す）: 黒い箱見出し2段、本文、CTA、質問の吹き出しと人物写真を並べる
カリキュラム（学べる内容を具体的に見せる）: 金の二重線のステージ枠のあと、スクショ・見出し・説明を縦に繰り返す
資料ダウンロード（資料請求に誘導する）: チャコール帯に資料の画像、オレンジの小見出し、本文、CTAを置く
選ばれる理由（差別化を示す）: 金の番号とグレーのラベル箱を3回繰り返し、図解を入れる
卒業生の進路（成果を示す）: 青・青・オレンジの色帯見出しと事例カードを並べる
インタビュー（実例で信頼を補強する）: 斜めのグレー帯の上にカードのカルーセルを置く
市場メリット（学ぶ必然性を数字で示す）: 金の番号と、暗い地・明るい地を交互にしたブロックに赤い大きな数値を置く
リモート受講・サポート（受講環境の安心を伝える）: アイコンのブロックを暗・明交互に並べ、スペック表を続ける
受講生データ・教室（実績と施設を見せる）: 円グラフ、アンケートのグラフ、施設写真を縦に並べる

Imagery

人物写真は暗い背景に赤い照明を当て、近未来のデバイスを持たせる
開発ソフトの画面スクショをそのまま大きく載せる
教室や受講風景は実写の広角で撮る
人物の顔は円形に切り抜き、白い縁を付ける
背景はグレーの濃淡で斜めの三角を組んだ抽象模様にする
アイコンは単色の線画で、白か赤にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCではFVの日程ボックスを右に置き、CTA3つを横一列に並べる
PCではカリキュラムを3カラムのグリッドにする
PCでは本文と写真を左右2カラムに並べる
PCでは進路カードとメリットを3列に並べる
PCではインタビューカードを4枚同時に見せる

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: Dark Charcoal Red Gloss Tech School LP
description: チャコール黒とライトグレーの帯が交互に続き、深紅の光沢ピルボタンと金色のセリフ数字を差し色にした、先端技術系スクールの訴求型 LP。斜めのグレー幾何模様が背景に入り、写真とスクリーンショットをたくさん並べてカリキュラムを具体的に見せる。
colors:
  primary: '#AA0A01'
  cta: '#C0140F'
  on-cta: '#FFFFFF'
  background: '#FEFEFE'
  background-alt: '#F3F3F3'
  dark-section: '#323232'
  on-dark: '#DEDEDE'
  surface: '#CCCCCC'
  text: '#272727'
  text-body: '#555555'
  accent-1: '#C9A03A'
  accent-2: '#C00000'
  accent-3: '#0BA3E3'
  secondary: '#F16301'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.35
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.6
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 0.02em
  accent:
    fontFamily: Playfair Display
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1.0
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 4px
  lg: 30px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
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.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  label-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 80px
  number-gold:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 90px
  stage-frame:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 110px
  event-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 140px
  speech-bubble:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 36px
  case-card:
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 260px
  interview-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 420px
---

# DESIGN.md — 黒×深紅グロスと金数字のXRスクール LP（Dark Charcoal Red Gloss Tech School LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型、力強い・インパクト
- **キーワード**: チャコール帯・深紅グロスボタン・金セリフ数字・斜め幾何背景・スクショ多用
- **地の質感**: ボタンは赤の縦グラデーションと光沢、ベージュの縁取り。背景には淡いグレーの斜め三角模様が入る
- **形**: ボタンはピル型。見出しボックスは角丸なしの長方形。人物は円形に切り抜く
- **温度感**: クールなモノトーンに、熱を感じる赤と金を少しだけ足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#AA0A01` | ブランド深紅・ボタン地 | 3% | 画素の実測 |
| `cta` | `#C0140F` | 主CTAの赤 | 2% | 推定 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `background` | `#FEFEFE` | 基本背景（白） | 29% | 画素の実測 |
| `background-alt` | `#F3F3F3` | 淡いグレー帯 | 12% | 画素の実測 |
| `dark-section` | `#323232` | チャコール帯 | 18% | 画素の実測 |
| `on-dark` | `#DEDEDE` | 暗い地の白文字 | 1% | 画素の実測 |
| `surface` | `#CCCCCC` | 見出しラベル箱のグレー | 4% | 画素の実測 |
| `text` | `#272727` | 見出し文字 | 2% | 画素の実測 |
| `text-body` | `#555555` | 本文グレー | 3% | 推定 |
| `accent-1` | `#C9A03A` | 金色の番号・枠線 | 0% | 推定 |
| `accent-2` | `#C00000` | 赤の強調文字 | 0% | 推定 |
| `accent-3` | `#0BA3E3` | 活躍事例の青 | 2% | 画素の実測 |
| `secondary` | `#F16301` | 企業向けのオレンジ | 1% | 画素の実測 |

- 白・淡いグレー・チャコールの3段の地をセクションごとに交互に切り替える
- 主CTAには赤のグロスピルだけを使い、黒地の帯の上に縦に並べる
- 番号（01〜03）と枠線は金で、セリフ体の大きな数字にする
- 本文中の強調は赤の太字に限る
- 数値の訴求は赤の大きな数字にする
- 青とオレンジは卒業生の進路カードの色分けだけに使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの講座名 | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em |
| `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 500 | 24px | 1.5 | 0.03em |
| `headline-md` | カリキュラム項目名 | ゴシック | Noto Sans JP | 500 | 26px | 1.35 | 0.0em |
| `headline-sm` | ラベル箱の見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.85 | 0.02em |
| `accent` | 金の番号数字 | 欧文セリフ | Playfair Display | 700 | 80px | 1.0 | 0.0em |
| `note` | 出典・キャプション | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 18px | 1.4 | 0.02em |

- 基本はゴシック1書体で通し、番号だけ欧文セリフにする
- ステージ見出しの箱は明朝にして格調を出す
- セクション見出しは中央揃えで2〜3行に収める
- 本文は左揃えで、行間は1.8前後と広めにとる
- 数値の訴求は36px以上の赤い太字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- CTAは黒地の帯に3つ縦に並べ、ページの途中で繰り返す
- ラベル箱をグレー帯と暗い帯の境目にまたがせる
- 番号はラベル箱の左下にはみ出すように重ねる
- カリキュラムは画像→見出し→説明の順に縦に積む
- 表は全幅で、見出し行をグレーにする

## Elevation & Depth

- CTAボタンの下に濃い影を落とし、立体感を出す
- インタビューカードには薄い影を付ける
- その他の部品は影なしのフラットにする

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 30px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸なしの長方形。人物は円形に切り抜く
- **セクション境界**: 直線で色を切り替える。背景の一部に斜めの帯を入れる
- 見出しの箱は角丸なし
- ステージ枠は金の二重線
- 吹き出しはピル型の白地に細い線

## Components

- **赤グロスピルCTA**（`button-primary`）: 赤の縦グラデーションに光沢を乗せ、ベージュの縁取りと左端に斜めの濃い赤の模様を入れる
- **グレー見出しラベル箱**（`label-box`）: 暗い帯の上端にまたがるライトグレーの長方形。文字は太字
- **金セリフ番号**（`number-gold`）: 01〜03 の大きな金色セリフ数字をラベル箱に重ねる
- **金二重線ステージ枠**（`stage-frame`）: 白地に金の二重線を引き、明朝体の見出しを中央に置く
- **説明会日程ボックス**（`event-box`）: 黒地に金の細い線で囲み、日付を3つ並べて詳細リンクを添える
- **質問吹き出し**（`speech-bubble`）: 白いピル型の吹き出しを3つずらして並べ、円形に切り抜いた人物写真を添える
- **進路別活躍事例カード**（`case-card`）: 色帯の見出し→シェブロン矢印→淡い色の枠カードの順に並べ、円形顔写真と経歴を載せる
- **インタビューカルーセル**（`interview-card`）: 白いカードに写真・氏名・黒いピル型の詳細ボタンを載せ、左右の矢印と赤いドットで送る

## Do's and Don'ts

**Do**
- 暗い帯と明るい帯を交互に置いて、リズムを作る
- CTAは赤グロスピルに統一する
- 番号は金のセリフ数字で大きく見せる
- 実際の画面や教室の写真で具体性を出す
- 数値には出典を小さく添える

**Don't**
- CTAにフラットな単色や別の色を使わない
- パステルや丸い可愛らしい装飾を入れない
- 金色を本文の文字に使わない
- 見出しの箱を角丸にしない
- 赤を広い面積の背景に使わない

## Page Structure

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

1. **ファーストビュー**（先端技術の印象と講座名を伝える）: 赤い光の人物写真の上に、ロゴ・講座名・金のメダルバッジ2つ・日程ボックスを重ねる
2. **CTA群**（申込・相談・資料請求に誘導する）: 黒地に赤グロスピルを3つ縦に並べる
3. **認定・給付金訴求**（費用面の不安を下げる）: グレーの幾何模様の地に中央揃えの見出し、黒いラベル箱、本文、CTA、バナーを置く
4. **スクール紹介**（学校の概要を伝える）: グレーのラベル箱をチャコール帯にまたがせ、白文字の本文と教室写真を続ける
5. **個別相談の案内**（気軽な相談を促す）: 黒い箱見出し2段、本文、CTA、質問の吹き出しと人物写真を並べる
6. **カリキュラム**（学べる内容を具体的に見せる）: 金の二重線のステージ枠のあと、スクショ・見出し・説明を縦に繰り返す
7. **資料ダウンロード**（資料請求に誘導する）: チャコール帯に資料の画像、オレンジの小見出し、本文、CTAを置く
8. **選ばれる理由**（差別化を示す）: 金の番号とグレーのラベル箱を3回繰り返し、図解を入れる
9. **卒業生の進路**（成果を示す）: 青・青・オレンジの色帯見出しと事例カードを並べる
10. **インタビュー**（実例で信頼を補強する）: 斜めのグレー帯の上にカードのカルーセルを置く
11. **市場メリット**（学ぶ必然性を数字で示す）: 金の番号と、暗い地・明るい地を交互にしたブロックに赤い大きな数値を置く
12. **リモート受講・サポート**（受講環境の安心を伝える）: アイコンのブロックを暗・明交互に並べ、スペック表を続ける
13. **受講生データ・教室**（実績と施設を見せる）: 円グラフ、アンケートのグラフ、施設写真を縦に並べる

## Imagery

- 人物写真は暗い背景に赤い照明を当て、近未来のデバイスを持たせる
- 開発ソフトの画面スクショをそのまま大きく載せる
- 教室や受講風景は実写の広角で撮る
- 人物の顔は円形に切り抜き、白い縁を付ける
- 背景はグレーの濃淡で斜めの三角を組んだ抽象模様にする
- アイコンは単色の線画で、白か赤にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCではFVの日程ボックスを右に置き、CTA3つを横一列に並べる
- PCではカリキュラムを3カラムのグリッドにする
- PCでは本文と写真を左右2カラムに並べる
- PCでは進路カードとメリットを3列に並べる
- PCではインタビューカードを4枚同時に見せる

## 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-e19d202d`（元 LP の URL から採番）
- **元 LP**: https://academy.crossreality.co.jp/curriculum/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（9/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://academy.crossreality.co.jp/curriculum/（公開状況により表示できない場合があります）
この 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