--- version: alpha name: Pastel Gradient Campus Pop LP description: セクションごとに水色・ピンク・ミント・クリーム・薄紫のパステルグラデ地を切り替える大学案内 LP。3D風の文具オブジェクトと、曲線に沿って流れる欧文セリフのテキストで遊びを出している。白カードとグラデのピル型ボタンで、情報量の多さを読みやすく整理している。 colors: primary: '#5D80A0' background: '#FFFFFF' background-alt: '#EBF8FF' tint-1: '#FFDEF3' tint-2: '#FFF6B2' accent-1: '#6AC27D' cta: '#FD9B2C' on-cta: '#FFFFFF' secondary: '#6492E9' accent-2: '#C9962E' text: '#2A2228' surface: '#EDF0F0' dark-section: '#2575B2' primary-accessible: '#557491' secondary-accessible: '#3571E2' accent-1-accessible: '#378548' cta-accessible: '#B25F02' typography: display: fontFamily: Klee One fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' quick-link-icon: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px anchor-button: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px course-button: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 80px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px category-pill: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px rank-medal: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 110px stat-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 150px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 520px faq-row: textColor: '{colors.text}' typography: '{typography.body-md}' height: 36px --- # DESIGN.md — 水色グラデと3D小物の大学案内 LP（Pastel Gradient Campus Pop LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 清潔・爽やか、ポップ・元気、信頼・誠実、情報量多め・訴求型 - **キーワード**: パステルグラデーション・3D文具オブジェクト・曲線テキスト・白カード・ハッシュタグ見出し・実績メダル - **地の質感**: なめらかなグラデ地。写真は明るくクリアで、3D風の小物を浮かせて立体感を出す - **形**: 角丸カード、ピル型ボタン、円形アイコン、波打つリボン - **温度感**: 明るく爽やかな寒色が基調。セクションによってピンクやクリームで暖かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5D80A0` | ハッシュタグ見出し・ブランドの青 | 3% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 26% | 画素の実測 | | `background-alt` | `#EBF8FF` | 水色グラデセクションの地 | 12% | 画素の実測 | | `tint-1` | `#FFDEF3` | 国家試験実績セクションのピンク地 | 6% | 画素の実測 | | `tint-2` | `#FFF6B2` | 就職セクションのクリーム地 | 6% | 画素の実測 | | `accent-1` | `#6AC27D` | 学科ボタン・キャンパスボタンの緑 | 5% | 画素の実測 | | `cta` | `#FD9B2C` | 主CTA（医療系特設）のオレンジ | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 | | `secondary` | `#6492E9` | アンカーボタンの青紫グラデ | 2% | 画素の実測 | | `accent-2` | `#C9962E` | 実績メダルの金 | 1% | 推定 | | `text` | `#2A2228` | 見出し・本文の濃い墨色 | 4% | 推定 | | `surface` | `#EDF0F0` | 学部・声カードの薄灰色 | 10% | 画素の主要色に補正 | | `dark-section` | `#2575B2` | フッターの青 | 3% | 画素の実測 | | `primary-accessible` | `#557491` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#3571E2` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#378548` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#B25F02` | AA を満たす補正値（計算） | | 計算 | - 地の色はセクションごとに水色→ピンク→ミント→クリーム→薄紫と変え、上下をグラデで白につなぐ - 見出しの「#〇〇」は青、サブ見出しと本文は濃い墨色にする - ボタンは寒色グラデのピル型にする。最も強い誘導だけオレンジにする - キャンパスや所在地のラベルは緑・青・赤で色分けし、ボタン色もそれに合わせる - 実績の数字は金色のメダル、項目名は青い帯で見せる - フッターは青のベタ塗りにして、文字は白にする - `quick-link-icon` は文字 `#5D80A0` × 背景 `#EBF8FF` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#557491`、4.52:1）を使う。 - `anchor-button` は文字 `#FFFFFF` × 背景 `#6492E9` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3571E2`、4.55:1）を使う。 - `course-button` は文字 `#FFFFFF` × 背景 `#6AC27D` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#378548`、4.55:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#FD9B2C` のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B25F02`、4.63:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの手書き風キャッチ | 手書き・筆 | Klee One | 700 | 40px | 1.3 | 0.02em | | `headline-lg` | ハッシュタグ付きのセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.05em | | `headline-md` | 2行のサブ見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.04em | | `headline-sm` | カードタイトル・声の見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `note` | 注釈・学科名 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 曲線に沿う欧文テキスト・実績の大きな数字 | 欧文セリフ | Playfair Display | 400 | 28px | 1.1 | 0.08em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.05em | - セクション見出しには必ず「#」を付け、青で中央揃えにする - 見出しの下に、黒の太字で2行のサブ見出しを置く - 本文は左揃えにし、字間を少し広げて読みやすくする - 実績の数字は詰めた極太の書体にし、単位は小さくする - 欧文の装飾テキストはセリフ体の大文字にし、曲線に沿わせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（ボタンと実績は2列） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算） - 見出し・サブ見出し・本文・コンテンツの順に、縦に積み重ねる - カードは左右16pxの余白で横いっぱいに置き、間隔は16〜20pxにする - 実績メダルは先頭の1つを大きく中央に置き、残りを2列で並べる - セクションの区切りには、曲線の欧文テキストと3D小物を挟む - FV直下に、円形アイコンのクイックリンクを2×2で置く ## Elevation & Depth - 白カードには弱く広いドロップシャドウを付ける - 灰色カードは上から下へ薄いグラデにし、影はほぼ付けない - グラデボタンにはごく薄い影を付ける - 3Dオブジェクトは柔らかい影と光沢で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: カード上部に横長の矩形で載せ、上の角だけ丸める - **セクション境界**: グラデで溶かす。曲線リボンと欧文テキストの波形で区切る - ボタンはすべてピル型にし、右端に円形の矢印アイコンを付ける - ラベルは小さな角丸の四角にする - 吹き出しは白い四角に小さなしっぽを付ける - クイックリンクは円形のグラデアイコンにする ## Components - **円形クイックリンク**（`quick-link-icon`）: グラデの円形アイコンと青い2行ラベルを横に並べ、2×2で配置する - **ハッシュタグのアンカーボタン**（`anchor-button`）: 寒色グラデのピル型。中央に「#項目名」、右に下向き矢印を置き、縦に積む - **学科リンクボタン**（`course-button`）: 緑グラデの角丸ブロック。左上にキャンパスラベル、小さな学科名、太字のコース名を置き、右に白丸の矢印を付ける - **特設サイトへのCTA**（`button-primary`）: オレンジグラデのピル型。2行の白文字と、右に白丸の矢印を置く - **黒ピルの区分ラベル**（`category-pill`）: 黒地に白文字の小さなピルを中央に置き、区分の見出しにする - **実績メダル**（`rank-medal`）: 王冠と放射線の装飾に、金色の大きな順位の数字を入れる。下に青いピル帯で項目名を置く - **数値カード**（`stat-card`）: 白カードに青い見出し、フラットなイラスト、極太の大きな数字を載せる - **在学生の声カード**（`voice-card`）: 写真の下に、青い見出し、本文、イニシャル、所属を置く。地は灰色グラデ - **Q&Aの行**（`faq-row`）: 白い小さな四角に入ったQ、質問文、右端の＋を並べる。行の間は細い線で区切る ## Do's and Don'ts **Do** - セクションごとにパステルの地色を変え、グラデで滑らかにつなぐ - 3D風の文具や玩具を余白に浮かべ、遊び心を出す - セクション見出しは「#」付きの青文字に統一する - 数値の実績は大きく太い数字で見せる - ボタンはピル型にし、右に矢印アイコンを付けて統一する **Don't** - 濃い原色をベタ塗りで地に使わない（フッター以外） - 角張ったボタンや細すぎる線のボタンは使わない - 写真に暗いフィルターをかけない - 1セクションに強調色を3色以上混ぜない - 見出しを左揃えにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（学生の活気と世界観を伝える）: 角丸の大きなビジュアルに、学生写真、3D小物、手書き風の大きなキャッチを重ねる 2. **クイックリンク**（申込・相談・資料請求へ誘導する）: 円形グラデのアイコンとラベルを2×2で並べる 3. **コンセプト**（教育理念を伝える）: 水色グラデ地に紺の見出しを置き、短い文を中央に並べ、最後を大きな一文で締める 4. **目次**（強みを6つ示し、各項目へ飛ばす）: 曲線の欧文テキストと写真の下に、グラデのアンカーボタンを縦に6本並べる 5. **学部紹介**（学部と学科の幅広さを見せる）: 黒ピルで区分を示し、写真付きのカードと緑の学科ボタンを並べ、最後にオレンジのCTAを置く 6. **実績**（資格の合格実績を証明する）: ピンク地に、王冠付きの金メダルを2列で並べる 7. **教育の特徴**（独自の教育サイクルを説明する）: 青からピンクへのグラデのリング図に、白丸のキーワードを配置する 8. **教員との距離**（手厚いサポートを伝える）: ミント地に白い吹き出しを4つ置き、下に面談の写真を入れる 9. **キャンパス紹介**（立地と施設を示す）: 青い地図のイラストの下に、建物写真のカードを並べる。カード下端のボタンはキャンパスごとに色を変える 10. **就職実績**（就職の強さを数値で示す）: クリーム地に、ドーナツグラフ、折れ線グラフ、数値カード、プログラム紹介のカードを置く 11. **在学生の声**（リアルな体験で信頼を作る）: 写真、青い見出し、本文、イニシャルのカードを縦に並べる 12. **よくある質問**（不安を解消する）: 薄紫地に、カテゴリ見出しの番号付き青文字と、Q＋アコーディオンのリストを置く 13. **フッター**（ページ内リンクと著作権表示）: 青のベタ地に、白文字のリンクを2列で並べる ## Imagery - 写真は明るい室内で撮った自然な学生の表情。白飛び気味のクリアな色調にする - 3D風の鉛筆、本、ぬいぐるみ、注射器などを、光沢のある質感で浮遊させる - 波打つリボンに、セリフ体の欧文を沿わせた装飾を入れる - 人物はフラットなイラストで描き、青い服とシンプルな線にする - 地図や図解は青のグラデと白のシンプルな表現にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはコンテンツ幅を約1000pxの中央寄せにする - アンカーボタンはPCで3列×2段にする - 学科ボタンはPCで3列グリッドにする - 学部やお客様の声のカードは、PCで写真を左・文章を右の横並びにする - 数値カードやプログラムのカードは、PCで2〜3列にする - FAQはPCで2列にし、フッターのリンクは横1行に並べる ## 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-140f672f`（元 LP の URL から採番） - **元 LP**: https://www.thu.ac.jp/lp/about-thu/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。