--- version: alpha name: Vivid Gradient Youth School LP description: 水色を基調に、黄緑・オレンジ・ピンク・紫のグラデーションカードを並べた明るい高校の学校案内 LP。英字の大見出しと白黒の線画イラストを組み合わせ、元気さと親しみやすさを出している。 colors: primary: '#1AB9CF' background: '#FFFFFF' background-alt: '#E8F6F7' tint-1: '#DFF1D7' tint-2: '#C8F0F2' cta: '#20C6DC' on-cta: '#FFFFFF' accent-1: '#8BDB4B' accent-2: '#FB8A4E' accent-3: '#F19092' secondary: '#A399DE' text: '#323330' dark-section: '#49818E' marker: '#BDDC6C' cta-accessible: '#158290' accent-1-accessible: '#4A841A' accent-2-accessible: '#CF4B05' primary-accessible: '#128292' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Montserrat fontSize: 34px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Pacifico fontSize: 24px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 32px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 54px button-apply: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px card-nav-gradient: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 180px card-course: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 360px heading-section: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px badge-category: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px link-more: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px bar-fixed: backgroundColor: '{colors.background}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — 虹色グラデの爽やか高校案内 LP（Vivid Gradient Youth School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、清潔・爽やか、親しみ・手作り感 - **キーワード**: 虹色グラデーション・水色ベース・英字見出し・白黒線画イラスト・角丸カード・ピル型ボタン - **地の質感**: フラットな面に鮮やかな線形グラデーション。背景に淡い虹色のぼかしをうっすら敷く - **形**: 角丸 8〜16px のカードと、完全なピル型ボタン。丸い矢印アイコン - **温度感**: 明るく爽やかで、少し暖かみもある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1AB9CF` | 英字見出し・ブランドの水色 | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白い地 | 20% | 画素の実測 | | `background-alt` | `#E8F6F7` | コース紹介セクションの淡い水色地 | 20% | 画素の実測 | | `tint-1` | `#DFF1D7` | 受験案内セクションの淡い緑地 | 4% | 画素の実測 | | `tint-2` | `#C8F0F2` | 説明会セクションの淡い水色地 | 4% | 画素の実測 | | `cta` | `#20C6DC` | 予約・問い合わせボタン（水色→ミントのグラデ） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#8BDB4B` | 黄緑グラデカード・出願ボタン | 4% | 画素の実測 | | `accent-2` | `#FB8A4E` | オレンジグラデカード | 4% | 画素の実測 | | `accent-3` | `#F19092` | ピンクグラデカード | 4% | 画素の主要色に補正 | | `secondary` | `#A399DE` | 紫→青グラデカード | 3% | 画素の実測 | | `text` | `#323330` | 本文・見出しの濃いグレー黒 | 3% | 画素の実測 | | `dark-section` | `#49818E` | フッターのくすんだ青緑 | 5% | 画素の実測 | | `marker` | `#BDDC6C` | NEWバッジの黄緑 | 0% | 画素の実測 | | `cta-accessible` | `#158290` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#4A841A` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#CF4B05` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#128292` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色を交互に切り替え、セクションを区切る - 導線カードは黄緑・オレンジ・ピンク・紫青・水色ミントの 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（白の太い斜体の手書き風） | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | 0.0em | | `headline-lg` | セクションの英字大見出し | 欧文サンセリフ | Montserrat | 700 | 34px | 1.2 | 0.02em | | `headline-md` | カードの項目名（白） | ゴシック | Noto Sans JP | 500 | 26px | 1.4 | 0.02em | | `headline-sm` | 英字見出し下の日本語小見出し・リード見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.1 | 0.05em | | `note` | カード内の説明文・日付 | ゴシック | Noto Sans JP | 700 | 13px | 1.8 | 0.05em | | `accent` | FV の英字筆記体サブコピー | 欧文スクリプト | Pacifico | 400 | 24px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.05em | - セクション見出しは水色の英字大見出し＋下に黒の日本語小見出しを中央揃えで重ねる - 本文は行間を約 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 ```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-42cc0d80`（元 LP の URL から採番） - **元 LP**: https://www.daisho.ac.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。