DESIGN.md — ミント×方眼紙の専門学校オープンキャンパスLP（Mint Grid Education Open Campus LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、親しみ・手作り感、シンプル・ミニマル
• キーワード: ミントグリーン・方眼紙・線画イラスト・オレンジCTA・英字サブ見出し・カード型
• 地の質感: 白地に薄いグレーの方眼グリッドを敷く。帯セクションにはミント地に服飾道具のアイコンを薄く敷き詰める。
• 形: 角丸8px前後のカードとボックス。CTAとリンクボタンはピル型。セクション境界は直線。
• 温度感: やや涼しげで明るい。オレンジと黄色で温かみを少し足す。

Colors

• 地は白の方眼紙柄。大きな区切りだけミントのベタ帯にする。
• カードやFAQは淡いミント面で囲み、白地と穏やかに分ける。
• 申込ブロックはクリーム地とミントの枠線にする。ボタンは必ずオレンジにする。
• オレンジは申込CTAだけに使う。ほかの要素には使わない。
• アイコンは黄色と墨色の2色、イラストは紺の線とくすんだミントで塗る。
• 英字のサブ見出しはミントの小さな文字にする。
• button-primary は文字 #FFFFFF × 背景 #FF7F00 のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BA5D00、4.51:1）を使う。
• section-band は文字 #EEFEFE × 背景 #4FC3AC のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2C8070、4.57:1）を使う。
• course-card は文字 #EEFEFE × 背景 #4FC3AC のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2C8070、4.57:1）を使う。

Typography

• 見出しは日本語の太字の下に、ミントの小さな英字を中央揃えで置く。
• FVの英字だけを極太・大サイズのミントにする。
• 番号はミントの細い英数字で、アイコン円の左上に置く。
• 本文は12px前後で控えめにし、行間を広めにとる。
• 見出しは中央揃え、カードの本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードと流れは縦に積む。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約12〜16px。カードはほぼ全幅で置く。
• セクションは見出し、英字、中身の順に積む。
• 流れは円形アイコンと説明文を横に並べ、縦に並べる。
• 特徴は淡いミントの大枠の中に白カードを縦に重ねる。
• 各サービスのブロックの最後に申込カードを置く。

Elevation & Depth

• 影はほぼ使わず、平面で構成する。
• 奥行きは枠線と淡い面色で出す。
• 申込カードの上端からアイコンをはみ出させて立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の小さい長方形か、全幅の帯にする。
• セクション境界: 直線。ミントの全幅帯で章を区切る。
• CTAとリンクボタンは右端に白丸の矢印を付けたピル型にする。
• 流れのアイコンは淡いミントの正円に入れる。
• FEATUREラベルはミントのピル型にする。
• FAQのQマークはミントの小さな円にする。

Components

• 申込ピルボタン（button-primary）: オレンジのピル型。左に文字、右端に白丸の矢印を置く。
• 申込カード（cta-card）: クリーム地にミントの枠線を引く。上端にアイコンをはみ出させ、見出し・英字・ボタンを中央に並べる。
• サービス案内カード（nav-card）: 淡いミント地にミントの枠線。アイコンと名称を入れ、下部のミント帯に『詳しく見る』と下矢印を置く。
• 章タイトル帯（section-band）: 全幅のミント帯。道具アイコン柄を薄く敷き、中央に大きなアイコン、白い見出し、英字を置く。
• 参加ステップ（flow-step）: ミントの番号と、淡いミントの円に入れた線画アイコン、右側の説明文で構成する。
• 特徴カード（feature-card）: 白カードの上辺にミントの線を引く。FEATUREピル、線画イラスト、小見出し、説明文の順に並べる。
• FAQアコーディオン（faq-item）: 淡いミント地の角丸バー。左にQの円、右にミントの＋を置く。
• 学科カード（course-card）: 上部のミント見出しバー、写真、淡いミントのピル型『詳しく見る』リンクの順に重ねる。

Do's and Don'ts

Do - 地には薄い方眼グリッドを全面に敷く。 - 見出しには必ずミントの英字サブ見出しを添える。 - アイコンは黄色と墨色の線画で統一する。 - 申込カードはサービスごとに繰り返して置く。 - イラストは紺の線とくすんだミントの淡い塗りにする。

Don't - オレンジをCTA以外に使わない。 - 濃い影やグラデーションを付けない。 - 原色を多く使わず、ミントの階調で整理する。 - 写真に文字を重ねすぎない。 - 明朝体や装飾の強い書体を使わない。

Page Structure

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

1. ファーストビュー（イベントの内容と参加しやすさを伝える）: ミントのロゴピル、大きな英字見出し、2行のリード文、角丸写真の順に置く。右にスクロールを促す円形の印を付ける。
2. サービス案内（3種類の参加方法へ誘導する）: アイコン付きの案内カードを3枚縦に並べ、それぞれページ内リンクにする。
3. 章タイトル帯（サービスごとに章を区切る）: ミントの全幅帯に柄、大きなアイコン、白い見出しを置く。
4. 参加までの流れ（手順を示して不安をなくす）: 番号付きの円アイコンと短い説明文を3〜4段並べる。
5. 特長（参加するメリットを3つ伝える）: 淡いミントの大枠の中に、イラスト入りの白カードを3枚並べる。
6. よくある質問（疑問を解消する）: 淡いミントのアコーディオンを2〜3個並べる。
7. CTA（申し込みを促す）: クリーム地の申込カードに、はみ出すアイコンとオレンジのピルボタンを置く。
8. 写真帯とまとめCTA（雰囲気を伝え、まとめて申し込める場所を作る）: 全幅の写真帯の後に、柄付きの淡いミント地を敷き、申込カードを2枚並べる。
9. 学科紹介（学科の詳細へ誘導する）: ミントの見出しバー付き写真カードを縦に並べ、それぞれにピル型リンクを付ける。
10. フッター（運営者の情報を示す）: ミントのベタ地に、白の筆記体ロゴと住所を中央揃えで置く。

Imagery

• 写真は明るい室内で、自然光の中、制作に打ち込む学生を撮る。ハイキーで柔らかい色調にする。
• イラストは紺の均一な線で描くフラットな人物。塗りはくすんだミントと淡い黄色にする。
• アイコンはモニターや校舎などの線画。黄色を差し色にする。
• 背景の柄は、服飾道具（ハサミ・糸・ボタン・定規）を細線アイコンにして散らす。
• 方眼グリッドで、ノートのような学びの雰囲気を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVの英字を1行の特大サイズにする。
• PCではサービス案内カードと学科カードを3列にする。
• PCでは流れを横並びの円アイコンにする。
• PCの特徴カードは左にテキスト、右にイラストの2カラムにする。
• PCのまとめCTAは2枚を横並びにする。FAQは中央の狭い幅に収める。
• PCの章タイトル帯は、アイコンと見出しを横並びにする。

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