---
version: alpha
name: Vivid Green Creative School Department LP
description: 白地に鮮やかな黄緑を主役にした専門学校の学科紹介LPです。黒の太枠と角丸の吹き出し見出し、番号付きの丸アイコン、左側の縦帯で示す学年ステージ、写真の多いカードグリッドで、カリキュラムを情報量多めに見せます。CG作品の写真がもつ強い色と、フラットな緑の面の組み合わせがクリエイティブな印象をつくります。
colors:
  primary: '#61A53B'
  background: '#EAEAEA'
  background-alt: '#FFFFFF'
  dark-section: '#121518'
  on-dark: '#FFFFFF'
  surface: '#EBEBEB'
  text: '#1A1A1A'
  text-muted: '#434342'
  secondary: '#68B056'
  accent-1: '#527F64'
  cta: '#E4007F'
  on-cta: '#FFFFFF'
  line: '#68B056'
  tint-1: '#FEFEFE'
  primary-accessible: '#4D832F'
  secondary-accessible: '#4B823D'
typography:
  display:
    fontFamily: Oswald
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.35
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Oswald
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  heading-speech-bubble:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 44px
  lead-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 40px
  number-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 36px
  stage-sidebar:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 600px
  course-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 200px
  topic-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 260px
  summary-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 180px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 52px
  button-secondary:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 40px
  tag-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 24px
---

# DESIGN.md — 鮮やかな緑と黒枠吹き出しの映像系専門学校 LP（Vivid Green Creative School Department LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、クール・先進的
- **キーワード**: 黄緑・黒枠吹き出し・作品写真グリッド・学年ステージ縦帯・専門学校・ドット柄
- **地の質感**: フラットな単色の面が基本です。緑の帯には細いストライプや細かいドット柄を薄く敷き、グレーのカードには斜線のハッチングを入れて、作り込んだ紙面のような質感を出します。
- **形**: 四角い写真と、角を少し丸めた面を組み合わせます。見出しは黒の太枠で囲んだ角丸の吹き出しにし、番号は円形のアウトラインで示します。
- **温度感**: 明るくやや爽やか。緑と白を基調に、写真の強い色で熱量を足しています。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#61A53B` | ブランドの黄緑。見出しの文字・帯・番号に使う | 7% | 画素の実測 |
| `background` | `#EAEAEA` | 本文エリアの地の色 | 42% | 画素の実測 |
| `background-alt` | `#FFFFFF` | ページ両端の外側の地の色 | 8% | 画素の実測 |
| `dark-section` | `#121518` | グローバルナビとフッターナビの帯 | 4% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 黒帯の上のナビ文字 | 0% | 画素の主要色に補正 |
| `surface` | `#EBEBEB` | 職種リストや特設ボックスのグレー面 | 6% | 画素の実測 |
| `text` | `#1A1A1A` | 見出しと本文の黒文字 | 3% | 画素の実測 |
| `text-muted` | `#434342` | 写真のキャプションや注記 | 1% | 画素の実測 |
| `secondary` | `#68B056` | 学年ステージの縦帯に使う濃い緑 | 4% | 画素の主要色に補正 |
| `accent-1` | `#527F64` | オープンキャンパスバナーの深い緑 | 2% | 画素の主要色に補正 |
| `cta` | `#E4007F` | 資料請求ボタンのマゼンタ | 1% | 推定 |
| `on-cta` | `#FFFFFF` | CTAボタンの白文字 | 0% | 画素の主要色に補正 |
| `line` | `#68B056` | カードの緑の細枠と区切りの点線 | 1% | 画素の主要色に補正 |
| `tint-1` | `#FEFEFE` | ブログ記事の日付帯などに使う薄い緑 | 3% | 画素の実測 |
| `primary-accessible` | `#4D832F` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#4B823D` | AA を満たす補正値（計算） |  | 計算 |

