DESIGN.md — 紺×水色斜め帯の子どもスポーツ教室 LP（Navy Diagonal Kids Sports School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、清潔・爽やか、ポップ・元気、情報量多め・訴求型
• キーワード: 濃紺・斜め帯・子どもの笑顔写真・番号付きカード・受賞バッジ・芝生と空
• 地の質感: フラットな単色面が基本。斜めの帯と芝生・青空の写真で動きを出す
• 形: 角が直線的なカードと、平行四辺形の斜め帯。ボタンは角が小さめの長方形
• 温度感: やや涼しめ。紺と水色が軸で、黄色と赤ピンクで温度を足す

Colors

• 地は白・淡い水色・薄グレーを交互に使い、セクションの切り替わりを見せる
• セクションの境目には濃紺と水色の斜め帯を入れる
• 見出しと主ボタンは濃紺。英字の小さなラベルは水色にする
• 黄色は店舗検索やメディア紹介など、目を引かせたい面だけに使う
• 赤ピンク系は本文の強調語と記事一覧ボタンだけにとどめる
• 実績には金色の受賞バッジと赤・緑のエンブレムを添える
• button-cta は文字 #FFFFFF × 背景 #ED7673 のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E32B26、4.53:1）を使う。

Typography

• 見出しは中央揃えにし、上に水色の小さな英字ラベルを置く
• 本文は中央揃えで短く改行し、読みやすい長さにする
• 強調したい語だけ赤ピンクの太字にする
• FV のキャッチは白文字を濃紺の斜め帯に乗せて傾ける
• 数字（会員数・順位）は大きく太くして目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真カードは 1 列、ナビ系カードは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は横長カードにして、左に写真、右に番号と本文を置く
• 実績は丸いアイコンと本文を横に並べ、下に線を引いて区切る
• 効果は番号付きの丸バッジを 5 個並べる
• セクションの終わりには、中央に濃紺の詳細ボタンを置く
• 店舗検索は濃紺の見出しセルと白セルの表で組む

Elevation & Depth

• カードは白地に薄い影を付けて、水色の地から少し浮かせる
• 受賞バッジやエンブレムは立体感のあるメダル調にする
• そのほかはフラットにし、強い影は使わない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のトリミング。アイコンだけ円形の線枠に入れる
• セクション境界: 濃紺と水色の三角形・平行四辺形を組み合わせた斜め帯
• 主ボタンは角が小さい長方形にする
• 記事一覧ボタンだけはピル型にしてよい
• 特長カードの番号は水色の三角タブに入れ、カードの角に置く
• ナビ系カードの角には水色の三角を付ける

Components

• 斜め帯区切り（diagonal-band）: 濃紺と水色の斜めの面を重ね、セクションの境目に入れる
• 英字ラベル付き見出し（section-heading）: 小さな水色の英字ラベルの下に、濃紺の太字見出しを中央に置く
• 番号付き特長カード（feature-card）: 左に写真、右に白地の本文を置く横長カード。角に水色の番号タブを付ける
• 濃紺の詳細ボタン（button-primary）: 中央に置く、白文字の濃紺の横長ボタン
• サーモンのピルボタン（button-cta）: 記事一覧に使う、白文字のピル型ボタン
• 受賞バッジ（award-badge）: 金や赤・緑のメダル型エンブレムに、紙吹雪の装飾を添える
• 効果の番号丸（effect-circle）: 黄色のギザギザ円の中に、番号と短い効果を書く
• 実績リスト行（achievement-row）: 左に円形の線枠アイコン、右にタイトルと本文を置き、下を線で区切る
• エリア検索表（area-table）: 黄色地の中に置く表。左は濃紺の地方名セル、右は白地の都道府県リンク

Do's and Don'ts

Do - セクションの境目に斜め帯を入れて、スポーツらしい動きを出す - 子どもとコーチが笑う屋外の写真を多く使う - 見出しの上に英字ラベルを必ず付ける - 実績は数字・バッジ・アイコンで目に見える形にする - 地の色を交互に変えて、長いページにリズムを付ける

Don't - 黒や暗い地を大きく使わない（フッター以外） - 黄色や赤を本文の地に多用しない - 角の大きい丸いカードにして、全体を柔らかくしすぎない - 明朝体や手書き書体を使わない - 見出しを左揃えにして、他の中央揃えと混ぜない

Page Structure

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

1. ファーストビュー（対象年齢と理念を一目で伝える）: 芝生の写真に子どもの切り抜きを置き、白抜きの斜めコピーを重ねる。下に数字バッジと受賞メダル
2. ナビゲーション（ページ内の各所へ移動しやすくする）: 濃紺の帯に、日本語と小さな英字を 2 段で並べる
3. 実績・No.1訴求（規模と評価で信頼を得る）: メダル型エンブレムを 2 つ並べ、紙吹雪で飾る。下に黄色枠のメディア掲載枠
4. 特長（5 つの強みを伝える）: 淡い水色の地に、番号付きの写真横長カードを縦に 5 枚並べる
5. 理念・指導方針（教育の考え方を伝える）: 小さなアイコン見出しと中央揃えの本文。写真カードを 3 列並べる
6. 動画紹介（雰囲気を映像で見せる）: 空と芝生の背景に、動画サムネイルのバナーを置く
7. データ・独自システム（成長を測る仕組みを説明する）: 赤い円のキャッチと画面キャプチャ。黄色の番号丸を 5 つ並べる
8. 実績一覧（受賞や連携先を並べて見せる）: 円形アイコンと本文を横に並べた行を、線で区切って縦に並べる
9. コラム紹介（役立つ情報への入口）: 淡い黄色の地に、イラストのバナーと記事カードを 3 枚。下にピル型ボタン
10. スクール紹介ナビ（詳しいページへ案内する）: 写真付きの小さなカードを 2×2 で並べる
11. まとめメッセージ（理念と規模をもう一度伝える）: 青空と芝生・サッカーボールの写真の上に、中央揃えの文章
12. エリア検索（近くの教室を探してもらう）: 鮮やかな黄色の地に、濃紺と白の地域表を置く
13. フッター（会社情報とサイトマップ）: 濃紺の地に、白いロゴと 2 列のリンク

Imagery

• 晴れた日の屋外グラウンドで、子どもとコーチが笑顔で写る写真
• ユニフォームは黄色と紺を中心にし、配色をそろえる
• 青空と緑の芝生のワイド写真を背景に使う
• メダル・リボン・紙吹雪のイラストで実績を飾る
• 実績アイコンは黒い線のシンプルなピクトグラムを丸枠に入れる
• コラムには手描き風のゆるいキャラクターを添えてよい
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅のコンテンツ。SP では幅 90% の 1 カラムにする
• 特長カードは SP では写真を上、本文を下に重ねる
• 写真カードの 3 列は、SP では 1 列か横スクロールにする
• ナビは SP ではハンバーガーメニューにまとめる
• 斜め帯は SP では高さを抑えて角度を保つ
• エリア表は SP でも 2 列のまま、文字を小さくする

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