--- version: alpha name: Pastel Gradient Beauty School Open Campus LP description: 水色から紫、マゼンタへ流れるグラデーションと白地を組み合わせた、美容専門学校のオープンキャンパス集客 LP。白い角張ったボタンの背後にグラデの影をずらして敷くのが特徴。細い欧文の英字見出しと太いゴシックの和文見出しを上下に組み、写真を大きく使って若者向けのポップで今っぽい印象を作る。 colors: primary: '#B07FD8' secondary: '#7BCCF4' accent-1: '#DE90DC' background: '#FEFEFE' background-alt: '#EEEEEE' surface: '#FEFEFD' cta: '#FEFEFE' on-cta: '#535353' text: '#5F5E5D' text-body: '#17191A' marker: '#FDE37B' accent-2: '#FE82AE' accent-3: '#46DAC0' dark-section: '#5E6581' line: '#E2E1E2' typography: display: fontFamily: Yomogi fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em accent: fontFamily: Poiret One fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 52px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px event-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 160px flag-label: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 26px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px step-badge: backgroundColor: '{colors.primary}' typography: '{typography.accent}' height: 110px marker-caption: backgroundColor: '{colors.marker}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 30px cta-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 540px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px fixed-nav: backgroundColor: '{colors.accent-3}' typography: '{typography.label-button}' height: 80px --- # DESIGN.md — 水色×紫グラデの美容専門学校 OC LP（Pastel Gradient Beauty School Open Campus LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、クール・先進的、かわいい、情報量多め・訴求型 - **キーワード**: パステルグラデーション・ずらし影ボタン・細い欧文ラベル・写真主体・ステップ菱形バッジ・蛍光ペン下線 - **地の質感**: フラットな白地と淡いグレー地。グラデーションは面と影にだけ使い、ノイズや紙の質感は入れない - **形**: ボタンは角丸なしの長方形。カードは小さな角丸。番号は菱形。吹き出しは角張った形 - **温度感**: 寒色寄りのパステル（水色→紫→ピンク）に黄色を差し色に使い、明るく軽い印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B07FD8` | ブランドを代表する紫グラデーションの中間色（帯・菱形バッジ） | 8% | 推定 | | `secondary` | `#7BCCF4` | グラデーション起点の水色 | 6% | 画素の実測 | | `accent-1` | `#DE90DC` | グラデーション終点のマゼンタ（ボタン影・FV下部） | 3% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 45% | 画素の実測 | | `background-alt` | `#EEEEEE` | イベントカードを並べる淡いグレー帯 | 6% | 画素の実測 | | `surface` | `#FEFEFD` | 白いカード・ボタン面 | 5% | 画素の実測 | | `cta` | `#FEFEFE` | 主CTAボタンの白面（枠線は濃色） | 2% | 画素の実測 | | `on-cta` | `#535353` | CTAボタンの文字・矢印 | 0% | 画素の実測 | | `text` | `#5F5E5D` | 見出しの濃いグレー | 2% | 画素の実測 | | `text-body` | `#17191A` | 本文の黒 | 2% | 画素の主要色に補正 | | `marker` | `#FDE37B` | 蛍光ペン風の黄色下線 | 1% | 画素の実測 | | `accent-2` | `#FE82AE` | 締切間近の旗ラベルのピンク | 2% | 画素の実測 | | `accent-3` | `#46DAC0` | 受付中旗ラベル・固定ナビのミント | 2% | 画素の実測 | | `dark-section` | `#5E6581` | 声の吹き出し背景のくすみ紺 | 1% | 画素の実測 | | `line` | `#E2E1E2` | カレンダー罫線 | 1% | 画素の主要色に補正 | - 地は白と淡いグレーの 2 色だけ。グラデーションは帯セクション・ボタン影・番号バッジに限って使う - グラデーションは左上の水色から右下の紫・マゼンタへ、斜めに流す - 主CTAは白い面に濃色の細い枠をつけ、右下にグラデの影をずらして敷く - 強調の下線は黄色の蛍光ペン風にして、寒色グラデと補色関係を作る - ステータス表示はピンク・ミント・青・オレンジなどの彩度が高い色で分ける - 見出しは真っ黒にせず濃いグレーにして、柔らかく見せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの手書き風キャッチ | 手書き・筆 | Yomogi | 400 | 44px | 1.2 | 0.05em | | `headline-lg` | セクションの和文見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.08em | | `accent` | 見出し上の細い英字ラベル・大きな番号 | 欧文サンセリフ | Poiret One | 400 | 22px | 1.2 | 0.02em | | `headline-md` | ステップ名・帯コピー | ゴシック | Noto Sans JP | 500 | 22px | 1.4 | 0.02em | | `headline-sm` | カードのイベント名・メリットの見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | | `note` | クレジット・カレンダー日付 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | - 見出しは、細い欧文ラベル＋線画アイコンを上に置き、その下に太い和文見出しを中央揃えで組む - 番号（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d74e79ec`（元 LP の URL から採番） - **元 LP**: https://www.tsbs.jp/lp - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。