--- version: alpha name: Navy and Orange Trustworthy Investment Seminar LP description: 淡いブルーグレーの地に濃紺の太い見出しを置き、オレンジを強調色に使う投資セミナー集客 LP。フラットなビジネスマンのイラストと数値カードで「手軽さ」と「信頼」を両方伝える。赤→オレンジのグラデーション CTA を写真帯の上に繰り返し配置する。 colors: primary: '#08082E' accent-1: '#CB5C30' cta: '#E43C0B' on-cta: '#FFFFFF' secondary: '#D0111B' background: '#FEFEFE' background-alt: '#F6F7FB' tint-1: '#E2E9F3' surface: '#FEFEFD' tint-2: '#FBC4A5' text-body: '#2A2A44' text-muted: '#9A9AA6' line: '#E7ECF4' accent-2: '#F2B505' cta-accessible: '#DA390B' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 9px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em headline-md: fontFamily: Montserrat fontSize: 32px fontWeight: 800 lineHeight: 1.1 rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 14px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px badge-free: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 22px section-label: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px check-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 38px number-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 60px stat-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 110px photo-cta-band: typography: '{typography.headline-md}' height: 220px case-slider: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 600px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 110px --- # DESIGN.md — 紺×オレンジの信頼系不動産投資セミナー LP（Navy and Orange Trustworthy Investment Seminar LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、清潔・爽やか - **キーワード**: 濃紺見出し・オレンジ強調・フラットイラスト・数値訴求・セミナー集客・淡いブルーグレー地 - **地の質感**: フラットな単色面。影はカードにごく薄く付く程度で、質感はない - **形**: 角丸小さめの白カード、ピル型のチェックリスト行、角丸小の横長 CTA バー - **温度感**: やや寒色寄り。紺と青灰の地に、暖色のオレンジで熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#08082E` | 見出し・数値・ラベル帯の濃紺 | 4% | 画素の実測 | | `accent-1` | `#CB5C30` | 英字ラベル・強調語・番号枠のオレンジ | 2% | 画素の実測 | | `cta` | `#E43C0B` | 主 CTA の赤→オレンジグラデーション | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#D0111B` | 「無料」バッジの赤 | 0% | 推定 | | `background` | `#FEFEFE` | ページ基本の白地 | 27% | 画素の実測 | | `background-alt` | `#F6F7FB` | セクション交互の淡いブルーグレー地 | 24% | 画素の実測 | | `tint-1` | `#E2E9F3` | イラスト背景の青灰面 | 9% | 画素の実測 | | `surface` | `#FEFEFD` | チェックリスト行・カードの白面 | 6% | 画素の実測 | | `tint-2` | `#FBC4A5` | 比較表ヘッダーの薄ピーチ | 2% | 画素の実測 | | `text-body` | `#2A2A44` | 本文の濃紺グレー | 3% | 推定 | | `text-muted` | `#9A9AA6` | 注釈の灰色 | 1% | 推定 | | `line` | `#E7ECF4` | 表・FAQ の区切り線 | 0% | 画素の主要色に補正 | | `accent-2` | `#F2B505` | イラストの黄色（矢印・コイン） | 2% | 画素の実測 | | `cta-accessible` | `#DA390B` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いブルーグレーをセクションごとに交互に使う - 見出し・数値・ラベル帯は濃紺で統一する - オレンジは英字ラベル・強調語・番号枠・グラフ・人物の丸枠だけに使う - 主 CTA は赤→オレンジの横グラデーション。左端に赤の「無料」バッジを付ける - 中間 CTA は暗い写真帯の上に置き、白文字で目立たせる - 表ヘッダーは薄ピーチ、数値ラベル帯は濃紺地に白文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#E43C0B` のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA390B`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー（強調語はオレンジ） | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.04em | | `headline-sm` | カード見出し・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 700 | 9px | 1.2 | 0.05em | | `body-md` | 本文・チェックリスト | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.7 | 0.0em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.03em | | `headline-md` | 実績数値（大きい数字と小さい単位） | 欧文サンセリフ | Montserrat | 800 | 32px | 1.1 | 0.0em | - 見出しは極太ゴシックの濃紺で、中央揃えの 2 行にする - 見出しの上にオレンジの小さな英字ラベルを必ず置く - 本文中のキーワードは太字にし、特に重要な語はオレンジにする - 数値は大きく、単位は 40% ほどの小さいサイズにする - 強調したい語は「"」で囲み、オレンジにする - 注釈は ※番号付きの灰色小文字でまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。声・講師カードは 3 枚を横に並べ、数値カードは 3＋1 枚のグリッド - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 56px、基本単位 8px、カード内 14px（375px 幅換算） - セクションは上下 48〜64px の余白を取り、地色の切り替えで区切る - 悩み・提案リストは左寄せのピル行を 4〜5 本縦に並べ、右下にイラストを重ねる - メリットは大きなイラスト面に番号付き白帯を重ね、その下に本文を置く - 事例は横スライダー。左右に次のカードを少しはみ出させる - 概要と会社情報は 2 列の表組みにする ## Elevation & Depth - カードとピル行はごく薄い影か影なしで、白と淡灰の差で浮かせる - 事例スライダーのカードには柔らかい影を付ける - ヘッダーは白地で固定し、下に薄い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: イラストは角丸小の矩形面に置く。人物写真は細いオレンジ枠の正円で切り抜く - **セクション境界**: 直線で区切り、地色を切り替える - CTA は角丸小の横長バーで、右端に白丸の矢印アイコンを付ける - チェックリスト行はピル型の白帯にする - 番号は白地にオレンジの細枠の正方形で囲む - 数値ラベルは濃紺の矩形帯を上に付けた白カードにする ## Components - **主 CTA バー**（`button-primary`）: 赤→オレンジのグラデーション。左に赤い「無料」バッジ、右に丸矢印を付ける - **無料バッジ**（`badge-free`）: 白地に赤文字、または赤地に白文字の小さな矩形バッジ - **英字ラベル＋見出し**（`section-label`）: オレンジの小さな英字を濃紺の極太見出しの上に置き、中央揃えにする - **チェックリスト行**（`check-pill`）: 白いピル帯の左にチェックアイコンを置き、一部の語を太字にする - **番号付きメリット帯**（`number-card`）: イラスト下端に重なる白帯。オレンジ枠の番号と太字の見出しを入れる - **実績数値カード**（`stat-card`）: 濃紺のラベル帯の下に大きな数字を置く白カード - **写真帯の中間 CTA**（`photo-cta-band`）: 暗い写真の上に、資料画像・白見出し・主 CTA を重ねた帯 - **事例カードスライダー**（`case-slider`）: 丸い人物アイコン、属性タグ、薄ピーチ見出しの比較表を入れる。左右にオレンジの矢印ボタンを置く - **Q&A 行**（`faq-item`）: オレンジの Q, と A, を頭に付け、細い線で区切る ## Do's and Don'ts **Do** - 見出しは必ず濃紺の極太ゴシックにする - 英字ラベルとオレンジの強調語をセットで使う - 実績・金利・手数料などの数値は大きく見せ、※注釈を付ける - CTA は 3〜4 回、同じデザインで繰り返す - フラットなビジネスマンのイラストで、手軽さを表現する **Don't** - オレンジを本文や広い面に使わない - 見出しを明朝や細字にしない - 写真を多用して重たい印象にしない - CTA の色をセクションごとに変えない - 角丸を大きくしすぎてかわいい印象にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（手軽さと実績を一目で伝える）: 2 行の大見出し（1 行目にオレンジの強調）、月桂冠付きの実績バッジ 3 つ、アイソメ風のイラスト、下に主 CTA と注釈を置く 2. **悩みの提起**（読者の悩みに共感する）: 淡灰の箱に、チェック付きピル行を 4 本並べる。最後に太字の誘導文を置き、右下にイラストを添える 3. **シミュレーション**（少額で始められる根拠を示す）: 本文、アイコン付きの比較 2 行、折れ線グラフ、オレンジ強調のまとめ文を順に並べる 4. **メリット**（利点を 3 つ伝える）: 大きな青灰イラスト面に番号付き白帯を重ね、その下に本文を置く 5. **中間 CTA**（特典を付けて申込を促す）: 暗い写真帯の上に、資料画像・白見出し・主 CTA を重ねる 6. **利用者層と事例**（自分にもできると思わせる）: オレンジ系の円グラフ 2 つと、事例カードの横スライダーを置く 7. **選ばれる理由**（数値で信頼を示す）: 濃紺ラベル付きの数値カード 4 枚と、オレンジ強調の一文を置く 8. **始め方の提案**（セミナーで得られる内容を示す）: チェック付きピル行を 5 本並べ、イラストを添える 9. **お客様の声**（参加者の体験で安心させる）: 丸枠の人物写真、属性見出し、本文を入れた白カードを 3 列に並べる 10. **よくある質問**（不安を解消する）: オレンジの Q,/A, 付きの行を線で区切る 11. **セミナー概要・講師**（開催の詳細と講師を伝える）: 淡灰の見出し列を持つ 2 列表と、講師カードを 3 列に並べる 12. **運営会社・フッター**（会社の信頼性を示す）: 太字ラベルと値を縦に並べ、淡灰のフッターにロゴと電話番号を置く ## Imagery - 青・紺・黄で描いたフラットなビジネスマンのイラスト。くつろぐ姿や上昇矢印で「楽に増える」を表現する - 札束・コイン・ビルをアイソメトリックで描いた FV イラスト - 人物写真はスーツ姿のバストアップで、オレンジの細枠の円に収める - 中間 CTA の背景は、家の模型やルーペを写した暗めの写真 - グラフと円グラフはオレンジの濃淡で統一する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 960px 幅。FV は左にコピーと CTA、右にイラストを置く - メリットは PC で左にイラスト、右に番号見出しと本文の横並びにする - 数値カードは PC で 4 枚を横 1 列に並べる - 中間 CTA は PC で、見出しと CTA ボタンを横並びの細い帯にする - 運営会社情報は PC で 2 列に分ける - 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-81b0e2af`（元 LP の URL から採番） - **元 LP**: https://vertex-c.co.jp/lp/simple_invest/ - **解析に使った画像**: 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/）からご連絡ください。