--- version: alpha name: Fresh Mint Gradient Medical College LP description: 白に近い淡いミント〜クリームのグラデーション地に、鮮やかなミントグリーンを差し色にした医療系大学のサイト。細い欧文の英字見出しと手書き風のコピー、角丸の写真カード、丸い矢印ボタンで、清潔で親しみやすい印象を作っている。 colors: primary: '#02C993' cta: '#02C993' on-cta: '#FFFFFF' secondary: '#FEE525' background: '#F5FBFB' surface: '#FFFFFF' background-alt: '#E7FAF4' tint-1: '#F5FBFB' text: '#040505' text-muted: '#808080' accent-1: '#53B194' tint-2: '#B8E1CE' line: '#EFF6F6' on-dark: '#FFFFFF' primary-accessible: '#018763' cta-accessible: '#018763' typography: display: fontFamily: Poppins fontSize: 44px fontWeight: 200 lineHeight: 1.1 accent: fontFamily: Yomogi fontSize: 34px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px 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.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 58px fixed-cta-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 58px circle-arrow: backgroundColor: '{colors.primary}' rounded: '{rounded.full}' height: 48px section-title: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 100px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 280px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 320px line-label: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 30px sns-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 100px text-link: textColor: '{colors.text}' typography: '{typography.body-md}' height: 24px --- # DESIGN.md — ミント緑×淡グラデの医療系大学LP（Fresh Mint Gradient Medical College LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル - **キーワード**: ミントグリーン・淡いグラデーション地・細い英字見出し・手書きコピー・角丸写真カード・ドット装飾 - **地の質感**: 白〜淡ミント〜淡クリームが広く混ざるグラデーション地に、半透明のドット柄の十字や円をうっすら重ねる - **形**: 角丸12px前後のカード、ピル型ボタン、丸い矢印ボタン、写真の右下をくり抜いて丸ボタンを置く - **温度感**: やや涼しげで明るく、やわらかい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#02C993` | ブランド色・CTA面・フッター地 | 8% | 画素の実測 | | `cta` | `#02C993` | 固定バーの主ボタン（資料請求） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 緑ボタン上の文字 | 1% | 画素の主要色に補正 | | `secondary` | `#FEE525` | サブCTA（受験生向け）の黄色 | 1% | 画素の実測 | | `background` | `#F5FBFB` | ページ全体の淡い地色 | 40% | 画素の実測 | | `surface` | `#FFFFFF` | カード面 | 15% | 画素の実測 | | `background-alt` | `#E7FAF4` | 受験生向けバナー帯の淡ミント | 6% | 画素の実測 | | `tint-1` | `#F5FBFB` | グラデーションに混ざる淡クリーム | 4% | 画素の実測 | | `text` | `#040505` | 見出し・本文の濃い文字 | 3% | 画素の実測 | | `text-muted` | `#808080` | カテゴリ等の補助文字 | 1% | 画素の実測 | | `accent-1` | `#53B194` | 英字見出し・日付・小見出しの緑文字 | 1% | 画素の実測 | | `tint-2` | `#B8E1CE` | ドット装飾の淡いミント | 3% | 画素の主要色に補正 | | `line` | `#EFF6F6` | カード影・区切り線 | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 緑フッター上の白文字 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#018763` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#018763` | AA を満たす補正値（計算） | | 計算 | - 地は白〜淡ミント〜淡クリームのごく薄いグラデーションにし、真っ白一色にはしない - ミントグリーンは英字見出し・日付・丸い矢印ボタン・主ボタンにだけ使う - 黄色は固定バーのサブ導線1か所にだけ使う - フッターは全面をミントグリーンにして白文字を置く - カードは白い面にごく薄い影をつけ、地との差を出す - 本文は黒に近いグレーにし、緑の文字は小見出しまでに限る - `button-primary` は文字 `#FFFFFF` × 背景 `#02C993` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018763`、4.52:1）を使う。 - `fixed-cta-bar` は文字 `#FFFFFF` × 背景 `#02C993` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#018763`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Poppins | 200 | 44px | 1.1 | 0.0em | | `accent` | ファーストビューと受験生バナーの手書きコピー | 手書き・筆 | Yomogi | 400 | 34px | 1.3 | 0.02em | | `headline-lg` | 細い字で書く和文のリード見出し | ゴシック | Zen Kaku Gothic New | 300 | 28px | 1.5 | 0.05em | | `headline-md` | 専攻名などの見出し | ゴシック | Noto Sans JP | 500 | 26px | 1.4 | 0.05em | | `headline-sm` | 英字見出しの下に添える和文、カードの見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `note` | 日付・カテゴリ・注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - セクション見出しは、緑の極細英字を大きく置き、下に黒の和文を小さく添える2段にする - リードの見出しは細い和文で大きく、改行を多めにしてゆったり見せる - 手書き風の書体はファーストビューとバナーのコピーだけに使う - 写真の上に置く英字の頭文字は白の極細体で大きくし、横に小さな英字を添える - 本文は行間を1.9程度に広めにとる - 小見出しは緑字で「」を付けた短い言葉にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムが基本。PICK UP・NEWS・特色カードは 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約19pxで統一する - セクション見出しは中央揃え、本文は左揃え - 2列カードの間は約10pxにする - 画面下に資料請求・サブ導線・メニューの3つを並べた固定バーを置く - 『詳しく見る』『もっと見る』の文字リンクは右寄せにする ## Elevation & Depth - カードには、ぼかしが大きく薄い影（0 2px 8px rgba(0,0,0,0.05) 程度）をつける - ボタンは影をつけず平らに塗る - SNSカードも白い面に薄い影をつける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸12〜16pxの長方形。主な写真は右下の角をくり抜き、そこに丸い矢印ボタンを置く - **セクション境界**: 境界線は入れず、グラデーション地で続ける。フッターだけ緑の面で切り替える - 主ボタンは全幅のピル型にし、右端に細い山形の矢印を置く - 矢印ボタンは直径48px程度の緑の丸 - 特色カードは、写真と本文の境目に円形のアイコンを重ねる - 装飾は、ドット柄の十字と円を半透明で背景に置く ## Components - **全幅ピル型の主ボタン**（`button-primary`）: 緑の地に白の太字を中央に置き、右端に細い矢印を付ける - **下部の固定導線バー**（`fixed-cta-bar`）: 緑の資料請求、黄色のサブ導線、白地のメニューの3つを並べる。ボタンにはアイコンを付ける - **丸い矢印ボタン**（`circle-arrow`）: 緑の円に白い山形矢印を置く。写真の右下や「もっと見る」の横に置く - **英字＋和文のセクション見出し**（`section-title`）: 緑の極細英字を大きく置き、下に黒の和文を小さく添える。中央揃え - **お知らせカード**（`news-card`）: 白の角丸カードに、サムネイル、緑の日付、灰色のカテゴリ、太字のタイトルを縦に並べる - **特色カード**（`feature-card`）: 上半分を写真、下半分を白地にし、境目に緑の円形アイコンを重ねる。下に中央揃えの短い文を置く - **二重線つきのラベル見出し**（`line-label`）: 緑の文字の左右に、緑の二重線を横に伸ばす - **SNSリンクカード**（`sns-card`）: 白の横長カードの左にロゴを置き、右に名前とアカウント名を2行で並べる - **下線つきの文字リンク**（`text-link`）: 下線を引いた文字の右に小さな山形矢印を付ける ## Do's and Don'ts **Do** - 地は淡いミントとクリームのグラデーションにし、軽さと清潔感を保つ - 英字見出しは極細体で大きく、緑で置く - 写真は角丸にし、明るく自然光の人物写真を使う - 導線は緑の丸ボタンとピル型ボタンでそろえる - 余白をたっぷりとり、1セクションに1テーマだけ置く - 手書きのコピーとイラストで、学生らしい親しみを加える **Don't** - 濃い色の地の帯をページの途中に何本も入れない - 緑以外の強い色を増やさない。黄色は1か所だけにする - 見出しに太い装飾体や影つき文字を使わない - 角の立った四角いボタンにしない - 写真に強いフィルターや暗い加工をかけない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと検索・アクセスへの導線を示す）: 白地の中央にロゴ、左右に緑の線画アイコンを置く 2. **ファーストビュー**（学びの特色をスライドで見せる）: 手書きのコピーの下に、角丸写真のスライダーを置く。写真には大きな英字と吹き出しのバッジを重ね、その下に見出し・説明・リンク・ページ送りの点を並べる 3. **ピックアップ**（資料請求や入試など主な導線をまとめる）: 斜線で挟んだ緑の英字見出しの下に、写真＋ラベル＋矢印の2列グリッドを並べる 4. **お知らせ**（最新の情報を伝える）: 極細の英字見出しの横に和文を添え、白カードの2列グリッドと、丸い矢印付きの「もっと見る」を置く 5. **特長**（学校の強みを伝える）: 英字見出し、細字のリード、本文、全幅ボタンの順に置き、その下にアイコン付き特色カードを2列で4枚並べる 6. **学科紹介**（専攻ごとの内容を案内する）: 大きな細字のリードと本文の後、二重線のラベルを置く。続けて専攻ごとに、英字の頭文字を重ねた大きな写真、緑の小見出し、大見出し、本文、リンクを並べる 7. **公式SNS**（SNSへ誘導する）: 二重線のラベルの下に、白の横長カードを3枚縦に並べる 8. **受験生向けバナー**（受験生向けサイトへ誘導する）: 淡いミントの帯に線画の人物イラストを配し、手書きのコピー、白抜きの大きな英字、丸い矢印付きの導線を置く 9. **フッター**（連絡先・資料請求・サイト内の案内）: 全面緑の地に白いロゴと住所、白い丸のSNSアイコン、白のピル型ボタン、＋で開閉するメニュー一覧を置く ## Imagery - 学生が白衣で実習する様子を、明るい自然光で撮る - 人物の笑顔や、手元の動作を大きく見せる構図にする - 淡い緑の地に大きな英字を敷いた、バナー風の写真合成を使う - 線画に緑のベタを塗った、元気なポーズの学生イラストを使う - 背景には、ドット柄の十字と円を淡いミントやクリームで半透明に置く - アイコンは緑の円の中に白い塗りの記号を置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは最大幅を約1100pxにして中央に寄せる - PCのファーストビューは、大きなスライドの右に次のスライドを少し覗かせる - PCでは、ピックアップと特色カードを4列、お知らせを2列の横長カード、専攻を2列にする - PCでは、学科紹介のリードと本文を左右2カラムに並べる - PCでは、ヘッダーに横並びのナビゲーションを置き、下の固定バーはなくす - PCのフッターは、メニュー3列と右側のバナー列で構成する ## 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-ff47f746`（元 LP の URL から採番） - **元 LP**: https://www.chitose-reha.ac.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。