--- version: alpha name: Surreal Monochrome 3D Classroom Community LP description: 真っ白な3DCGの教室と、パステル色のシュールなオブジェを組み合わせたクリエイター向けオンラインサロンのLP。ラベンダー寄りのオフホワイトを地にして、文字は黒と濃いグレーにしぼる。英字ラベルの1文字だけをミント・ピンク・イエローで差し色にする。ニューモーフィズム風の大きな角丸カード、太い黒枠の箱、線画の円やワイヤーフレームで遊び心を出す。 colors: primary: '#333333' on-primary: '#FEFEFE' background: '#F8F7FC' surface: '#DDDBE1' background-alt: '#F6F5FA' dark-section: '#434343' on-dark: '#FFFFFF' text: '#202022' text-body: '#5E5E61' line: '#B0B2B5' accent-1: '#9CD5DC' accent-2: '#F391A6' accent-3: '#F6D867' cta: '#D3D3D3' on-cta: '#2D2D2D' typography: display: fontFamily: Zen Maru Gothic fontSize: 34px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.25em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 48px full: 999px spacing: unit: 8px card: 24px 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: 40px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px side-tab: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 80px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 460px step-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px policy-circle: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 210px price-block: textColor: '{colors.text}' typography: '{typography.display}' height: 230px mosaic-label: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 36px framed-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 700px --- # DESIGN.md — 白黒3D教室×パステル小物のクリエイターサロンLP（Surreal Monochrome 3D Classroom Community LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: クール・先進的、シンプル・ミニマル、ポップ・元気 - **キーワード**: 3DCGの白い教室・シュールなオブジェ・パステル差し色・ニューモーフィズム・黒の太枠・ワイヤーフレーム - **地の質感**: マットな白い3DCGの質感。銀・陶器・樹脂風の小物が浮かび、背景には薄いドット柄やグリッド線を敷く - **形**: 大きな角丸のソフトなカード、黒い太枠の長方形、線画の正円、低ポリの幾何学形 - **温度感**: ややクールなニュートラル。パステルのミント・ピンク・イエローで少し温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#333333` | ブランドの黒（ロゴ・枠・STEP番号） | 6% | 画素の実測 | | `on-primary` | `#FEFEFE` | 黒地の上の白文字 | 1% | 画素の実測 | | `background` | `#F8F7FC` | ページの地色（ラベンダー寄りのオフホワイト） | 40% | 画素の実測 | | `surface` | `#DDDBE1` | ニューモーフィズムカードの面 | 15% | 画素の実測 | | `background-alt` | `#F6F5FA` | 3D教室の淡いグレー | 9% | 画素の実測 | | `dark-section` | `#434343` | フッター手前CTA帯の黒グレー | 4% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い帯の上の白い見出し | 1% | 画素の実測 | | `text` | `#202022` | 見出しの文字 | 3% | 画素の実測 | | `text-body` | `#5E5E61` | 本文のグレー文字 | 3% | 画素の実測 | | `line` | `#B0B2B5` | 区切り線・円の線・グリッド | 1% | 画素の主要色に補正 | | `accent-1` | `#9CD5DC` | ミントの差し色 | 1% | 画素の実測 | | `accent-2` | `#F391A6` | ピンクの差し色 | 1% | 推定 | | `accent-3` | `#F6D867` | イエローの差し色 | 1% | 推定 | | `cta` | `#D3D3D3` | 無料相談ボタン（銀色のグラデ） | 1% | 画素の実測 | | `on-cta` | `#2D2D2D` | CTAボタンの文字 | 0% | 画素の実測 | - 地はラベンダー寄りのオフホワイトで統一し、純白はカードのハイライトだけに使う - 文字と枠は黒（#2B2B2B）と濃いグレーの2段階にとどめる - パステル3色（ミント・ピンク・イエロー）は英字ラベルの1文字と小さな図形だけに使う - 広い面にパステル色を塗らない - 最後のCTA帯だけ黒グレーの暗い面にして締める - 割引前の価格には赤い打ち消し線を使う（例外的な赤） ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビュー直後とCTA帯の大コピー | 丸ゴシック | Zen Maru Gothic | 700 | 34px | 1.5 | 0.08em | | `headline-lg` | セクションの日本語見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `accent` | 見出し下の英字ラベル（1文字だけ色を変える） | 欧文サンセリフ | Montserrat | 800 | 12px | 1.2 | 0.25em | | `headline-md` | 特長カードの見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.05em | | `headline-sm` | 代表メッセージの明朝見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.6 | 0.1em | | `body-md` | 本文（中央揃えのリード・カード本文） | ゴシック | Zen Kaku Gothic New | 500 | 12px | 2.0 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.08em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em | - 見出しは日本語を上、英字ラベルを下に置いて中央揃えにする - 英字ラベルは字間を大きく取り、1文字だけパステル色にする - リード文は中央揃えにし、短い行で改行する - カード本文は左揃えで行間を2.0にする - 代表メッセージだけ明朝体にして語りの温度を変える - ブランド英字は極太の欧文と細いアウトラインを並べ、帯として大きく使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長カードは左右に交互に寄せる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 特長カードは画面端からはみ出し気味に左右交互に配置し、反対側に大きなアウトライン数字を置く - ステップは左に黒い番号の箱、右に白い本文の枠を並べた横長ボックスにする - 方針の項目は線画の正円を縦に重ねてつなげる - 動画カードは角丸、その下に肩書きと区切り線とプロフィールを置く - 見出しの上下には64〜80pxの余白を取る ## Elevation & Depth - 特長カードはニューモーフィズム風（右下に淡いグレーの影、左上は白いハイライト） - サブボタンは黒グラデのピル型に柔らかい落ち影 - 黒枠のボックスには影を付けず、ずらした二重枠で奥行きを出す - 3Dオブジェには自然な接地影を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 48px。ボタンはピル型。 - **写真の切り抜き**: 3Dオブジェは背景を抜いて浮かせる。動画は角丸の長方形、人物写真は角丸なしの長方形 - **セクション境界**: 直線で切り替える。3D教室の帯やワイヤーフレームの地形でセクションをつなぐ - 特長カードは48px前後の大きな角丸 - ステップと価格の枠は角丸なしで、2px前後の黒線 - 方針の項目は線画の正円 - ボタンはピル型 - 見出し帯はモザイク柄の角丸ラベル ## Components - **無料相談CTA**（`button-primary`）: 暗い帯の上に置く銀色グラデのピル型ボタン - **詳細を見るボタン**（`button-secondary`）: 黒グラデのピル型ボタン。白文字と右向き矢印 - **追従の縦書きタブ**（`side-tab`）: 画面の右端に固定する白い縦書きの相談タブ - **和英2段の見出し**（`section-heading`）: 日本語の見出しの下に、字間の広い英字ラベルを置く。英字は1文字だけ差し色 - **ニューモーフィズムの特長カード**（`feature-card`）: 大きな角丸のソフトなカード。上に3Dオブジェ、下に見出しと本文。横にアウトライン数字 - **ステップの行**（`step-box`）: 左に黒い箱でSTEPと番号、右に黒枠の白い箱で手順を書く - **線画の円**（`policy-circle`）: 細い黒線の正円の中に、短い条件文を中央揃えで入れる - **価格の表示**（`price-block`）: 上下を黒の太線ではさむ。プランのバッジと打ち消した旧価格、下向き三角、大きな新価格 - **モザイク帯の小見出し**（`mosaic-label`）: ピクセル柄のグレーの角丸帯の中央に小見出しを置く - **黒の太枠ボックス**（`framed-box`）: 太い黒枠と少しずらしたグレー枠を重ね、背景にグリッド線を敷く ## Do's and Don'ts **Do** - 白い3D空間にパステル色のシュールな小物を散らして遊び心を出す - 英字ラベルの1文字だけに差し色を入れる - やわらかな角丸カードと、硬い黒線の枠を対比させる - 本文は中央揃えの短い行で、余白をたっぷり取る - ブランドの英字は極太とアウトラインを並べた帯として大きく使う **Don't** - 鮮やかな原色で広い面を塗らない - 濃い影や立体感の強いボタンにしない - 書体を何種類も混ぜない（明朝は代表メッセージだけ） - パステル色を文字色に多用しない - 写真の上に情報を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を一目で伝える）: 白い3DCGの教室の中央にロゴを置き、周りにパステル色のオブジェを浮かせる。右上にメニューとSNSアイコン 2. **コンセプト**（理念を伝える）: 英字ラベルと大きな丸ゴシックのコピー。中央揃えのリードを短い段落で並べ、小物を点在させる 3. **ブランド帯**（場面転換）: 3Dオブジェが並ぶ机の上に、極太とアウトラインの英字を横断させる 4. **対象者の定義**（歓迎する人の条件を示す）: グリッドの上に黒の二重枠ボックスを置き、条件3つをパステル色の図形の上に書く。下はワイヤーフレームの地形 5. **特長**（得られる価値を5つ伝える）: 番号付きのニューモーフィズムカードを左右交互に並べ、最後に黒いピル型のサブボタン 6. **お客様の声**（実例で信頼を得る）: モザイク帯の小見出し、動画埋め込み、肩書き、プロフィールの順で縦に繰り返す 7. **受け入れ方針**（条件を明示する）: リード文の下に、線画の円を3つ縦に重ねる 8. **申込の流れ**（手順を示す）: 黒い番号の箱と黒枠の箱を組み合わせたステップを5段並べ、最後に注釈 9. **料金**（価格を提示する）: 上下を黒線ではさむ。旧価格を打ち消し、下向き三角から大きな新価格へつなぐ 10. **代表メッセージ**（人柄を伝える）: 黒枠の中に青背景の人物写真と明朝の見出し。長文は下にいくほど薄くフェードさせる 11. **クロージングCTA**（相談へ誘導する）: 黒グレーの帯にロゴ、白い大コピー、銀色のピル型ボタン 12. **フッター**（補足情報）: 白地に小さな文字でポリシーとコピーライト ## Imagery - 空間は白一色の3DCGレンダー（教室・机・椅子）。影はやわらかく - 小物は銀・陶器・樹脂の質感の日用品やトロフィーなど。パステル色を部分的に塗ってシュールにする - 線画の装飾：細いグレー線の地球儀、円、プラス記号、斜線 - 低ポリのワイヤーフレーム地形と、ザラついた質感の幾何学立体 - 人物は単色背景の証明写真風で、真面目さとユーモアの落差を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも中央寄せの単一軸を保ち、本文の幅は約700pxに抑える - PCの特長カードは横長のピル状で、画像とテキストを左右に並べて交互に配置する - PCの声は3カラムの動画カードを横に並べる - PCの受け入れ方針の円は横に3つ重ねる - PCのステップは横幅を広げ、STEPと番号を1行にする - PCのクロージングはロゴを左、コピーとボタンを右に置く2カラム ## 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-91ec4962`（元 LP の URL から採番） - **元 LP**: https://manabanaigakko.studio.site/ - **解析に使った画像**: 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/）からご連絡ください。