ミント×墨黒のポップなクリエイティブ専門学校LP

Pop Mint Illustrated Creative School LP

ミントグリーンと墨黒を軸に、線画イラスト・方眼紙地・太い黒枠カードを組み合わせたクリエイター系専門学校のLP。学科ごとにパステル色を割り当てて情報量の多さを整理している。欧文の大見出しと黒ピルボタンでストリート感を出している。

教育・スクール・資格ポップ・元気クール・先進的情報量多め・訴求型SPPC

ダウンロード

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

COLORS

配色

ミントは目玉コンテンツ帯（おすすめ・講座一覧・説明会）の全面地に使う
一般セクションは白・薄グレー・方眼グレーを交互に並べて区切る
主ボタンは黒ピルに白文字。右端にミント線の丸矢印を付ける
コーラルは資料請求とお知らせタグだけに限る
学科ごとにパステル色を1色割り当て、カード地・タグドットで統一する
本文の強調は黒文字にミントマーカーを引く。重要語は黒地に白またはミント文字の帯で見せる

TYPOGRAPHY

書体

displayFV の極太手描き風キャッチ装飾・ディスプレイ／ Dela Gothic One 900 ／ 72px ／行間 1.0

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

headline-lg欧文セクション見出し欧文サンセリフ／ Poppins 800 ／ 32px ／行間 1.1

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

headline-md和文見出し・カード見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.4

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

headline-smカード名・学科名ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.5

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

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

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

note職業一覧・日付・注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.7

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

accent背景に敷く巨大な欧文の透かし・ハッシュタグ帯欧文サンセリフ／ Poppins 800 ／ 40px ／行間 1.0

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

label-buttonピルボタンの文字ゴシック／ Noto Sans JP 700 ／ 12px ／行間 1.4

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

見出しは欧文の極太見出しに『— 和文』の小さな副題を添える
見出しバーの右奥に薄グレーの巨大欧文を透かしで敷く
数字（学科数・番号）は斜体のミント文字を白縁取りで大きく見せる
強調語は黒帯に白またはミントの文字を乗せる
欧文の白抜き文字やアウトライン文字を装飾として使う
本文は13px前後で行間を広くとる

PAGE STRUCTURE

セクション構成

ファーストビュー世界観を伝え、来校と資料請求へ誘導する方眼地に線画キャラクターを群像で描き、中央に極太のキャッチと欧文を置く。下に二択ボタンと日程表を並べる
おすすめコンテンツ入試・制度などの重要告知ミント地に告知バナーを縦に積む
お知らせ帯重要な告知を1行で見せる白地に黒枠の横長バーを置き、矢印を付ける
コンセプト学校の理念を伝える欧文の大見出しと全幅写真に、黒帯の白抜きコピーを重ねる。本文にはマーカーを引く
特長4つの強みを訴求する方眼グレー地にPOINTカードを4枚縦に並べる
学科紹介8学科と目指せる職業を見せるパステル色の2カラムタイルにイラストを並べ、下に欧文ハッシュタグの帯を流す
オープンキャンパス体験講座への参加を促すミント地に注目講座のカルーセルを置き、その下に学科で絞り込める講座グリッドを並べる
学校説明会気軽な来校を促す欧文の流れ文字の上に写真カードを置き、コーラルの曜日バッジを付ける
卒業生の声進路の実例を示す学科色の地を下半分に敷いた人物カードを横スクロールで並べる
就職実績信頼性を示す写真の下にグレー方眼地を敷き、企業名をスラッシュ区切りで並べる
対象者別導線属性ごとに案内する左に写真、右に見出しを置いた黒枠カードを縦に並べる
ニュース最新情報サムネイル・日付・コーラルのタグを並べたリストを破線で区切る
SNS公式アカウントへの導線アウトライン欧文の見出しを置き、破線グリッドに吹き出しラベルとアイコンを並べる
お問い合わせ・CTA電話と最終申込電話ボックスの下に、ミントとコーラルの大型CTAカードを2枚並べる

COMPONENTS

部品

