--- version: alpha name: Dark Charcoal Red Gloss Tech School LP description: チャコール黒とライトグレーの帯が交互に続き、深紅の光沢ピルボタンと金色のセリフ数字を差し色にした、先端技術系スクールの訴求型 LP。斜めのグレー幾何模様が背景に入り、写真とスクリーンショットをたくさん並べてカリキュラムを具体的に見せる。 colors: primary: '#AA0A01' cta: '#C0140F' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#F3F3F3' dark-section: '#323232' on-dark: '#DEDEDE' surface: '#CCCCCC' text: '#272727' text-body: '#555555' accent-1: '#C9A03A' accent-2: '#C00000' accent-3: '#0BA3E3' secondary: '#F16301' typography: display: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 500 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.85 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 80px fontWeight: 700 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 30px full: 999px spacing: unit: 8px card: 20px section: 80px 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}' rounded: '{rounded.full}' height: 64px label-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px number-gold: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 90px stage-frame: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 110px event-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 140px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px case-card: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 260px interview-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 420px --- # DESIGN.md — 黒×深紅グロスと金数字のXRスクール LP（Dark Charcoal Red Gloss Tech School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型、力強い・インパクト - **キーワード**: チャコール帯・深紅グロスボタン・金セリフ数字・斜め幾何背景・スクショ多用 - **地の質感**: ボタンは赤の縦グラデーションと光沢、ベージュの縁取り。背景には淡いグレーの斜め三角模様が入る - **形**: ボタンはピル型。見出しボックスは角丸なしの長方形。人物は円形に切り抜く - **温度感**: クールなモノトーンに、熱を感じる赤と金を少しだけ足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AA0A01` | ブランド深紅・ボタン地 | 3% | 画素の実測 | | `cta` | `#C0140F` | 主CTAの赤 | 2% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本背景（白） | 29% | 画素の実測 | | `background-alt` | `#F3F3F3` | 淡いグレー帯 | 12% | 画素の実測 | | `dark-section` | `#323232` | チャコール帯 | 18% | 画素の実測 | | `on-dark` | `#DEDEDE` | 暗い地の白文字 | 1% | 画素の実測 | | `surface` | `#CCCCCC` | 見出しラベル箱のグレー | 4% | 画素の実測 | | `text` | `#272727` | 見出し文字 | 2% | 画素の実測 | | `text-body` | `#555555` | 本文グレー | 3% | 推定 | | `accent-1` | `#C9A03A` | 金色の番号・枠線 | 0% | 推定 | | `accent-2` | `#C00000` | 赤の強調文字 | 0% | 推定 | | `accent-3` | `#0BA3E3` | 活躍事例の青 | 2% | 画素の実測 | | `secondary` | `#F16301` | 企業向けのオレンジ | 1% | 画素の実測 | - 白・淡いグレー・チャコールの3段の地をセクションごとに交互に切り替える - 主CTAには赤のグロスピルだけを使い、黒地の帯の上に縦に並べる - 番号（01〜03）と枠線は金で、セリフ体の大きな数字にする - 本文中の強調は赤の太字に限る - 数値の訴求は赤の大きな数字にする - 青とオレンジは卒業生の進路カードの色分けだけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの講座名 | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 500 | 24px | 1.5 | 0.03em | | `headline-md` | カリキュラム項目名 | ゴシック | Noto Sans JP | 500 | 26px | 1.35 | 0.0em | | `headline-sm` | ラベル箱の見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.85 | 0.02em | | `accent` | 金の番号数字 | 欧文セリフ | Playfair Display | 700 | 80px | 1.0 | 0.0em | | `note` | 出典・キャプション | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 18px | 1.4 | 0.02em | - 基本はゴシック1書体で通し、番号だけ欧文セリフにする - ステージ見出しの箱は明朝にして格調を出す - セクション見出しは中央揃えで2〜3行に収める - 本文は左揃えで、行間は1.8前後と広めにとる - 数値の訴求は36px以上の赤い太字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - CTAは黒地の帯に3つ縦に並べ、ページの途中で繰り返す - ラベル箱をグレー帯と暗い帯の境目にまたがせる - 番号はラベル箱の左下にはみ出すように重ねる - カリキュラムは画像→見出し→説明の順に縦に積む - 表は全幅で、見出し行をグレーにする ## Elevation & Depth - CTAボタンの下に濃い影を落とし、立体感を出す - インタビューカードには薄い影を付ける - その他の部品は影なしのフラットにする ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 30px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物は円形に切り抜く - **セクション境界**: 直線で色を切り替える。背景の一部に斜めの帯を入れる - 見出しの箱は角丸なし - ステージ枠は金の二重線 - 吹き出しはピル型の白地に細い線 ## Components - **赤グロスピルCTA**（`button-primary`）: 赤の縦グラデーションに光沢を乗せ、ベージュの縁取りと左端に斜めの濃い赤の模様を入れる - **グレー見出しラベル箱**（`label-box`）: 暗い帯の上端にまたがるライトグレーの長方形。文字は太字 - **金セリフ番号**（`number-gold`）: 01〜03 の大きな金色セリフ数字をラベル箱に重ねる - **金二重線ステージ枠**（`stage-frame`）: 白地に金の二重線を引き、明朝体の見出しを中央に置く - **説明会日程ボックス**（`event-box`）: 黒地に金の細い線で囲み、日付を3つ並べて詳細リンクを添える - **質問吹き出し**（`speech-bubble`）: 白いピル型の吹き出しを3つずらして並べ、円形に切り抜いた人物写真を添える - **進路別活躍事例カード**（`case-card`）: 色帯の見出し→シェブロン矢印→淡い色の枠カードの順に並べ、円形顔写真と経歴を載せる - **インタビューカルーセル**（`interview-card`）: 白いカードに写真・氏名・黒いピル型の詳細ボタンを載せ、左右の矢印と赤いドットで送る ## Do's and Don'ts **Do** - 暗い帯と明るい帯を交互に置いて、リズムを作る - CTAは赤グロスピルに統一する - 番号は金のセリフ数字で大きく見せる - 実際の画面や教室の写真で具体性を出す - 数値には出典を小さく添える **Don't** - CTAにフラットな単色や別の色を使わない - パステルや丸い可愛らしい装飾を入れない - 金色を本文の文字に使わない - 見出しの箱を角丸にしない - 赤を広い面積の背景に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（先端技術の印象と講座名を伝える）: 赤い光の人物写真の上に、ロゴ・講座名・金のメダルバッジ2つ・日程ボックスを重ねる 2. **CTA群**（申込・相談・資料請求に誘導する）: 黒地に赤グロスピルを3つ縦に並べる 3. **認定・給付金訴求**（費用面の不安を下げる）: グレーの幾何模様の地に中央揃えの見出し、黒いラベル箱、本文、CTA、バナーを置く 4. **スクール紹介**（学校の概要を伝える）: グレーのラベル箱をチャコール帯にまたがせ、白文字の本文と教室写真を続ける 5. **個別相談の案内**（気軽な相談を促す）: 黒い箱見出し2段、本文、CTA、質問の吹き出しと人物写真を並べる 6. **カリキュラム**（学べる内容を具体的に見せる）: 金の二重線のステージ枠のあと、スクショ・見出し・説明を縦に繰り返す 7. **資料ダウンロード**（資料請求に誘導する）: チャコール帯に資料の画像、オレンジの小見出し、本文、CTAを置く 8. **選ばれる理由**（差別化を示す）: 金の番号とグレーのラベル箱を3回繰り返し、図解を入れる 9. **卒業生の進路**（成果を示す）: 青・青・オレンジの色帯見出しと事例カードを並べる 10. **インタビュー**（実例で信頼を補強する）: 斜めのグレー帯の上にカードのカルーセルを置く 11. **市場メリット**（学ぶ必然性を数字で示す）: 金の番号と、暗い地・明るい地を交互にしたブロックに赤い大きな数値を置く 12. **リモート受講・サポート**（受講環境の安心を伝える）: アイコンのブロックを暗・明交互に並べ、スペック表を続ける 13. **受講生データ・教室**（実績と施設を見せる）: 円グラフ、アンケートのグラフ、施設写真を縦に並べる ## Imagery - 人物写真は暗い背景に赤い照明を当て、近未来のデバイスを持たせる - 開発ソフトの画面スクショをそのまま大きく載せる - 教室や受講風景は実写の広角で撮る - 人物の顔は円形に切り抜き、白い縁を付ける - 背景はグレーの濃淡で斜めの三角を組んだ抽象模様にする - アイコンは単色の線画で、白か赤にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVの日程ボックスを右に置き、CTA3つを横一列に並べる - PCではカリキュラムを3カラムのグリッドにする - PCでは本文と写真を左右2カラムに並べる - PCでは進路カードとメリットを3列に並べる - PCではインタビューカードを4枚同時に見せる ## 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-e19d202d`（元 LP の URL から採番） - **元 LP**: https://academy.crossreality.co.jp/curriculum/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。