- 地は白に統一し、ページの外側だけを薄いグレーにする
- 黄緑は見出しの文字、帯、番号、リストの四角い行頭記号に使い、ブランドの軸として繰り返す
- 吹き出し見出しは白地に黒の太枠と黒文字にし、緑の面と対比させる
- 補足ボックスや職種リストはグレーの面にまとめる
- マゼンタは資料請求の主CTAだけに使う
- 作品写真の強い色を活かすため、写真まわりに色を足さない
- `lead-band` は文字 `#FFFFFF` × 背景 `#61A53B` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4D832F`、4.56:1）を使う。
- `number-circle` は文字 `#61A53B` × 背景 `#EAEAEA` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4D832F`、4.5:1）を使う。
- `stage-sidebar` は文字 `#FFFFFF` × 背景 `#68B056` のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#4B823D`、4.61:1）を使う。
- `tag-label` は文字 `#FFFFFF` × 背景 `#61A53B` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4D832F`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの英字で書く学科名 | 欧文サンセリフ | Oswald | 700 | 40px | 1 | 0.02em |
| `headline-lg` | 黒枠の吹き出しに入れるセクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.02em |
| `headline-md` | 緑で書く専攻名やポイントの見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.35 | 0em |
| `headline-sm` | 授業カードの緑の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0em |
| `body-md` | 授業やポイントの説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0em |
| `note` | 写真のキャプションや注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0em |
| `accent` | Stageの表記や番号に使う細長い英数字 | 欧文サンセリフ | Oswald | 600 | 18px | 1.1 | 0.02em |
| `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.04em |

- 見出しは極太のゴシックで短く組む
- 英字の見出しや番号は、縦長のコンデンス系サンセリフを使う
- 専攻名や授業名は緑の太字にして、黒の本文と区別する
- 本文は13px前後で小さめにし、情報を多く載せる
- 学年ステージの説明は縦書きで、縦帯の横に配置する
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラムで、写真カードは2列のグリッドにする。PCは中央寄せの固定幅で、2〜3列のグリッドにする。
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションは吹き出し見出しと、緑の角丸帯に入れた説明文から始める
- ポイントは丸い番号・見出し・説明・写真の順で並べる
- カリキュラムは学年ステージごとに点線で区切り、左側に緑の縦帯ラベルを置く
- 補足トピックはグレーのボックスに入れ、吹き出し見出しを左上にかぶせる
- 授業の一覧は、緑の細枠カードを2列並べて要約する

## Elevation & Depth

- 基本はフラットな面で組み、影は使わない
- 奥行きは、面の色の差と黒の太枠で表現する
- バナーだけ、ごく薄いグラデーションまでは使ってよい

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なしの長方形。4:3前後で切り抜き、グリッドに揃えて並べる
- **セクション境界**: グレーの細い点線か、緑のストライプ帯で区切る
- 見出しは黒の太枠の角丸四角に、下向きの三角しっぽを付けた吹き出しにする
- 番号は緑の円形アウトラインの中に置く
- 説明の帯は、緑の角丸の長い帯にする
- リストの行頭記号は、小さな緑の四角にする

## Components

- **吹き出し見出し**（`heading-speech-bubble`）: 白地に3px前後の黒枠を付けた角丸の吹き出しで、黒の極太文字を入れる
- **説明帯**（`lead-band`）: 吹き出しの横か下に置く緑の角丸帯。白文字でセクションの要旨を1〜2行で書く
- **丸数字**（`number-circle`）: 緑の円形アウトラインに、2桁の番号を緑で入れる。ポイント見出しの左に置く
- **学年ステージ縦帯**（`stage-sidebar`）: 左端のドット柄の緑の縦帯。Stageの表記と縦書きの説明を入れ、学年のバッジを付ける
- **授業カード**（`course-card`）: 上に写真、下に緑の小見出しと2〜3行の説明を置く。枠は付けない
- **トピックボックス**（`topic-box`）: 斜線ハッチングを入れたグレーの箱。左上に吹き出し見出しを重ね、写真と説明文を入れる
- **カリキュラム一覧カード**（`summary-card`）: 緑の細枠の白いカード。緑の見出しと、緑の四角い行頭記号のリストを2列で入れる
- **資料請求ボタン**（`button-primary`）: マゼンタの角丸四角いボタン。日本語に英字のサブ表記を添える
- **イベント誘導ボタン**（`button-secondary`）: 深い緑の角丸ボタン。白文字で、先頭に三角の矢印を付ける
- **緑ラベル**（`tag-label`）: 職種リストなどの上に付ける、緑地に白文字の小さなタブ