黒ピル一覧ボタン button-primary中央配置の黒いピル型ボタン。白文字で、右端にミント線の丸矢印を付ける
FV二択ボタン button-fvミントとコーラルのピル型ボタンを並べる。黒枠を付け、右に白丸の矢印を置く
見出しバー section-heading-bar左に黒の太帯がある白い横長バー。右奥に巨大な欧文の透かしを敷く
POINTカード point-card左上にミントの吹き出しでPOINT番号、右上にハッシュタグ枠を置く。黒帯の強調見出しと写真を入れ、ミントのオフセット面を重ねる
学科タイル department-tileパステル地に線画イラストと写真を合成し、学科名を載せる。下に吹き出しタグと職業一覧を並べる
講座カード event-card左上に日付ラベルを置き、写真の下に学科色のドットと学科名、講座名を並べる白カード
吹き出しタグ tag-balloon白地に黒枠の小ラベル。下向きの尖りがある
電話問合せボックス contact-box黒いヘッダーに白い本体。ミントのマーカーラベルと大きな電話番号を入れる
下部CTAカード cta-banner-card上が写真、下がミントまたはコーラルの面。中央に吹き出しを置き、大きな和文と小さな欧文を並べる

守ること

地色は白・グレー方眼・ミントのリズムで切り替える
黒の細枠と角丸を全カードで統一する
欧文の大見出しと和文の副題を対にして使う
パステル色は学科などのカテゴリ識別だけに使う
セクションの境目にミントのリボン線を流して遊びを入れる

DON'T

避けること

グラデーションや強いドロップシャドウを使わない
ミントとコーラル以外のビビッド色をボタンに使わない
明朝体や筆文字を使わない
黒枠のない柔らかいカードを混ぜない
写真をイラスト無しで大きく並べ続けない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — ミント×墨黒のポップなクリエイティブ専門学校LP（Pop Mint Illustrated Creative School LP）

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

Overview

業種: 教育・スクール・資格／ 雰囲気: ポップ・元気、クール・先進的、情報量多め・訴求型
キーワード: ミントグリーン・方眼紙・黒枠カード・線画イラスト・パステル学科色・ストリート
地の質感: 薄いグレーの方眼グリッド地とフラットな面。影の代わりにミントのオフセット面を使う
形: 細い黒線の角丸カード、黒ピルボタン、左に黒い太帯がある見出しバー
温度感: 明るくニュートラル。ミントの爽やかさとコーラルピンクの温かさを両方持つ

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#66FAC6`	ブランドミント（セクション地・強調）	16%	画素の実測
`text`	`#1C1A1B`	墨黒（見出し・ボタン・枠線）	8%	画素の実測
`on-primary`	`#382D30`	ミント上の文字	1%	画素の主要色に補正
`background`	`#FEFEFE`	基本の白地	18%	画素の実測
`background-alt`	`#D6D9DE`	方眼グレー地	14%	画素の実測
`surface`	`#EFEFEF`	薄グレーセクション地	13%	画素の実測
`cta`	`#1A1819`	主ボタン（黒ピル）	2%	画素の実測
`on-cta`	`#FBF7F8`	ボタン上の白文字	0%	画素の実測
`secondary`	`#FFB19A`	資料請求のコーラル	3%	画素の実測
`accent-1`	`#F5B7D8`	学科色ピンク	3%	画素の実測
`accent-2`	`#A6D1F3`	学科色ブルー	3%	画素の実測
`accent-3`	`#E2BCF3`	学科色ラベンダー	3%	画素の実測
`tint-1`	`#CBE9A3`	学科色ライムグリーン	2%	画素の実測
`marker`	`#6BFCCA`	本文のミントマーカー	0%	画素の実測
`text-body`	`#382D30`	本文の濃グレー	2%	画素の主要色に補正

