--- version: alpha name: Navy and Violet AI Marketing SaaS LP description: 白とライトグレーの地に、濃紺の帯でCTAを区切るBtoB SaaS LP。強調には紫とラベンダーのグラデーションを使う。太いゴシックの見出しで、キーワードだけを紫色で大きくする。フラットなイラストと管理画面のモックで、わかりやすさを出している。 colors: primary: '#0C0B56' secondary: '#8B3DF0' cta: '#B18AF0' on-cta: '#FBF3FF' background: '#FFFFFF' background-alt: '#F5F5F5' tint-1: '#F6F1FD' surface: '#EBE9F1' text: '#2A2A29' text-body: '#444444' accent-1: '#2BC0C0' on-dark: '#FFFFFF' accent-2: '#FD647B' cta-accessible: '#884DE8' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 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.full}' height: 44px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 200px label-navy: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px worry-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 56px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 260px flow-chevron: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 110px price-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 140px case-slider: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 340px contact-form: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 720px --- # DESIGN.md — 濃紺×紫グラデのAIマーケSaaS LP（Navy and Violet AI Marketing SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型 - **キーワード**: 濃紺の帯・紫グラデーション・キーワードの部分強調・フラットイラスト・管理画面モック・淡紫のカード - **地の質感**: フラットで、影はごく薄い。背景に淡紫の波線や網目模様をうっすら敷く - **形**: 角丸カードとピル型ボタン。工程は矢羽型の山形パネルでつなぐ - **温度感**: やや寒色寄り。紫で親しみを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C0B56` | CTA帯・見出しラベルの濃紺 | 8% | 画素の実測 | | `secondary` | `#8B3DF0` | キーワード強調の紫 | 2% | 推定 | | `cta` | `#B18AF0` | 資料DLボタン（紫→水色グラデ） | 1% | 推定 | | `on-cta` | `#FBF3FF` | CTAボタンの文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 51% | 画素の実測 | | `background-alt` | `#F5F5F5` | 悩み・実績セクションのグレー地 | 14% | 画素の実測 | | `tint-1` | `#F6F1FD` | 料金カード・実績パネルの淡紫 | 4% | 画素の実測 | | `surface` | `#EBE9F1` | 悩み吹き出しのグレー | 3% | 画素の主要色に補正 | | `text` | `#2A2A29` | 見出しの文字 | 2% | 画素の実測 | | `text-body` | `#444444` | 本文の文字 | 2% | 推定 | | `accent-1` | `#2BC0C0` | ロゴ・フォーム枠のターコイズ | 0% | 推定 | | `on-dark` | `#FFFFFF` | 濃紺帯の上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FD647B` | 実績グラフのピンク | 0% | 画素の実測 | | `cta-accessible` | `#884DE8` | AA を満たす補正値（計算） | | 計算 | - 地は白とライトグレーを交互にし、セクションを区切る - CTA帯だけを濃紺の全幅にして、ページの区切りにする - 見出しはキーワード 1〜2 語だけを紫にし、文字も大きくする - 主ボタンは紫→水色のグラデーション、副ボタンは白地に濃紺文字 - カードの地は淡紫か白にし、濃い色は面に使わない - ターコイズはロゴ周りとフォーム枠に限って使う - `button-primary` は文字 `#FBF3FF` × 背景 `#B18AF0` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#884DE8`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.03em | | `headline-md` | 理由・カードの見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.45 | 0.02em | | `headline-sm` | 小カードのタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文・カード説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.75 | 0.02em | | `note` | 注釈・画像キャプション | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | Reason番号・背景の大きな英字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.0 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | - 見出しは太いゴシックで中央揃え - 強調語は紫色にし、周りの文字の 1.3〜1.5 倍の大きさにする - 数値（人数・%）は特大の太字にし、単位は小さくする - セクション見出しの背後に、淡色の大きな英字を透かしで置く - Reason番号は紫の小さな欧文で、見出しの上に置く - 本文は短く改行し、3 行程度に収める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は 2 カラム（テキストと画像）、カードは 2〜3 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは全幅の帯にし、地色で区切る - 理由セクションは画像とテキストを左右交互に置く - CTA帯はおよそ 3 セクションごとに繰り返す - カードはそろったグリッドに並べる - フォームは中央に寄せた 1 列の枠に収める ## Elevation & Depth - カードとモックにはごく薄いドロップシャドウ - 実績パネルは白カードに影を付けて浮かせる - ボタンに影は付けない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は角版か切り抜き。イラストは淡紫の円形の背景の上に置く - **セクション境界**: 直線で区切り、地色を切り替える - ボタンはピル型で、右端に丸い矢印アイコンを付ける - 工程フローは矢羽型（シェブロン）パネルをつなげる - 見出しラベルは濃紺の角丸の帯 - 悩みは角丸のグレー吹き出しで、しっぽ付き ## Components - **資料DLボタン**（`button-primary`）: 紫→水色グラデーションのピル型ボタン。右端に丸い矢印アイコンを付ける - **問い合わせボタン**（`button-secondary`）: 白地に濃紺文字のピル型ボタン。濃紺帯の上で使う - **特典CTA帯**（`cta-band`）: 濃紺の全幅帯。上に特典ラベル、中央に大きな特典額、下にボタン 2 つを並べる - **濃紺見出しラベル**（`label-navy`）: コピーの上に置く濃紺の角丸帯。中は白文字 - **悩み吹き出し**（`worry-bubble`）: 人物イラストの周りに置くグレーの吹き出し。悩みを短く 4 つ書く - **番号付き機能カード**（`feature-card`）: 白カードに紫の番号、見出し、線画アイコン、説明文を縦に並べ、3 列で配置する - **工程フロー**（`flow-chevron`）: 矢羽型パネルを横につなげる。各工程に担当ラベル（紫か灰）、アイコン、工程名を入れる - **料金特長カード**（`price-card`）: 淡紫地の角丸カード。上にアイコン、太字の見出し、本文を置き、2 列で並べる - **導入事例スライダー**（`case-slider`）: 左に課題→導入後、右に結果グラフを置く白カード。両端に濃紺の丸い矢印を付ける - **埋め込みフォーム**（`contact-form`）: ターコイズの細枠の中に、グレー地の入力欄を縦に並べる。送信はターコイズのボタン ## Do's and Don'ts **Do** - 強調語は必ず紫にして大きくする - CTA帯は同じデザインで繰り返す - アイコンは黒の線画に紫を差し色で入れる - 数値実績はバッジや特大の数字で見せる - 白とグレーの地を交互にしてリズムを作る **Don't** - 暖色を主役にしない - 濃紺を広い本文エリアの地に使わない - 見出しを明朝体にしない - カードに強い影や太い枠線を付けない - 写真ばかりで構成せず、イラストとモックを主にする ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビゲーションと資料DLへの誘導）: 白地。左にロゴ、右にメニューとグラデーションのピル型ボタン 2. **ファーストビュー**（価値提案と実績の提示）: 左に濃紺ラベル、特大コピー、実績数値を 2 つ。右に人物写真とPCモック 3. **CTA帯**（特典の提示と行動喚起）: 濃紺の全幅帯。特典額を大きく置き、ボタンを 2 つ並べる 4. **悩みの提起**（ターゲットの課題に共感する）: グレー地。頭を抱える人物イラストの周りにグレー吹き出しを 4 つ 5. **解決の提示**（サービスで解決できることを示す）: 白地。ロゴ入りの見出し、左にテキスト、右に管理画面モック 6. **できること**（主要機能の紹介）: 淡灰の地に番号付きの白カードを 3 列 7. **工程フロー**（担当者の負担が軽いことを示す）: 矢羽型パネルで 6 工程を表示。下に循環を示す矢印を入れる 8. **選ばれる理由**（差別化ポイントを 3 つ示す）: Reason番号付き。イラストとテキストを左右交互に置く 9. **導入実績**（事例で効果を示す）: グレー地に透かしの英字。課題→結果のスライダーカード 10. **料金**（柔軟な料金体系を説明する）: 白地に淡紫カードを 2×2 で並べる 11. **フォーム**（資料DL・問い合わせを受け付ける）: 中央見出しの下に、ターコイズ枠の埋め込みフォーム 12. **フッター**（ロゴと規約リンク）: グレー地。中央にロゴ、下に小さなリンク ## Imagery - 人物はフラットイラスト。紫・濃紺・黒の限られた色で描く - イラストの背後に淡紫の円や雲の形を敷く - 管理画面のモックはPCやモニターの枠に入れて見せる - アイコンは黒い線画に紫のアクセント - FVのビジネスパーソン写真は明るい屋内で、スマホを持つ自然なカット - 背景には淡紫の波線や網目模様を薄く入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は全セクションを 1 カラムにし、画像はテキストの下に置く - 機能カードと料金カードは SP で縦に積む - 工程フローは SP で 2 列×3 段か縦の矢印に組み替える - CTA帯のボタンは SP で縦に 2 段、幅 90% - FVのコピーは SP で 30〜34px にする - ヘッダーのメニューは SP でハンバーガーにまとめる ## 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-7d5dabf3`（元 LP の URL から採番） - **元 LP**: https://lp.vooster.net/lp/fb/ver2 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。