## Do's and Don'ts

**Do**
- 作品の写真は大きく、数多く並べて実績を見せる
- 見出しは必ず黒枠の吹き出しにして、リズムを統一する
- 緑は1色に絞り、濃淡だけで変化を付ける
- カリキュラムは時系列で、ステージ単位に区切る
- ページの最後に、緑の枠の一覧で全体を要約する

**Don't**
- 主CTA以外にマゼンタを使わない
- 見出しを明朝体や細いウェイトで組まない
- 写真を角丸や円形で切り抜かない（ブログのサムネイルは除く）
- 影や立体的な装飾を多用しない
- 緑以外の色で見出しを塗らない

## Page Structure

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

1. **ヘッダー・ナビ**（サイト全体への導線と資料請求を常に見せる）: 白いロゴ帯の下に黒いナビ帯を置き、右端にマゼンタの資料請求ボタンを置く
2. **ファーストビュー**（学科名とその世界観を示す）: 左はストライプ柄の緑の面に英字の大見出しと説明文、右は作品写真の4分割コラージュにし、円形のエンブレムを添える
3. **専攻紹介**（選べる専攻の違いを示す）: 吹き出し見出しと説明帯の下に、写真・黒の説明・緑の専攻名のカードを2×2で並べる
4. **目指す職業**（卒業後の進路を具体的に見せる）: 緑のラベルを付けたグレーのボックスに、四角い行頭記号の職種を4列で並べる
5. **4つのポイント**（学校の強みを伝える）: 写真のバナーに吹き出しを重ねる。その下に丸数字・見出し・説明・写真を2×2で並べる
6. **2年間のプロセス**（カリキュラムを時系列で示す）: 左に緑の縦帯でステージを示し、右に授業カードを2〜3列で並べ、ステージ間を点線で区切る
7. **特設トピック**（施設・部活動・インターンシップを訴求する）: ハッチングを入れたグレーのボックスに吹き出し見出しを重ね、写真と説明を入れる
8. **カリキュラム一覧**（全授業を一覧で要約する）: 緑の細枠カードを2×2で置き、それぞれにリストを2列で入れる
9. **オープンキャンパス誘導**（体験イベントへ送客する）: 深い緑の見出しバーの付いたバナーにし、人物の写真と強調文、緑のボタンを入れる
10. **ブログ**（学生生活のリアルな様子を見せる）: 正方形に近いサムネイルを5列で並べ、下に緑の日付帯を付ける
11. **CTA・フッター**（資料請求と各導線へ誘導する）: 写真付きのバナーを4つ並べ、先頭をマゼンタの資料請求にする。下に黒いナビ帯と、丸い人物写真の列を置く

## Imagery

- CG・VFX作品は高彩度で、ネオンや宇宙など暗い背景の映える写真にする
- 授業風景は、スタジオ・PC作業・グリーンバックなど現場感のあるスナップにする
- 学生の写真は自然な表情で、複数人が作業しているカットにする
- 装飾は、ストライプ・ドット・斜線ハッチングの幾何学パターンに限る
- 円形のエンブレムは、緑の円に白の太文字の頭文字を入れる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央寄せの固定幅で、外側はグレーの地にする。SPでは全幅にする
- ファーストビューは、SPで見出し面を上、写真コラージュを下に縦積みにする
- 2×2や3列の写真グリッドは、SPで2列に減らす
- 学年ステージの縦帯は、SPでは各ステージ先頭の横帯ラベルに置き換える
- ブログは、SPで2列か横スクロールにする
- 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-19eec335`（元 LP の URL から採番）
- **元 LP**: http://www.tdg.ac.jp/dept/visualimage/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-13、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。