DESIGN.md — 深色ブロック切替のBtoB SaaS年次総括LP（Multi-Color Block Business SaaS Year-in-Review LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: 色ブロック切替・黒帯テロップ・チェックアイコン・業務写真・ビジネスゴシック・年次総括
• 地の質感: フラットな単色面と実写写真の交互配置。グラデーションや影はほとんど使わない
• 形: 四角い面が中心。カードとボタンだけ角丸、CTAはピル型
• 温度感: 落ち着いた中間温度。深い色の帯で章ごとに温度を変える

Colors

• 章ごとに深緑・焦茶・藍・オリーブ・深紅の単色面を1色ずつ割り当て、混ぜない
• 色面の文字・アイコンは白のみ
• 写真上の悩み文は黒帯に白文字
• CTAは常にブランド青のピル＋白文字
• 白地の見出しと本文は濃紺で、純黒は使わない
• 製品カードは各製品の固有色で塗り分ける
• 黄緑マーカーは小ラベルだけに限る

Typography

• 見出しはすべて太字のゴシック
• 章タイトルはキーワードを大きく、助詞部分を小さくしてサイズを変える
• 黒帯テロップは1行ずつ帯を切り、行ごとに幅を変える
• 本文は行間を広めにし、短い行で改行する
• 英字の見出しは幾何学的なサンセリフで書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム、PCは写真と色面の左右2カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• 章は写真ブロックと色面ブロックを隙間なく積む
• 章タイトルの白帯は写真上端に重ねて中央に置く
• 黒帯テロップは写真の左上と右下に分けて置く
• 機能説明はチェックアイコン＋機能名＋説明＋製品ロゴの順
• 白地セクションの上下余白は64〜80px

Elevation & Depth

• 基本はフラットで影なし
• CTAカードはごく薄い影の白カード
• ヘッダーボタンは白ピルに軽い影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 全幅の長方形で裁ち落とし。製品カード内では人物を右に切り抜く
• セクション境界: 直線で色が切り替わる
• 章タイトルの白帯は角を斜めにカットした平行四辺形
• 黒帯テロップは角丸なしの長方形
• 製品カードは角丸4px
• CTAボタンはピル型で右に矢印

Components

• 主CTAボタン（button-primary）: 青のピル型、中央に白文字、右端に矢印
• FV資料DLボタン（button-hero）: 白のピル型。左に資料サムネイル、上に小さな補足文
• 章タイトル白帯（chapter-title-band）: 写真上に重ねた斜めカットの白帯。キーワードを大きく書く
• 黒帯テロップ（pain-telop）: 写真上で悩みの業務を1行ずつ黒帯に白文字で書く
• 機能チェック項目（feature-check）: 色面上に丸チェックアイコン、機能名、説明、製品ロゴを並べる
• CTAカード（cta-card）: 写真背景の上に白カード。見出し、画像、青ボタンを載せる
• 製品ラインナップカード（product-card）: 製品固有色の横長カード。左に名前と説明と小さな白ボタン、右に人物写真
• 小ラベル（label-marker）: 黄緑の地に小さな英字
• 問い合わせ帯（contact-band）: 青とスレートの帯に白文字の見出しと丸矢印付きリンク

Do's and Don'ts

Do - 章ごとに色面の色を変え、テーマを色で見分けられるようにする - 悩みは写真上の黒帯テロップで短く書く - 解決は丸チェックアイコンで始める - CTAは青のピルで統一する - 白地のセクションは余白を広く取り、本文を短い行に分ける

Don't - 色面にグラデーションや柄を入れない - 1つの章に複数の色面色を混ぜない - 黒帯テロップを角丸にしない - CTAに青以外の色を使わない - 装飾的なイラストを多用しない（CTAカードの人物イラストだけにする）

Page Structure

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

1. ファーストビュー（年次総括のテーマを打ち出す）: 解放感のある人物写真を全幅で敷き、白文字の見出しと英字の大タイトル、白ピルの資料DLボタンを載せる
2. 導入メッセージ（一年の方針を伝える）: 白地に濃紺の大見出しと、短く改行した本文
3. 製品画面コラージュ（製品の実態を見せる）: 淡グレーの地にUI画面や帳票を重ねて並べる
4. 章1 悩み（手作業の負担を見せる）: 業務写真に章タイトルの白帯と黒帯テロップを載せる
5. 章1 解決（対応する機能を示す）: 深緑の色面にチェック付きの機能を2つと製品ロゴを並べる
6. 章2〜5 悩みと解決（テーマごとに同じ型で繰り返す）: 焦茶・藍・オリーブ・深紅の色面で、写真と色面の組を繰り返す
7. CTA（資料DLと相談へ誘う）: 青く染めたオフィス写真の上に白見出しと白カード2枚、青ピルボタンを置く
8. 製品ラインナップ（製品群へ送る）: 黄緑の小ラベル、見出し、製品固有色の横長カードを縦に8枚
9. 問い合わせ帯（検討段階別の窓口を示す）: 写真帯、青帯、スレート帯を積み、電話番号と丸矢印リンクを置く
10. フッター（サイト内リンクと会社情報）: 青文字のリンク一覧、淡グレーの枠にロゴボタン、認証マーク、淡グレーのコピーライト帯

Imagery

• 悩みの写真は書類・PC・カードを扱う手元やオフィスワーカーを、自然光で寒色寄りに撮る
• 人物は顔を見せすぎず、作業中の手元や後ろ姿を中心にする
• FVは両手を広げた人物と舞う書類で解放感を出す
• 製品UIは実画面風のフラットな画面を重ねたコラージュにする
• CTAは青の線画風フラットイラストの人物にする
• 製品カードの人物は背景を抜いてカード右端に配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは各章を左に写真と黒帯、右に色面の2カラムで横並びにする
• PCの章タイトル白帯は写真と色面の境目の中央上に重ねる
• PCのCTAカードは2枚を横に並べる
• PCの製品カードは4列×2段の縦長カードにする
• PCの問い合わせ帯は3カラム横並びにする
• PCのFVは見出しを上部にまとめ、写真を横長に使う

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