--- version: alpha name: Bold Yellow Black Fashion School LP description: 黒と鮮やかな黄色を交互に使う、コントラストの強い服飾系専門学校の LP。太いゴシック見出しと角丸の写真カードで、実績と環境をポイント形式で見せる。白とライトグレーの面に資料請求・オープンキャンパスへの導線を置く。 colors: primary: '#FDE233' dark-section: '#010101' background: '#FFFFFF' background-alt: '#EEF2F3' surface: '#DDDDDC' secondary: '#FDF71F' text: '#1A0C04' on-dark: '#FCFDFC' cta: '#FFFFFF' on-cta: '#20201F' accent-1: '#7A1414' line: '#12181B' text-muted: '#BCBCBC' accent-2: '#1C1619' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 2.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 800 lineHeight: 1.2 note: fontFamily: Oswald fontSize: 9px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 0px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 36px button-accordion: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 34px point-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 110px photo-card: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 190px ranking-table: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' height: 130px slash-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 40px underline-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 50px phone-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.display}' height: 120px --- # DESIGN.md — 黒×鮮黄のモード系専門学校 LP（Bold Yellow Black Fashion School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: 黒×黄の高コントラスト・モード・ポイント番号・ランキング表・角丸写真カード・エディトリアル - **地の質感**: フラットな単色面と写真のみ。グラデーションや影はほぼ使わない - **形**: 角丸の小さい写真カード、細い罫線、四角いボタン - **温度感**: 高彩度の黄で熱量を出し、黒で締めたやや硬質な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FDE233` | メイン地色の鮮黄 | 30% | 画素の実測 | | `dark-section` | `#010101` | FV・ポイント見出し帯の黒 | 12% | 画素の実測 | | `background` | `#FFFFFF` | 白地セクション | 19% | 画素の実測 | | `background-alt` | `#EEF2F3` | 問い合わせ欄の淡いグレー地 | 9% | 画素の実測 | | `surface` | `#DDDDDC` | CTA帯のグレー地 | 2% | 画素の実測 | | `secondary` | `#FDF71F` | 黒地上の黄色見出し文字 | 1% | 画素の実測 | | `text` | `#1A0C04` | 見出し・本文の黒文字 | 4% | 画素の実測 | | `on-dark` | `#FCFDFC` | 黒地上の白文字 | 2% | 画素の実測 | | `cta` | `#FFFFFF` | 資料請求などの白ボタン面 | 1% | 画素の実測 | | `on-cta` | `#20201F` | ボタン文字と枠線 | 0% | 画素の実測 | | `accent-1` | `#7A1414` | リンク・媒体名の暗赤 | 0% | 推定 | | `line` | `#12181B` | ランキング表の区切り罫 | 0% | 画素の主要色に補正 | | `text-muted` | `#BCBCBC` | 電話アイコンなどのグレー | 0% | 画素の実測 | | `accent-2` | `#1C1619` | フッター濃グレー | 2% | 画素の実測 | - 地色は黄が主役。黒・白・グレーの帯と交互に切り替えて場面転換をつくる - 黒地では見出しを黄か白にする。黄地では文字を黒に限定する - ポイント番号の帯は、黒帯の下半分から黄地へ写真カードがまたがるように重ねる - CTA は白地＋黒枠＋黒文字の控えめなボタンにし、グレー帯の上に置く - リンクだけ暗赤を使い、ほかの有彩色は増やさない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 黄地の大見出し（評価の理由など） | ゴシック | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | ポイント見出し（黒帯の白文字） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.02em | | `headline-md` | FV の黄色い校名風見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-sm` | セクション小見出し・写真上キャプション | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 10px | 2.6 | 0.02em | | `accent` | 英字見出し・ポイント番号 | 欧文サンセリフ | Montserrat | 800 | 22px | 1.2 | 0.0em | | `note` | ランキング表の英字校名など | 欧文サンセリフ | Oswald | 400 | 9px | 1.4 | 0.0em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.05em | - 見出しは極太ゴシックで、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 ```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-9b730f3a`（元 LP の URL から採番） - **元 LP**: https://www.bunka-fc.ac.jp/lp/bfc-shiryo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。