生成り地×多色ブロックの通信制高校サポート校 LP

Warm Beige Colorful Block School LP

生成りベージュの地に白カードを置き、テラコッタ・マスタード・青緑・藤色の多色ブロックで区切る教育系 LP。ポイントごとに帯の色を変え、黄色のピル型 CTA で相談・資料請求へ誘導する。

教育・スクール・資格やさしい・柔らかい信頼・誠実ポップ・元気情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

地は常に生成りベージュ、情報は白カードに載せる
ポイントごとに帯色を青緑→テラコッタ→藤色→朱赤と変える
主CTAはマスタード黄のみ、他の要素で黄色面を使いすぎない
相談帯は5〜6色の縦ストライプブロックに白のピルボタンを置く
強調語はテラコッタ文字＋下線マーカーで示す
文字は純黒でなく濃い茶黒にする

TYPOGRAPHY

書体

displayFV写真上のキャッチ丸ゴシック／ Zen Maru Gothic 700 ／ 28px ／行間 1.3

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

headline-lgセクション見出しゴシック／ Zen Kaku Gothic New 700 ／ 22px ／行間 1.4

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

headline-mdポイント帯の白抜き見出しゴシック／ Zen Kaku Gothic New 700 ／ 18px ／行間 1.5

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

headline-sm小見出し・カードタイトルゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.5

あなたの 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

accentPOINT番号・数字欧文サンセリフ／ Montserrat 600 ／ 20px ／行間 1.1

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

label-buttonボタン文字ゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.3

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

見出しは中央揃え、2行に分けて強調語だけ色を変える
強調語の下にテラコッタや青緑の下線を引く
本文は中央揃えの短い行で3〜4行まで
数字は大きく太く、単位は小さくする
セクション見出しの左右に多色の小さな四角アイコンを添える

PAGE STRUCTURE

セクション構成

ファーストビュー対象と価値を一目で伝える多色の背景に人物写真のタイルコラージュを敷き、中央に白縁取りの大見出し、角に実績バッジを置く
リード強みを要約する中央揃えの3行見出し。強調語は色と下線、小さな丸写真を添え、下に黄CTAを置く
運営体制の紹介信頼を補強する白カード2枚を横に並べ、ロゴとチェックリストを入れる
写真コラージュ＋CTA雰囲気を見せて行動を促す全幅の写真グリッドの中央に黄色の大ボタンを重ねる
相談CTA帯申込への導線多色ストライプの上に白ピルボタン2つ
ポイント特長を4つ説明する白い大カードを縦に並べ、帯色・円グラフ・番号付き写真・アコーディオンを使い分ける
お客様の声共感と安心白カード3枚にアバターイラストと見出しを入れる
写真コラージュ＋CTA再訴求上と同じ形をくり返す
よくある質問不安の解消Q付きアコーディオンを縦に9件ほど並べる
拠点一覧近くの拠点を探せるようにするロゴと小さな黄ボタンの下に、線区切りの地域別アコーディオンを並べる
フッターCTA最後の申込導線相談帯をもう一度置き、フリーダイヤルと受付時間を中央に置く

COMPONENTS

部品

主CTAボタン button-primaryマスタード黄のピル型。右に丸矢印を付け、濃茶の細い枠線を入れる
多色ストライプ相談帯 cta-band多色の縦ブロックの上に白いピルボタンを2つ並べ、イラストと吹き出しバッジを添える
ポイントカード point-card白カードにPOINT番号、問いかけの一文、人物切り抜き、色帯の白抜き見出しを入れる
番号丸 number-circle帯色と同じ色で塗った円に白数字を入れ、横に小見出しを置く
アコーディオン accordion白地に枠線、左に色付きのQ、右に＋を置く
吹き出しバッジ badge-label小さな角丸ラベル。ボタン上や円グラフの上に置く
声カード voice-card白カードに丸いアバターイラスト、属性、太字見出し、本文を入れる
写真キャプション帯 photo-caption写真下端に淡ピンクの帯を敷き、白文字の一行コメントを入れる

守ること

地は生成りベージュ、情報は白カードに載せる
ポイントごとに帯色を変えてリズムを出す
CTAは黄色ピルに統一し、くり返し配置する
データは円グラフと大きな数字で見せる
人物は笑顔の学生と講師の写真を使う

DON'T

避けること

