DESIGN.md — 紺×オレンジの業務AI SaaS LP（Navy and Orange Corporate SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺・オレンジCTA・黄色マーカー・業務フロー図・テック感・フラットイラスト
• 地の質感: 平塗り中心。濃紺セクションには六角形やネットワーク柄を薄く重ね、テック感を出す
• 形: 角が小さい長方形のカードと帯、ピル型ボタン、下向き三角の矢印
• 温度感: 寒色が主体。暖色のオレンジと黄は行動喚起と強調だけに使う

Colors

• 地は白、淡いグレー、青灰、濃紺の4種類。セクションごとに切り替えてリズムを作る
• 濃紺の面は『とは』『デモ』『最終CTA』のように区切りとなるセクションに使い、その上に白いカードを載せる
• オレンジはCTAボタンと図解の見出し帯だけに使う
• 強調したい語句は青い太字にするか、黄色マーカーを引く
• 濃紺の帯の上で強調する文字は黄色にする
• 赤や緑は使わない。寒色＋オレンジ＋黄の配色に限る
• button-primary は文字 #FEFBE9 × 背景 #F98D0B のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6004、4.56:1）を使う。
• flow-label は文字 #FEFBE9 × 背景 #F98D0B のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6004、4.56:1）を使う。

Typography

• 見出しは中央揃え。改行で2〜3行に分け、最後の行を青で強調する
• 本文は左揃えで、行間は1.8程度にゆったり取る
• 特長の番号は大きな細い線の数字にし、見出しに重ねて置く
• リード文は『＼ ／』で両側を挟んだ小さな前置きの形にする
• 強調は太字＋色。斜体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長を左右交互の2カラム、最終CTAを3カラムにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上下の余白は40〜56px
• カードと帯は画面の左右に約4%の余白を残して置く
• 課題から解決への移行は、中央の下向き三角で示す
• 利点は濃紺の帯を3本縦に並べ、それぞれにチェックアイコンを付ける
• 仕組みの図解は、左の縦帯に工程名、右に白いパネルを置く3段構成
• 最終CTAは濃紺地に白いカードを縦に積む

Elevation & Depth

• 白カードには薄い影（0 2px 8px rgba(0,0,0,0.1)）を付ける
• 特長の写真は白い縁取りと影で浮かせる
• ボタンは基本的に影なし、平塗りにする

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 長方形。白枠と影を付け、背景の面から少しはみ出させて配置する
• セクション境界: 直線で地の色を切り替える。課題から解決の境目だけ濃紺の下向き三角を入れる
• 帯とFAQ行は角丸ほぼなしの長方形にする
• CTAはピル型にし、右端に『＞』を付ける
• 悩みは雲形の吹き出しで表す
• 見出し下の区切り線は、中央に小さな下向きの切り込みを入れる

Components

• 主CTAボタン（button-primary）: オレンジのピル型。左にアイコン、右に＞を付ける
• 新登場バッジ（badge-new）: 黄オレンジの斜め平行四辺形のラベル
• 利点の帯（benefit-bar）: 濃紺の長方形にチェックアイコンと白文字。キーワードは黄色にする
• 悩みの吹き出し（worry-cloud）: 白い雲形に短い悩みを書き、末尾を青で強調する。人物イラストの周りに配置
• 番号付き特長カード（feature-card）: 写真の下に青灰の面を置き、線文字の大きな番号、見出し、本文を載せる
• マーカー付きチェックリスト（marker-list）: 紺の丸チェック＋太字文。要点に黄色の下線マーカーを引く
• FAQアコーディオン（faq-item）: 青灰の行。左に大きな青いQ番号、右にシェブロン
• 最終CTAカード（cta-card）: 濃紺地の上の白カード。小見出し、金色の区切り線、大見出し、画像、オレンジボタンの順に並べる
• 図解の帯見出し（flow-label）: オレンジ帯に白文字。工程名や出力を示す

Do's and Don'ts

Do - CTAはすべてオレンジのピル型で統一する - 強調は青文字と黄マーカーの2種類だけにする - 濃紺セクションには薄い六角形柄を重ねる - 製品画面のスクリーンショットをノートPCの画像に入れて見せる - 図解のアイコンは紺・グレー・オレンジのフラットで揃える

Don't - オレンジをボタン以外の大きな面に使わない - 丸ゴシックや手書き書体を使わない - グラデーションの強いボタンや大きな角丸カードにしない - 暖色系の写真フィルターをかけない - 見出しを左揃えにしない

Page Structure

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

1. ファーストビュー（新サービスの登場と価値を一言で伝える）: 白〜淡いグレー地。右上に濃紺の斜めテック図形とノートPCの画面。新登場バッジ、大きな2色コピー、紺帯のサブコピー、ロゴ、オレンジCTAを縦に並べる
2. 悩みの提起（担当者の課題に共感する）: 淡いグレー地に中央見出しを置き、最終行を青にする。雲形の吹き出し3つで悩みを書き、頭を抱える人物イラストを添える
3. 解決の提示（製品で解決できることを示す）: 下向き三角の後に中央見出しを置き、マーカーで強調する。濃紺の利点帯3本と、矢印で前進を表すチームのイラスト
4. サービス概要図（業務フローを図で理解させる）: 濃紺地。左の縦帯に工程名を縦書きで入れ、右の白パネルに入力、AI処理、出力の流れを描く。工程の区切りにオレンジ帯を使う
5. 特長（3つの強みを具体的に説明する）: 写真またはグラフを白枠カードに入れ、その下の青灰パネルに線文字の番号、見出し、本文を載せる
6. 無料デモ案内（体験の申込を促す）: 濃紺の六角形柄の上に白カード。無料ラベル、前置き文、見出し、マーカー付きチェックリスト、写真、オレンジCTA
7. よくある質問（導入前の不安を解消する）: 白地に中央見出し。Q番号付きの青灰色の行を並べたアコーディオン
8. 最終CTA（相談・資料・デモの3つの導線を出す）: 濃紺地に白見出しを置き、白カードを3枚縦に積む（PCは横並び）。各カードに金色の区切り線、イラスト、オレンジCTA
9. フッター（企業情報と著作権を表示する）: グレー地に白のロゴとコピーライトを中央揃えで置く

Imagery

• オフィスで働く手元やPC作業の写真。青白い寒色寄りのトーンにする
• AIやデータを表す半透明のアイコンがPCの上に浮かぶ合成写真
• 紺・水色・オレンジ・黄でまとめた、スーツ姿のビジネスパーソンのフラットイラスト
• 製品UIのスクリーンショットをノートPCのモックアップに入れる
• 工場・物流・ビルなどを表すシンプルなピクトアイコン
• 背景には六角形パターンやネットワーク線を低いコントラストで敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左にコピー、右にPC画像の2カラムにする
• PCでは悩みの吹き出しと利点帯を3つ横に並べる
• PCの特長は写真とテキストを左右交互に配置する
• PCの概要図は工程名を上部の横帯にして3列で構成する
• PCの最終CTAカードは3列の横並び。FAQは幅を中央約70%に絞る
• PCのヘッダー右上には小さなオレンジCTAを常に表示する

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