DESIGN.md — ミント緑×淡グラデの医療系大学LP（Fresh Mint Gradient Medical College LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル
• キーワード: ミントグリーン・淡いグラデーション地・細い英字見出し・手書きコピー・角丸写真カード・ドット装飾
• 地の質感: 白〜淡ミント〜淡クリームが広く混ざるグラデーション地に、半透明のドット柄の十字や円をうっすら重ねる
• 形: 角丸12px前後のカード、ピル型ボタン、丸い矢印ボタン、写真の右下をくり抜いて丸ボタンを置く
• 温度感: やや涼しげで明るく、やわらかい

Colors

• 地は白〜淡ミント〜淡クリームのごく薄いグラデーションにし、真っ白一色にはしない
• ミントグリーンは英字見出し・日付・丸い矢印ボタン・主ボタンにだけ使う
• 黄色は固定バーのサブ導線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

• セクション見出しは、緑の極細英字を大きく置き、下に黒の和文を小さく添える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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。