--- version: alpha name: Navy Mincho Academic Feature LP description: 淡い青灰の地に白カードを重ね、紺の明朝見出しと二重罫線で知的に見せる大学の特集LP。数字は黄色マーカーで強調し、青いピル型ボタンで詳細ページへ誘導する。 colors: primary: '#2C4174' background: '#EAEDF2' surface: '#FFFFFF' cta: '#3372B3' on-cta: '#EDFEFF' marker: '#FEE101' text-body: '#333333' dark-section: '#2B4175' on-dark: '#FFFFFF' secondary: '#B5B9D2' accent-1: '#D3E1EA' text-muted: '#D1CAD5' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 27px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.15em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Noto Serif JP fontSize: 36px fontWeight: 700 lineHeight: 1.2 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 0px md: 4px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px heading-double-rule: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px inline-highlight-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 32px stat-marker: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 44px outline-label: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' height: 30px profile-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 310px point-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 100px circle-venn: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px diamond-map: backgroundColor: '{colors.accent-1}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 440px --- # DESIGN.md — 紺×淡グレーの明朝体で知的な大学特集LP（Navy Mincho Academic Feature LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 信頼・誠実、上品・高級、情報量多め・訴求型、清潔・爽やか - **キーワード**: 紺の明朝見出し・二重罫線・白カード・黄色マーカーの数字・反転帯の見出し・データ訴求 - **地の質感**: フラットな単色面。影は使わず、罫線と面の色差で区切る - **形**: 四角いカードと帯見出しが基本。ボタンだけピル型。円と菱形を図解に使う - **温度感**: やや寒色寄りで落ち着いている。黄色が温度を足すアクセント ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2C4174` | 見出し文字・反転帯・二重罫線の紺 | 8% | 画素の実測 | | `background` | `#EAEDF2` | ページ地の淡い青灰 | 30% | 画素の実測 | | `surface` | `#FFFFFF` | 情報カードの白 | 33% | 画素の実測 | | `cta` | `#3372B3` | 詳細ボタンの青 | 2% | 画素の実測 | | `on-cta` | `#EDFEFF` | ボタン上の白文字 | 0% | 画素の実測 | | `marker` | `#FEE101` | 数字を強調する黄色マーカー | 2% | 画素の実測 | | `text-body` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `dark-section` | `#2B4175` | ピックアップ紹介の濃紺面 | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃紺面上の白文字 | 1% | 画素の主要色に補正 | | `secondary` | `#B5B9D2` | 棒グラフ比較対象の淡い藤色 | 0% | 画素の実測 | | `accent-1` | `#D3E1EA` | 図解の円・菱形のくすみ水色 | 1% | 画素の実測 | | `text-muted` | `#D1CAD5` | 矢印記号・補助の灰紫 | 0% | 画素の実測 | - 地は淡い青灰、情報はすべて白カードに乗せる - 見出し・罫線・強調帯は紺 1 色で統一する - 数字の実績は黄色マーカーの帯の上に紺の明朝で置く - ボタンは紺より明るい青にして見出しと区別する - 濃紺の全面ブロックはピックアップ紹介の 1 か所だけにする - 図解はくすんだパステル（水色・緑・黄・桃）を低彩度で並べる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（紺の帯に白抜き） | 明朝 | Shippori Mincho | 700 | 30px | 1.5 | 0.02em | | `headline-lg` | 二重罫線で挟むセクション見出し | 明朝 | Noto Serif JP | 500 | 27px | 1.6 | 0.04em | | `headline-md` | 一部を反転帯にしたリード見出し | 明朝 | Noto Serif JP | 700 | 19px | 1.8 | 0.15em | | `headline-sm` | カード内の小見出し・企業名 | 明朝 | Noto Serif JP | 600 | 17px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `accent` | 実績の大きな数字 | 明朝 | Noto Serif JP | 700 | 36px | 1.2 | 0.0em | | `note` | 注釈・出身・年度 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.08em | - 見出しと数字は明朝、本文とボタンはゴシック - リード見出しは字間を 0.15em ほど広げて落ち着かせる - キーワードだけ紺の反転帯で白抜きにする - 数字は大きく、単位は小さくして差をつける - 見出しはセンター揃え、本文は左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。データ・人物カードは縦積み - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは左右に約 30px の余白を取り、地の青灰を見せる - セクション見出しは上下を二重罫線で挟み、カード幅いっぱいに広げる - カード同士の間は 16〜24px - データは枠線ラベルの下に数字マーカーを置く - カードの最後に青いピル型ボタンを中央に置く ## Elevation & Depth - 基本は影なしのフラットデザイン - カードは白面と地の色差だけで浮かせる - フッターのリンクボタンだけ薄い影を付ける ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は角丸なしの矩形。メインビジュアルは右上を斜めに切った平行四辺形 - **セクション境界**: 紺の二重罫線と、カード下端の下向き三角 - カード・枠・帯はすべて角丸 0 - ボタンだけピル型 - 図解は円の重なりと 45 度回した菱形で作る - 人物カードの右下に紺の正方形の矢印ボタンを置く ## Components - **詳細ピルボタン**（`button-primary`）: 青地に白文字の大きいピル型ボタン。カード下部の中央に置く - **二重罫線見出し**（`heading-double-rule`）: 紺の二重線で上下を挟んだ、センター揃えの明朝見出し - **反転キーワード帯**（`inline-highlight-band`）: 見出し内のキーワードだけを紺地の白抜きにする - **実績数字マーカー**（`stat-marker`）: 黄色の帯に紺の明朝の大きな数字。上に枠線ラベルを置く - **枠線ラベル**（`outline-label`）: 紺の細い枠に小さな明朝で項目名を入れる - **卒業生カード**（`profile-card`）: 上に仕事の一言、左に写真、右に企業名・氏名・学科。右下に紺の矢印 - **POINT 番号カード**（`point-card`）: 濃紺の面に白カード。左に POINT と大きな明朝数字、右に要点 - **円の重なり図**（`circle-venn`）: 紺の細線の円を重ね、中に費用項目を明朝で入れる - **菱形の業界マップ**（`diamond-map`）: 中央の文から矢印を放射状に出し、くすみ色の菱形を周りに配置 ## Do's and Don'ts **Do** - 見出しは紺の明朝でそろえる - 情報は必ず白カードに入れ、地の青灰を余白として見せる - 数字の実績は黄色マーカーで目立たせる - 比較はグラフで自社を紺、他を淡い藤色にする - 注釈は ※ を付けて小さく添える **Don't** - カードに角丸や強い影を付けない - 紺・青・黄以外の鮮やかな色を増やさない - 見出しをゴシックの太字にしない - 濃紺の全面ブロックを何度も使わない - 黄色を文字色に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャッチと学生の雰囲気を伝える）: 斜めに切った屋外の集合写真。右下にキャッチを紺帯の白抜きで 3 行重ね、その下にリード文 2. **学びの特長**（専門分野の広さを図で示す）: 二重罫線見出しの下に、中心テーマと分野の円を線でつないだネットワーク図 3. **留学制度**（留学プログラムを説明する）: 反転帯つきのリード、白カード、例を入れた紺枠ボックス、ピルボタン 4. **奨学金**（費用負担の軽さを数字で示す）: 円の重なり図、下向き三角、黄色マーカーの人数 5. **費用比較**（他校との差を見せる）: 棒グラフで自社を紺に。吹き出しラベルと比較表、ボタン 6. **国際性データ**（派遣・受け入れの実績を見せる）: 薄い世界地図の上にカード。枠線ラベルと黄色の数字、国別の人数リスト 7. **キャリア**（活躍できる業界を見せる）: 二重罫線見出しと、放射状に並べた菱形の業界マップ 8. **卒業生紹介**（具体的な就職先で信頼を得る）: 写真つきの白い人物カードを縦に 4 枚 9. **ピックアップ**（注目プログラムと在学生の声を伝える）: 濃紺の全面に人物写真、下線つきの小見出し、白い POINT カード 4 枚、ボタン 10. **アクセス**（立地のよさを伝える）: 所要時間を大きな明朝で。駅名を青い帯に入れ、校舎はフラットなイラスト 11. **関連リンク**（外部サイトへ誘導する）: 紺・黄・水色の横長ボタンを、矢印つきで縦に並べる ## Imagery - 学生が並ぶ全身写真は、自然光の屋外かシックな屋内。ファッション誌風にする - 人物写真は自然な笑顔のバストアップ。オフィスの背景をぼかす - 校舎は空色の背景のフラットなベクターイラスト - 地図・ネットワーク図は薄いグレーの線で控えめに描く - 図解の色面はくすんだパステルで、低彩度に抑える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 780px の固定幅。地は同じ青灰 - PC のファーストビューは写真を左、キャッチとリード文を右に重ねる - PC では奨学金・データ・人物・POINT カードを 2 カラムにする - PC ではアクセスの経路を横一列のフローにする - 見出しは PC で 1〜2 行にまとめる ## 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-47316162`（元 LP の URL から採番） - **元 LP**: https://manabi.benesse.ne.jp/daigaku/toppage/3646/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。