ミントは目玉コンテンツ帯（おすすめ・講座一覧・説明会）の全面地に使う
一般セクションは白・薄グレー・方眼グレーを交互に並べて区切る
主ボタンは黒ピルに白文字。右端にミント線の丸矢印を付ける
コーラルは資料請求とお知らせタグだけに限る
学科ごとにパステル色を1色割り当て、カード地・タグドットで統一する
本文の強調は黒文字にミントマーカーを引く。重要語は黒地に白またはミント文字の帯で見せる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の極太手描き風キャッチ	装飾・ディスプレイ	Dela Gothic One	900	72px	1.0	0.0em
`headline-lg`	欧文セクション見出し	欧文サンセリフ	Poppins	800	32px	1.1	0.0em
`headline-md`	和文見出し・カード見出し	ゴシック	Noto Sans JP	700	20px	1.4	0.03em
`headline-sm`	カード名・学科名	ゴシック	Noto Sans JP	700	15px	1.5	0.02em
`body-md`	本文	ゴシック	Noto Sans JP	400	13px	1.9	0.03em
`note`	職業一覧・日付・注釈	ゴシック	Noto Sans JP	400	10px	1.7	0.0em
`accent`	背景に敷く巨大な欧文の透かし・ハッシュタグ帯	欧文サンセリフ	Poppins	800	40px	1.0	0.0em
`label-button`	ピルボタンの文字	ゴシック	Noto Sans JP	700	12px	1.4	0.05em

見出しは欧文の極太見出しに『— 和文』の小さな副題を添える
見出しバーの右奥に薄グレーの巨大欧文を透かしで敷く
数字（学科数・番号）は斜体のミント文字を白縁取りで大きく見せる
強調語は黒帯に白またはミントの文字を乗せる
欧文の白抜き文字やアウトライン文字を装飾として使う
本文は13px前後で行間を広くとる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。学科・講座カードは 2 カラムのグリッド
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
見出しは画面幅いっぱいの白バーにし、左端に黒い太帯、上下に黒線を引く
特徴カードは右下にミントのオフセット面を重ね、右側面に縦書き欧文を入れる
学科グリッドは隙間なく敷き詰め、境界を細い黒線にする
講座・卒業生は横スクロールのカルーセルにし、丸い矢印ボタンを付ける
各セクションの末尾に黒ピルの一覧ボタンを中央に置く
区切りに破線（点線）を多用する

Elevation & Depth

ドロップシャドウはほぼ使わない
カードの奥行きはミントのオフセット面（右下にずらした同形の面）で出す
立体感は 1px の黒い細枠で代わりに表現する

Shapes

角丸: 小 4px ／中 12px ／大 20px。ボタンはピル型。
写真の切り抜き: 写真はカード上部に角丸の矩形でトリミング。イラストは枠からはみ出させる
セクション境界: 直線と黒の二重線で区切る。ミント帯の上端に小さな三角の切り欠きを入れる
カードは角丸12〜20pxに黒の細枠
タグは角丸の小矩形に黒枠、下に吹き出しの尖りを付ける
日付ラベルはカード左上にはみ出させ、パステル地に黒枠で載せる
丸い矢印アイコンは黒線の正円
曜日バッジはコーラルの正円

Components

黒ピル一覧ボタン（button-primary）: 中央配置の黒いピル型ボタン。白文字で、右端にミント線の丸矢印を付ける
FV二択ボタン（button-fv）: ミントとコーラルのピル型ボタンを並べる。黒枠を付け、右に白丸の矢印を置く
見出しバー（section-heading-bar）: 左に黒の太帯がある白い横長バー。右奥に巨大な欧文の透かしを敷く
POINTカード（point-card）: 左上にミントの吹き出しでPOINT番号、右上にハッシュタグ枠を置く。黒帯の強調見出しと写真を入れ、ミントのオフセット面を重ねる
学科タイル（department-tile）: パステル地に線画イラストと写真を合成し、学科名を載せる。下に吹き出しタグと職業一覧を並べる
講座カード（event-card）: 左上に日付ラベルを置き、写真の下に学科色のドットと学科名、講座名を並べる白カード
吹き出しタグ（tag-balloon）: 白地に黒枠の小ラベル。下向きの尖りがある
電話問合せボックス（contact-box）: 黒いヘッダーに白い本体。ミントのマーカーラベルと大きな電話番号を入れる
下部CTAカード（cta-banner-card）: 上が写真、下がミントまたはコーラルの面。中央に吹き出しを置き、大きな和文と小さな欧文を並べる