純白の地や純黒の文字を使わない
原色の彩度の高い色を使わない
角張ったボタンにしない
強い影やグラデーションを使わない
1つのカードに複数の帯色を混ぜない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 生成り地×多色ブロックの通信制高校サポート校 LP（Warm Beige Colorful Block School LP）

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

Overview

業種: 教育・スクール・資格／ 雰囲気: やさしい・柔らかい、信頼・誠実、ポップ・元気、情報量多め・訴求型
キーワード: 生成りベージュ・多色カラーブロック・白カード・くすみ暖色・親しみ・安心感
地の質感: フラットな単色面。影はほぼなく、白カードとベージュ地の明度差で区切る。
形: 角丸カードとピル型ボタン。色ブロックは角のない長方形タイル。
温度感: 暖かい。オレンジ寄りのくすみ色が中心で、青緑と藤色で落ち着きを足す。

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#F2E8DE`	ページ地の生成りベージュ	50%	画素の実測
`surface`	`#FFFFFE`	ポイント・声のカード面	14%	画素の実測
`primary`	`#D58D6D`	見出し強調・ポイント帯のテラコッタ	6%	画素の実測
`cta`	`#FDC563`	主CTAボタンのマスタード黄	2%	画素の実測
`on-cta`	`#3A2A24`	CTAボタン上の濃茶文字	0%	推定
`text`	`#3A2E2A`	見出し・本文の濃い茶黒	3%	推定
`secondary`	`#63A593`	ポイント01帯の青緑	3%	画素の実測
`accent-1`	`#C989BE`	ポイント03帯の藤色	2%	画素の実測
`accent-2`	`#CD594C`	ポイント04帯の朱赤	2%	画素の実測
`accent-3`	`#E67C4A`	相談帯の多色ブロックのオレンジ	2%	画素の実測
`tint-1`	`#E3ADB3`	写真キャプション帯の淡ピンク	1%	画素の実測
`background-alt`	`#F3E9DD`	アコーディオン項目の淡ベージュ	2%	画素の実測
`line`	`#B9A79A`	カード・FAQの枠線	0%	推定
`text-muted`	`#786C60`	注釈の灰茶文字	0%	画素の実測

地は常に生成りベージュ、情報は白カードに載せる
ポイントごとに帯色を青緑→テラコッタ→藤色→朱赤と変える
主CTAはマスタード黄のみ、他の要素で黄色面を使いすぎない
相談帯は5〜6色の縦ストライプブロックに白のピルボタンを置く
強調語はテラコッタ文字＋下線マーカーで示す
文字は純黒でなく濃い茶黒にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV写真上のキャッチ	丸ゴシック	Zen Maru Gothic	700	28px	1.3	0.05em
`headline-lg`	セクション見出し	ゴシック	Zen Kaku Gothic New	700	22px	1.4	0.05em
`headline-md`	ポイント帯の白抜き見出し	ゴシック	Zen Kaku Gothic New	700	18px	1.5	0.04em
`headline-sm`	小見出し・カードタイトル	ゴシック	Zen Kaku Gothic New	700	16px	1.5	0.03em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.03em
`note`	注釈・出典	ゴシック	Noto Sans JP	400	11px	1.6	0.02em
`accent`	POINT番号・数字	欧文サンセリフ	Montserrat	600	20px	1.1	0.05em
`label-button`	ボタン文字	ゴシック	Zen Kaku Gothic New	700	16px	1.3	0.05em

見出しは中央揃え、2行に分けて強調語だけ色を変える
強調語の下にテラコッタや青緑の下線を引く
本文は中央揃えの短い行で3〜4行まで
数字は大きく太く、単位は小さくする
セクション見出しの左右に多色の小さな四角アイコンを添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、声カードはSPで縦積み
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
ポイントは白い大カードに1件ずつ入れて縦に並べる
カード上部に人物の切り抜きと色帯の見出しを置く
アコーディオンは全幅の枠付き行で並べる
相談帯はページ内で3回くり返す
写真コラージュの中央にCTAボタンを重ねる

Elevation & Depth

基本はフラットで影なし
相談帯の白ピルボタンにだけ薄い影を付ける
画面右端に縦書きの追従タブを置く

Shapes

角丸: 小 4px ／中 12px ／大 16px。ボタンはピル型。
写真の切り抜き: FVは色面を敷いた人物写真の矩形タイルコラージュ、ポイント内の写真は角丸の横長
セクション境界: 直線。多色の縦ストライプ帯で区切る
カードは角丸12〜16px
CTAはピル型
小さなラベルは角丸の吹き出しバッジ
番号は塗りの円

