--- version: alpha name: Bold Red Yellow Flat Illustration SaaS LP description: 真紅と山吹色の面を交互に敷き、黒線＋黄色差しのフラットイラストで親しみを出す店舗向けSaaSのLP。白カードに太いゴシック見出しを載せ、数字バッジや丸アイコンで価格・手間の少なさを短く伝える。 colors: primary: '#CC1E1F' secondary: '#F4C201' cta: '#F4C201' on-cta: '#222222' background: '#FFFFFF' background-alt: '#F4F5F4' text: '#0A0909' text-body: '#444444' on-primary: '#FCFCFC' accent-1: '#AF1416' line: '#F7F7F7' dark-section: '#1A1A1A' marker: '#222222' text-muted: '#999999' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.sm}' height: 52px label-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' height: 28px stat-circle: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 120px problem-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 220px merit-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 340px step-timeline: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 56px form-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 900px --- # DESIGN.md — 赤×黄の線画イラストで見せるAI集客SaaS LP（Bold Red Yellow Flat Illustration SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、信頼・誠実 - **キーワード**: 赤黄の2色ブロック・線画イラスト・白カード・丸バッジ・太ゴシック・番号付き - **地の質感**: グラデーションなしのフラットな単色面。カードに軽い影だけを付ける - **形**: 角丸8〜16pxのカードと正円バッジ。ボタンは角丸の長方形 - **温度感**: 暖色が中心で元気。白とグレーのセクションを挟んで落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC1E1F` | ブランド赤・FVやメリット、フォームの地 | 20% | 画素の主要色に補正 | | `secondary` | `#F4C201` | 山吹色の解決・理由セクションの地 | 11% | 画素の実測 | | `cta` | `#F4C201` | 主CTAボタンの地 | 1% | 画素の実測 | | `on-cta` | `#222222` | CTAボタンの文字 | 0% | 推定 | | `background` | `#FFFFFF` | 基本の白地 | 45% | 画素の実測 | | `background-alt` | `#F4F5F4` | 原因まとめボックスの薄いグレー地 | 6% | 画素の実測 | | `text` | `#0A0909` | 見出しの黒文字 | 2% | 画素の実測 | | `text-body` | `#444444` | 本文の濃いグレー | 2% | 推定 | | `on-primary` | `#FCFCFC` | 赤地上の白文字 | 1% | 画素の実測 | | `accent-1` | `#AF1416` | 見出しの赤強調・×印・必須バッジ | 0% | 画素の実測 | | `line` | `#F7F7F7` | カード枠・区切り線 | 0% | 画素の主要色に補正 | | `dark-section` | `#1A1A1A` | フッターの黒地 | 2% | 画素の実測 | | `marker` | `#222222` | キーワードを黒帯で囲む強調 | 0% | 推定 | | `text-muted` | `#999999` | 注釈・プレースホルダー | 0% | 推定 | - 赤→白→黄→赤→白→黄→白→赤→黒の順で、セクションごとに地の色を切り替える - 赤地の上には白カードか白文字を置く。黄地の上には白カードと黒文字を置く - 主CTAは赤地でも白地でも黄色地＋黒文字に統一する - 見出しの一部だけを赤（白地のとき）や黄（赤地のとき）で強調する - イラストは黒線に黄色を差し、要所にだけ赤を使う - ネガティブ要素の×印は赤の細い手書き風にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | ゴシック | Noto Sans JP | 900 | 30px | 1.35 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.4 | 0.02em | | `headline-md` | 悩みカード・メリットカードの見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.35 | 0.0em | | `headline-sm` | ステップ名・FAQの質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文・カード説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `accent` | MERIT番号・大きな数字 | 欧文サンセリフ | Montserrat | 700 | 26px | 1.1 | 0.0em | | `note` | 見出し上の小さなリード・注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.05em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 見出しは極太ゴシックで中央揃えにし、2〜3行に改行する - セクション見出しの上に小さなリード文を置く - 本文は短く2〜3行に収める - 数字は赤の大きな太字にして、単位を小さく添える - 強調語は色を変えるか、黒帯で囲んだ白抜き文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はカードを3列・2列で並べる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードの左右余白は約15px - カード同士の間隔は12〜16px - セクションの上下余白は56〜72px - FVはイラストを上、コピーを下に置く - チェックリストは点線で区切る ## Elevation & Depth - メリットカードには柔らかい影（0 4px 12px rgba(0,0,0,.15)）を付ける - FVの丸バッジは黒の細枠＋薄い影 - 悩みカードは影を付けず、1pxのグレー枠だけにする - フォームカードには軽い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 背景を抜いた線画イラストをそのまま置く。写真は使わない - **セクション境界**: 直線で色面を切り替える - ボタンは角丸4〜6pxの横長長方形 - 数値バッジや特長アイコンは正円にする - MERIT番号は黄色の正円にし、カードの左上にはみ出させる - ステップ番号は赤の正円を縦線でつなぐ ## Components - **主CTAボタン**（`button-primary`）: 幅いっぱいの黄色ボタン。黒の太字に右矢印を付け、軽い影を落とす - **キャッチ帯ラベル**（`label-band`）: FVの見出し上に置く、幅いっぱいの細い黄色帯ラベル - **数値丸バッジ**（`stat-circle`）: 白い正円にアイコン・項目名・赤の大きな数字を縦に並べ、2×2で配置する - **悩みカード**（`problem-card`）: グレー枠の白カード。赤い×印・太字の見出し・短い説明を中央揃えで置く - **メリットカード**（`merit-card`）: 赤地に置く白カード。左上に黄色丸の番号、中央に線画アイコンを置く - **ステップタイムライン**（`step-timeline`）: 赤丸の番号を赤い縦線でつなぎ、右側に見出しと説明を置く - **FAQアコーディオン**（`faq-item`）: 赤丸のQアイコン・質問文・右端の赤い▼を並べ、下罫線で区切る - **問い合わせフォーム**（`form-card`）: 赤地に置く白カード。ラベルに赤の必須バッジを付け、入力欄はグレー枠の角丸にする ## Do's and Don'ts **Do** - 地の色は赤・黄・白の3色を大きな面で交互に使う - イラストは黒線＋黄色ベタで統一する - 数字や価格は大きな赤い太字で目立たせる - CTAはどの地の上でも黄色ボタンで統一する - カードは白地で角丸8pxにする **Don't** - グラデーションや写真の背景を使わない - 赤と黄以外の鮮やかな色を足さない - 細い明朝体を使わない - 赤地の上に赤いボタンを置かない - 1カードに長文を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドの表示とナビゲーション）: 白地。左にピンアイコン付きのロゴ、右にハンバーガーメニュー 2. **ファーストビュー**（課題の提起と価値の提示）: 赤地。人物イラスト・黄帯ラベル・白い極太コピー・チェックリスト3行・数値丸バッジ4つ・黄色CTAの順に並べる 3. **悩みの提起**（よくある課題への共感）: 白地。×印付きの枠カードを3枚縦に並べる 4. **原因の提示**（課題の根本原因を示す）: 悩む人物2人のイラストの下に、グレーボックスで×印付きの箇条書きを4つ置く 5. **解決策**（サービスの概要を伝える）: 黄地。中央揃えのリード文と黒帯の強調見出しを置き、白い丸アイコンを3つ横に並べる 6. **メリット**（5つの利点を示す）: 赤地。黄色丸の番号付き白カードを縦に5枚並べ、それぞれ大きな線画アイコンを入れる 7. **利用の流れ**（導入の手軽さを示す）: 白地。赤丸番号の縦タイムラインで3ステップを見せる 8. **選ばれる理由**（他社との違いを示す）: 黄地。黄色数字・小さなイラスト・太字見出しを入れた白カードを4枚置く 9. **よくある質問**（不安の解消）: 白地。Qアイコン付きのアコーディオンを5つ並べる 10. **CTA・フォーム**（無料相談の申込）: 赤地。白文字の見出しの下に白いフォームカードを置き、黄色の送信ボタンとグレーのピル型電話ボタンを付ける 11. **フッター**（補足リンクとコピーライト）: 黒地。中央にロゴ・リンク・コピーライトを置く ## Imagery - 黒の太めの線に黄色ベタを入れたフラットな人物イラスト。スーツ姿のビジネスマンや店舗スタッフを描く - スマホ・ロボット・コイン・店舗・グラフを均一な線幅のアイコン調で描く - 赤はグラフの矢印など、一部にだけ差す - 背景は透過にして、白カードや色面の上に直接置く - 人物は困り顔や指差しなど、感情がわかるポーズにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはFVを左テキスト・右イラストの2カラムにし、数値バッジを4つ横一列に並べる - PCは悩みカードを3列、メリットを3列＋2列、理由カードを2×2で並べる - PCはヘッダーにアンカーナビと小さな黄色CTAを置く - PCはフォームの入力欄を2列に組む - PCは本文の幅を約800〜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-eb3f2feb`（元 LP の URL から採番） - **元 LP**: https://meo-automap.com/? - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。