DESIGN.md — 赤×黒×生成りの資産管理SaaS LP（Crimson Black and Kraft Beige SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、上品・高級、シンプル・ミニマル
• キーワード: 深紅のブランド色・黒と生成りの交互配置・幾何学欧文の見出し・茶色のアクセント・白カード・業務写真
• 地の質感: フラットな単色面が中心。赤い帯には大きな半透明の円やロゴ形状を透かして重ねる。最後の黒帯には六角形のネットワーク線を薄く敷く。
• 形: 角丸は 6〜12px と控えめ。タグだけピル型の枠線にする。写真は角丸の長方形。
• 温度感: やや温かいニュートラル。生成りと茶色が、冷たくなりがちな黒・赤をやわらげる。

Colors

• セクションの地は 黒→生成り→白→生成り→白 と交互に切り替え、色の変化でリズムを作る。
• ブランド赤は、アプリDL・サインインの帯と、小見出しの四角・下線などの細部だけに使う。
• 茶色は、料金のおすすめ・環境カードの見出し帯・相談ボックス・外部リンクボタンに使う二番手の強調色。
• 主ボタンは黒地に白文字。赤ではなく黒を使い、落ち着いた印象を保つ。
• 黒地の上の文字は白、カードはそれより一段明るい #262626 にする。
• フォームの必須ラベルだけ、オレンジ赤の枠線テキストにする。
• badge-recommend は文字 #EFF1F0 × 背景 #996B32 のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8F642F、4.59:1）を使う。

Typography

• セクション見出しは、大きな欧文大文字（左揃え）＋小さな和文ラベル＋短い下線の 3 段で組む。
• 特長番号は細いウェイトの大きな数字にし、横に太字の見出しを 2 行で並べる。
• 本文は 13px・行間 1.9 で広めに組む。
• コンセプト文だけ中央揃えにし、茶色の文字で組む。
• 価格の数字は細めの大きい欧文、単位は小さい和文にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。関連機能タグだけ横に流して折り返す。
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 22px（375px 幅換算）
• 左右の余白は約 20px。
• 特長カードでは、写真をカードの上端から外へはみ出させて重ねる。
• 機能紹介は 写真→見出し→本文→関連機能タグ の繰り返しで組む。
• 料金カードは縦に積み、おすすめプランだけ茶色の太枠で囲む。
• お知らせは薄いグレーの角丸パネルに入れ、行ごとに区切り線を引く。

Elevation & Depth

• 影はほぼ使わず、フラットな面と細い線で区切る。
• フォームカードだけ、ごく薄い影を付ける。
• 黒地の上のカードは、明度差だけで浮かせる。

Shapes

• 角丸: 小 6px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 8px の長方形。特長写真は角丸なしの白背景切り抜き。
• セクション境界: 直線で地の色を切り替える。
• 関連機能タグとニュースのカテゴリはピル型の枠線にする。
• 主ボタンは角丸 6px の矩形。
• おすすめバッジは、下向きの三角が付いたピル型の吹き出しにする。

Components

• 英字セクション見出し（section-heading）: 大きな欧文大文字の下に、和文ラベルと短い下線を置く。
• 黒い主ボタン（button-primary）: 黒地・白文字に矢印か外部リンクのアイコンを付けた中央ボタン。
• 赤いアプリDL帯（app-banner）: 赤い角丸パネルに、サインインボタンとストアバッジ 2 つを並べる。背景には大きな円形を透かして重ねる。
• 番号付き特長カード（feature-card）: 黒地の上の濃灰カード。写真を上に重ね、細い大きな番号と見出しを並べる。
• 関連機能タグ（tag-pill）: 白地に灰色の枠線を付けたピル型タグ。赤い四角付きの小見出しの下に並べる。
• 料金カード（pricing-card）: 白いカードに、プラン名、説明、ベージュ地の機能リスト（丸い点とチェック）を入れる。
• おすすめバッジ（badge-recommend）: 茶色のピル型吹き出し。カード枠の上辺にまたがって置く。
• 茶色ヘッダーの環境カード（env-card）: 茶色の見出し帯の下に白い本体を付け、生成り地の製品写真と仕様リストを入れる。
• お知らせ行（news-item）: 日付、ピル型カテゴリ、太字タイトル、赤い丸枠の矢印アイコンを並べる。
• 規約アコーディオン（accordion）: 白地に枠線を付けた行。右端に黒い四角のプラスアイコンを置く。