Components

主CTAボタン（button-primary）: マスタード黄のピル型。右に丸矢印を付け、濃茶の細い枠線を入れる
多色ストライプ相談帯（cta-band）: 多色の縦ブロックの上に白いピルボタンを2つ並べ、イラストと吹き出しバッジを添える
ポイントカード（point-card）: 白カードにPOINT番号、問いかけの一文、人物切り抜き、色帯の白抜き見出しを入れる
番号丸（number-circle）: 帯色と同じ色で塗った円に白数字を入れ、横に小見出しを置く
アコーディオン（accordion）: 白地に枠線、左に色付きのQ、右に＋を置く
吹き出しバッジ（badge-label）: 小さな角丸ラベル。ボタン上や円グラフの上に置く
声カード（voice-card）: 白カードに丸いアバターイラスト、属性、太字見出し、本文を入れる
写真キャプション帯（photo-caption）: 写真下端に淡ピンクの帯を敷き、白文字の一行コメントを入れる

Do's and Don'ts

Do - 地は生成りベージュ、情報は白カードに載せる - ポイントごとに帯色を変えてリズムを出す - CTAは黄色ピルに統一し、くり返し配置する - データは円グラフと大きな数字で見せる - 人物は笑顔の学生と講師の写真を使う

Don't - 純白の地や純黒の文字を使わない - 原色の彩度の高い色を使わない - 角張ったボタンにしない - 強い影やグラデーションを使わない - 1つのカードに複数の帯色を混ぜない

Page Structure

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

ファーストビュー（対象と価値を一目で伝える）: 多色の背景に人物写真のタイルコラージュを敷き、中央に白縁取りの大見出し、角に実績バッジを置く
リード（強みを要約する）: 中央揃えの3行見出し。強調語は色と下線、小さな丸写真を添え、下に黄CTAを置く
運営体制の紹介（信頼を補強する）: 白カード2枚を横に並べ、ロゴとチェックリストを入れる
写真コラージュ＋CTA（雰囲気を見せて行動を促す）: 全幅の写真グリッドの中央に黄色の大ボタンを重ねる
相談CTA帯（申込への導線）: 多色ストライプの上に白ピルボタン2つ
ポイント（特長を4つ説明する）: 白い大カードを縦に並べ、帯色・円グラフ・番号付き写真・アコーディオンを使い分ける
お客様の声（共感と安心）: 白カード3枚にアバターイラストと見出しを入れる
写真コラージュ＋CTA（再訴求）: 上と同じ形をくり返す
よくある質問（不安の解消）: Q付きアコーディオンを縦に9件ほど並べる
拠点一覧（近くの拠点を探せるようにする）: ロゴと小さな黄ボタンの下に、線区切りの地域別アコーディオンを並べる
フッターCTA（最後の申込導線）: 相談帯をもう一度置き、フリーダイヤルと受付時間を中央に置く

Imagery

明るい自然光で、制服や私服の学生と講師の笑顔を撮る
FVの人物は単色背景のスタジオ撮影で、タイルごとに背景色を変える
人物の切り抜きをカード左上に重ねる
ボタン横には線画にくすみ色を塗ったゆるいイラストを添える
キャンパスは明るく開放的な屋内写真にする
声のアバターは丸フレームに簡素なイラスト
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは中央に約60%幅のカラムを置き、余白はベージュ
SPではFVのコラージュを2〜3列に減らし、見出しを写真の下に出す
相談帯の2ボタンはSPで縦に積む
声カードと運営カードはSPで1列にする
右端の追従タブはSPで画面下の固定CTAバーに置き換える

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: Warm Beige Colorful Block School LP
description: 生成りベージュの地に白カードを置き、テラコッタ・マスタード・青緑・藤色の多色ブロックで区切る教育系 LP。ポイントごとに帯の色を変え、黄色のピル型 CTA で相談・資料請求へ誘導する。
colors:
  background: '#F2E8DE'
  surface: '#FFFFFE'
  primary: '#D58D6D'
  cta: '#FDC563'
  on-cta: '#3A2A24'
  text: '#3A2E2A'
  secondary: '#63A593'
  accent-1: '#C989BE'
  accent-2: '#CD594C'
  accent-3: '#E67C4A'
  tint-1: '#E3ADB3'
  background-alt: '#F3E9DD'
  line: '#B9A79A'
  text-muted: '#786C60'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.05em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  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
  cta-band:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  point-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 400px
  number-circle:
    backgroundColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 28px
  accordion:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 48px
  badge-label:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 20px
  voice-card:
    backgroundColor: '{colors.surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 220px
  photo-caption:
    backgroundColor: '{colors.tint-1}'
    typography: '{typography.note}'
    height: 24px
