DESIGN.md — 黒×鮮黄のモード系専門学校 LP（Bold Yellow Black Fashion School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 黒×黄の高コントラスト・モード・ポイント番号・ランキング表・角丸写真カード・エディトリアル
• 地の質感: フラットな単色面と写真のみ。グラデーションや影はほぼ使わない
• 形: 角丸の小さい写真カード、細い罫線、四角いボタン
• 温度感: 高彩度の黄で熱量を出し、黒で締めたやや硬質な印象

Colors

• 地色は黄が主役。黒・白・グレーの帯と交互に切り替えて場面転換をつくる
• 黒地では見出しを黄か白にする。黄地では文字を黒に限定する
• ポイント番号の帯は、黒帯の下半分から黄地へ写真カードがまたがるように重ねる
• CTA は白地＋黒枠＋黒文字の控えめなボタンにし、グレー帯の上に置く
• リンクだけ暗赤を使い、ほかの有彩色は増やさない

Typography

• 見出しは極太ゴシックで、2〜3 行に改行して塊として見せる
• 本文は小さめの文字で、行間をとても広くとる
• ポイント番号は「POINT」の小さい英字と大きな数字を黄色で組む
• 電話番号は縦長の欧文書体で大きく出す
• 問い合わせ見出しとロゴ周りだけ明朝を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューは 2 カラム格子
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 48px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真カードは左右 8% の余白をとって中央に置き、本文はその下に続ける
• ランキングは媒体名・順位・3 行表の順に並べ、細い罫線で区切る
• 黒い見出し帯の下端に写真カードの上部を重ねる
• CTA 帯はコンテンツの節目ごとに繰り返す

Elevation & Depth

• 影は使わない。奥行きは色面の切り替えと写真の重なりだけでつくる
• 写真のキャプションは白文字で、写真の中央に直接置く

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の角丸長方形（比率は約 5:3）。人物は白背景の切り抜き
• セクション境界: 直線で切り替える。卒業生リストの前だけ小さな三角の吹き出しを付ける
• ボタンは角丸なしの長方形に黒い細枠を付け、右端に小さな矢印ボックスを置く
• 写真カードの角丸は 8px 程度
• スラッシュ状の斜線で英字見出しを挟む

Components

• 資料請求ボタン（button-cta）: 白地に黒枠の長方形ボタン。右端に矢印ボックスを付け、2 つ横に並べる
• 黒い開閉ボタン（button-accordion）: 黒い帯状ボタン。白文字で、右端に白い下矢印ボックスを置く
• ポイント見出し帯（point-heading）: 黒地に「POINT」と黄色の数字を置き、白の太字見出しを 2〜3 行で組む
• キャプション付き写真カード（photo-card）: 角丸の写真の中央に、白太字の短いキャプションを 2 行で置く
• ランキング表（ranking-table）: 順位・校名・国の 3 列の表。罫線で区切り、自校の行だけ太字にする
• 斜線挟みの英字見出し（slash-heading）: 黄色い英字の見出しを左右の斜線で挟む
• 下線付きセクション見出し（underline-heading）: 中央揃えの見出しの下に、黒い太線を全幅の 80% 程度で引く
• 電話番号ブロック（phone-block）: グレーの丸い電話アイコンと縦長の大きな番号。下に受付時間を添える

Do's and Don'ts

Do - 黄・黒・白の面を交互に切り替えてリズムをつくる - 見出しは極太の書体で大きく、短い文で改行する - 実績は表や数値で並べ、自校の行を太字で目立たせる - CTA ボタンの帯をセクションの区切りごとに繰り返す

Don't - パステルやグラデーションなど、柔らかい配色を加えない - ボタンをピル型にしたり、影を付けたりしない - 黄色地に白文字を置かない - 装飾イラストを多用しない。主役は写真にする

Page Structure

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

1. ヘッダー（ロゴとアクセス導線）: 白地の中央にロゴ、右にピンのアイコン
2. ファーストビュー（学校の印象と主な訴求）: 全幅の実習写真の下に黒地を敷き、黄色の大見出しと黄色の横線を置く
3. 導入文・写真帯（育成する職種の幅を示す）: 黒地に白の小さな本文。その下に授業写真を 3 枚横に並べる
4. 動画（紹介動画への誘導）: 黒地に斜線で挟んだ英字見出しと、埋め込み動画
5. カリキュラム案内（学科構成の概要）: 白地に下線付きの見出しと黒い開閉ボタン
6. CTA（資料請求・オープンキャンパスへの誘導）: グレー帯の上に白い枠線ボタンを 2 つ並べる
7. 実績・ランキング（世界的評価の証明）: 黄地に極太の見出しを置き、媒体ごとのランキング表を 3 つ並べる
8. ポイント1（歴史と卒業生の実績）: 黒い見出し帯と写真カード、本文の繰り返し
9. 卒業生リスト（活躍する卒業生の羅列）: 白地に【】付きの見出しで分類して名前を羅列し、最後に暗赤のリンクを置く
10. ポイント2・3（施設・カリキュラム・サポートの訴求）: 黒帯の見出し＋黄地の写真カード 3 枚構成
11. 学生インタビュー（在校生のリアルな声）: 白地に、白背景で切り抜いた全身写真と学科名を 2 カラム格子で並べる
12. 問い合わせ・フッター（電話相談の導線と学校情報）: 淡いグレー地に明朝の見出し、大きな電話番号、ロゴと住所。最後に濃いグレーのフッター

Imagery

• 実習中の学生を至近距離から撮った、自然光のドキュメンタリー調写真
• 一部はモノクロ写真にして歴史を表す
• ファッションショーや受賞の場面など、色の強い写真で熱量を出す
• 在校生は白背景の全身切り抜き写真で、私服の個性を見せる
• 写真の中央に白い太字のキャプションを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真カードを 3 カラムに並べ、ポイントごとに横一列で見せる
• PC ではランキング表 3 つを横に並べる
• PC ではヘッダーにグローバルメニューと SNS、紫の小ボタンを置く
• PC では卒業生リストを白い角丸ボックスにまとめ、左に見出しを置く
• PC では円グラフ風の数値インフォグラフィックを追加する
• インタビュー写真は PC で 5 体を横一列に並べる

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