--- version: alpha name: Navy and Gold Executive Consulting LP description: 深い紺の面と金のアクセントで重厚さと信頼感を出したBtoBコンサルLP。紺のセクションと薄いグレー・白のセクションを交互に置く。白カード、金枠の写真、欧文のサブ見出しで格調を整え、比較表・実績・フォームで情報量の多い訴求を組み立てる。 colors: primary: '#163266' dark-section: '#112C6E' secondary: '#BB9D3B' cta: '#BB962B' on-cta: '#FEFBE9' background: '#FDFEFE' background-alt: '#F3F4F9' text: '#172F6D' text-body: '#1E2F5B' on-dark: '#FFFFFF' tint-1: '#D6DBE6' accent-1: '#2C9594' accent-2: '#3C8C63' line: '#C8B26A' cta-accessible: '#8B7020' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.08em accent: fontFamily: Cinzel fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em headline-sm: fontFamily: Playfair Display fontSize: 28px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 20px section: 72px 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: 56px worry-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 200px reason-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 460px heading-section: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 100px result-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 300px voice-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 900px plan-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 1200px flow-step: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 300px form-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 1000px faq-item: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 110px --- # DESIGN.md — 紺×金の信頼感ある採用コンサルLP（Navy and Gold Executive Consulting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: 紺と金・重厚・誠実・参謀・戦略・ビジネス写真・比較表 - **地の質感**: 紺の面に斜めのグラデーションの帯をうっすら重ねる。明るいセクションは淡いグレーに石目調のノイズを敷く - **形**: 角が少し丸い白カード、金の細枠で囲んだ写真、丸く切り抜いた人物写真、角に金のリボンバッジ - **温度感**: 冷静で知的な寒色ベースに、金で少し温かみと格を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#163266` | ブランドの紺。メインの面 | 40% | 画素の実測 | | `dark-section` | `#112C6E` | 濃紺。ヘッダーとFAQの面 | 8% | 画素の実測 | | `secondary` | `#BB9D3B` | 金。罫線・リボン・番号 | 3% | 画素の実測 | | `cta` | `#BB962B` | CTAボタンの金 | 1% | 画素の実測 | | `on-cta` | `#FEFBE9` | CTAボタン上の文字 | 0% | 画素の実測 | | `background` | `#FDFEFE` | 白の地・カード | 26% | 画素の実測 | | `background-alt` | `#F3F4F9` | 淡いグレーの地 | 12% | 画素の実測 | | `text` | `#172F6D` | 見出しの紺色文字 | 2% | 画素の主要色に補正 | | `text-body` | `#1E2F5B` | 本文の濃紺文字 | 4% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 紺地の上の白文字 | 3% | 画素の主要色に補正 | | `tint-1` | `#D6DBE6` | 淡い青灰。実績カードの帯・注記の箱 | 3% | 画素の実測 | | `accent-1` | `#2C9594` | ティール。図解の円 | 1% | 画素の実測 | | `accent-2` | `#3C8C63` | 緑。プラン表の見出し | 0% | 画素の実測 | | `line` | `#C8B26A` | 金色の区切り線 | 0% | 推定 | | `cta-accessible` | `#8B7020` | AA を満たす補正値（計算） | | 計算 | - 紺の面のセクションと白・淡いグレーのセクションを交互に並べる - 金はCTA・罫線・番号・リボン・強調語だけに使い、広い面には塗らない - 紺地の上の文字は白にし、強調語だけ金にする - 明るい地の見出しは紺文字にして、下に金の下線か点を添える - プラン比較表は列ごとに色を変えて区別する（緑・紫・えんじ・黒） - `button-primary` は文字 `#FEFBE9` × 背景 `#BB962B` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8B7020`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのサービス名 | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 800 | 22px | 1.5 | 0.08em | | `headline-md` | カード・理由の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.06em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.75 | 0.08em | | `accent` | 見出し下の欧文サブ見出し | 欧文セリフ | Cinzel | 400 | 13px | 1.4 | 0.2em | | `headline-sm` | REASON番号・ステップ番号 | 欧文セリフ | Playfair Display | 700 | 28px | 1.1 | 0.0em | | `note` | 注記・表内の小さい文字 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.04em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.08em | - 和文は太めのゴシックに統一し、字間を広め（0.06〜0.1em）にとる - 見出しの下には、全大文字で字間の広い欧文セリフのサブ見出しを細く添える - 数字の実績は数字だけ2倍ほどの大きさにして強調する - 本文は中央揃えにせず左揃え。見出しは中央揃え - 紺セクションの末尾に、欧文の巨大な透かし文字を薄く置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC では理由とステップを3〜4列、お客様の声を2列に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - カードとボックスは左右に約18pxの余白をとって置く - 各セクションは中央揃えの見出し、欧文サブ見出し、本文の順に並べる - 理由ブロックは写真、小見出し、金線、本文の縦の繰り返し - 比較表はSPでは横スクロールにし、「スクロールできます」の案内を出す - 紺地の本文ボックスは細い枠線で囲む ## Elevation & Depth - 白カードには淡くて広い影（0 6px 20px rgba(0,0,0,.08)）を付ける - 紺地の上の要素には影を付けず、枠線で区切る - フォームのカードは柔らかい影で浮かせる ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形の写真は金の細枠で囲む。人物とステップの写真は金の輪付きの円で切り抜く - **セクション境界**: 直線で切り替え、紺地に斜めの光の帯を入れる。フォームの手前は金の横線で区切る - ボタンは角丸が小さい長方形にし、右に丸い再生アイコンを置く - REASONバッジは写真の左上に重ねた金の旗型リボン - 見出し上の金の3点ドットをアクセントにする - ラベルは紺の小さい長方形にする ## Components - **金のCTAボタン**（`button-primary`）: 金の長方形に白太字、右に丸い矢印アイコン。上に斜線で挟んだ一言を添える - **悩みカード**（`worry-card`）: 白カードの上部に、チェックアイコン付きの紺の見出しと紺の下線。その下に本文 - **理由ブロック**（`reason-block`）: 金枠の写真の左上に、番号とREASONの金リボン。下に中央揃えの小見出しと金線、本文 - **セクション見出し**（`heading-section`）: 紺の太字見出しに、金の下線と3点ドット。下に欧文サブ見出し - **実績ビフォーアフターカード**（`result-card`）: 紺の帯ラベルの下に淡い青灰の面で課題を示し、下向きの矢印形で白い成果の面へつなぐ。数字は特大 - **お客様の声カード**（`voice-card`）: 金のドット付きの見出しに続けて写真と社名のプレート。紺地に業種・課題のラベル表と白文字の本文 - **プラン比較表**（`plan-table`）: 紺地の表。列の見出しは色分けし、価格を大きく出す。項目は◎○—で示し、左端に金の縦帯の分類ラベル - **流れステップ**（`flow-step`）: 金の欧文番号に続けて、金の輪付きの円写真、紺の太字見出し、説明文。最後のステップは金の円にSTARTと入れる - **問い合わせフォーム**（`form-card`）: 白カードの中に、紺の必須ラベル付きの項目名と淡いグレーの入力欄。送信ボタンは金 - **FAQ項目**（`faq-item`）: 紺地に白丸のQアイコンと白文字の質問、右に金の三角。項目の間は金の細線 ## Do's and Don'ts **Do** - 紺と金の2色を軸にし、ほかの色は図解と表だけに使う - 見出しには必ず欧文セリフのサブ見出しを添える - 実績は数字を大きくし、ビフォーアフターで見せる - 写真はスーツのビジネスシーンで統一し、金の枠か円で囲む - 紺地のセクションの間に明るい地のセクションを入れて、ページにリズムを作る **Don't** - パステルやポップな色を使わない - ピル型やぷっくりしたボタンにしない - 金を大きな面に塗らない - 手書き風や丸文字の書体を使わない - カードの角を大きく丸めすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの立ち位置と、無料相談への入口を示す）: 紺地に白枠の帯でリード文、太字のサービス名、金のCTA。下に握手の写真と、月桂樹で飾った強み3点 2. **悩みの提起**（採用の課題に共感する）: 石目調のグレー地。悩んでいる人物のイラストと中央見出し、チェック付きの白カード4枚 3. **解決策の提示**（支援のコンセプトを図で示す）: 紺地に、ティールの円2つを×でつなぐ図。金の帯から矢印で白い成果の箱へつなぎ、枠付きの説明文を置く 4. **選ばれる理由**（強みを6つ示す）: 白地に、金リボンの番号付き写真、小見出し、金線、本文を繰り返す 5. **提供サービス例**（支援メニューを一覧にする）: 淡いグレー地に紺の細枠の白ボックス。金ドット付きのカテゴリと箇条書き 6. **代表紹介**（専門家の実績で信頼を得る）: 紺地に金輪の丸い人物写真と肩書。資格・実績・講演・メディアは白ラベルの見出しと箇条書き。最後に記事の切り抜き画像 7. **解決事例**（成果を数字で示す）: 白地にビフォーアフターのカード2枚。数字を特大にする 8. **お客様の声**（導入企業の評価を見せる）: 写真と社名プレートの下に、紺のカードで属性ラベルと本文 9. **料金プラン**（4つのプランを比べてもらう）: 紺地に色分けした比較表。下に淡い青灰の注記ボックス 10. **ご利用の流れ**（契約までの手順を示す）: 白地に、金番号と円写真の4ステップを縦に並べる 11. **お問い合わせフォーム**（相談の申込を受け付ける）: 金線で区切ったグレー地に白カードのフォーム。送信ボタンは金 12. **よくある質問**（不安を解消する）: 濃紺地に、Q丸アイコンと金線で区切ったアコーディオン 13. **代表メッセージ・最終CTA**（思いを伝えて相談へ導く）: 紺地に金の細枠で囲んだメッセージと丸い人物写真。最後に写真背景と金のCTA ## Imagery - スーツ姿の手元・握手・打ち合わせの写真。顔は写さず、寒色寄りの自然光で撮る - 代表の人物写真は笑顔のバストアップにし、金の輪付きの円で切り抜く - 悩みの場面は、頭を抱えるスーツの男性を線画のイラストで描く - 月桂樹の白い線のアイコンで強みを飾る - 新聞やWeb記事の切り抜き画像を、金の枠で囲んで信頼の材料にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVを左テキスト・右写真の2分割にし、強み3点は横並びにする - PCでは悩みカードを2×2、理由を3列×2段、ステップを4列にする - PCでは代表紹介の写真と経歴を横並びにする - SPで横スクロールの比較表は、PCでは4列を全部表示する - PCのコンテンツ幅は約1000pxにし、中央に置く ## 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-c00fd047`（元 LP の URL から採番） - **元 LP**: https://www.p-pinguino.com/service/gunshi-komon - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。