--- version: alpha name: Coral Pastel Illustrated BtoB Service LP description: コーラルレッドを主役にして、淡いピンク・水色の三角形を敷き詰めた背景と線画イラストを組み合わせたBtoB代行サービスのLPです。丸ゴシックのやわらかい見出しと、ずらした影ブロックで、親しみやすさと信頼感を両立させています。 colors: primary: '#EA6169' on-primary: '#FEFCF9' background: '#FFFFFF' background-alt: '#EDF1F2' tint-1: '#FEECEC' tint-2: '#E2EBF0' surface: '#F5F8F6' secondary: '#DDE4E3' line: '#DC7B82' text: '#3E3A3C' text-muted: '#6C7978' cta: '#EA6169' on-cta: '#FFFFFF' accent-1: '#E4B666' primary-accessible: '#E22631' cta-accessible: '#E32B36' typography: display: fontFamily: Zen Maru Gothic fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.06em note: fontFamily: Zen Maru Gothic fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em accent: fontFamily: Josefin Sans fontSize: 11px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.3em label-button: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em rounded: sm: 2px md: 6px lg: 14px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-title-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 260px worry-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 135px solution-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 170px feature-frame: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 530px service-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 400px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 70px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 480px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 90px required-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' height: 28px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 70px --- # DESIGN.md — コーラル×淡色幾何の業務代行サービスLP（Coral Pastel Illustrated BtoB Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、清潔・爽やか、親しみ・手作り感 - **キーワード**: コーラルレッド・パステル幾何・線画イラスト・ずらし影・丸ゴシック・女性目線 - **地の質感**: フラットな単色面が基本。背景は淡色の三角形を重ねたポリゴン柄。影はぼかさず、色面を斜めにずらして重ねる。 - **形**: 四角いブロックと円形のバッジが主体。カードの角丸は控えめ。STEPカードとCTAだけ角丸を少し大きくする。 - **温度感**: 暖かめ。コーラルの暖色と、淡い青灰色の寒色を交互に置いて調和させる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA6169` | ブランド色・メインブロック・見出し | 17% | 画素の実測 | | `on-primary` | `#FEFCF9` | コーラル面上の白文字 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本背景 | 40% | 画素の実測 | | `background-alt` | `#EDF1F2` | 価格セクションなどの薄グレー地 | 10% | 画素の実測 | | `tint-1` | `#FEECEC` | 淡ピンクのセクション地 | 6% | 画素の実測 | | `tint-2` | `#E2EBF0` | 淡ブルーグレーのセクション地 | 5% | 画素の実測 | | `surface` | `#F5F8F6` | カード面・表の見出しセル | 6% | 画素の実測 | | `secondary` | `#DDE4E3` | ずらし影の色 | 2% | 画素の実測 | | `line` | `#DC7B82` | 枠線（ピンク系） | 2% | 画素の実測 | | `text` | `#3E3A3C` | 本文・見出しの濃グレー | 3% | 推定 | | `text-muted` | `#6C7978` | STEP数字・プレースホルダー | 1% | 画素の実測 | | `cta` | `#EA6169` | 送信ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E4B666` | 冠アイコンの金色 | 0% | 推定 | | `primary-accessible` | `#E22631` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E32B36` | AA を満たす補正値（計算） | | 計算 | - 地色は白・淡グレー・淡ピンク・淡ブルーをセクションごとに切り替える。 - コーラルは大きな色面ブロックと見出し文字に使う。 - STEPセクションだけはコーラルを全面に敷き、上に白いカードを乗せる。 - 見出しはコーラル、本文は濃グレーと役割を分ける。 - 影はぼかさず、淡グレーの面を右下にずらして置く。 - 金色は冠アイコンにだけ少量使う。 - `hero-title-block` は文字 `#FEFCF9` × 背景 `#EA6169` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E22631`、4.5:1）を使う。 - `worry-circle` は文字 `#FEFCF9` × 背景 `#EA6169` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E22631`、4.5:1）を使う。 - `feature-frame` は文字 `#EA6169` × 背景 `#FFFFFF` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E22631`、4.5:1）を使う。 - `service-block` は文字 `#FEFCF9` × 背景 `#EA6169` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E22631`、4.5:1）を使う。 - `required-badge` は文字 `#EA6169` × 背景 `#FFFFFF` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E22631`、4.5:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#EA6169` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E32B36`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインタイトル | 丸ゴシック | Zen Maru Gothic | 700 | 30px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.08em | | `headline-md` | カード見出し・サービス名 | 丸ゴシック | Zen Maru Gothic | 700 | 21px | 1.4 | 0.06em | | `headline-sm` | 特徴の箇条書き・小見出し | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 1.6 | 0.05em | | `body-md` | 本文 | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 1.8 | 0.06em | | `note` | ※注釈 | 丸ゴシック | Zen Maru Gothic | 500 | 11px | 1.7 | 0.04em | | `accent` | 英字ラベル・STEP番号 | 欧文サンセリフ | Josefin Sans | 400 | 11px | 1.2 | 0.3em | | `label-button` | ボタン文字 | 丸ゴシック | Zen Maru Gothic | 500 | 17px | 1.4 | 0.12em | - 和文はすべて丸ゴシックで統一し、字間は広め（0.05〜0.1em）にとる。 - セクション見出しは、細線で挟んだ英字ラベルと和文見出しを2段で組み、中央に揃える。 - 見出しはコーラル、本文は濃グレーにする。 - STEP番号はセリフ体（例: Libre Baskerville）で英字の上に数字を大きく置く。 - 注釈は※を付けて小さくし、ぶら下げインデントにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みの提起だけ円形バッジを 2×2 に並べる。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上下余白は 56〜72px。 - カードやブロックは左右に 16〜24px の余白を残す。 - 見出しは中央揃え。本文の長文は左揃え。 - サービス紹介は、イラストのすぐ下にコーラルの説明ブロックを置く。 - 価格は白カードの中に2列の表を入れる。 ## Elevation & Depth - ぼかし影は使わない。 - 白やコーラルのブロックの右下に、淡グレーやピンクの面を 8〜10px ずらして重ね、ずらし影にする。 - STEPカードは影なしでフラットにする。 ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 14px。ボタンは角丸の長方形。 - **写真の切り抜き**: イラストは切り抜きで背景に溶け込ませる。人物の一部だけ円形フレームに入れる。 - **セクション境界**: 直線で背景色を切り替える。 - 悩みは正円バッジで見せる。 - 枠線カードは太めの 4px ピンク枠で角を立てる。 - STEPカードは角丸 14px。 - 下向き三角の矢印でセクションをつなぐ。 - 吹き出しは楕円に尾を付ける。 ## Components - **FVタイトル板**（`hero-title-block`）: コーラルの四角い板。上に冠アイコンの実績バッジ、上下を二重線で区切り、中に白い大見出し。右下にずらし影を付ける。 - **悩み円形バッジ**（`worry-circle`）: コーラルの正円に、白い線画アイコンと短い悩み文を入れる。2×2 に並べる。 - **解決提示ボックス**（`solution-box`）: 淡グレーの箱に、コーラルの大見出しと本文を入れ、ずらし影を付ける。 - **特徴枠カード**（`feature-frame`）: 太いピンク枠のカード。円形アイコン、見出し、三角付きの区切り線、冠アイコンの箇条書きで構成する。 - **サービス説明ブロック**（`service-block`）: コーラル面にアイコン付きの見出し、白文字の本文、箇条書き、注釈を入れる。 - **英字ラベル付き見出し**（`section-heading`）: 細線で挟んだ字間の広い英字と、その下に大きな和文見出しを置く。 - **価格カード**（`price-card`）: 白カードにずらし影を付ける。中は項目セルが淡グレーの2列表で、下に事例を枠で囲む。 - **STEPカード**（`step-card`）: 白い角丸カード。左に淡グレーの番号欄を置く。カードの間は白い下矢印でつなぐ。 - **必須ラベル**（`required-badge`）: 白地にコーラルの細枠とコーラル文字の小さな四角ラベル。 - **送信CTA**（`button-primary`）: 幅いっぱいのコーラルボタン。字間の広い白文字で、角丸は小さめ。 ## Do's and Don'ts **Do** - コーラルは大きな色面として使い、白い文字を乗せる。 - 淡色の地をセクションごとに交互に変えてリズムを作る。 - 影はずらした色面で表現する。 - イラストは細い線画に淡い色を塗ったタッチで統一する。 - 英字ラベルは細線で挟み、字間を広くとる。 **Don't** - ぼかしの強いドロップシャドウやグラデーションボタンは使わない。 - 濃い青や黒の面を大きく使わない。 - 写真を多用しない（イラストが主役）。 - 明朝体を見出しに使わない。 - ボタンをピル型にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス名と実績を伝え、信頼させる）: パステルの三角ポリゴン背景に、コーラルのタイトル板と線画の人物を置き、下にコーラル文字のリード文を入れる。 2. **悩みの提起**（読み手の課題に共感する）: かぎ括弧付きの導入文と、コーラルの問いかけ見出し。円形バッジ4つの下に、人物アイコンを横一列に並べる。 3. **解決提示**（任せられることを宣言する）: 下向き三角のあとに、淡グレーのずらし影ボックスを置く。 4. **特徴**（強みを4点で示す）: ピンク枠カードに、冠アイコン付きの箇条書きを並べる。 5. **サービス内容**（提供業務を2種類紹介する）: 淡ブルーと淡ピンクの地に、イラストとコーラルの説明ブロックを交互に置く。 6. **料金**（価格を明示する）: 淡グレーの地に白い価格カードを置き、表・注釈・事例枠を入れる。 7. **導入実績**（取引先で信頼性を補強する）: 細枠のロゴ枠を縦に並べ、その下にグレーの点付き実績リストを置く。 8. **導入手順**（依頼までの流れを示す）: コーラルの全面地に5つのSTEPカードを矢印でつなぎ、見出しの横に吹き出しを添える。 9. **お問い合わせ**（問い合わせを獲得する）: 必須ラベル付きのフォーム。入力欄は淡グレー、最後に幅いっぱいのコーラルボタンを置く。 ## Imagery - 人物は細い線画に、淡い青・ピンク・ベージュを部分的に塗ったフラットイラストにする。 - ヘッドセットを付けたオペレーターやPC作業など、業務シーンを描く。 - FVの背景は、淡いピンク・水色・ラベンダーの三角形を不規則に重ねたポリゴン柄にする。 - アイコンは細い線のアウトラインで、白またはコーラルにする。 - 相手の人物は円形フレームに入れて、会話の構図を作る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV を左右に分け、左にタイトル板、右にイラストを置く。 - 悩みバッジは PC では4つを横一列に並べる。 - サービス紹介は PC ではイラストとコーラルブロックを左右に並べ、2行目で左右を入れ替える。 - 価格カードは PC では2枚を横に並べる。 - フォームは PC ではラベルを左、入力欄を右に置く2列にする。 - コンテンツの最大幅は約 900px で中央に寄せる。 ## 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-ad768714`（元 LP の URL から採番） - **元 LP**: https://www.rush-i.com/lp/campaign_tatsujin/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。