DESIGN.md — 水色×紫グラデの美容専門学校 OC LP（Pastel Gradient Beauty School Open Campus LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、クール・先進的、かわいい、情報量多め・訴求型
• キーワード: パステルグラデーション・ずらし影ボタン・細い欧文ラベル・写真主体・ステップ菱形バッジ・蛍光ペン下線
• 地の質感: フラットな白地と淡いグレー地。グラデーションは面と影にだけ使い、ノイズや紙の質感は入れない
• 形: ボタンは角丸なしの長方形。カードは小さな角丸。番号は菱形。吹き出しは角張った形
• 温度感: 寒色寄りのパステル（水色→紫→ピンク）に黄色を差し色に使い、明るく軽い印象

Colors

• 地は白と淡いグレーの 2 色だけ。グラデーションは帯セクション・ボタン影・番号バッジに限って使う
• グラデーションは左上の水色から右下の紫・マゼンタへ、斜めに流す
• 主CTAは白い面に濃色の細い枠をつけ、右下にグラデの影をずらして敷く
• 強調の下線は黄色の蛍光ペン風にして、寒色グラデと補色関係を作る
• ステータス表示はピンク・ミント・青・オレンジなどの彩度が高い色で分ける
• 見出しは真っ黒にせず濃いグレーにして、柔らかく見せる

Typography

• 見出しは、細い欧文ラベル＋線画アイコンを上に置き、その下に太い和文見出しを中央揃えで組む
• 番号（01・step01・#01）は極細の欧文で大きく出す
• 強調フレーズには黄色の蛍光ペン風下線を引く
• 本文は 13px 前後で左揃えにし、行間 1.7 にする
• 帯セクションのコピーは白の太字に影をつけ、写真の上でも読めるようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真ギャラリーだけ 3 列のタイル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右 4% 程度の余白を残して幅いっぱいに置く
• 見出しの上下に 40px 以上の余白を取る
• CTA帯はページ内で 3〜4 回繰り返す
• ステップは写真→番号バッジ→見出し→本文の順に縦へ積む
• イベントカードはグレー地の上に白カードを縦に並べる

Elevation & Depth

• カードには薄い影（0 2px 8px rgba(0,0,0,.12)）をつける
• CTAボタンは影の代わりに、右下へ 6px ずらしたグラデ板を敷く
• 吹き出しには小さな影をつける
• PC のステップカードは右下にやや強めの影をつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の写真をそのまま使う。人物の切り抜きは不定形の塊（ブロブ）の上に置く
• セクション境界: 直線で区切り、地色かグラデ帯の切り替えで分ける
• ボタンは角丸なしの長方形にする
• ステップ番号は 45 度傾けた正方形（菱形）にグラデを塗る
• 旗型ラベルの左には縦のポールを描く
• ページ送りのボタンは淡いグレーの円形にする

Components

• ずらし影CTA（button-primary）: 白い面に濃色の細い枠、中央に文字、右端に矢印。右下にグラデ板をずらして敷く
• 小型予約ボタン（button-secondary）: カード内に置く小さなずらし影ボタン
• イベントカード（event-card）: 白カードの中央に、イベント名・日時・予約ボタンを並べる。上に旗ラベルをつける
• 旗ラベル（flag-label）: ピンクやミントの旗形に白文字で状態を示す
• 二段見出し（section-heading）: 細い英字＋線画アイコンを上に、太い和文を下に組む
• 菱形ステップ番号（step-badge）: 水色→紫のグラデ菱形に、白の細い欧文で番号を入れ、写真の角に重ねる
• 蛍光下線キャプション（marker-caption）: 写真の下の短い一文に、黄色のかすれ下線を引く
• グラデCTA帯（cta-band）: グラデをかけた集合写真の上に、吹き出し 2 つ・大きなコピー・主CTAを重ねる
• 角型吹き出し（speech-bubble）: 白い長方形にしっぽをつけ、短い声を入れる
• 固定下部ナビ（fixed-nav）: 3 色（ピンク・青・ミント）の 3 分割タブ。アイコンと白文字を入れる

Do's and Don'ts

Do - グラデーションは水色→紫→マゼンタの方向にそろえる - CTAには必ずずらしたグラデ影をつける - 見出しは欧文ラベル＋和文の二段で組む - 写真は明るく、人物の笑顔が中心になるものを使う - CTA帯を繰り返して、申し込みへ何度も誘導する

Don't - ボタンをピル型や塗りつぶしの色ボタンにしない - 暗い背景のセクションを作らない - セリフ体や明朝体を使わない - グラデーションを本文の背景に使って可読性を下げない - 黄色を面として大きく使わない

Page Structure

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

1. ファーストビュー（世界観を伝え、すぐ申し込みへ誘導する）: 斜めに分割したグラデ背景に人物写真を 2 組配置。手書き風キャッチと主CTAを重ねる
2. 直近イベント（近い日程の予約を促す）: グレー地に、旗ラベル付きの白カードを 2 枚並べる
3. スケジュール（開催日を一覧で見せる）: 淡いグラデ枠の中にカレンダーと色分けの凡例を置き、下に年間予定のバナーを置く
4. 参加メリット（参加する価値を 3 つ示す）: 大きな細番号付きの写真と、黄色下線のキャプションを 3 回繰り返す
5. CTA帯（申し込みを後押しする）: グラデをかけた集合写真の上に、吹き出し・大きなコピー・主CTAを重ねる
6. 当日の流れ（当日の不安を減らす）: 写真に菱形のステップ番号を重ね、見出しと本文を 5 段並べる
7. 在校生の声（親近感を与える）: 縦書き見出しの横に、ブロブ背景の切り抜き人物と吹き出しを置くスライダー
8. キャンパスライフ（立地と環境を見せる）: グラデ地に校舎写真と、大きな数字の徒歩分数を置き、下に写真の 3 列ギャラリーを続ける
9. アクセス・固定ナビ（所在地を示し、資料請求などへ導く）: 地図を全幅で載せ、画面下に 3 色の固定タブを置く

Imagery

• 人物写真は明るい室内で撮り、白飛び気味のハイキー、自然な笑顔で揃える
• 施術中・実習中の手元が入るカットを入れる
• 集合写真はハートやピースなどのポーズで、カメラ目線にする
• 帯背景の写真は色を落とし、水色〜紫のグラデを半透明で重ねる
• アイコンは細い線画（カレンダー・親指・旗・マイク）を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はイベントカードを 2 列、メリットを 3 列に並べる
• PC の当日の流れは、左に縦線と菱形番号のタイムラインを置き、右に横長カード（写真＋文）を並べる
• PC は固定ナビを右端に縦タブで置く
• PC の声は 3 人を横に並べ、ギャラリーは 5 列にする
• PC の CTA 帯は、コピーを人物写真の左右に分けて置く

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