DESIGN.md — 虹色グラデの爽やか高校案内 LP（Vivid Gradient Youth School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感
• キーワード: 虹色グラデーション・水色ベース・英字見出し・白黒線画イラスト・角丸カード・ピル型ボタン
• 地の質感: フラットな面に鮮やかな線形グラデーション。背景に淡い虹色のぼかしをうっすら敷く
• 形: 角丸 8〜16px のカードと、完全なピル型ボタン。丸い矢印アイコン
• 温度感: 明るく爽やかで、少し暖かみもある

Colors

• 地は白と淡い水色を交互に切り替え、セクションを区切る
• 導線カードは黄緑・オレンジ・ピンク・紫青・水色ミントの 5 色グラデを順番に回す
• グラデーションは左上→右下の斜め方向で、隣り合う 2 色相をつなぐ
• 英字見出しはすべて水色の単色
• 主 CTA は水色→ミント、出願系は緑→黄緑のグラデのピル
• サブボタンは白地に黒文字、PDF などのラベルを小さい枠で添える
• フッターは写真に青緑を重ね、文字は白
• button-primary は文字 #FFFFFF × 背景 #20C6DC のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#158290、4.54:1）を使う。
• button-apply は文字 #FFFFFF × 背景 #8BDB4B のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4A841A、4.56:1）を使う。
• card-nav-gradient は文字 #FFFFFF × 背景 #FB8A4E のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CF4B05、4.5:1）を使う。
• card-course は文字 #FFFFFF × 背景 #8BDB4B のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4A841A、4.56:1）を使う。
• badge-category は文字 #FFFFFF × 背景 #1AB9CF のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#128292、4.53:1）を使う。

Typography

• セクション見出しは水色の英字大見出し＋下に黒の日本語小見出しを中央揃えで重ねる
• 本文は行間を約 2.1 と広くとり読みやすくする
• カードの文字はすべて白。項目名は大きく、説明は太字で小さく
• 強調したいリードは水色→ミントのグラデ文字にする
• FV キャッチは太い斜体で躍動感を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は導線カード 3 列×2 段、コースカード 5 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• カードは縦に 12px 前後の間隔で積む
• ニュースは横スクロールのカルーセルで左右に隣のカードを少し見せる
• コースカードは上に写真、下に色面のテキスト領域
• フォトギャラリーは大きさを変えた写真を 2 段の横スクロールで並べる
• 画面下にピル型ボタンを並べた固定バーを置く

Elevation & Depth

• 影はほぼ使わず、フラットな色面で階層を表す
• 固定フッターバーは半透明の白地で浮かせる
• 丸い矢印アイコンは白丸で、色面との対比で目立たせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。カードの上部に配置して下の色面とつなげる
• セクション境界: 直線で背景色を切り替える。波形や斜めは使わない
• CTA・サブボタンは完全なピル型
• 矢印アイコンは円形
• バッジは小さめのピル型
• カードの角丸は 12px 前後でそろえる

Components

• グラデーション主ボタン（button-primary）: 水色→ミントのピル。右端に白丸の矢印アイコン
• 出願ボタン（button-apply）: 緑→黄緑のピル。右端に白丸の外部リンクアイコン
• 白いサブボタン（button-secondary）: 白地に黒文字のピル。右端に枠線つきの小さな PDF ラベル
• グラデーション導線カード（card-nav-gradient）: 斜めグラデの色面に白文字の項目名と説明、右上に白丸矢印、右下に白黒線画の学生イラスト
• 写真つきコースカード（card-course）: 上に写真、下にグラデ色面とコース名・説明・矢印。カードごとに幅をわずかに変えてリズムを出す
• 英字＋和文の見出し（heading-section）: 水色の英字大見出しと、その下の黒い日本語小見出しを中央揃え
• カテゴリバッジ（badge-category）: 日付の横に置く水色・黄緑の小さなピルラベル
• 一覧へのテキストリンク（link-more）: 黒文字の右に水色の丸い矢印アイコン
• 画面下固定バー（bar-fixed）: 電話の白丸アイコンと、出願・説明会の 2 色グラデのピルを横に並べる

Do's and Don'ts

Do - グラデカードは色相をローテーションさせ、全体を虹色の流れにする - イラストは白黒の線画にして、カラフルな色面と対比させる - 英字見出しと和文小見出しのペアをすべてのセクションで統一する - 矢印は常に白丸または水色丸のアイコンで示す - 余白はたっぷりとり、セクション間は 80px 前後空ける

Don't - 濃い色や黒をセクションの地に使わない（フッター以外） - 影やエンボスで立体感を出さない - カード上の文字を黒にしない - 角ばったボタンを使わない - グラデーションを 3 色以上に複雑化しない - 明朝体を使わない

Page Structure

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

1. ファーストビュー（若さと躍動感を一目で伝える）: 虹色の帯が渦巻く背景に、走る生徒の切り抜き写真と白い太字斜体のキャッチ、英字の筆記体サブコピー
2. 紹介動画（学校の雰囲気を動画で伝える）: 校舎写真の角丸カードにグレーの半透明を重ね、ラベル・英字タイトル・再生ボタンを中央に置く
3. お知らせ（最新情報を伝える）: 写真・日付・カテゴリバッジ・タイトルを並べたカードの横スクロールと一覧リンク
4. 学校紹介（教育方針と特色を伝える）: 淡い虹色ぼかしの地に、グラデ文字のリードと行間の広い本文
5. 導線カード（行事・部活・施設・進路などの詳細ページへ誘導する）: 5 色グラデの角丸カードを 6 枚縦に並べ、白黒線画イラストと白丸矢印を添える
6. コース紹介（コースの違いを比べやすく見せる）: 淡い水色地に、写真＋グラデ色面のカードを縦に積む
7. フォトギャラリー（学校生活の楽しさを伝える）: 大きさの違う角丸写真とロゴを 2 段の横スクロールで並べ、もっと見るリンクを置く
8. 受験案内 CTA（出願と募集要項へ誘導する）: 淡い緑地に見出し＋丸矢印、緑グラデの出願ボタンと白い PDF ボタン
9. 説明会 CTA（説明会の予約を促す）: 淡い水色地に、水色グラデの予約ボタンと白いパンフレットボタン
10. フッター（連絡先と問い合わせ導線を示す）: 校舎写真に青緑を重ねた地に、白抜きロゴ・住所・SNS アイコン・問い合わせのグラデボタン

Imagery

• 写真は自然光で明るく撮った生徒の笑顔や授業・部活の様子
• FV は人物を切り抜き、カラフルな曲線の帯と組み合わせる
• イラストは太い黒の線と黒ベタだけのフラットな人物画で、カード右下からはみ出すように配置する
• 背景に淡い黄・ピンク・水色のぼかしグラデをうっすら敷く
• アイコンはシンプルな線画で、白丸や水色丸の中に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長にし、キャッチを 1 行にして人物を中央に置く
• PC のお知らせは左に見出し、右にカルーセルの 2 カラム
• PC の学校紹介は左に見出し、右に本文。導線カードは 3 列×2 段
• PC のコースカードは 5 列で横に並べる
• PC は受験案内と説明会を左右 2 分割で並べる
• SP は画面下に固定 CTA バーを出し、PC はヘッダー右上に丸いアイコンボタンを置く

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