DESIGN.md — 淡青地×水色グラデの福祉系専門学校 LP（Airy Pastel Gradient Vocational School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル
• キーワード: 淡いブルー地・水色グラデーション・斜めライン装飾・白カード・字間広めの欧文見出し・散らばる写真
• 地の質感: フラットで影はほぼなし。グラデーションと半透明の斜め線で軽さを出す
• 形: 角丸 8〜12px のカードとピル型ボタン、円形矢印アイコン
• 温度感: やや寒色寄りの爽やかさ。ピンクとミントで温かみを補う

Colors

• 地は淡い青白で統一し、情報は白カードに載せる
• 主ボタンは水色→スカイブルーの横グラデにする
• 学科ごとにピンク・ミントのパステルグラデで色分けする
• 文字は黒ではなく濃紺を使う
• ミントの短い斜め線を見出し上と背景に散らす
• フォーム系ボタンは薄紫・薄緑の淡色で区別する
• button-primary は文字 #FFFFFF × 背景 #42D9E5 のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#13818A、4.63:1）を使う。
• tab-guide は文字 #05ADE4 × 背景 #CCEAF2 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#036F92、4.5:1）を使う。
• banner-event は文字 #FFFFFF × 背景 #05ADE4 のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#036F92、4.51:1）を使う。

Typography

• セクション見出しは欧文中心で中央揃え、字間を広く取る
• 和文見出しは中ウェイトで字間 0.2em 以上
• 本文は行間 1.8 で読みやすく
• 見出しの上にミントの斜め線を 1 本置く
• 太字はカード名・ボタンに限定する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ギャラリーのみ 4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右余白は約 18px
• 見出し→コンテンツ間は約 32px
• カードは縦に 16px 間隔で積む
• リンクは右下に「文字＋円形矢印」で置く
• コンセプト部は写真を不規則に散らして中央に文章

Elevation & Depth

• 基本は影なしのフラット
• 白カードは淡い地との明度差で浮かせる
• スライダー矢印のみ薄い影可

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸 8px の長方形。カード内では上辺のみ角丸
• セクション境界: 区切り線は使わず余白と地色の切替で分ける
• ボタンはピル型
• 矢印は細線の円形アイコン
• 斜めの細いライン装飾を背景に重ねる
• タブは角丸小の長方形、選択中は下に三角

Components

• グラデのピル型ボタン（button-primary）: 水色グラデ、白文字と右矢印
• 白ピル型リンクボタン（button-white-pill）: 白地に濃紺文字と右矢印、対象別導線
• 斜線付きセクション見出し（heading-slash）: ミントの短い斜め線を上に置いた中央欧文見出し
• 学科グラデカード（card-course）: パステルグラデ地に角丸写真、学科名、年数バッジ、丸矢印
• 枠線ピルバッジ（badge-outline）: 白地に濃紺枠の小さな年数表示
• タブ切替（tab-guide）: 水色枠内に2×2タブ、選択中は青地白文字
• 写真リンクカード（card-photo-link）: 上に大きな写真、下の白帯にタイトルと補足、右に丸矢印
• FAQアコーディオン（faq-item）: 白カードに水色Q、質問、右端に＋
• イベント告知帯（banner-event）: 青紫グラデ帯に欧文見出しと日付の円バッジ2件
• 問い合わせボックス（contact-box）: 灰青枠に白カード2枚、線画アイコンと淡色ピルボタン

Do's and Don'ts

Do - 地は淡い青白、情報は白カードに分ける - 見出し上にミントの斜め線を必ず添える - 欧文見出しは字間を広げた幾何学サンセリフで - リンクは細線の円形矢印で統一 - 写真は明るく自然光の笑顔カットを角丸で

Don't - 黒や原色の強い赤を使わない - 濃い影や立体的なボタンにしない - セクションを太い罫線で区切らない - 明朝体や手書き体を混ぜない - グラデを濃く・暗くしない

Page Structure

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

1. ヘッダー（ロゴとメニュー導線）: 左にロゴ、右上に正方形の水色メニューボタン
2. ファーストビュー（学びの雰囲気を伝える）: 角丸の大きな実習写真に白い欧文コピーを重ね、下にイベント告知帯を重ねる
3. コンセプト（理念を短く伝える）: 小写真と人物イラストを散らし、中央に字間広めの見出しと本文
4. お知らせ（最新情報）: 白カードの横スライダー、円形の水色矢印、ドット送り
5. 学校紹介（学校の概要）: 左に角丸写真、右に本文の回り込み、下にグラデのピルボタン
6. 学科紹介（コース案内）: ピンク・ミントのグラデカードを縦に並べる
7. 入学ガイド（入試・学費などの案内）: 水色枠内にタブ4つ、写真と説明、下線付きリンク
8. 学校生活（行事・先輩の声への導線）: 大きな写真＋白帯タイトルのカード2枚
9. ギャラリー（SNS投稿の紹介）: 4列の正方形サムネイルを2段
10. 対象別ガイド（卒業生・企業向け導線）: 白ピル型ボタンを中央に縦並び
11. よくある質問（不安の解消）: 白カードのQ＋アコーディオン3件とView All
12. 資料請求・問い合わせ（コンバージョン）: 灰青枠に白カード2枚、線画アイコンと淡色ピルボタン
13. フッター（基本情報）: 白地にSNSアイコン、リンク2列、ロゴと住所、淡青のコピーライト帯

Imagery

• 明るい室内の自然光で、学生と講師の笑顔の実習・授業風景
• 制服やポロシャツの色が映える高明度・低コントラストの写真
• 人物の線画風フラットイラストを余白に配置
• 背景に半透明の白・ミントの斜め線を散らす
• アイコンは細い濃紺の線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左に固定の水色縦ナビを置く
• PC のコンテンツ幅は約 55〜60% で中央寄せ
• 学科カードは PC で左右 2 分割の縦長カード
• 学校生活カード・問い合わせカードは PC で 2 列
• ガイドのタブは PC で横 4 列、写真と文章は左右配置
• FV のイベント告知は 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 行書くと起動時に読み込まれる。