Do's and Don'ts

Do - 地色は白・グレー方眼・ミントのリズムで切り替える - 黒の細枠と角丸を全カードで統一する - 欧文の大見出しと和文の副題を対にして使う - パステル色は学科などのカテゴリ識別だけに使う - セクションの境目にミントのリボン線を流して遊びを入れる

Don't - グラデーションや強いドロップシャドウを使わない - ミントとコーラル以外のビビッド色をボタンに使わない - 明朝体や筆文字を使わない - 黒枠のない柔らかいカードを混ぜない - 写真をイラスト無しで大きく並べ続けない

Page Structure

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

ファーストビュー（世界観を伝え、来校と資料請求へ誘導する）: 方眼地に線画キャラクターを群像で描き、中央に極太のキャッチと欧文を置く。下に二択ボタンと日程表を並べる
おすすめコンテンツ（入試・制度などの重要告知）: ミント地に告知バナーを縦に積む
お知らせ帯（重要な告知を1行で見せる）: 白地に黒枠の横長バーを置き、矢印を付ける
コンセプト（学校の理念を伝える）: 欧文の大見出しと全幅写真に、黒帯の白抜きコピーを重ねる。本文にはマーカーを引く
特長（4つの強みを訴求する）: 方眼グレー地にPOINTカードを4枚縦に並べる
学科紹介（8学科と目指せる職業を見せる）: パステル色の2カラムタイルにイラストを並べ、下に欧文ハッシュタグの帯を流す
オープンキャンパス（体験講座への参加を促す）: ミント地に注目講座のカルーセルを置き、その下に学科で絞り込める講座グリッドを並べる
学校説明会（気軽な来校を促す）: 欧文の流れ文字の上に写真カードを置き、コーラルの曜日バッジを付ける
卒業生の声（進路の実例を示す）: 学科色の地を下半分に敷いた人物カードを横スクロールで並べる
就職実績（信頼性を示す）: 写真の下にグレー方眼地を敷き、企業名をスラッシュ区切りで並べる
対象者別導線（属性ごとに案内する）: 左に写真、右に見出しを置いた黒枠カードを縦に並べる
ニュース（最新情報）: サムネイル・日付・コーラルのタグを並べたリストを破線で区切る
SNS（公式アカウントへの導線）: アウトライン欧文の見出しを置き、破線グリッドに吹き出しラベルとアイコンを並べる
お問い合わせ・CTA（電話と最終申込）: 電話ボックスの下に、ミントとコーラルの大型CTAカードを2枚並べる

Imagery

人物は黒の均一な線で描くポップな線画イラストにし、ミント・ピンク・オレンジでフラットに塗る
学科の道具（ペンタブ、ミシン、ゲームパッド等）をイラストで散らす
実写は明るい教室や制作中の手元を撮る。自然光で笑顔の学生を写す
写真の上にイラストのキャラクターを重ねて合成する
ミントのリボン状の曲線をセクションの境目に流す
星・菱形などの小さなキラキラ装飾を散らす
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はヘッダーにナビゲーションと二択ボタンを常時表示する
PC はPOINTカードを2カラムの互い違いに配置する
PC は学科タイルを4カラムにする
PC は講座グリッドを5カラムにし、絞り込みをタグボタンで並べる
PC は見出しと一覧ボタンを左に、リストを右に置く2カラムにする（ニュース・就職実績・問合せ）
PC は対象者別導線を大2枚と小3段の組み合わせにする

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: Pop Mint Illustrated Creative School LP
description: ミントグリーンと墨黒を軸に、線画イラスト・方眼紙地・太い黒枠カードを組み合わせたクリエイター系専門学校のLP。学科ごとにパステル色を割り当てて情報量の多さを整理している。欧文の大見出しと黒ピルボタンでストリート感を出している。
colors:
  primary: '#66FAC6'
  text: '#1C1A1B'
  on-primary: '#382D30'
  background: '#FEFEFE'
  background-alt: '#D6D9DE'
  surface: '#EFEFEF'
  cta: '#1A1819'
  on-cta: '#FBF7F8'
  secondary: '#FFB19A'
  accent-1: '#F5B7D8'
  accent-2: '#A6D1F3'
  accent-3: '#E2BCF3'
  tint-1: '#CBE9A3'
  marker: '#6BFCCA'
  text-body: '#382D30'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 72px
    fontWeight: 900
    lineHeight: 1.0
  headline-lg:
    fontFamily: Poppins
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.1
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
  accent:
    fontFamily: Poppins
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
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: 48px
  button-fv:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  section-heading-bar:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 80px
  point-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 400px
  department-tile:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 360px
  event-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 220px
  tag-balloon:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 22px
  contact-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 180px
  cta-banner-card:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 200px
