DESIGN.md — 黒枠カードと橙×緑CTAの物流SaaS LP（Bold Outline Logistics SaaS LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 太い黒枠・2色ピルCTA・黒帯・色分けマーカー・画面キャプチャ・グレー交互背景
• 地の質感: フラットで影はない。黒い 3px の線と単色の面だけで作る
• 形: 角丸 16px の黒枠カードとピル型ボタン。アイコンバッジは円形
• 温度感: やや冷たい中立。オレンジと緑で親しみを足す

Colors

• 地は白と #F6F6F6 をセクションごとに交互に使う
• CTA は必ず黒帯の上に、オレンジと緑を左右に並べる
• オレンジは資料請求とアイコンに使い、緑は相談・申込に使う
• 機能の見出しは赤・黄・緑・青の帯マーカーで機能ごとに色分けする
• プランの帯は灰→濃灰→黒と段階的に濃くして、上位プランであることを示す
• カードは白地にほぼ黒の太い枠を付け、影は付けない
• button-primary は文字 #FFFFFF × 背景 #3EB454 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2E863F、4.57:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #F88631 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C25607、4.54:1）を使う。
• marker-heading は文字 #FFFFFF × 背景 #F26B6B のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EA1515、4.55:1）を使う。
• tag-feature は文字 #FFFFFF × 背景 #F5B342 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A26A09、4.56:1）を使う。

Typography

• 全体をゴシック 1 書体でそろえる
• セクション見出しは中央揃えで 2 行に折る
• 本文は左揃えで小さめにし、行間を広く取る
• 機能名は「」で囲み、帯マーカーの上に白抜きで置く
• カードの見出しは小さい補足を上に、大きい太字を下に 2 段で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能アイコンのカードだけ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 12px
• セクションは見出し、短いリード、カード群の順で積む
• カードどうしの間隔は 12px
• CTA帯は黒地にボタン 2 つを横並びにし、その下に電話の文字リンクを置く
• 現場写真は横スクロールの帯で見せる

Elevation & Depth

• 影は使わず、太い黒枠と地の色の差で階層を表す
• スクリーンショットには薄い影を付けてもよい

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: カード上部に横長の角版。上の角はカードの角丸に合わせる
• セクション境界: 直線で背景色を切り替える
• カードの枠は 3px の黒線、角丸は 16px
• ボタンはピル型で、1.5px の黒線で縁取る
• カードの上辺の中央に、黒丸の中に白いチェックのバッジを重ねる
• プランカードは角丸の色帯を見出しにした灰色地のカード

Components

• 相談ボタン（button-primary）: 緑のピル型で黒線の縁取り。白い太字
• 資料請求ボタン（button-secondary）: オレンジのピル型。緑のボタンと対で並べる
• 黒帯CTA（cta-band）: 黒地にボタン 2 つと下線付きの電話リンク。上辺に白いラベルを重ねることもある
• 黒枠カード（card-outline）: 白地に 3px の黒枠を付けた角丸カード。課題・支援内容・問い合わせに使う
• チェックバッジ（badge-check）: カード上辺に重ねる黒丸の白いチェック
• 帯マーカー見出し（marker-heading）: 機能ごとの色帯に白抜きの太字を 2 行で置く
• 機能タグ（tag-feature）: 4 色の角型タグを 2×2 で並べた目次
• プランカード（plan-card）: 灰色地のカード。上に濃さの違う色帯の見出し、下に緑のボタンを置く

Do's and Don'ts

Do - CTA はオレンジと緑の 2 択にして、黒帯の上に置く - カードはすべて太い黒枠と大きめの角丸でそろえる - 機能の説明には実際の管理画面やアプリ画面のキャプチャを添える - 背景は白とグレーを交互にして、セクションの区切りを見せる - 機能ごとにマーカー色を決め、目次タグと色を一致させる

Don't - ドロップシャドウやグラデーションのボタンにしない - 明朝体や手書き書体を混ぜない - マーカーの 4 色を本文や地の色に広げない - 細い線のカードにしない（黒枠の太さを守る） - CTA に 3 色目を使わない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（サービスの価値を一言で伝える）: 淡い青灰の幾何学背景の上に、PC とスマホのモックを置く。その下に黒いラベル、リード、特大の結論を並べる
2. CTA帯（すぐ問い合わせできるようにする）: 黒帯にオレンジと緑のピルボタン、その下に電話リンク
3. 導入対象（対象となる事業者の幅を示す）: 中央の見出しと、現場写真の横スクロール帯
4. 特長（主な機能を 4 つ示す）: グレー地に 2×2 の黒枠カード。チェックバッジとオレンジの線画アイコンを付ける
5. 動画紹介（動画で概要を伝える）: 見出し、リード、埋め込み動画、説明文の順
6. 課題提起（業界の課題を 3 つ示す）: 黒枠カードを縦に積み、各カードに太字の課題と短い説明を置く
7. 解決CTA（課題から行動につなげる）: 白ラベルを重ねた黒帯CTA
8. 機能詳細（4 つの機能を詳しく説明する）: 色タグの目次の後に、画面キャプチャ、色帯の見出し、太字のリード、本文を繰り返す
9. サポート（伴走支援を伝える）: 写真付きの黒枠カード 3 枚。見出し、太字リード、箇条書きを入れる
10. 料金プラン（3 つのプランを比較させる）: 色帯の見出しが段階的に濃くなるプランカードを縦に並べ、各カードに緑のボタンを置く
11. お問い合わせ（最終的な申込）: 写真付きの黒枠カード 2 枚。資料請求はオレンジ、相談は緑のボタン
12. フッター（会社情報を載せる）: 黒地に白文字で社名、住所、ポリシーへのリンク

Imagery

• FV はノート PC とスマホのモックに地図系の管理画面を映し、淡い青の幾何学背景に置く
• 現場写真は倉庫や配達員の明るい自然光のもの。笑顔の人物を選ぶ
• ビジネス写真は白く明るいオフィスで、握手やプレゼンの場面
• アイコンは黒い線にオレンジの塗りを組み合わせた太線の線画
• 画面キャプチャは白い UI をそのまま見せ、軽い影を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで最大幅 960px 程度にする
• 特長カードは PC で 4 列 1 行にする
• 課題カードは PC で 3 列にする
• 機能詳細は PC で画像と文を左右交互に並べる
• サポートカードは PC で文を左、写真を右の横型にする
• プランは PC で 2 列＋中央 1 枚、問い合わせカードは 2 列にする

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 行書くと起動時に読み込まれる。