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

• 地は白が基本。セクションごとに、左右半分ずつ白と薄グレーに塗り分けた面を挟んでリズムを作る
• 濃紺は悩みタイル、見出し帯、FAQ、料金カード、フッターなどの面に使う
• 黄色は面積 1% 程度に抑え、バッジ・丸ボタン・マーカー・Q アイコンにだけ使う
• 濃紺の暗い写真帯の上では、ボタンを白地に濃紺文字で反転させる
• 見出しの強調語は濃紺の太字にして、少し大きくする
• 破線の円は濃紺の線で描き、写真の縁取りに使う

Typography

• 見出しの上に小さな大文字の英字ラベルを置き、その下に和文見出しを中央揃えで組む
• 見出しの強調語だけを一回り大きい濃紺にする
• 本文は小さめの太字で、行間は約 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

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

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