---

# DESIGN.md — ミント×墨黒のポップなクリエイティブ専門学校LP（Pop Mint Illustrated Creative School LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、クール・先進的、情報量多め・訴求型
- **キーワード**: ミントグリーン・方眼紙・黒枠カード・線画イラスト・パステル学科色・ストリート
- **地の質感**: 薄いグレーの方眼グリッド地とフラットな面。影の代わりにミントのオフセット面を使う
- **形**: 細い黒線の角丸カード、黒ピルボタン、左に黒い太帯がある見出しバー
- **温度感**: 明るくニュートラル。ミントの爽やかさとコーラルピンクの温かさを両方持つ

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#66FAC6` | ブランドミント（セクション地・強調） | 16% | 画素の実測 |
| `text` | `#1C1A1B` | 墨黒（見出し・ボタン・枠線） | 8% | 画素の実測 |
| `on-primary` | `#382D30` | ミント上の文字 | 1% | 画素の主要色に補正 |
| `background` | `#FEFEFE` | 基本の白地 | 18% | 画素の実測 |
| `background-alt` | `#D6D9DE` | 方眼グレー地 | 14% | 画素の実測 |
| `surface` | `#EFEFEF` | 薄グレーセクション地 | 13% | 画素の実測 |
| `cta` | `#1A1819` | 主ボタン（黒ピル） | 2% | 画素の実測 |
| `on-cta` | `#FBF7F8` | ボタン上の白文字 | 0% | 画素の実測 |
| `secondary` | `#FFB19A` | 資料請求のコーラル | 3% | 画素の実測 |
| `accent-1` | `#F5B7D8` | 学科色ピンク | 3% | 画素の実測 |
| `accent-2` | `#A6D1F3` | 学科色ブルー | 3% | 画素の実測 |
| `accent-3` | `#E2BCF3` | 学科色ラベンダー | 3% | 画素の実測 |
| `tint-1` | `#CBE9A3` | 学科色ライムグリーン | 2% | 画素の実測 |
| `marker` | `#6BFCCA` | 本文のミントマーカー | 0% | 画素の実測 |
| `text-body` | `#382D30` | 本文の濃グレー | 2% | 画素の主要色に補正 |

- ミントは目玉コンテンツ帯（おすすめ・講座一覧・説明会）の全面地に使う
- 一般セクションは白・薄グレー・方眼グレーを交互に並べて区切る
- 主ボタンは黒ピルに白文字。右端にミント線の丸矢印を付ける
- コーラルは資料請求とお知らせタグだけに限る
- 学科ごとにパステル色を1色割り当て、カード地・タグドットで統一する
- 本文の強調は黒文字にミントマーカーを引く。重要語は黒地に白またはミント文字の帯で見せる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の極太手描き風キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.0 | 0.0em |
| `headline-lg` | 欧文セクション見出し | 欧文サンセリフ | Poppins | 800 | 32px | 1.1 | 0.0em |
| `headline-md` | 和文見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em |
| `headline-sm` | カード名・学科名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em |
| `note` | 職業一覧・日付・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.0em |
| `accent` | 背景に敷く巨大な欧文の透かし・ハッシュタグ帯 | 欧文サンセリフ | Poppins | 800 | 40px | 1.0 | 0.0em |
| `label-button` | ピルボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em |

