DESIGN.md — 黒×グレーの男前お掃除洗剤 LP（Monochrome Pro Cleaning Lineup LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: クール・先進的、力強い・インパクト、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 黒基調・極太ゴシック・方眼背景・商品別カラー・ビフォーアフター・モノトーン
• 地の質感: 前半は黒地に煙のような暗いテクスチャ、後半は薄グレーに細い方眼線。金属的なグレーのグラデーションで締める。
• 形: 角丸なしの四角い枠と箱が基本。吹き出しだけ雲形の有機的な形。CTAは平行四辺形や太枠の矩形。
• 温度感: クールで硬質。人物写真で生活感を少し足す。

Colors

• 前半のストーリー部は黒地＋白文字で統一する。
• 商品紹介部は薄グレー地に、方眼入りの白っぽいカードを置く。
• 商品ごとにテーマ色を 1 色決め、カード枠・見出し文字・特長バッジ・購入ボタン枠に同じ色を使う。
• テーマ色以外の有彩色は使わない。写真以外はモノトーンにする。
• 締めは金属調のグレーグラデーションと黒い CTA にする。

Typography

• 全体を極太ゴシックで統一し、明朝や丸ゴシックは使わない。
• 大見出しは 1 文を 2 段に分け、強調語だけを大きくするサイズの強弱をつける。
• 英字の飾り見出しは白文字に黒縁取りのアウトライン風にする。
• 白帯の上に黒文字を乗せる「帯見出し」で、一語ずつ強調する。
• 本文は短く、1〜2 行にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードの中は左に商品写真、右にビフォーアフターの 2 列。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品カードは画面幅の約 92% にし、太さ 3px の色枠で囲む。
• カード上部に見出しの帯を置き、細い線で本文と分ける。
• 特長バッジは 3 つを横に等間隔で並べる。
• カードの下に購入ボタンを中央寄せで置き、次のカードまで約 48px 空ける。
• ストーリー部の写真は全幅か左右 10% 内側に置き、見出しと交互に並べる。

Elevation & Depth

• 影はほぼ使わない。購入ボタンだけ右下にずらしたベタ影（テーマ色）を付ける。
• ポイントカードは右下に黒のオフセット影を付ける。
• 立体感は写真と金属調グラデーションで出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のまま切り抜く。商品ボトルは背景を透過して置く。
• セクション境界: 英字見出しの上部が、角の丸いタブ型に前のセクションへ食い込む。締めは斜めの境界にする。
• カード・ボタン・バッジは角丸なしの直角にする。
• 角丸はセクション見出しのタブと雲形の吹き出しだけに使う。
• 締めの CTA は平行四辺形にする。
• BEFORE/AFTER ラベルは黒い斜めのタグにする。

Components

• タブ型英字見出し（tab-heading）: 角丸タブの形で、アウトライン風の英字を中央に置く。
• 雲形の思考吹き出し（cloud-bubble）: 悩みは黒地に白文字、解決後は白地に黒文字にする。人物写真の上に小さな丸を連ねて置く。
• 白帯見出し（band-heading）: 黒地の上に白い矩形帯を置き、黒の極太文字を載せる。
• POINT 番号カード（point-card）: 左に POINT と 2 桁番号の小枠、右に見出し、下に写真を置く。黒のオフセット影を付ける。
• 商品別カラー枠カード（product-card）: 方眼地に太い色枠を付け、見出し帯・説明一文・商品写真・ビフォーアフター・バッジ 3 つを入れる。
• 特長バッジ（feature-badge）: テーマ色の正方形の中に、白の太字を 2〜3 行で入れる。
• 購入ボタン（button-primary）: 白地にテーマ色の太枠と文字を使う。末尾に▶を付け、右下にベタ影を付ける。
• 締めの平行四辺形 CTA（button-final）: 金属調グレーの上に置く黒い平行四辺形で、白の太字を載せる。
• BEFORE/AFTER タグ（before-after-tag）: 写真の左上に重ねる黒い斜めのタグで、白の斜体英字を入れる。

Do's and Don'ts

Do - 商品ごとにテーマ色を 1 色決め、枠・文字・バッジ・ボタンを揃える。 - 黒地のストーリー部では、極太の大見出しと写真を交互に並べる。 - 悩み→解決の対比を、黒い吹き出しと白い吹き出しで表す。 - 効果はビフォーアフター写真の 2 段で見せる。 - 商品ボトルは背景を透過し、大きく見せる。

Don't - 角丸ボタンやピル型ボタンを使わない。 - パステル色やグラデーションの CTA を使わない。 - 細い書体や明朝体で見出しを組まない。 - 1 枚のカードの中でテーマ色を混ぜない。 - 長い説明文を段落で並べない。

Page Structure

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

1. ファーストビュー（ブランドと商品群を一目で見せる）: 黒帯にロゴを置き、ブルーグレーの壁の前に商品を棚のように並べる。上部に白い極太のキャッチを置く。
2. 動画（WEB 動画で興味を引く）: タブ型英字見出しの下に動画を埋め込む。続けて、問いかけ型の極太コピーと枠付きラベルを置く。
3. 悩みの提起（掃除用品への不満を共感させる）: 困り顔の人物写真の上に、黒い雲形の吹き出しを 2 つ置く。下に白帯見出しを重ねる。
4. 開発背景（悩みを解決するために作ったことを伝える）: 黒地に細い白線の枠を置き、短い文と下線付きの強調行を入れる。
5. ブランドコンセプト（こだわりと美学を伝える）: 煙のようなテクスチャの黒地に、サイズの強弱をつけた極太コピーと掃除の写真を交互に並べる。
6. 特長（製品設計のポイントを 3 つ示す）: 商品バナーの下に大見出しを置き、POINT 番号カードを 3 枚縦に並べる。
7. 商品ラインナップ（用途別の商品と効果を見せる）: 薄グレー地にタブ見出しを置き、商品別カラー枠カードと購入ボタンを繰り返す。
8. 解決後のイメージ（使った後の満足を描く）: 笑顔の人物写真の上に白い雲形の吹き出しを置き、悩みの提起と対比させる。
9. 締めの CTA（商品一覧へ誘導する）: 金属調グレーの地にロゴ・商品群・短いコピー・黒い平行四辺形 CTA を置く。
10. ブランド説明（ブランドの理念を一言で伝える）: 棚に並んだ商品写真の下に、大きな英字と 3 行の白文字を置く。

Imagery

• 商品は黒いボトルに、色の斜線ロゴがあるデザイン。ブルーグレーの横板壁と棚の前に並べて撮る。
• 掃除シーンは黒やグレーの手袋の手元をアップで撮る。白いタイルやステンレスで清潔感を出す。
• 人物は男女 2 人のキッチンの場面。悩みは困り顔、解決後は笑顔の同じ構図で撮る。
• ビフォーアフターは同じ画角で汚れの有無だけを変える。
• 背景には煙や霧のような暗いテクスチャと、細い方眼パターンを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため推奨を書く。中央に 750px 前後の SP 構成を置き、左右を黒またはグレーで埋める。
• PC では商品カードを最大幅 960px にし、商品写真とビフォーアフターの横並びを広げる。
• POINT カードは PC で 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 行書くと起動時に読み込まれる。