---

# DESIGN.md — 生成り地×多色ブロックの通信制高校サポート校 LP（Warm Beige Colorful Block School LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、ポップ・元気、情報量多め・訴求型
- **キーワード**: 生成りベージュ・多色カラーブロック・白カード・くすみ暖色・親しみ・安心感
- **地の質感**: フラットな単色面。影はほぼなく、白カードとベージュ地の明度差で区切る。
- **形**: 角丸カードとピル型ボタン。色ブロックは角のない長方形タイル。
- **温度感**: 暖かい。オレンジ寄りのくすみ色が中心で、青緑と藤色で落ち着きを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F2E8DE` | ページ地の生成りベージュ | 50% | 画素の実測 |
| `surface` | `#FFFFFE` | ポイント・声のカード面 | 14% | 画素の実測 |
| `primary` | `#D58D6D` | 見出し強調・ポイント帯のテラコッタ | 6% | 画素の実測 |
| `cta` | `#FDC563` | 主CTAボタンのマスタード黄 | 2% | 画素の実測 |
| `on-cta` | `#3A2A24` | CTAボタン上の濃茶文字 | 0% | 推定 |
| `text` | `#3A2E2A` | 見出し・本文の濃い茶黒 | 3% | 推定 |
| `secondary` | `#63A593` | ポイント01帯の青緑 | 3% | 画素の実測 |
| `accent-1` | `#C989BE` | ポイント03帯の藤色 | 2% | 画素の実測 |
| `accent-2` | `#CD594C` | ポイント04帯の朱赤 | 2% | 画素の実測 |
| `accent-3` | `#E67C4A` | 相談帯の多色ブロックのオレンジ | 2% | 画素の実測 |
| `tint-1` | `#E3ADB3` | 写真キャプション帯の淡ピンク | 1% | 画素の実測 |
| `background-alt` | `#F3E9DD` | アコーディオン項目の淡ベージュ | 2% | 画素の実測 |
| `line` | `#B9A79A` | カード・FAQの枠線 | 0% | 推定 |
| `text-muted` | `#786C60` | 注釈の灰茶文字 | 0% | 画素の実測 |

