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

• 地は白と淡青グレー#EEF1FAをセクションごとに交互に切り替える
• カードは地色よりわずかに明るいか暗い面で区切る。影は付けない
• 主ボタンは濃紺の塗りに白文字。副ボタンは白地に濃紺の枠線と濃紺文字にする
• 濃紺の帯は動画とCTAだけに使い、ページの節目にする
• 黄緑・黄色は図解とグラフだけに使い、文字には使わない
• 見出しは濃紺、本文は黒に近いグレーにする

Typography

• セクション見出しは中央揃えにし、上に小さなグレーの英字ラベルを置く
• 特長ブロックの見出しは左揃えで、黒に近い太字にする
• 本文は小さめの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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。