--- version: alpha name: Lime Yellow Pop BtoB Marketing LP description: ライムグリーンと鮮やかな黄色を、黒の帯と太字ゴシックで引き締めたBtoBの広告発注サービスLP。黒いフチと黒い落ち影がつくボタン・カード、斜めストライプの区切り、吹き出しラベルが元気で訴求力の強い印象を作る。イラストは明るいフラットな人物と街並みで、親しみやすさも添える。 colors: primary: '#95C51B' on-primary: '#FFFFFF' cta: '#FFDC1D' on-cta: '#0C0300' background: '#FFFFFF' background-alt: '#EFEFEF' tint-1: '#EAF1D0' tint-2: '#FFF8DB' secondary: '#FFDC1E' dark-section: '#000000' on-dark: '#FFFFFF' marker: '#E7DE5B' text: '#000000' accent-1: '#F08A24' primary-accessible: '#607F11' typography: display: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Dela Gothic One fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 8px md: 14px lg: 24px 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.md}' height: 58px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 58px speech-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px case-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 260px marker-text-card: typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 150px icon-circle-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 180px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px faq-accordion: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 96px stat-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px --- # DESIGN.md — 黄緑×黄×黒のポップなBtoB広告サービスLP（Lime Yellow Pop BtoB Marketing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、信頼・誠実 - **キーワード**: ライムグリーン・イエロー・黒フチ＋黒い落ち影・吹き出しラベル・斜めストライプ・太字ゴシック - **地の質感**: フラットな単色面と、やわらかい斜めグラデーションの黄緑帯。ノイズや質感は加えない - **形**: 角丸の長方形カード、ピル型の黒ラベル、円形アイコン、下向き三角の吹き出し - **温度感**: 明るく暖かい。黄緑と黄で活気を出し、黒で締めて信頼感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#95C51B` | ブランドの黄緑。ケース解決カードの面や見出し帯 | 13% | 画素の実測 | | `on-primary` | `#FFFFFF` | 黄緑面の上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#FFDC1D` | 主CTAボタンの黄色 | 2% | 画素の実測 | | `on-cta` | `#0C0300` | CTAボタン上の黒文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白い地 | 27% | 画素の実測 | | `background-alt` | `#EFEFEF` | FVや悩みボックスのライトグレー地 | 11% | 画素の主要色に補正 | | `tint-1` | `#EAF1D0` | 魅力セクションの淡い黄緑地とFAQの面 | 12% | 画素の実測 | | `tint-2` | `#FFF8DB` | 魅力セクション2のクリーム地 | 5% | 画素の実測 | | `secondary` | `#FFDC1E` | ケース背景の黄色帯とストライプ | 6% | 画素の実測 | | `dark-section` | `#000000` | 黒い結果帯・ラベル・比較パネル | 9% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒帯の上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#E7DE5B` | 黒帯の上で強調する黄色文字 | 0% | 画素の主要色に補正 | | `text` | `#000000` | 見出しと本文の黒 | 2% | 画素の実測 | | `accent-1` | `#F08A24` | アイコンと再生ボタンのオレンジ | 0% | 推定 | | `primary-accessible` | `#607F11` | AA を満たす補正値（計算） | | 計算 | - 地は白・ライトグレー・淡い黄緑・クリームを順に切り替え、セクションの区切りを色で見せる - CTAブロックは黄緑の斜めグラデーション帯に置き、主ボタンは黄色、サブボタンは白にする - 黒は小ラベル・結果帯・比較パネルに使い、上に載る強調語は黄色にする - 本文で強調したい語は黄緑の帯マーカーで塗り、文字を白にする - 見出しの強調語は黄色に黒フチで目立たせ、助詞は小さく黒で書く - オレンジはアイコンや再生ボタンなどの小さな差し色だけに使う - `case-card` は文字 `#FFFFFF` × 背景 `#95C51B` のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#607F11`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | ゴシック | Noto Sans JP | 900 | 36px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.04em | | `headline-md` | ケースカードと魅力の見出し | ゴシック | Noto Sans JP | 800 | 22px | 1.4 | 0.03em | | `headline-sm` | ステップ名・悩みの文 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.03em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | ATTRACTION・CASE・STEPなどの欧文ラベル | 欧文サンセリフ | Dela Gothic One | 400 | 16px | 1.2 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.04em | - 見出しは極太ゴシックにし、キーワードは大きく、助詞は約70%に小さくしてメリハリを出す - 強調語は黄色の文字に黒フチ、または黄緑の文字にする - 見出しの上に「＼ ／」で挟んだ小見出しを添える - 本文は行間を広めの1.9にし、強調は帯マーカーで行う - 数字は大きく、単位は小さく組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。アイコン説明は3列のグリッド - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約7%の余白を取って中央に置く - ケースは悩みのグレー箱、下向きのシェブロン、黄緑の解決カードの順に縦に積む - 解決カードの背面に黄色の帯を敷き、下を斜めストライプで区切る - CTAブロックは同じ構成でページ内に4回入れる - 魅力セクションの終わりには縦に並べたドットで次へつなぐ ## Elevation & Depth - ボタンとカードは2pxの黒フチに、ぼかしなしの黒い落ち影（右下へ約4px）を付ける - 白い本文カードは影なしのフラットにする - ぼかしたドロップシャドウは使わない ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: イラストは全幅の角版。区切りではV字や斜めの切り抜きを使う。アイコンは白い円の中に置く - **セクション境界**: 黄×白の斜めストライプ帯、下向き三角の切り欠き、V字の切り抜き、大きな円弧 - CTAボタンは角丸約12pxの長方形にし、左に白い「無料」タグ、右に「＞」を置く - 小ラベルは黒のピル型にし、下に三角の吹き出し口を付ける - CASEの番号は黄緑の線の円に入れ、カードの上辺に重ねる - STEPは黄緑の円バッジにし、文字を円弧状に配置する ## Components - **主CTAボタン**（`button-primary`）: 黄色の地に黒フチと黒い落ち影。左に白い無料タグ、右に矢印を置く - **サブボタン**（`button-secondary`）: 白の地に黒フチと落ち影。見積もり体験などに使う - **吹き出しラベル**（`speech-label`）: 黒または白のピル型で、下に三角の口を付ける。所要時間などのマイクロコピーを書く - **悩み→解決カード**（`case-card`）: 上がグレーの悩み箱、下が黄緑の解決面と白い効果行。下端に黒いピル型の結果帯を重ねる - **マーカー付き本文カード**（`marker-text-card`）: 白い角丸カードに本文を書き、要点を黄緑の帯で白抜きにする - **円アイコンの3列グリッド**（`icon-circle-grid`）: 白い円の中に黄緑×オレンジのフラットアイコン、下に2行の短い説明 - **ステップカード**（`step-card`）: 左に黄緑の円バッジ、右にグレーのカード。補足は黄色の吹き出しにする - **FAQアコーディオン**（`faq-accordion`）: 淡い黄緑の角丸バー。左にQ.付きの太字、右に二重のシェブロン - **実績の丸バッジ**（`stat-badge`）: 黒い円に白文字と大きな黄色の数字。周囲に欧文を円弧状に回す ## Do's and Don'ts **Do** - CTAには必ず黒フチと、ぼかしなしの黒い落ち影を付ける - 見出しの強調語は大きく色を変え、助詞は小さくする - セクションごとに地の色を変え、ストライプやV字で区切る - 数字の実績は黒い丸バッジや黒い帯で目立たせる - 吹き出しラベルで、CTAの直前に不安を解消する一言を置く **Don't** - ぼかした影やガラス風の質感を使わない - 黄緑と黄以外の鮮やかな色を面に広く使わない - 細い明朝体や細字で見出しを組まない - 写真の実写素材を主役にしない（イラストで統一する） - 長い本文に強調のマーカーを付けすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と実績を一目で伝える）: グレーの地にロゴ、黄緑の帯の2行コピー、極太の見出しを置く。下に全幅イラスト、実績の黒丸バッジ2つと注釈 2. **CTA**（無料登録と見積もり体験へ誘導する）: 黄緑グラデーションの帯に吹き出し、黄色の主ボタン、白のサブボタンを縦に並べる 3. **導入実績**（信頼性を示す）: 黄緑の角丸パネルに人物イラストと黒い実績バッジ。下に企業ロゴを5列ほどで並べる 4. **悩み別の活用ケース**（読み手の課題と解決を結びつける）: ストライプの見出しの後、CASEカード4枚を黄色の帯の上に縦に並べる 5. **3つの魅力**（サービスの差別化ポイントを説明する）: 黒い斜めラベルとロゴ見出しの後、淡い黄緑とクリームの地を交互にして、画面モック、本文カード、円アイコンを並べる 6. **追加サービス**（同時に発注できる施策を伝える）: 黄色の円に人物イラスト、黒い2×2の比較パネル、黄緑の帯の見出し 7. **相乗効果**（組み合わせのメリットを図で見せる）: 黄色の3つの円をつないだ図と、黄色に黒フチの大きな成果コピー 8. **ブランドメッセージ＋CTA**（気持ちを高めて再度誘導する）: V字に切り抜いたイラストでグレーの帯を挟み、黒ラベルとコピーを置く。続けてCTAブロック 9. **利用の流れ**（手順の簡単さを示す）: 6つのSTEPカードを縦に並べ、補足は黄色の吹き出しにする 10. **締めのメッセージ＋CTA**（最終的に申し込みを促す）: 全幅イラストとグレーの帯のコピーの後、CTAブロック 11. **よくある質問**（最後の疑問を解消する）: 黄色の欧文ラベルと見出しの後、淡い黄緑のアコーディオンを4つ並べる ## Imagery - 明るい緑の多い住宅街を、フラットでやや絵画調のイラストで描く - 人物は黄色の上着に黒いリュックの配達員や、オフィスワーカー。親しみのある表情にする - PCの画面モックに地図のUIとオレンジの再生ボタンを重ね、動画を示唆する - アイコンは黄緑とオレンジの2色で描くフラットなピクトグラム - 地図ピンや見積もりの意匠を、カードの背景に薄く透かして入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約900pxのコンテンツ幅を取り、ケースカードを2列にする - PCのFVは左にコピー、右に大きなイラストの2分割にする - PCのCTAは主ボタンとサブボタンを横に並べる - PCの魅力セクションはテキストと画像を左右に交互に配置する - PCのSTEPは3列×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-03891c20`（元 LP の URL から採番） - **元 LP**: https://adx-co.jp/lp_d - **解析に使った画像**: 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/）からご連絡ください。