--- version: alpha name: Red Green Bold BtoB Outsourcing LP description: 白とライトグレーを地にして、朱赤のCTA、緑の見出しとFAQ、黒の帯ボタンを強く対比させたBtoB向けのアウトソーシングLP。太いゴシック体と淡いピンク地のフラットアイコン、料金カード、深い赤の星空風フォームで、信頼感と行動喚起を両立させる。 colors: primary: '#00863A' cta: '#E63D1A' on-cta: '#FEF9F6' background: '#FEFEFE' background-alt: '#F2F2F2' text: '#020202' secondary: '#010101' tint-1: '#FFECE8' accent-1: '#FDA28D' dark-section: '#741F12' on-dark: '#FEFEFD' tint-2: '#FAFFF9' marker: '#FEF373' accent-2: '#FD9C02' cta-accessible: '#D43817' typography: display: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS 1p fontSize: 24px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 56px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-small: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 40px speech-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 44px laurel-stat: textColor: '{colors.cta}' typography: '{typography.accent}' height: 60px pain-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 80px band-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 340px faq-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 100px form-card: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 600px --- # DESIGN.md — 朱赤×緑×黒の業務代行BtoBサービスLP（Red Green Bold BtoB Outsourcing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、力強い・インパクト、情報量多め・訴求型、シンプル・ミニマル - **キーワード**: 朱赤CTA・緑の斜体見出し・黒帯ボタン・フラットアイコン・料金カード・深紅の星空背景 - **地の質感**: ベタ塗りのフラットな面。FVだけ手描き風の水彩イラストを使い、フォーム背景には赤地に白い粒子を散らす - **形**: ピル型ボタン、細い黒枠の箱、角丸の小さいカード、番号は円形バッジ - **温度感**: 暖色の赤と寒色の緑を拮抗させた、元気でビジネスライクな温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00863A` | 見出しと番号バッジの緑 | 6% | 画素の実測 | | `cta` | `#E63D1A` | 資料DLボタンの朱赤 | 3% | 画素の実測 | | `on-cta` | `#FEF9F6` | CTAボタン上の文字 | 0% | 画素の実測 | | `background` | `#FEFEFE` | メインの白地 | 39% | 画素の実測 | | `background-alt` | `#F2F2F2` | セクションを区切るライトグレー | 13% | 画素の実測 | | `text` | `#020202` | 見出しと本文の黒 | 3% | 画素の実測 | | `secondary` | `#010101` | 黒の帯ボタンと帯見出し | 4% | 画素の実測 | | `tint-1` | `#FFECE8` | アイコン背景の淡いピンク | 5% | 画素の実測 | | `accent-1` | `#FDA28D` | アイコンのサーモンピンク | 1% | 画素の実測 | | `dark-section` | `#741F12` | フォーム背景の深い赤 | 8% | 画素の実測 | | `on-dark` | `#FEFEFD` | 暗い背景上の白文字 | 0% | 画素の実測 | | `tint-2` | `#FAFFF9` | 事例ボックスのごく淡い緑 | 2% | 画素の実測 | | `marker` | `#FEF373` | 見出し下のレモン黄マーカー | 0% | 画素の実測 | | `accent-2` | `#FD9C02` | フォーム送信ボタンのオレンジ | 0% | 画素の実測 | | `cta-accessible` | `#D43817` | AA を満たす補正値（計算） | | 計算 | - 地は白とライトグレーを交互に敷き、セクションの切れ目を色の面で見せる - 朱赤は資料DLの主CTA、見出しの強調語、マーカー状の強調帯だけに使う - 緑は悩み見出し・事例見出し・料金見出し・FAQバーなど、構造を示す要素に使う - 黒は帯ボタン、ラベル帯、細い枠線に使い、全体を引き締める - イラストは朱赤・サーモン・淡ピンクの3階調だけで描く - 最終CTAとフォームは深い赤の暗いセクションに置き、白カードを浮かせる - `button-primary` は文字 `#FEF9F6` × 背景 `#E63D1A` のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D43817`、4.59:1）を使う。 - `speech-badge` は文字 `#FEF9F6` × 背景 `#E63D1A` のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D43817`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | ゴシック | Noto Sans JP | 900 | 32px | 1.45 | 0.02em | | `headline-lg` | プラン名のような大見出し | ゴシック | Noto Sans JP | 900 | 40px | 1.3 | 0.04em | | `headline-md` | 緑の斜体のセクション見出し | ゴシック | M PLUS 1p | 800 | 24px | 1.5 | 0.04em | | `headline-sm` | カード見出しと業務名 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.06em | | `body-md` | 箇条書きと本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.06em | | `note` | 注釈や出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.04em | | `accent` | 実績数字と価格 | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.08em | - 見出しは太いゴシック（weight 700〜900）に統一する - 緑のセクション見出しは斜体にしてスピード感を出す - 強調したい語だけ朱赤にし、1行の中で色を変える - 本文は字間を0.06em程度に広げて読みやすくする - 数字は大きく、単位は小さく添える - 注釈は※付きの小さい文字で、主張のすぐ下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。業務例と料金は縦に並べる - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - ボタンは幅の約90%で、2つを縦に積む - グレー地の上に白い大きなパネルを置き、その中に一覧を収める - 業務例は細い横線で区切り、見出し→アイコン→箇条書き→黒ボタンの順で繰り返す - 悩みは番号バッジを左上に重ねた枠付きの箱を縦に並べる - 事例はアイコン付きのヘッダーの下に、帯ラベルと箇条書きを積む ## Elevation & Depth - 影はほぼ使わず、フラットな面と線で階層を作る - フォームカードは暗い背景との明度差だけで浮かせる - 主CTAには黒の細い縁取りを付けて輪郭を強くする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: アイコンは角丸の淡ピンク四角、人物は円形に切り抜く - **セクション境界**: 直線で背景色を切り替える - CTAはすべて完全なピル型にする - 悩みの箱と料金カードは1〜2pxの線で囲む - 番号バッジは不揃いな円に小さな飛沫を添える - FAQバーは角丸なしの緑の長方形にする ## Components - **資料DLボタン**（`button-primary`）: 朱赤のピル型で黒の縁取り。左に書類アイコン、右に白丸の矢印 - **問い合わせボタン**（`button-secondary`）: 黒のピル型。白文字で、右に白丸の矢印 - **業務別の相談ボタン**（`button-small`）: 一覧の下に置く黒の細めのピル型ボタン - **吹き出しラベル**（`speech-badge`）: 朱赤の角丸ラベルに下向きの尻尾を付けた告知用バッジ - **月桂樹の実績**（`laurel-stat`）: 金色の月桂樹で挟み、小さなラベルと朱赤の大きな数字を3つ並べる - **番号付きの悩みボックス**（`pain-box`）: 黒い細枠の箱の左上に緑の番号円を重ね、2行目を緑の太字にする - **帯ラベル**（`band-label`）: 幅いっぱいの黒または緑の帯に、白の太字で区分を入れる - **料金カード**（`price-card`）: 黒または緑のヘッダーに大きな価格を置き、下に罫線区切りの条件表を並べる - **FAQバー**（`faq-bar`）: 緑のバーに、左に大きな白のQ、右に＋を置く - **問い合わせフォーム**（`form-card`）: 深い赤の背景に白い角丸カードを置き、淡い入力欄とオレンジの送信ボタンを配置する ## Do's and Don'ts **Do** - CTAは朱赤と黒のピル型をペアで縦に置く - 強調語だけを朱赤や緑の色、またはマーカー帯で目立たせる - アイコンは朱赤系の3階調のフラットイラストで統一する - グレー地と白パネルを交互に使い、情報の塊をはっきりさせる - 数字の実績には※注釈を必ず添える **Don't** - グラデーションや強い影を多用しない - 朱赤を背景の大きな面に使わない（フォーム部の深い赤は例外） - 細い明朝体を見出しに使わない - アイコンに青など、配色外の色を混ぜない - ボタンを角丸の小さい四角にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと常設のCTA）: 黒帯の左にロゴ、右に朱赤のピル型の小さいボタン 2. **ファーストビュー**（価値提案と対象プランの提示）: 太字コピーの一部を朱赤にし、水彩風の人物イラスト、吹き出しバッジ、大きなプラン名、月桂樹の実績3つ、CTA2つを並べる 3. **悩みの提起**（ターゲットの共感を得る）: グレー地に緑の斜体見出しを置き、番号付きの枠箱を3つ縦に並べる 4. **対応業務の例**（依頼できる範囲を示す）: 白パネルの中で業務カテゴリを4つ繰り返す。各カテゴリにアイコン、箇条書き、黒の相談ボタンを置く 5. **導入事例**（具体的な活用像を示す）: 緑のピル型の実績バッジと斜体見出しの下に、事例ごとにアイコン付きのヘッダーと黒・緑の帯ラベルを置き、業務の割合を示す 6. **中間CTA**（提案と問い合わせを促す）: 両脇に線を引いた見出しと、朱赤・黒のCTAを2つ置く 7. **体制の説明**（窓口とチームの仕組みを伝える）: 斜めに切った朱赤の面に人物の図解を載せ、説明文の後半を朱赤のマーカー帯で強調する 8. **料金プラン**（価格を明示する）: 黄色マーカーの見出しの下に黒ヘッダーと緑ヘッダーのカードを2枚並べ、左に緑線を引いた補足見出しで条件を書く 9. **よくある質問**（不安を解消する）: グレー地に緑のアコーディオンバーを縦に並べる 10. **資料請求フォーム**（コンバージョン）: 深い赤の星空背景に、白の斜体見出し、資料の画像、半透明の4項目カード、白い角丸フォームを置く 11. **フッター**（会社情報への導線）: 黒地に白の下線リンクとコピーライトを置く ## Imagery - FVは柔らかい水彩・ペン画風の人物と建物の情景イラストにする - 業務アイコンは朱赤・サーモン・白で描いたフラットな図形にし、淡ピンクの角丸地に載せる - 人物の図解は赤い服のフラットな人物を四角や円で切り抜く - フォーム背景は深紅に白い粒子を散らした星空風にする - 実績には金色の月桂樹の装飾を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCのFVは左にコピーとCTA、右にイラストを置く2カラムにする - PCの悩みボックスは3つを横並びにする - PCの業務例は2×2のグリッドにし、縦横の線で区切る - PCの料金カードは2枚を横並び、CTAも横並びにする - PCの事例はアイコンの列を左に、帯と内容を右に置き、箇条書きを2列にする - PCのコンテンツ幅は約960pxで中央に寄せる ## 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-b818228b`（元 LP の URL から採番） - **元 LP**: https://cast-er.com/cba-ac02/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（14/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。