- 見出しは欧文の極太見出しに『— 和文』の小さな副題を添える
- 見出しバーの右奥に薄グレーの巨大欧文を透かしで敷く
- 数字（学科数・番号）は斜体のミント文字を白縁取りで大きく見せる
- 強調語は黒帯に白またはミントの文字を乗せる
- 欧文の白抜き文字やアウトライン文字を装飾として使う
- 本文は13px前後で行間を広くとる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。学科・講座カードは 2 カラムのグリッド
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- 見出しは画面幅いっぱいの白バーにし、左端に黒い太帯、上下に黒線を引く
- 特徴カードは右下にミントのオフセット面を重ね、右側面に縦書き欧文を入れる
- 学科グリッドは隙間なく敷き詰め、境界を細い黒線にする
- 講座・卒業生は横スクロールのカルーセルにし、丸い矢印ボタンを付ける
- 各セクションの末尾に黒ピルの一覧ボタンを中央に置く
- 区切りに破線（点線）を多用する

## Elevation & Depth

- ドロップシャドウはほぼ使わない
- カードの奥行きはミントのオフセット面（右下にずらした同形の面）で出す
- 立体感は 1px の黒い細枠で代わりに表現する

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 写真はカード上部に角丸の矩形でトリミング。イラストは枠からはみ出させる
- **セクション境界**: 直線と黒の二重線で区切る。ミント帯の上端に小さな三角の切り欠きを入れる
- カードは角丸12〜20pxに黒の細枠
- タグは角丸の小矩形に黒枠、下に吹き出しの尖りを付ける
- 日付ラベルはカード左上にはみ出させ、パステル地に黒枠で載せる
- 丸い矢印アイコンは黒線の正円
- 曜日バッジはコーラルの正円

## Components

- **黒ピル一覧ボタン**（`button-primary`）: 中央配置の黒いピル型ボタン。白文字で、右端にミント線の丸矢印を付ける
- **FV二択ボタン**（`button-fv`）: ミントとコーラルのピル型ボタンを並べる。黒枠を付け、右に白丸の矢印を置く
- **見出しバー**（`section-heading-bar`）: 左に黒の太帯がある白い横長バー。右奥に巨大な欧文の透かしを敷く
- **POINTカード**（`point-card`）: 左上にミントの吹き出しでPOINT番号、右上にハッシュタグ枠を置く。黒帯の強調見出しと写真を入れ、ミントのオフセット面を重ねる
- **学科タイル**（`department-tile`）: パステル地に線画イラストと写真を合成し、学科名を載せる。下に吹き出しタグと職業一覧を並べる
- **講座カード**（`event-card`）: 左上に日付ラベルを置き、写真の下に学科色のドットと学科名、講座名を並べる白カード
- **吹き出しタグ**（`tag-balloon`）: 白地に黒枠の小ラベル。下向きの尖りがある
- **電話問合せボックス**（`contact-box`）: 黒いヘッダーに白い本体。ミントのマーカーラベルと大きな電話番号を入れる
- **下部CTAカード**（`cta-banner-card`）: 上が写真、下がミントまたはコーラルの面。中央に吹き出しを置き、大きな和文と小さな欧文を並べる

## Do's and Don'ts

**Do**
- 地色は白・グレー方眼・ミントのリズムで切り替える
- 黒の細枠と角丸を全カードで統一する
- 欧文の大見出しと和文の副題を対にして使う
- パステル色は学科などのカテゴリ識別だけに使う
- セクションの境目にミントのリボン線を流して遊びを入れる

**Don't**
- グラデーションや強いドロップシャドウを使わない
- ミントとコーラル以外のビビッド色をボタンに使わない
- 明朝体や筆文字を使わない
- 黒枠のない柔らかいカードを混ぜない
- 写真をイラスト無しで大きく並べ続けない

