DESIGN.md — 青×淡い水色の教育法人コーポレート LP（Clear Blue Corporate Education LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、シンプル・ミニマル
• キーワード: ブルー基調・大きな英字見出し・角丸カード・広い余白・学校写真
• 地の質感: フラットな単色面。グラデーションや質感はほぼ使わず、淡い円形の線を薄く重ねる程度。
• 形: 大きな角丸の白パネルと青パネルを画面端まで伸ばし、左右交互に配置する。ボタンはピル型。
• 温度感: やや寒色寄りで、爽やかで落ち着いた印象。

Colors

• 地は淡い水色、セクションごとに白パネルと青パネルを交互に置く。
• 青面の上は文字もボタンも白で反転させる。
• 淡い地の上のボタンは白地＋青文字＋淡青の枠。
• 強調は青文字のみ。赤や黄など暖色は使わない。
• 巨大な英字見出しは青地では白、淡地では青か白抜き。
• donation-banner は文字 #FFFFFF × 背景 #5790B8 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#447BA2、4.56:1）を使う。

Typography

• 見出しは「点＋英字ラベル」の下に日本語見出しを置く二段構成。
• 英字の大見出しはパネルの角からはみ出すように重ねる。
• 本文は行間2.0前後とゆったり組む。
• 強調語はかぎ括弧で囲み青文字で示す。
• 電話番号は欧文の太字で大きく出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦積み（PC は 2 カラム）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• パネルは片側を画面端まで伸ばし、反対側だけ角丸にする。
• 白パネルと青パネルを左右交互にずらす。
• 見出しブロックは左寄せ。
• 写真とテキストは左右に組み、セクションごとに左右を入れ替える。
• お知らせは日付・カテゴリタグ・タイトルを1行に並べたリスト。

Elevation & Depth

• 影はほぼ使わず、色面の差で階層をつくる。
• 白カードには非常に薄い影（0 4px 16px rgba(0,60,120,0.06)）まで。
• ボタンは影なしで、淡い枠線のみ。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸12px前後の長方形。青面の写真コラージュは小さい角丸でタイル状に並べる。
• セクション境界: 直線は使わず、大きな角丸パネルの重なりでセクションを切り替える。
• ボタンは横長のピル型で、右端に小さな矢印付きの丸を置く。
• 図解は淡い水色の同心円と白い円を重ねる。
• カテゴリタグは細い枠のピル型。

Components

• 詳しく見るピルボタン（button-more）: 白地に淡青の枠、左に文字、右に矢印入りの小さなピル。
• 問い合わせボタン（button-contact）: 青面上の大きな白いピル。メールアイコンと矢印付き。
• 英字ラベル付き見出し（section-label）: 小さな点と英字ラベルの下に太字の日本語見出し。
• 巨大英字見出し（giant-en-heading）: パネルの端に重ねる、縦書きまたは横書きの大きな英字。
• 写真付き紹介カード（school-card）: 白カードの上部に角丸写真、左上に青い名称タブ、下に見出し・本文・外部リンク。
• サムネイル付きリンク行（link-thumb）: 小さな写真＋青文字の太字ラベル＋矢印を下線で区切って横に並べる。
• 青面の中の告知バナー（donation-banner）: 青パネル内に中間青のカード。白文字の見出しと小さなボタン。
• お知らせ行（news-row）: 日付・枠付きタグ・タイトルを並べ、細い区切り線で分ける。

Do's and Don'ts

Do - 淡い水色と青の2色を主役にし、白でつなぐ。 - 大きな角丸パネルを左右交互にずらして動きを出す。 - 英字ラベルと巨大英字見出しを各セクションに置く。 - 写真は明るく自然光の学校・生徒写真を使う。 - ボタンは矢印付きのピル型で統一する。

Don't - 暖色の強調色や派手なバッジを入れない。 - 強い影やグラデーションを使わない。 - 本文を詰めて組まない。 - 直角の写真や四角いボタンを混ぜない。 - セクションを直線の帯だけで区切らない。

Page Structure

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

1. ヘッダー（ナビゲーションと外部リンク）: 左にロゴ、右上に小さなピル型リンク群とメニュー、青い丸のハンバーガー。
2. ファーストビュー（理念の提示）: 角丸写真3枚を横に並べ、下に太字の2行コピーと小さな補足文。背景に薄い円の線。
3. 私たちについて（法人の紹介）: 白い大パネルに本文と同心円の図解、縦書きの巨大英字、下にサムネイル付きリンク3つ。
4. 運営学校（学校の紹介）: 白抜きの巨大英字の下に見出しと本文、写真付きカード2枚を横並び。
5. 目指す姿（ビジョンの訴求）: 青い大パネル。左に写真コラージュと縦書き英字、右に白文字の本文と白ボタン。
6. 寄付の告知（支援の呼びかけ）: 青パネル内の中間青カードに見出しと小さなボタン。
7. 採用情報（採用への誘導）: 左にオフィス写真、中央に見出しとボタン、右に生徒の集合写真と巨大英字。
8. お知らせ（最新情報の掲示）: 左に見出しともっと見るボタン、右に日付・タグ付きのリスト。
9. お問い合わせ（問い合わせの獲得）: 青い大パネル。左に本文、右に白いメールボタンと大きな電話番号。背景に薄い英字の透かし。
10. フッター（サイト内リンクと所在地）: 淡いグレー青の地。左にロゴ・住所・ピル型外部リンク、右に多段のリンク一覧。

Imagery

• 明るい教室や自習室を自然光で撮った写真。
• 生徒が笑顔でポーズを取る集合写真で親しみを出す。
• ノートPCで学ぶ生徒の横顔や手元のカット。
• 青面の上では写真を少し青寄りに補正し、統一感を出す。
• 装飾は細い線の大きな円のみで、イラストは使わない。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は全セクション1カラムにし、写真を見出しの上に置く。
• 巨大英字は SP では48px程度に縮め、縦書きは横書きにしてよい。
• PC の左右交互パネルは SP では画面幅いっぱいにし、片側の角丸だけ残す。
• 学校カードと FV の写真は SP では縦積みか横スクロールにする。
• ヘッダーのリンク群は SP ではハンバーガーにまとめる。

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