DESIGN.md — ミント×生成りの上品な医療系大学 LP（Soft Mint Editorial University LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、信頼・誠実
• キーワード: くすみミント・生成り・細明朝・欧文セリフ見出し・白カード・丸矢印ボタン
• 地の質感: マットで平らな面。オープンキャンパス枠だけ薄い方眼の紙風の背景
• 形: 角丸の小さい白カード、円形の矢印ボタン、ピル型タブ。ミントの面を大きな矩形で斜めにずらして重ねる
• 温度感: やや温かい中間色。清潔でありながら柔らかい

Colors

• 地は白・生成り・ミントの3色だけを交互に使う
• ミントは大きな矩形の面として使い、セクションの片側にずらして敷く
• 文字は純黒にせず濃いグレーにする
• 黄色はバッジや新着マークだけに少し使う
• カードの地は白を基本にし、一部だけ淡い黄緑・淡い黄色にする
• 矢印ボタンは必ずミントの円にする

Typography

• 見出しは欧文セリフを大きく置き、その下に和文の小さなラベルを添える
• 太字は使わず、細い〜中くらいの太さで品よく見せる
• 和文の見出しは明朝で字間を広くとる
• 本文は行間を1.8前後にして余白を多めにする
• 背景に薄い色の巨大な欧文を透かしとして敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（カードは2列も可）。PC は 2〜3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央寄せのコンテンツ幅に左揃えで見出しを置く
• PC の特長カードは左右交互にずらして段違いに並べる
• ミントの面はコンテンツの後ろに大きくはみ出させる
• セクション間には十分な余白をとる
• トピックは横スクロールのカルーセルにする

Elevation & Depth

• カードは影をつけないか、ごく薄い影にとどめる
• 白カードを色付きの地に置いて、色の差で浮いて見せる
• 区切りは細い線か色面の切り替えで行う

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸のない、または小さく角を丸めた矩形。カード上部に横長で入れる
• セクション境界: 直線で色面を切り替える。斜めや波は使わない
• 矢印ボタンは直径約32pxの正円
• タブやカテゴリはピル型
• バッジは円形やギザギザの円で傾けて置く
• 番号は円形の回転テキスト付きバッジにする

Components

• 丸矢印ボタン（button-arrow-circle）: カード右下に置くミントの円に白い矢印
• カテゴリタブ（tab-pill）: 白地に細い枠のピル型。選択中は濃いグレーで塗る
• 特長カード（card-feature）: 上に写真、下に明朝の見出しと短い説明と矢印ボタン
• 番号バッジ（badge-number）: 細い欧文の番号を回転テキストの円で囲む
• 追従バッジ（badge-floating）: 画面右に固定する黄色のギザギザ円バッジでイベントへ誘導する
• お知らせリスト（news-list）: ベージュ枠の中に日付・ミントのタグ・タイトルを1行ずつ並べる
• 欧文＋和文の見出し（heading-en-ja）: 大きな欧文セリフの下に小さな和文ラベルを置く
• カテゴリタグ（tag-category）: ミントの小さな角丸ラベル

Do's and Don'ts

Do - ミント・生成り・白の3色で面を組み立てる - 見出しは細い欧文セリフと和文の2段で組む - 写真は自然光の明るいものにし、白カードに収める - 余白を広くとり、情報を詰め込みすぎない - 誘導はすべて丸矢印ボタンで揃える

Don't - 原色の赤や濃い青を広い面に使わない - 太いゴシックで大きく訴求しない - 強い影やグラデーションのボタンを使わない - 純黒の文字を使わない - セクションの境界を斜めや波にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（理念を伝え、主なトピックを見せる）: 左に欧文セリフのコピーと和文の一言、右に告知バナーのスライダー。下側はミントの帯
2. 学部一覧（学部・学科へ案内する）: ミントの地に欧文見出しを置き、白いピル型ボタンを学部ごとに並べる
3. お知らせ（重要な告知を伝える）: ベージュの枠に日付とタグ付きのリスト
4. ニュース（新着の話題を見せる）: タブで絞り込み、大きな写真1枚と小さな写真付き記事を並べる
5. ブログ・関連リンク（サブコンテンツへ誘導する）: 枠付きの横長カードと、写真付きのバナー2つ
6. 3つの魅力（強みを伝える）: 生成りとミントを分けた地に、番号バッジ付きの白カードを段違いに配置
7. オープンキャンパス（イベントへ参加を促す）: 方眼の紙風の地にポップなロゴ、イラスト、写真のコラージュ、会場別のカード
8. キャンパスライフ（学生生活を伝える）: 巨大な欧文の透かしを敷き、淡い色違いのカードを3枚並べる
9. コンテンツ一覧（各種情報へ案内する）: 生成りの地にミントの矩形を重ね、写真付きの横長カードを2×2で並べる
10. トピックス（特設ページへ誘導する）: 横スクロールのバナーと、円形の前後ボタン
11. 対象者別リンク（立場ごとに案内する）: アイコンと文字と丸矢印を下線付きで横に並べる

Imagery

• 自然光の明るい写真で、学生や講師が実習・会話している場面
• 建物の外観は青空の下で撮る
• オープンキャンパス枠には手描き風の人物イラストを添える
• 円形スタンプ風のエンブレムや回転テキストを飾りに使う
• 写真の色味はやや明るく、彩度を抑える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では1カラムにし、段違いのカードは縦に並べる
• SP の欧文見出しは28px前後に縮める
• 学部のピルボタンは SP で2列に並べ直す
• SP ではグローバルナビをハンバーガーメニューにまとめる
• SP ではミントの面を画面幅いっぱいの帯に簡略化する
• カルーセルは SP でカード1.2枚分を見せる

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 行書くと起動時に読み込まれる。