## Page Structure

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

1. **ファーストビュー**（世界観を伝え、来校と資料請求へ誘導する）: 方眼地に線画キャラクターを群像で描き、中央に極太のキャッチと欧文を置く。下に二択ボタンと日程表を並べる
2. **おすすめコンテンツ**（入試・制度などの重要告知）: ミント地に告知バナーを縦に積む
3. **お知らせ帯**（重要な告知を1行で見せる）: 白地に黒枠の横長バーを置き、矢印を付ける
4. **コンセプト**（学校の理念を伝える）: 欧文の大見出しと全幅写真に、黒帯の白抜きコピーを重ねる。本文にはマーカーを引く
5. **特長**（4つの強みを訴求する）: 方眼グレー地にPOINTカードを4枚縦に並べる
6. **学科紹介**（8学科と目指せる職業を見せる）: パステル色の2カラムタイルにイラストを並べ、下に欧文ハッシュタグの帯を流す
7. **オープンキャンパス**（体験講座への参加を促す）: ミント地に注目講座のカルーセルを置き、その下に学科で絞り込める講座グリッドを並べる
8. **学校説明会**（気軽な来校を促す）: 欧文の流れ文字の上に写真カードを置き、コーラルの曜日バッジを付ける
9. **卒業生の声**（進路の実例を示す）: 学科色の地を下半分に敷いた人物カードを横スクロールで並べる
10. **就職実績**（信頼性を示す）: 写真の下にグレー方眼地を敷き、企業名をスラッシュ区切りで並べる
11. **対象者別導線**（属性ごとに案内する）: 左に写真、右に見出しを置いた黒枠カードを縦に並べる
12. **ニュース**（最新情報）: サムネイル・日付・コーラルのタグを並べたリストを破線で区切る
13. **SNS**（公式アカウントへの導線）: アウトライン欧文の見出しを置き、破線グリッドに吹き出しラベルとアイコンを並べる
14. **お問い合わせ・CTA**（電話と最終申込）: 電話ボックスの下に、ミントとコーラルの大型CTAカードを2枚並べる

## Imagery

- 人物は黒の均一な線で描くポップな線画イラストにし、ミント・ピンク・オレンジでフラットに塗る
- 学科の道具（ペンタブ、ミシン、ゲームパッド等）をイラストで散らす
- 実写は明るい教室や制作中の手元を撮る。自然光で笑顔の学生を写す
- 写真の上にイラストのキャラクターを重ねて合成する
- ミントのリボン状の曲線をセクションの境目に流す
- 星・菱形などの小さなキラキラ装飾を散らす
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーにナビゲーションと二択ボタンを常時表示する
- PC はPOINTカードを2カラムの互い違いに配置する
- PC は学科タイルを4カラムにする
- PC は講座グリッドを5カラムにし、絞り込みをタグボタンで並べる
- PC は見出しと一覧ボタンを左に、リストを右に置く2カラムにする（ニュース・就職実績・問合せ）
- PC は対象者別導線を大2枚と小3段の組み合わせにする

## 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-7fbd9b6d`（元 LP の URL から採番）
- **元 LP**: https://ndac.ac.jp/?utm_source=ig&utm_medium=paid&utm_campaign=ad_meta&utm_id=6915889537610&utm_content=6915889537810&utm_term=6915889537410&fbclid=PAaWdyZAPdeeVleHRuA2FlbQEwAGFkaWQAAAZKTk8qanNydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABpyzaeNxqgBXVRyq4SaBcRJYHbs
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://ndac.ac.jp/?utm_source=ig&utm_medium=paid&utm_campaign=ad_meta&utm_id=6915889537610&utm_content=6915889537810&utm_term=6915889537410&fbclid=PAaWdyZAPdeeVleHRuA2FlbQEwAGFkaWQAAAZKTk8qanNydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABpyzaeNxqgBXVRyq4SaBcRJYHbs（公開状況により表示できない場合があります）
この 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