--- version: alpha name: Deep Navy Corporate SaaS LP with Dashed Circles description: 濃紺を主色に白と薄グレーの地を交互に敷いた BtoB 業務システムの LP。破線の円で写真やラベルを囲み、四隅のカギ括弧装飾、黄色のバッジとマーカーでアクセントを付ける。情報は濃紺のタイルとカードで整理されていて、誠実で先進的な印象を出している。 colors: primary: '#000051' dark-section: '#01013D' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#F2F2F2' surface: '#FFFFFE' text: '#0A0934' text-body: '#222222' accent-1: '#FDE424' marker: '#FFE94A' tint-1: '#F2F2FE' text-muted: '#F3F2F3' cta: '#FEFEFE' on-cta: '#000050' typography: display: fontFamily: Barlow Semi Condensed fontSize: 56px fontWeight: 700 lineHeight: 0.95 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 9px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pill-heading-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 20px problem-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px dashed-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 260px corner-bracket-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px yellow-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px tab-filter: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 28px faq-item: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 68px button-contact: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 28px flow-step-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 75px --- # DESIGN.md — 濃紺×白の破線サークル型業務SaaS LP（Deep Navy Corporate SaaS LP with Dashed Circles） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 濃紺・破線サークル・カギ括弧フレーム・黄色アクセント・アイソメトリック・大きな薄い英字 - **地の質感**: フラットな単色面。左右で白と薄グレーに分けた背景と、透かしのように薄い大きな英字を重ねる - **形**: 角丸の小さい四角タイル、破線の正円、ピル型の見出し帯、四隅のカギ括弧 - **温度感**: クールで落ち着いている。黄色だけが暖かい差し色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000051` | ブランド濃紺（タイル・見出し帯・FAQ） | 12% | 画素の実測 | | `dark-section` | `#01013D` | 紹介セクションの濃紺地 | 5% | 画素の実測 | | `on-primary` | `#FFFFFF` | 濃紺面上の白文字 | 2% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本背景の白 | 42% | 画素の実測 | | `background-alt` | `#F2F2F2` | 左右半分の薄グレー地 | 15% | 画素の実測 | | `surface` | `#FFFFFE` | グレー地上の白カード | 8% | 画素の実測 | | `text` | `#0A0934` | 見出しの濃紺文字 | 2% | 画素の実測 | | `text-body` | `#222222` | 本文の黒文字 | 3% | 推定 | | `accent-1` | `#FDE424` | 黄色バッジ・丸ボタン | 1% | 画素の実測 | | `marker` | `#FFE94A` | 見出しの黄色マーカー | 0% | 推定 | | `tint-1` | `#F2F2FE` | フロー円の薄紫地 | 1% | 画素の実測 | | `text-muted` | `#F3F2F3` | 透かし英字の薄グレー | 2% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | 問い合わせボタンの白地 | 1% | 画素の実測 | | `on-cta` | `#000050` | ボタン上の濃紺文字 | 0% | 画素の主要色に補正 | - 地は白が基本。セクションごとに、左右半分ずつ白と薄グレーに塗り分けた面を挟んでリズムを作る - 濃紺は悩みタイル、見出し帯、FAQ、料金カード、フッターなどの面に使う - 黄色は面積 1% 程度に抑え、バッジ・丸ボタン・マーカー・Q アイコンにだけ使う - 濃紺の暗い写真帯の上では、ボタンを白地に濃紺文字で反転させる - 見出しの強調語は濃紺の太字にして、少し大きくする - 破線の円は濃紺の線で描き、写真の縁取りに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ的な英字の大見出し | 欧文サンセリフ | Barlow Semi Condensed | 700 | 56px | 0.95 | 0.02em | | `headline-lg` | FV のキャッチコピー | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.04em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | 見出し帯・タイル内のラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.04em | | `accent` | 見出し上の小さな英字ラベル・透かし英字 | 欧文サンセリフ | Montserrat | 700 | 9px | 1.2 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 11px | 2.2 | 0.03em | | `note` | 会社情報・機能一覧などの細かい文字 | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - 見出しの上に小さな大文字の英字ラベルを置き、その下に和文見出しを中央揃えで組む - 見出しの強調語だけを一回り大きい濃紺にする - 本文は小さめの太字で、行間は約 2.2 と広く取る - 各セクションの背景に、極薄グレーの巨大な英字を透かしで置く - 英字ロゴは縦長でコンデンス気味のサンセリフにし、2 行を右にずらして組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩み・機能・タブは 2〜3 列のグリッド - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツは左右に約 10% の余白を取って中央に置く - 悩みタイルと機能カードは 2 列で、間隔は約 10px - セクションの間は 60〜80px 空ける - フローは左に円、右に説明文を置き、間を下向きの矢印でつなぐ - グレー地のセクションには、画面の右半分だけグレーを敷く ## Elevation & Depth - 影はほぼ使わず、フラットな面と線で階層を表す - 白カードは薄グレー地の上に置き、色の差だけで浮かせる - カードの四隅に濃紺のカギ括弧線を付けて枠を表す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 特長写真は正円に切り抜き、外側に濃紺の破線リングを付ける。会社写真は四角 - **セクション境界**: 基本は直線。CTA 帯だけ上辺を中央が凹む V 字に切る - 見出し帯はピル型にする - タイルとボタンはほぼ角なしの四角にする - 破線の円を繰り返しモチーフにする - 黄色の正円バッジは円の縁に重ねる ## Components - **ピル型見出し帯**（`pill-heading-bar`）: 横いっぱいの濃紺ピルに白文字を中央揃えで入れる。特長の小見出しに使う - **悩みタイル**（`problem-tile`）: 濃紺の四角に白文字の短い悩みを入れる。2 列×4 段で並べる - **破線サークル**（`dashed-circle`）: 写真やラベルを正円で囲む濃紺の破線リング - **カギ括弧カード**（`corner-bracket-card`）: 白カードの四隅に濃紺の L 字線を付け、中にアイコンと機能名を入れる - **黄色丸バッジ**（`yellow-badge`）: 黄色の正円に濃紺の短い文字を入れる。写真の縁や FV のロゴ横に置く - **機能タブ**（`tab-filter`）: 3 列のグレーのタブ。選択中のタブは白地に濃紺の枠線 - **FAQ アコーディオン**（`faq-item`）: 濃紺の帯に、黄色線の Q 円・白い質問文・下向き矢印を中央揃えで縦に積む - **問い合わせボタン**（`button-contact`）: 暗い写真帯の上に置く横長の白い四角ボタン。濃紺文字で 2 つを縦に並べる - **フロー円**（`flow-step-circle`）: 薄紫地の円を破線で囲み、上に大きな薄い番号を添える ## Do's and Don'ts **Do** - 濃紺・白・薄グレーの 3 色を基調に保つ - 写真は正円に切り抜き、破線リングで縁取る - 見出しには英字ラベル＋和文＋強調語の型を守る - 黄色はポイントにだけ少量使う - カードの四隅にカギ括弧の装飾を付ける **Don't** - 大きな角丸やドロップシャドウを使わない - 黄色を広い面に使わない - 暖色系の写真や派手なグラデーションを入れない - 明朝体や手書き書体を混ぜない - 濃紺以外の濃い色をメインの面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの位置づけと導入のしやすさを伝える）: 上部に濃紺のピル帯、黄色バッジ、大きな英字ロゴを置く。キャッチの下に破線円の特徴 3 つと、アイソメトリックのイラストを並べる 2. **悩みの提起**（業界特有の課題に共感してもらう）: 透かし英字の上に見出しを置く。濃紺タイルを 2 列×4 段で並べる 3. **解決の提示**（悩みの答えとしてサービスを示す）: 下向きの三連矢印から、カギ括弧の白枠へつなぐ。中にマーカー付きの一文と大きな英字ロゴを入れる 4. **サービス概要**（サービスの成り立ちを説明する）: 濃紺の全幅帯に、白のロゴと短い本文を中央揃えで置く 5. **特長（3 ポイント）**（主なメリットを伝える）: 透かしの番号英字、ピル見出し、本文、破線円の写真の順で 3 回繰り返す 6. **主要機能**（機能の幅広さを見せる）: 半分グレーの地に、カギ括弧の白カードを 2 列で並べる。カードには線画アイコンと機能名を入れる 7. **全機能一覧**（機能を網羅して見せる）: ピル見出しと 3 列のタブを置き、下に歯車アイコン付きのリストを続ける 8. **導入実績**（実例で信頼を補う）: 説明文の下に、導入先サイトのキャプチャを 1 枚置く 9. **料金プラン**（料金の構成を示す）: 濃紺の 2 枚のカードを「＋」でつなぎ、オプション内に白い箱を入れる 10. **CTA**（問い合わせを促す）: V 字に切った濃紺オーバーレイの写真帯に、黄色い小見出し、電話番号、白ボタン 2 つを置く 11. **導入の流れ**（導入の手順を示して不安をなくす）: 番号付きの破線円 4 つを矢印でつなぎ、横に説明を添える 12. **よくある質問**（疑問を解消する）: 濃紺のアコーディオンを 6 つ縦に積む 13. **会社情報・フッター**（運営会社を示す）: オフィス写真と 2 列の項目表を置き、最後に濃紺のフッターと白のロゴを置く ## Imagery - FV は青と水色の光るアイソメトリックイラストにし、ビジネスパーソンが握手する構図にする - 特長の写真は PC・スマホを操作する手元をクールなトーンで撮り、正円で切り抜く - アイコンはダークグレーと濃紺の単色ピクトにする - CTA の背景はキーボードなどの写真に濃紺を強めにオーバーレイする - 会社写真はモノトーンに観葉植物の緑を添えた明るいオフィスにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左テキスト・右イラストの 2 カラムにする - PC では悩みタイルを 4 列×2 段にし、解決ブロックを横並びにする - PC の特長は写真とテキストを左右交互のジグザグ配置にする - PC の機能カードは 4 列、機能一覧は 3 列リスト、フローは横 4 つ並びにする - PC はヘッダーにナビとアウトラインのボタン 2 つを置き、FAQ は Q アイコンと文言を左揃えの 1 行にする ## 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-1678baea`（元 LP の URL から採番） - **元 LP**: https://makxascore.com/ - **解析に使った画像**: 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/）からご連絡ください。