Do's and Don'ts

Do - セクションの地の色を交互に切り替えて区切る。 - 英字見出しには必ず和文ラベルと短い下線を添える。 - 赤は帯と小さな記号に限って使い、面積を絞る。 - 機能紹介には、関連機能をピル型タグで並べる。 - 茶色はおすすめ・相談・機器の見出しなど、二番目に強調したい箇所に使う。

Don't - 赤を背景の広い面や本文に多用しない。 - 強いドロップシャドウやグラデーションのボタンを使わない。 - 丸ゴシックや手書き系の書体を使わない。 - 角丸を 16px 以上に大きくしない。 - セクション境界を波形や斜めにしない。

Page Structure

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

1. ファーストビュー（製品カテゴリと名前を印象づける）: 暗くしたオフィス写真の上に、短いリード・カテゴリ名・大きな欧文の製品名を左寄せで白抜きにする。下に SCROLL の文字と縦線を置く。
2. コンセプト（管理対象と提供価値を伝える）: 中央にロゴ、周囲に小さな写真を散らす。2 行の見出しと、茶色の文字で中央揃えにした本文を置く。
3. 動画紹介（短時間で全体像を理解させる）: 中央見出しの下に赤い下線を引き、その下に埋め込み動画を置く。
4. アプリDL帯（既存ユーザーを導線に乗せる）: 赤い角丸パネルに、サインインボタンとストアバッジを並べる。
5. 特長（3 つの価値を示す）: 黒地に、番号付きの濃灰カードを縦に 3 枚並べる。写真はカードの上に重ねる。
6. 主な機能（機能の詳細を伝える）: 生成り地に、写真・見出し・本文・関連タグを 4 回繰り返す。最後に枠線ボックスでマニュアルへ誘導する。
7. 料金プラン（プランを比較させる）: 白地に 3 枚のカードを並べ、中央のプランをおすすめとして茶色の枠で囲む。下に注釈を中央揃えで置く。
8. 利用環境（アプリと機器の構成を説明する）: 茶色ヘッダーのカード 2 枚を並べ、最後に茶色地の相談ボックスを置く。
9. お知らせ（最新情報で信頼を示す）: グレーのパネルに日付・タグ・タイトルの行を並べ、一覧を見る黒ボタンを置く。
10. 申込フォーム（申込・問い合わせを獲得する）: 白いカードに、必須・任意ラベル付きの入力欄を縦に並べる。確認ボタンは深紅にする。下に規約のアコーディオンを置く。
11. 関連サービス誘導（大規模導入の相談へ誘導する）: 黒地にネットワーク線を薄く敷く。白い帯に黒文字の見出しを載せ、茶色のボタンとモニター型の画面画像を置く。
12. フッター（ナビと会社情報を示す）: 薄いグレー地に、ロゴ・リンク・コピーライトを中央揃えで並べる。

Imagery

• オフィスや倉庫で端末を操作する人物の実写写真。自然光で、明るく清潔な雰囲気にする。
• 特長の写真は、白背景で切り抜いた人物に赤いリボン状のウェーブを背後から添える。
• 製品画面は、ノートPC やスマホのモックアップに入れる。
• 機器写真は生成り地に置いた物撮り。手持ちのカットも入れる。
• 装飾は、ブランド色の円、円をつなぐ形の透かし、六角形のネットワーク線。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 900px に収め、中央に寄せる。
• PC では、英字見出しと和文ラベル・リード文を横に並べる。
• PC の特長は、写真とカードを左右交互に配置したジグザグにする。
• PC の機能・料金・環境カードは 2〜3 カラムにする。
• PC のヘッダーには、グローバルナビと赤い申込ボタンを右上に置く。

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