DESIGN.md — ティール×ライトグレーの法人家具サブスク LP（Teal Clean Office Furniture Subscription LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型
• キーワード: くすみティール・ライトグレー地・白カード・大きな薄い番号・オフィス写真・オレンジCTA
• 地の質感: フラットな単色面に、ごく薄いドロップシャドウ付きの白カードを置く。暗い写真に半透明グレーを重ねた CTA 帯。
• 形: 角丸の小さい長方形が基本。ラベルはピル型、アイコンは円形の線枠。
• 温度感: やや涼しげで落ち着いた中間トーン。CTA のオレンジだけが暖色。

Colors

• 地は白とライトグレー(#F4F4F4)を交互にしてセクションを区切る。
• 主要な見出し帯はティールの全幅面で、白カードを半分重ねて食い込ませる。
• 強調語はティール文字にして一回り大きくする。
• オレンジは主CTAボタンのみに限定する。
• サブCTAはティール、2つを横並びにする。
• CTA帯は暗い写真にスレートグレーを重ね白文字で載せる。
• button-primary は文字 #FFFFFF × 背景 #FC5C1B のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D74003、4.54:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #52BAB5 のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#34827E、4.53:1）を使う。
• pill-label は文字 #FFFFFF × 背景 #52B9B5 のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#35827F、4.52:1）を使う。
• merit-box は文字 #52B9B5 × 背景 #FFFFFF のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#35827F、4.52:1）を使う。
• icon-circle は文字 #52B9B5 × 背景 #FFFFFF のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#35827F、4.52:1）を使う。

Typography

• 全体をゴシック1書体で統一する。
• 数値は周りの文字より大きく太くして目を引く。
• 強調語はティール色にし1.3倍程度に大きくする。
• 見出しは中央揃え、下に短いティールの線を入れる。
• 本文は左揃えで行間を広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・事例は SP 2 列、PC は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中身の幅は PC で全幅の約7割、中央寄せ。
• ティール帯の下半分に白い大きなカードを重ねる。
• メリットは枠付きボックスを 2×2 で並べる。
• CTA ブロックは数セクションごとに繰り返す。
• 理由ごとに番号・見出し・ピルラベル・図解の順で縦に積む。

Elevation & Depth

• 商品カード・事例カードには右下へ寄せた薄い影をつける。
• 事例カードは右下にグレーのずらし影の板を敷く。
• ボタンには下に濃い色の細い影をつけて立体感を出す。
• そのほかの面はフラットにする。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。事例写真にはティールの細い枠線をつける
• セクション境界: 直線で区切り、色面を切り替える。ティール帯にカードを重ねて段差をつける
• CTAボタンは角丸が小さい長方形にし、右端に三角矢印を置く。
• ラベルはティールのピル型にする。
• アイコンはティールの線で描いた円形の枠に入れる。
• 吹き出しは細い線と小さな三角の切り欠きで作る。

Components

• 主CTAボタン（button-primary）: オレンジの長方形ボタン。白い太字で、右端に小さな三角を置く。
• サブCTAボタン（button-secondary）: ティールの同じ形のボタン。主CTAの右に並べる。
• CTAブロック（cta-block）: 線の吹き出しで短い前置き、その下に2行の提案文、さらに下に2つのボタンを置く。
• 大きな薄い番号見出し（reason-number）: 淡いティールの大きな数字を背面に置き、その上に濃色の見出しを重ねる。
• ティールのピル型ラベル（pill-label）: 見出しの下に置く補足の一言。
• メリット枠ボックス（merit-box）: 細いグレー枠の箱。上に小さな説明、下にティールの太字の要点を書く。
• 商品カード（product-card）: 白いカードに、商品写真・ブランド名・商品名・点線の区切り・月額価格を並べる。価格の頭には黒い小さなラベルを置く。
• 導入事例カード（case-card）: 左に写真とロゴ、右にティールの社名・役職名・本文を置く。下にずらし影をつける。
• 円形線アイコン（icon-circle）: ティールの細い線で描いた円の中にアイコンを入れ、下にラベルを付ける。
• 導入フロー（flow-step）: 線画アイコンを3つ並べて矢印でつなぐ。それぞれの下に太字の見出しと説明を置く。

Do's and Don'ts

Do - オレンジは主CTAだけに使う。 - 数値は大きく太く書き、強調語はティールにする。 - セクション見出しの下には短いティールの線を入れる。 - CTAブロックはページ内で4回前後繰り返す。 - 白地とグレー地を交互に並べて区切る。 - アイコンはティールの細線で統一する。

Don't - 鮮やかな原色を増やさない。 - 大きな角丸やぽってりした形にしない。 - 強い影やグラデーションを多用しない。 - 明朝や手書きの書体を混ぜない。 - 写真の上に色付きの文字を直接載せない。

Page Structure

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

1. ファーストビュー（コスト削減の数値と強みを伝える）: 暗めのオフィス写真の上に白い大きな見出しと数値を置き、下に強み3つの白い帯を並べる。ヘッダーに2つのCTAを置く。
2. 導入企業ロゴ（実績で信頼を得る）: 白地にロゴを横一列に並べ、上に小さな見出しを置く。
3. CTA（早い段階で問い合わせを促す）: 白地に吹き出し、ティールで強調した提案文、2つのボタンを置く。
4. 選ばれる理由1（費用面のメリットを伝える）: ティール帯の見出しに白カードを重ねる。大きな番号、比較の棒グラフ、2×2のメリット枠を並べる。
5. 選ばれる理由2（手間の削減を伝える）: 工程のタイムライン線と、点線で区切ったアイコン4つを並べる。
6. 選ばれる理由3（提案力を伝える）: 円形アイコン3つ、2×2の事例写真、ブランドロゴの一覧を並べる。
7. 取り扱い商品例（具体的な商品と月額料金を示す）: グレー地に白い商品カードを3列×3段で並べる。
8. CTA帯（問い合わせを促す）: 写真の上にスレートグレーを重ね、白文字と2つのボタンを置く。
9. 導入事例（利用者の声で信頼を得る）: グレー地に横長の事例カードを縦に積む。
10. その他の導入企業（実績の多さを見せる）: 写真の下に黒い社名帯を付けたサムネイルを3列×2段で並べる。
11. 導入までの流れ（手順の不安をなくす）: ティール帯に白カードを重ね、3ステップを矢印でつなぐ。
12. CTA帯・フッター（最後のひと押し）: 写真に暗色を重ねたCTAの下に、黒いフッターを置く。

Imagery

• 明るく整った法人オフィスや会議室を、広角で撮った実写。
• 家具の商品写真は白背景の切り抜き。
• FVとCTA帯の写真には暗いオーバーレイをかけて文字を読みやすくする。
• アイコンはティールの単色線画で、シンプルに描く。
• 図解はグレーの面とティールで作るフラットな棒グラフや円グラフ。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、商品カードは 2 列にする。
• SP のCTAボタン2つは縦に積み、横幅いっぱいにする。
• PC では中身の幅を約7割に絞って中央に置き、左右に色帯を見せる。
• 事例カードは SP では写真を上、本文を下に縦積みにする。
• ロゴ一覧は SP で横スクロールか 3 列にする。

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