DESIGN.md — ライムネオン×グレー方眼のダンス専門学校LP（Neon Lime Street Dance School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: 蛍光ライム・方眼グリッド・ステージ写真・流れる欧文テキスト・手書き線・ストリート
• 地の質感: ライトグレーの地に細い白の方眼線。写真はライブ照明のビビッドな色。
• 形: 角丸の写真フレームと白カード、楕円の人物切り抜き、大きな円形CTA
• 温度感: ニュートラルなグレーに蛍光色で熱量を足す

Colors

• 地はライトグレー＋方眼。白は情報カードと区切りの帯にだけ使う。
• 蛍光ライムは欧文見出し・下線マーカー・POINTバッジに限って使う。
• ライムの上の文字は黒にする（白にはしない）。
• 職種ごとにライム／紫／オレンジのラベル色を割り当てて色分けする。
• 最後のCTAはオレンジ（主）とライム（資料請求）の2色の円で並べる。
• 濃紺のステージ写真帯は1〜2カ所だけ入れて、メリハリを出す。
• circle-cta は文字 #FFFFFF × 背景 #FE621D のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D54201、4.56:1）を使う。
• float-tab は文字 #FFFFFF × 背景 #FE621D のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D54201、4.56:1）を使う。

Typography

• 欧文見出しの右下に筆記体のサブコピーを重ねる。
• 和文見出しはキーワードだけライムまたはオレンジにし、太い下線マーカーを引く。
• 番号は細めの大きな数字で、斜線の装飾を添える。
• 本文は中央揃えで短く改行する。カード内は左揃えにする。
• 流れるテキストの帯は、欧文の太字と細字を交互に並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。講師やプロジェクトのカードは横スクロールにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 各POINTは横に流れるテキスト帯＋中央のピル型番号バッジで始める。
• コース紹介は方眼の枠内で、写真とカードを左右交互にずらして重ねる。
• インタビューは写真を横一列に並べ、人物切り抜きを中央に重ねる。
• 白い帯のセクションとグレー地のセクションを交互に置く。
• 最後に大きな円形CTAを2つ並べる。

Elevation & Depth

• 影はほぼ使わず、細い黒線や枠で輪郭をつける。
• カードは白地に1pxのグレーの枠と、ごく薄い影。
• 写真の上に吹き出しカードを重ねて奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。人物は楕円に切り抜くか、背景を抜いて全身を見せる。CTAは正円。
• セクション境界: 直線で区切り、横に流れるテキスト帯を境目に置く。
• バッジやタグはピル型にする。
• 動画や写真のカードは黒い太めの角丸フレームで囲む。
• 手書き風の曲線やハートを見出しにあしらう。
• 円形CTAのふちに欧文を円弧状に配置する。

Components

• 流れるテキスト帯（marquee-band）: 白い帯の上に欧文フレーズとアイコンを繰り返し並べ、横に流す。
• POINT番号バッジ（point-badge）: 帯の中央に置くピル型のバッジ。色はライム・紫・オレンジ。
• 欧文＋筆記体の見出し（section-title-en）: ライムの太い欧文に筆記体を重ねる。上に小さな白いピル型ラベルを置く。
• 職種・コースのラベル（label-tag）: 黒・紫・オレンジの帯に白文字で載せるラベル。
• 白い情報カード（info-card）: 白地に枠線を付け、見出しと短い説明を入れる。写真の端に重ねて置く。
• 講師カード（teacher-card）: モノクロ寄りのポートレートに、名前をライムで載せる。下に説明文を置き、横スクロールで見せる。
• 円形CTA（circle-cta）: 大きな正円の中に吹き出し・アイコン・ラベル・矢印を入れる。ふちには欧文を円弧状に並べる。
• 追従タブ（float-tab）: 画面の右端に固定する、小さなオレンジのオープンキャンパスタブ。

Do's and Don'ts

Do - 地にはグレーの方眼を敷き、蛍光ライムを差し色にする。 - 写真は照明の効いたステージ写真やレッスン中のスナップを使う。 - 欧文見出しには筆記体を重ねる。 - 職種やコースは色付きのラベルで区別する。 - セクションの区切りには流れるテキスト帯を使う。

Don't - ライムを本文や広い面に使わない。 - グラデーションや強い影を入れない。 - 明朝体などの上品な書体は使わない。 - 写真を角丸なしの四角で並べるだけにしない。 - 差し色を4色以上に増やさない。

Page Structure

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

1. ファーストビュー（世界観を伝え、つかむ）: 左上にライムの面と欧文キャッチ＋手書き枠を置き、角丸のステージ写真を大きく見せる。下に流れる大型の欧文を入れる。
2. 導入メッセージ（将来の可能性を伝える）: 中央揃えの太字見出しと短い本文を置く。
3. インタビュー目次（卒業生の進路を一覧で見せる）: 番号・職種・楕円の人物写真を3つ横に並べる。
4. 先輩インタビュー（具体的な将来像を見せる）: 横一列の写真の上に人物の切り抜きと色ラベル付きの見出しを重ね、吹き出しカードでQ&Aを載せる。
5. 動画・地域紹介（学校の雰囲気を伝える）: 濃い色の動画帯を置き、その下に中央揃えの本文を置く。
6. 特長POINT1 講師（プロから学べることを示す）: 動画と講師プロフィールのカードを置き、講師カードは横スクロールで見せる。
7. 特長POINT2 実践（現場経験を示す）: イベント写真のカルーセルと、企業プロジェクトのカードを3列で並べる。
8. 特長POINT3 施設（設備の良さを見せる）: スタジオ写真を横スクロールで見せ、お気に入りスポットを円形写真と吹き出しで紹介する。
9. コース紹介（学年制ごとのコースを提示する）: 方眼の枠内で、写真と白カードを左右交互にずらして配置する。
10. CTA（オープンキャンパスへの参加と資料請求を促す）: オレンジとライムの大きな円形ボタンを2つ並べる。
11. フッター（締めくくる）: 欧文キャッチと空欄の手書き枠を置き、ロゴと著作権表示を入れる。

Imagery

• 紫や青のスポットライトが当たったステージ写真を使う。
• レッスン中や仲間と笑うスナップは自然光で撮る。
• 人物は白抜きで切り抜き、全身を立ちポーズで見せる。
• 手書きの曲線・ハート・キラキラ線を添える。
• 小さな絵文字風のアイコンをラベルの横に置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に幅約900pxのコンテナを置く。SPは1カラムにする。
• インタビューの3人はSPで縦に並べるか、横スクロールにする。
• コースの交互配置は、SPでは写真→カードの縦積みにする。
• 円形CTAはSPで縦に2つ並べ、直径を約280pxにする。
• 流れるテキスト帯はSPでも残し、文字を小さくする。

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 行書くと起動時に読み込まれる。