--- version: alpha name: Navy Corporate AI Solution LP description: 濃紺のボタンと見出しを、白と淡い青灰色の面に交互に置いたBtoB向けのLP。英字の小ラベルと日本語見出しを中央に組み、カードの並びで情報を整理する。濃紺の宇宙風ネットワーク背景の帯でCTAを区切る。 colors: primary: '#1B4396' cta: '#16469A' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#EEF1FA' surface: '#F7F8FC' dark-section: '#0B122C' secondary: '#0E2D63' text: '#2B2D52' text-body: '#333333' text-muted: '#9E9FA4' line: '#E2E8EA' accent-1: '#84B400' accent-2: '#FCE94F' typography: display: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 accent: fontFamily: Lato fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 2px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 16px section: 56px 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: 40px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 48px solution-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px problem-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 110px flow-step: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 80px tag-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' height: 20px faq-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 54px cta-band: backgroundColor: '{colors.dark-section}' typography: '{typography.display}' height: 310px --- # DESIGN.md — 紺×淡青グレーの誠実なAI導入支援BtoB LP（Navy Corporate AI Solution LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 濃紺・淡青グレー・カード整理・英字ラベル・ネットワーク背景・BtoB - **地の質感**: 影のないフラットな面。CTA帯だけ宇宙風ネットワーク写真を使う - **形**: 角丸が小さい長方形カードと、角丸2〜4pxの四角いボタン - **温度感**: やや寒色寄りで、落ち着いた知的な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1B4396` | ボタン・ロゴ・見出しの濃紺 | 3% | 推定 | | `cta` | `#16469A` | 主CTAボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 36% | 画素の実測 | | `background-alt` | `#EEF1FA` | 交互に置くセクションの淡青グレー地 | 18% | 画素の実測 | | `surface` | `#F7F8FC` | カードの面 | 12% | 画素の実測 | | `dark-section` | `#0B122C` | 動画帯・CTA帯の濃紺 | 7% | 画素の実測 | | `secondary` | `#0E2D63` | 動画帯の中間ネイビー | 3% | 画素の実測 | | `text` | `#2B2D52` | 見出し文字の濃紺 | 1% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文 | 2% | 推定 | | `text-muted` | `#9E9FA4` | 英字ラベル・注記のグレー | 0% | 画素の実測 | | `line` | `#E2E8EA` | FAQ・ニュースの区切り線 | 0% | 画素の主要色に補正 | | `accent-1` | `#84B400` | 図解イラストの黄緑 | 3% | 画素の実測 | | `accent-2` | `#FCE94F` | グラフで強調する黄色 | 0% | 推定 | - 地は白と淡青グレー#EEF1FAをセクションごとに交互に切り替える - カードは地色よりわずかに明るいか暗い面で区切る。影は付けない - 主ボタンは濃紺の塗りに白文字。副ボタンは白地に濃紺の枠線と濃紺文字にする - 濃紺の帯は動画とCTAだけに使い、ページの節目にする - 黄緑・黄色は図解とグラフだけに使い、文字には使わない - 見出しは濃紺、本文は黒に近いグレーにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | CTA帯の大見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em | | `headline-md` | カードと特長の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `headline-sm` | 悩みカード・FAQの見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.0em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Lato | 700 | 9px | 1.4 | 0.05em | | `note` | 日付・注記・バッジ | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.04em | - セクション見出しは中央揃えにし、上に小さなグレーの英字ラベルを置く - 特長ブロックの見出しは左揃えで、黒に近い太字にする - 本文は小さめの11px前後で、行間を広く取る - 装飾書体は使わず、ゴシック1系統で揃える - 数字の実績は見出しの中で濃紺で強調する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。事例・コラム・セミナーは横スクロールのカルーセル - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に12pxの余白を取り、縦に8pxの間隔で積む - セクションの上下は約56pxの余白で区切る - 一覧系は横スクロールのカードにし、次のカードを少し見せる - 一覧の下には中央に文字だけの『もっと見る』リンクを置く - フローは番号付きカードを縦に並べ、間に下向き矢印を置く ## Elevation & Depth - 影はほぼ使わず、面の色の差で階層を表す - ロゴ一覧の枠だけ1pxの濃紺の細い線で囲む - CTA帯は写真の暗さで奥行きを出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の小さい長方形。サムネイルは横長16:9 - **セクション境界**: 直線で背景色を切り替える - ボタンは角丸2〜4pxの四角形にする - カードは角丸4px程度にする - 番号は濃紺の丸に白い数字にする - タグは細い枠線の四角形にする ## Components - **主CTAボタン**（`button-primary`）: 濃紺の塗りに白い太字。資料DLにはアイコンを添える - **副ボタン**（`button-secondary`）: 白地に濃紺の1px枠と濃紺文字。予約や資料DLに使う - **英字ラベル付き見出し**（`section-heading`）: 小さなグレーの英字の下に、濃紺の日本語見出しを中央揃えで置く - **ソリューションカード**（`solution-card`）: 淡い面にアイコン、濃紺の見出し、本文、詳しくはボタンを縦に積む - **悩みカード**（`problem-card`）: 淡青グレーの地に、白っぽいカード。太字の2行見出しと本文で構成する - **番号付きフローカード**（`flow-step`）: 濃紺の丸番号、線画アイコン、見出し、説明を横に並べる - **規模タグ・状態バッジ**（`tag-outline`）: 濃紺の細い枠の四角タグ。受付中は黒地に白、終了済はグレー地にする - **FAQアコーディオン**（`faq-row`）: Q.付きの太字の質問と右端の＋。行の間を細い線で区切る - **濃紺CTA帯**（`cta-band`）: 暗いネットワーク写真の上に、白い大見出しと主・副ボタンを縦に置く ## Do's and Don'ts **Do** - 白と淡青グレーの地を交互にして、セクションの区切りを明確にする - 見出しは英字ラベルと日本語の2段で、すべて同じ型にそろえる - 実績はグラフや導入ロゴで具体的に見せる - 主CTAは濃紺1色にそろえる - 一覧系にはサムネイル、日付、タグを付けて整理する **Don't** - 暖色の派手なボタンやグラデーションのボタンを使わない - 強い影や大きな角丸、ピル型を使わない - 手書き風や丸ゴシックの書体を混ぜない - 濃紺帯をCTA以外で多用しない - 装飾イラストを過剰に入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの定義と価値を伝え、資料DLへ誘導する）: 淡青グレーの地に、小さなキャッチ、ロゴ、3行の説明、主・副ボタンを並べ、補助金の案内枠を添える 2. **紹介動画**（実績の数字と概要を動画で伝える）: 濃紺の帯に横線模様を敷き、中央に動画プレイヤーを置く 3. **導入ロゴ**（導入先の実績で信頼を得る）: 細い濃紺の枠の中に、自治体・企業のロゴを2段で並べる 4. **ソリューション**（提供メニューを示す）: アイコン付きのカードを4枚縦に並べ、各カードに詳しくはボタンを付ける 5. **悩みの提起**（課題に共感してもらう）: 淡青グレーの地に、太字見出しと本文の悩みカードを3枚置く 6. **選ばれる理由**（効果と体制を根拠付きで示す）: 棒グラフ、図解、人物写真に、左揃えの見出しと本文を組み合わせる 7. **CTA**（問い合わせと資料DLへ誘導する）: 暗いネットワーク写真の帯に、白い2行見出しと主・副ボタンを置く 8. **導入の流れ**（開始までの手順を示す）: 番号付きカード3枚を、下向き矢印でつなぐ 9. **導入事例**（具体的な成功例を示す）: サムネイル、タイトル、規模タグのカードを横スクロールで並べる 10. **コラム・セミナー**（専門性と最新の活動を示す）: 横スクロールのカードに日付と受付状態のバッジを付ける 11. **ニュース**（更新の多さで活発さを示す）: 日付と太字タイトルを横に並べ、細い線で区切ったリストにする 12. **よくある質問**（不安を解消する）: Q.と＋が付いたアコーディオンを、線で区切って並べる 13. **最終CTA・フッター**（最後の行動喚起と回遊を促す）: CTA帯を繰り返したあと、白地のフッターにリンクを3列で並べる ## Imagery - 人物は暗い背景のステージで登壇する様子を撮り、自然光寄りで写す - アイコンは濃紺の線画に、小さなロボット頭のモチーフを添える - 図解は黄緑の面と白いバーだけで抽象的に描く - グラフは青と黄の2色だけのフラットな棒グラフにする - CTA背景は紺〜紫の宇宙とネットワーク線の写真にする - サムネイルは白地に太字タイトルとロゴを置いたバナー風にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCのファーストビューは左にテキストとボタン、右に斜めの濃紺面と動画を置く2カラムにする - PCのソリューションと悩みは2〜3列のグリッドにする - PCの選ばれる理由は、図と文を左右交互に配置する - PCの事例・コラムは3列で並べ、セミナーは3列×複数段のグリッドにする - PCのフローは横並びで、矢印は右向きにする - PCのニュースとFAQは中央の狭い幅(約70%)に収める ## 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-f54150c0`（元 LP の URL から採番） - **元 LP**: https://sokuresu.ai/ - **解析に使った画像**: 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/）からご連絡ください。