- 地は常に生成りベージュ、情報は白カードに載せる
- ポイントごとに帯色を青緑→テラコッタ→藤色→朱赤と変える
- 主CTAはマスタード黄のみ、他の要素で黄色面を使いすぎない
- 相談帯は5〜6色の縦ストライプブロックに白のピルボタンを置く
- 強調語はテラコッタ文字＋下線マーカーで示す
- 文字は純黒でなく濃い茶黒にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV写真上のキャッチ | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.3 | 0.05em |
| `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.05em |
| `headline-md` | ポイント帯の白抜き見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.04em |
| `headline-sm` | 小見出し・カードタイトル | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em |
| `accent` | POINT番号・数字 | 欧文サンセリフ | Montserrat | 600 | 20px | 1.1 | 0.05em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.3 | 0.05em |

- 見出しは中央揃え、2行に分けて強調語だけ色を変える
- 強調語の下にテラコッタや青緑の下線を引く
- 本文は中央揃えの短い行で3〜4行まで
- 数字は大きく太く、単位は小さくする
- セクション見出しの左右に多色の小さな四角アイコンを添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、声カードはSPで縦積み
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- ポイントは白い大カードに1件ずつ入れて縦に並べる
- カード上部に人物の切り抜きと色帯の見出しを置く
- アコーディオンは全幅の枠付き行で並べる
- 相談帯はページ内で3回くり返す
- 写真コラージュの中央にCTAボタンを重ねる

## Elevation & Depth

- 基本はフラットで影なし
- 相談帯の白ピルボタンにだけ薄い影を付ける
- 画面右端に縦書きの追従タブを置く

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: FVは色面を敷いた人物写真の矩形タイルコラージュ、ポイント内の写真は角丸の横長
- **セクション境界**: 直線。多色の縦ストライプ帯で区切る
- カードは角丸12〜16px
- CTAはピル型
- 小さなラベルは角丸の吹き出しバッジ
- 番号は塗りの円

## Components

- **主CTAボタン**（`button-primary`）: マスタード黄のピル型。右に丸矢印を付け、濃茶の細い枠線を入れる
- **多色ストライプ相談帯**（`cta-band`）: 多色の縦ブロックの上に白いピルボタンを2つ並べ、イラストと吹き出しバッジを添える
- **ポイントカード**（`point-card`）: 白カードにPOINT番号、問いかけの一文、人物切り抜き、色帯の白抜き見出しを入れる
- **番号丸**（`number-circle`）: 帯色と同じ色で塗った円に白数字を入れ、横に小見出しを置く
- **アコーディオン**（`accordion`）: 白地に枠線、左に色付きのQ、右に＋を置く
- **吹き出しバッジ**（`badge-label`）: 小さな角丸ラベル。ボタン上や円グラフの上に置く
- **声カード**（`voice-card`）: 白カードに丸いアバターイラスト、属性、太字見出し、本文を入れる
- **写真キャプション帯**（`photo-caption`）: 写真下端に淡ピンクの帯を敷き、白文字の一行コメントを入れる

## Do's and Don'ts

**Do**
- 地は生成りベージュ、情報は白カードに載せる
- ポイントごとに帯色を変えてリズムを出す
- CTAは黄色ピルに統一し、くり返し配置する
- データは円グラフと大きな数字で見せる
- 人物は笑顔の学生と講師の写真を使う

**Don't**
- 純白の地や純黒の文字を使わない
- 原色の彩度の高い色を使わない
- 角張ったボタンにしない
- 強い影やグラデーションを使わない
- 1つのカードに複数の帯色を混ぜない

## Page Structure

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

1. **ファーストビュー**（対象と価値を一目で伝える）: 多色の背景に人物写真のタイルコラージュを敷き、中央に白縁取りの大見出し、角に実績バッジを置く
2. **リード**（強みを要約する）: 中央揃えの3行見出し。強調語は色と下線、小さな丸写真を添え、下に黄CTAを置く
3. **運営体制の紹介**（信頼を補強する）: 白カード2枚を横に並べ、ロゴとチェックリストを入れる
4. **写真コラージュ＋CTA**（雰囲気を見せて行動を促す）: 全幅の写真グリッドの中央に黄色の大ボタンを重ねる
5. **相談CTA帯**（申込への導線）: 多色ストライプの上に白ピルボタン2つ
6. **ポイント**（特長を4つ説明する）: 白い大カードを縦に並べ、帯色・円グラフ・番号付き写真・アコーディオンを使い分ける
7. **お客様の声**（共感と安心）: 白カード3枚にアバターイラストと見出しを入れる
8. **写真コラージュ＋CTA**（再訴求）: 上と同じ形をくり返す
9. **よくある質問**（不安の解消）: Q付きアコーディオンを縦に9件ほど並べる
10. **拠点一覧**（近くの拠点を探せるようにする）: ロゴと小さな黄ボタンの下に、線区切りの地域別アコーディオンを並べる
11. **フッターCTA**（最後の申込導線）: 相談帯をもう一度置き、フリーダイヤルと受付時間を中央に置く

## Imagery

- 明るい自然光で、制服や私服の学生と講師の笑顔を撮る
- FVの人物は単色背景のスタジオ撮影で、タイルごとに背景色を変える
- 人物の切り抜きをカード左上に重ねる
- ボタン横には線画にくすみ色を塗ったゆるいイラストを添える
- キャンパスは明るく開放的な屋内写真にする
- 声のアバターは丸フレームに簡素なイラスト
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央に約60%幅のカラムを置き、余白はベージュ
- SPではFVのコラージュを2〜3列に減らし、見出しを写真の下に出す
- 相談帯の2ボタンはSPで縦に積む
- 声カードと運営カードはSPで1列にする
- 右端の追従タブはSPで画面下の固定CTAバーに置き換える

## 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-8661c22b`（元 LP の URL から採番）
- **元 LP**: https://gakuin.gakken.jp/lp01/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（11/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://gakuin.gakken.jp/lp01/（公開状況により表示できない場合があります）
この 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