--- version: alpha name: Pastel Aurora Two-Track University LP description: 淡い青白の地に、グリーンとパープルの2色で学科を色分けした大学の新学科告知 LP。虹色グラデーションの透け感、大きな欧文の透かし文字、黒線のフォルダ型カードで先進的で若々しい印象を作る。 colors: primary: '#33B972' secondary: '#AB66C1' background: '#F6FAFD' tint-1: '#E1F4E9' tint-2: '#F6EBF9' surface: '#FEFEFE' text: '#120B09' text-body: '#4A4A4A' text-muted: '#8F9091' cta: '#1A9946' on-cta: '#FFFFFF' accent-1: '#3EB9ED' accent-2: '#D8679B' background-alt: '#EBEDEC' marker: '#D9D4F7' accent-3: '#E0301E' cta-accessible: '#17883E' primary-accessible: '#258552' accent-1-accessible: '#107FAD' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em accent: fontFamily: Jost fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-jump: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-gradient: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 84px dept-header: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 70px point-item: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 150px tag-industry: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 36px card-vision: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 130px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 150px badge-new: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px banner-request: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 160px --- # DESIGN.md — 緑×紫オーロラの大学新学科 LP（Pastel Aurora Two-Track University LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: クール・先進的、清潔・爽やか、ポップ・元気、情報量多め・訴求型 - **キーワード**: 2色の色分け・オーロラグラデーション・透かし欧文・フォルダ型カード・番号付きポイント - **地の質感**: 白〜淡青のフラットな地に、ぼかした虹色の球体とグラデーションを薄く重ねる - **形**: 大きな角丸のパネルと細い黒線のカード、四角いタグボタン - **温度感**: やや寒色寄りの明るく軽い温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#33B972` | 学科A のテーマ色（見出し帯・タグ） | 8% | 画素の実測 | | `secondary` | `#AB66C1` | 学科B のテーマ色（見出し帯・タグ） | 4% | 画素の実測 | | `background` | `#F6FAFD` | ページ全体の地色 | 30% | 画素の実測 | | `tint-1` | `#E1F4E9` | 学科A セクションの淡い緑地 | 12% | 画素の実測 | | `tint-2` | `#F6EBF9` | 学科B セクションの淡い紫地 | 9% | 画素の実測 | | `surface` | `#FEFEFE` | カード・本文パネルの白 | 17% | 画素の実測 | | `text` | `#120B09` | 見出し・本文の黒 | 3% | 画素の実測 | | `text-body` | `#4A4A4A` | 説明文のグレー | 3% | 推定 | | `text-muted` | `#8F9091` | 注釈 | 0% | 画素の実測 | | `cta` | `#1A9946` | 学科ジャンプボタン（緑） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#3EB9ED` | 資料請求バナーの水色 | 2% | 画素の実測 | | `accent-2` | `#D8679B` | 看護系・強調のピンク | 1% | 画素の実測 | | `background-alt` | `#EBEDEC` | フッターのライトグレー | 2% | 画素の実測 | | `marker` | `#D9D4F7` | 本文の虹色マーカー | 0% | 推定 | | `accent-3` | `#E0301E` | 新設バッジの赤 | 0% | 推定 | | `cta-accessible` | `#17883E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#258552` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#107FAD` | AA を満たす補正値（計算） | | 計算 | - 地は淡青白で統一し、学科ごとに緑と紫の淡色地パネルで区切る - 学科の見出し帯・番号・小見出し・業界タグはその学科のテーマ色で塗る - テーマ色はブロック内で混ぜない。1ブロック1色 - ビジョンカードの強調語は緑・紫・水色・ピンクを順に使い分ける - CTAやメッセージ面は水色〜紫〜ピンクのオーロラグラデーションで華やかにする - 黒は細い枠線とアイコン背景に限定して締める - `button-jump` は文字 `#FFFFFF` × 背景 `#1A9946` のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#17883E`、4.54:1）を使う。 - `dept-header` は文字 `#FFFFFF` × 背景 `#33B972` のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258552`、4.61:1）を使う。 - `tag-industry` は文字 `#FFFFFF` × 背景 `#33B972` のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258552`、4.61:1）を使う。 - `banner-request` は文字 `#FFFFFF` × 背景 `#3EB9ED` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#107FAD`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | ゴシック | Zen Kaku Gothic New | 500 | 34px | 1.4 | 0.12em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.05em | | `headline-md` | 学科見出し帯・ポイント小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.75 | 0.02em | | `accent` | 英字ラベル・背景の透かし欧文 | 欧文サンセリフ | Jost | 500 | 14px | 1.2 | 0.08em | | `display` | 番号（1・2・3） | 欧文サンセリフ | Roboto | 700 | 34px | 1.0 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタン・タグ | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.05em | - 見出しは字間を広めに取り、軽やかに見せる - 英字の小ラベルを見出しの上に置き、背景に巨大なグラデーション欧文を透かす - 見出し下には左の縦線を添える - キャッチの一部の語を色文字で強調する - 手書き風の欧文スクリプトを蛍光黄色でアクセントに1箇所だけ置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、業界タグとビジョンカードは 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 学科ブロックは大きな角丸パネルで包む - ポイントは大きな番号＋縦線＋本文の横並び - 業界は同じ幅の四角タグを2列に並べる - 学部の構成は現状→新体制を下向き三角でつなぐ ## Elevation & Depth - 基本はフラットで、影はほぼ使わない - メッセージパネルだけ白地にごく薄い影 - ぼかした虹色の球体を背景に浮かせて奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。FV は写真を格子状に並べるタイル構成 - **セクション境界**: 上の角だけ大きく丸めたパネルで切り替える - 主ボタンは黒い細枠付きピル型 - ビジョンカードは左上にタブが付いたフォルダ型 - 業界タグと学部ボックスは角丸なし ## Components - **学科ジャンプボタン**（`button-jump`）: 学科色で塗った黒枠ピル。右端に下矢印 - **グラデーション CTA**（`button-gradient`）: 水色〜紫のオーロラ地に黒枠、2行テキストとダウンロードアイコン - **学科見出し帯**（`dept-header`）: 上角を丸めたテーマ色の帯に、白の学科名と小さい注釈 - **番号付きポイント**（`point-item`）: 左に大きなテーマ色の番号、縦線のあとに色付き小見出しと本文 - **業界タグ**（`tag-industry`）: テーマ色ベタに白文字の四角タグを2列で並べる - **フォルダ型ビジョンカード**（`card-vision`）: 白地黒細枠、左上に英字番号タブ、右下に黒い拡大アイコン - **英字ラベル見出し**（`section-label`）: 英字小ラベル＋左縦線付き日本語見出し＋背景の巨大グラデーション欧文 - **新設バッジ**（`badge-new`）: 赤ベタの小さいピルに白文字 - **資料請求・LINE バナー**（`banner-request`）: 水色と緑のベタ面に白文字と冊子画像またはQR、右下に矢印 ## Do's and Don'ts **Do** - 学科ごとのテーマ色を見出し・番号・タグ・枠線まで通して使う - 淡色地と白カードを交互に重ねて情報の区切りを作る - 背景の透かし欧文とぼかし球体で軽い先進感を出す - 強調語は多色で塗り分け、多様な学びを示す - 注釈を小さなグレー文字で添える **Don't** - 濃い色の地を広く使わない - 1つの学科ブロックに別学科の色を混ぜない - 重い影や立体的なボタンにしない - グラデーションを本文の背景に使わない - ビジョンカードの線を太くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新しく生まれ変わることと新学科を告知）: 上に写真のタイル格子、下に角丸の白地で字間の広い大見出しと色文字の学科名 2. **イベントバナー**（オープンキャンパスへ誘導）: 写真コラージュとパステルグラデーションの角丸バナー 3. **学科ジャンプ**（2つの学科へページ内で移動）: 緑と紫のピルボタンを縦に2つ 4. **新設告知見出し**（新学科の開設を宣言）: 英字ラベル＋縦線見出し＋巨大な透かし欧文 5. **学科A 紹介**（理念・学びのポイント・進路を伝える）: 淡緑パネルに緑の帯、キービジュアル、番号ポイント3つ、緑の業界タグ 6. **学科B 紹介**（同じ構成で2つ目の学科を伝える）: 淡紫パネルに紫の帯で学科Aと同じ型を繰り返す 7. **資料 CTA**（詳しい情報へ誘導）: オーロラグラデーションの黒枠ボタン 8. **メッセージ**（大学の変革を伝える）: 白パネルに多色キャッチ、虹色マーカーの本文、手書き欧文、ぼかし球体 9. **ビジョン一覧**（やりたいことから学科を探させる）: フォルダ型カード12枚を2列に並べ、強調語を多色にする 10. **学部構成**（新旧の学部体制を比べる）: 学部色の縦線ボックスから三角で新体制の色帯ボックスへつなぐ 11. **資料請求・LINE**（問い合わせ獲得）: 水色と緑の大きなバナーを縦に積む 12. **フッターナビ**（電話・問い合わせ・施設などへの導線）: グレー地に線画アイコン付き2×2グリッド ## Imagery - 学生が手でハートや枠を作る明るい表情の写真を格子状に並べる - テクノロジー・医療を連想させるタブレットやホログラム画像を混ぜる - 学科キービジュアルはフラットなイラストや和文タイポのポスター調 - 実習・授業の自然光のスナップ写真 - 背景には水色〜ピンク〜紫のぼかし球体とグラデーション欧文 - 線画の細いアイコンをフッターに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せで最大幅約900px - 学科紹介はビジュアルと本文を横並びにし、ポイントの写真は右に小さく置く - 業界タグは PC で4列 - ビジョンカードは PC で3列 - イベントバナーは PC で横長の比率に変える - 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-182ffe96`（元 LP の URL から採番） - **元 LP**: https://www.nupals.ac.jp/nuslp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。