--- version: alpha name: Navy and Green Ring SaaS LP description: 濃紺の地と白・淡い水色の地を交互に重ね、メッセージアプリ系の緑と黄色の2つのCTAで問い合わせへ誘導する業務システムLP。大きな緑のリングを装飾に使い、白カードに画面キャプチャを並べて機能を見せる。 colors: primary: '#35BB6C' on-primary: '#FFFFFF' cta: '#FBF22B' on-cta: '#1A1A1A' dark-section: '#0E1F2F' on-dark: '#EFF8FC' background: '#FDFEFE' background-alt: '#F8F8F8' tint-1: '#E5EBFA' accent-1: '#94CDAF' text: '#2C3038' text-body: '#4C5C5F' marker: '#FFF27A' footer: '#202020' primary-accessible: '#26874E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-line: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-mail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px reason-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 32px compare-row: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 48px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 260px award-badge: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px contact-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px news-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — 紺×緑リング装飾の業務SaaS LP（Navy and Green Ring SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: クール・先進的、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 濃紺セクション・緑のリング装飾・画面キャプチャカード・緑と黄色の2つのCTA・淡い水色グラデーション - **地の質感**: フラットな面に、淡いドット柄と柔らかいグラデーションを重ねる - **形**: 角丸の小さいカード、ピル型ボタン、太い円弧のリング - **温度感**: 爽やかでやや涼しい。緑と黄色で親しみを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#35BB6C` | ブランドの緑・強調文字・ボタン | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | 緑ボタン上の文字 | 1% | 画素の主要色に補正 | | `cta` | `#FBF22B` | メール相談の黄色ボタン | 1% | 画素の実測 | | `on-cta` | `#1A1A1A` | 黄色ボタン上の文字 | 0% | 推定 | | `dark-section` | `#0E1F2F` | 理由・機能セクションの濃紺地 | 29% | 画素の実測 | | `on-dark` | `#EFF8FC` | 濃紺地の上の白文字 | 1% | 画素の実測 | | `background` | `#FDFEFE` | 基本の白地 | 23% | 画素の実測 | | `background-alt` | `#F8F8F8` | 事例・実績セクションの薄グレー地 | 10% | 画素の実測 | | `tint-1` | `#E5EBFA` | FV・問い合わせ帯の淡い水色 | 8% | 画素の実測 | | `accent-1` | `#94CDAF` | リング装飾の明るい緑 | 6% | 画素の主要色に補正 | | `text` | `#2C3038` | 見出し文字の濃紺 | 2% | 画素の実測 | | `text-body` | `#4C5C5F` | 本文のグレー | 3% | 画素の主要色に補正 | | `marker` | `#FFF27A` | キーワード下の黄色マーカー | 0% | 推定 | | `footer` | `#202020` | フッターの墨色 | 2% | 画素の実測 | | `primary-accessible` | `#26874E` | AA を満たす補正値（計算） | | 計算 | - 白・淡い水色の明るい地と濃紺の地を交互に配置し、セクションの切り替わりを分かりやすくする - 緑はブランド色。キーワードの文字色・ラベル・矢印・アイコン円に使う - CTAは緑（アプリで相談）と黄色（メールで相談）の2つを並べる - 明るい地では重要語に黄色マーカーを引く - 濃紺の地では文字を白、強調を緑にする - 緑のリング装飾は画面の端からはみ出させ、半透明でも置く - `button-line` は文字 `#FFFFFF` × 背景 `#35BB6C` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#26874E`、4.51:1）を使う。 - `reason-label` は文字 `#FFFFFF` × 背景 `#35BB6C` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#26874E`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのサービス名 | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.05em | | `accent` | 見出しの上の小さな英字ラベル | 欧文サンセリフ | Montserrat | 500 | 11px | 1.2 | 0.1em | | `headline-md` | 理由の要点・リード文 | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.03em | | `headline-sm` | 機能カードの名前 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文・カードの説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・日付 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 見出しはサービス名の一部の文字だけを緑で大きくする - 見出しの上に緑の小さな英字ラベルを置き、中央揃えにする - 本文中の重要なフレーズは緑の太字にする - Contact見出しは細めの欧文にし、頭文字だけ緑にする - 数値の実績は大きな太字にし、周りを月桂冠で囲む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。機能カードはPCで2列、SPで1列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 本文の幅はPCで約55%に絞り、中央に寄せる - 比較表は左にグレーの従来例、右に緑枠の改善例を置き、間を矢印でつなぐ - 理由は番号ラベル・本文・図を縦に積む - 導入実績は角丸の写真タイルを3列で並べ、下にラベルを付ける - 長い比較リストは途中で切り、『もっと見る』で開く ## Elevation & Depth - 機能カードは白地で影なし。濃紺の地とのコントラストで浮かせる - 比較の項目カードと実績写真には薄い影を付ける - お知らせボックスは淡い緑の線で囲み、薄い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 画面キャプチャは四角のまま。業種写真は角丸の正方形 - **セクション境界**: 直線で切り替え、大きな緑のリングをセクションの境界にまたがせる - CTAはピル型にし、右端に小さな矢印を付ける - 理由の番号ラベルは片側を斜めに切った緑の帯にする - 機能アイコンは緑の丸の中に白で描く - リングは線の太さを直径の約2割にする ## Components - **緑の相談ボタン**（`button-line`）: メッセージアプリでの相談に誘導するピル型ボタン。矢印付き - **黄色のメール相談ボタン**（`button-mail`）: 緑ボタンの横に並べるピル型ボタン - **英字ラベル付き見出し**（`section-heading`）: 緑の小さな英字を上に置き、見出しの一部の文字を緑で強調する - **理由番号ラベル**（`reason-label`）: 片側を斜めに切った緑の帯に、白文字で番号を入れる - **比較行カード**（`compare-row`）: 左にグレーの悩みカード、右に緑枠の解決カードを置き、緑の矢印でつなぐ - **機能カード**（`feature-card`）: 上に画面キャプチャ、下に機能名と説明を入れた白いカード - **実績の月桂冠バッジ**（`award-badge`）: 金色の月桂冠で数値とラベルを囲む - **問い合わせ帯**（`contact-band`）: 淡い水色の地にContact見出し・短い文・2つのCTAを置く - **お知らせボックス**（`news-box`）: 淡い緑の線で囲み、緑の日付と見出しを1行ずつ並べる ## Do's and Don'ts **Do** - CTAは緑と黄色の2つを常にセットで並べる - 濃紺のセクションと明るいセクションを交互に置く - 機能は必ず画面キャプチャで見せる - 緑のリングを画面の端に大きく配置する - 重要語は緑の文字か黄色マーカーで強調する **Don't** - 赤やオレンジを強調色に使わない - カードに強い影や太い枠線を付けない - 見出しを明朝体にしない - リング装飾を本文の上に重ねない - 濃紺の地に長い本文を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と実績を一目で伝え、相談に誘導する）: 淡い水色のグラデーションの地。左にキャッチ・2つのCTA・月桂冠バッジ、右にPCとスマホの画面モック、右上に緑のリング 2. **サービス概要**（何ができるかを説明する）: 白地に英字ラベル付きの見出しとマーカー入りのリード文。従来との比較リストを左右に並べ、もっと見るで開く 3. **選ばれる理由**（3つの強みを示す）: 濃紺の地。番号ラベル・本文・図（機能の円形図、3者のアイコン、イラスト）を縦に並べる 4. **CTA**（途中で問い合わせを促す）: 淡い水色の帯にContact見出しと2つのボタン 5. **活用事例**（利用シーンを伝える）: 薄グレーの地にぼかした事例画像を敷き、準備中の文言とメールボタンを重ねる 6. **機能一覧**（機能の多さを見せる）: 濃紺の地に白い機能カードを2列のグリッドで並べる 7. **導入実績**（対応している業種の幅を示す）: 薄グレーの地に業種の角丸写真を3列×2段で並べる 8. **お知らせ**（更新情報を伝える）: 緑の線で囲んだボックスに、日付と見出しの一覧を入れる 9. **最終CTA**（最後に相談を促す）: 水色の帯の両端にリング装飾を置き、大きめの2つのボタンを並べる 10. **フッター**（ロゴとナビゲーション）: 墨色の地に白いロゴ、横並びのリンク、コピーライト ## Imagery - 管理画面やスマホ画面のキャプチャを、ノートPCやスマホのモックに入れる - 業種の写真は明るく自然な実写。角丸の正方形で切り抜く - 機能はフラットなアイコン（緑の線と丸）で表す - 人物はフラットイラスト。青緑系の配色にする - 装飾は太い緑のリングと淡いドット柄だけにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでは、FVのモック画像をキャッチの下に移す - 機能カードは2列から1列に変える - 比較リストは左右並びをやめ、従来例と改善例を縦に積む - 導入実績の写真は2列にする - CTAの2つのボタンはSPで縦に並べ、幅を100%近くにする - ヘッダーのナビゲーションはハンバーガーメニューにし、CTAだけ残す ## 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-85a9a3d6`（元 LP の URL から採番） - **元 LP**: https://app.smacari.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。