--- version: alpha name: Red Navy Diagonal Business Community LP description: 赤と濃紺の斜めカットした帯見出しを、明るいグレー地に置いた白カードと組み合わせる。一人称の体験談を長文で読ませる、ビジネス交流会への勧誘 LP。強調語は赤ベタの白抜きにし、最後は赤いオーバーレイ写真の上に申込フォームを置く。 colors: primary: '#D01F31' dark-section: '#0B0B25' background: '#F6F6F6' surface: '#FEFEFE' text-body: '#333333' text: '#1A1A1A' accent-1: '#CA2838' on-dark: '#FDFDFD' cta: '#FE7C04' on-cta: '#FFFFFF' secondary: '#CC2B3B' tint-1: '#E45E6A' text-muted: '#777776' line: '#101027' cta-accessible: '#BC5B01' text-muted-accessible: '#767675' typography: display: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.12em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Roboto fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 14px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' slant-band-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 48px speech-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 60px keyword-mark: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 36px problem-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 440px down-arrow: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 90px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 520px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px step-item: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px form-field: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 28px --- # DESIGN.md — 赤×濃紺の斜め帯で語る経営者交流会 LP（Red Navy Diagonal Business Community LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 力強い・インパクト、信頼・誠実、情報量多め・訴求型 - **キーワード**: 斜めカット帯・赤ベタ白抜き強調・濃紺の吹き出し見出し・ストーリー型長文・白カード - **地の質感**: フラットな単色面と人物写真。影はカードにごく薄くつける程度 - **形**: 平行四辺形の帯見出し、角丸カード、円形のアイコン枠、ギザギザの丸バッジ - **温度感**: 赤の熱量と濃紺の硬さが同居する、やや熱めのビジネストーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D01F31` | 強調帯・キーワード背景・矢印 | 8% | 画素の実測 | | `dark-section` | `#0B0B25` | 濃紺の見出し帯・問題提起ボックス | 13% | 画素の実測 | | `background` | `#F6F6F6` | ページ地の明るいグレー | 20% | 画素の実測 | | `surface` | `#FEFEFE` | 本文を載せる白カード | 32% | 画素の実測 | | `text-body` | `#333333` | 本文テキスト | 3% | 推定 | | `text` | `#1A1A1A` | 見出し・価格の濃い文字 | 1% | 画素の実測 | | `accent-1` | `#CA2838` | 本文中の赤い強調文 | 1% | 画素の主要色に補正 | | `on-dark` | `#FDFDFD` | 濃紺・赤の上の白文字 | 2% | 画素の実測 | | `cta` | `#FE7C04` | フォーム送信ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | 送信ボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#CC2B3B` | カード内の赤いピル型サブボタン | 0% | 画素の実測 | | `tint-1` | `#E45E6A` | フォーム背景の赤いオーバーレイ | 8% | 画素の実測 | | `text-muted` | `#777776` | 取り消し線つきの旧価格・補足 | 0% | 画素の実測 | | `line` | `#101027` | 枠線見出しの線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#BC5B01` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#767675` | AA を満たす補正値（計算） | | 計算 | - 地はライトグレー、本文はすべて白カードに載せる - 見出し帯は濃紺と赤を交互に使い、単調にしない - 見出しの中の 1 語だけを赤ベタ＋白文字にして強調する - 本文で強調したい文は赤文字か太字にとどめる - 申込エリアは写真の上に赤の半透明を重ね、白文字で書く - 送信ボタンだけをオレンジにして、赤から浮き立たせる - `button-primary` は文字 `#FFFFFF` × 背景 `#FE7C04` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BC5B01`、4.53:1）を使う。 - `form-field` は文字 `#777776` × 背景 `#FEFEFE` のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767675`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のタイトル帯・大見出し | ゴシック | Noto Sans JP | 900 | 36px | 1.3 | 0.12em | | `headline-lg` | 濃紺ボックス内のメッセージ | ゴシック | Noto Sans JP | 900 | 28px | 1.5 | 0.08em | | `headline-md` | 吹き出し・斜め帯の見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.1em | | `headline-sm` | Step 見出し・小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.1em | | `body-md` | 体験談の本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `accent` | 価格の数字 | 欧文サンセリフ | Roboto | 700 | 40px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.1em | | `note` | アイコンのラベル・補足 | ゴシック | Noto Sans JP | 500 | 9px | 1.4 | 0.1em | - 見出しは極太ゴシックにし、字間を広めにとる - 見出し内の一部だけ、ひと回り大きくするか赤ベタで抜く - 本文は小さめ。2〜3 行ごとに段落を空けて会話のように読ませる - 本文の改行は意味の切れ目で手動で入れる - 数字は欧文の太字で大きく見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せで、一部を 2 カラムにする - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 24px、基本単位 8px、カード内 14px（375px 幅換算） - 白カードは左右 3% の余白を残して画面幅いっぱい近くに置く - 見出し帯はカードよりやや内側に置き、平行四辺形に斜めカットする - 問題提起は濃紺の角丸ボックス＋イラスト＋大きな白文字で 1 画面使う - 手法の紹介は円形アイコンを縦に並べ、下に濃紺のラベルをつける - Step は赤丸バッジと濃紺帯の見出しを組み、間に下向きの山形矢印を置く ## Elevation & Depth - 白カードには影なし、またはごく薄い影 - 価格カードだけに柔らかいドロップシャドウをつける - 写真やバッジの立体表現は使わない ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: FV と写真セクションは斜めのカットで区切る。本文中の写真は角なしの矩形 - **セクション境界**: FV は斜めの赤い面で区切る。ほかはカード間の余白で区切り、申込前は写真背景に切り替える - 見出し帯は左右を斜めに切った平行四辺形にする - 吹き出し見出しは濃紺の角丸ボックスに下向きの三角をつける - 強調バッジは赤のギザギザ円にする - Step 番号は赤い正円にする ## Components - **斜め帯見出し**（`slant-band-heading`）: 濃紺か赤の平行四辺形。白の太字で、1 語だけを赤ベタにする - **吹き出し見出し**（`speech-heading`）: 濃紺の角丸ボックスに下三角をつけ、右上に集中線を添える - **赤ベタ強調**（`keyword-mark`）: 見出しのキーワードを赤い矩形で白抜きにする - **問題提起ボックス**（`problem-box`）: 濃紺の角丸ボックス。人物イラストと大きな白文字のメッセージを入れる - **逆接の大矢印**（`down-arrow`）: 赤い太い下矢印。中に英単語を白で入れる - **価格カード**（`price-card`）: 左上に縦書きの赤タブ。旧価格に取り消し線、大きな現価格、チェックリストを並べる - **赤ピルボタン**（`button-secondary`）: カード内に置く赤いピル型のボタン。2 行の白文字 - **ステップ**（`step-item`）: 赤丸の Step 番号を濃紺帯に重ね、下に説明文、間に山形矢印を置く - **フォーム送信ボタン**（`button-primary`）: オレンジで全幅、角は小さめ。白文字の末尾に矢印 - **入力欄**（`form-field`）: 赤背景の上に白い入力欄。ラベルは白文字、必須は赤い点 ## Do's and Don'ts **Do** - 見出しは必ず斜め帯か吹き出しにし、キーワードを赤ベタで抜く - 本文は白カードに収め、短い段落で語りかける - 赤と濃紺の面を交互に置き、リズムをつくる - イラストは線画に淡い単色の塗りで統一する - 申込直前は赤オーバーレイの写真背景に切り替える **Don't** - パステルやグラデーションの多用はしない - 丸ゴシックや明朝は使わない - 本文を地のグレーに直接置かない - 赤と濃紺以外の強調色を増やさない（送信ボタンのオレンジは例外） - 見出しを装飾なしのテキストだけで置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（オンライン参加の交流会であることを伝える）: 人物写真の上に赤の斜め面と濃紺の円バッジを重ねる。白帯のリード文と、赤帯の大タイトルを置く 2. **体験談の導入**（否定された体験で興味を引く）: 濃紺の斜め帯見出しの下に白カード。線画イラスト、赤ボックスの要約、長文を入れる 3. **よくある手法の提示**（期待されていた手法を見せる）: 吹き出し見出しの下に、円形アイコンと濃紺ラベルを縦に 3 つ並べる 4. **問題提起**（新規客が来ないリスクを突きつける）: 赤の大矢印から濃紺ボックスへつなぎ、困った人物イラストと大きな白文字を置く 5. **課題整理**（仕組み化の負担と解決の方向を示す）: 赤ピルのタグを 2 つ、枠線の帯、濃紺ボックスの結論の順に並べる 6. **解決策の提示**（交流会の存在を見せる）: 集合写真に斜めの濃紺面を重ね、白帯の見出しと赤のギザギザバッジを置く 7. **仕組みの説明**（紹介で受注する仕組みを語る）: 赤の斜め帯見出しの下に白カードの長文。赤文字で強調する 8. **メリット**（参加メリットを 2 つ示す）: 吹き出し見出しの下に、斜め帯見出しつきの白カードを 2 枚。写真を挟む 9. **料金**（費用と特典を示す）: 吹き出し見出しの下に価格カード。チェックリストと赤ピルボタンを入れる 10. **参加の流れ**（申込から参加までの手順）: 握手イラスト入りの濃紺バナーを置き、Step を 4 つ縦に並べる 11. **申込フォーム**（無料体験への申込）: 赤オーバーレイの写真背景に白文字の箇条書き、白い入力欄、オレンジの送信ボタンを置く ## Imagery - 写真は明るいオフィスで、ビジネス層の人物が笑顔か作業中の場面 - FV はヘッドセットをつけてパソコンに向かうオンライン参加の人物 - イラストは黒い線画に、水色・オレンジなどの単色をフラットに塗る - 人物イラストの背後に、グレーの不定形の面を敷く - 申込背景は PC 作業の写真に赤の半透明を重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文幅を約 60% に絞って中央に寄せる - PC の FV は左にコピー、右に写真。英字タイトルを大きく添える - PC では体験談カードをイラストと本文の 2 カラムにする - PC では手法アイコンを横 3 列に並べる - 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-0d6a4580`（元 LP の URL から採番） - **元 LP**: https://upsets.jp/bni-lp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。