--- version: alpha name: Monochrome Pro Cleaning Lineup LP description: 黒地の重厚なブランド訴求と、方眼紙風のライトグレー地に商品ごとの色枠カードを並べる構成。極太ゴシックと白黒の吹き出しで、ストーリー性と訴求力を両立させた日用品 LP。 colors: primary: '#000000' on-primary: '#FFFFFF' background: '#E5E5E5' surface: '#F9F8F8' line: '#D6D6D4' accent-1: '#65436B' accent-2: '#527844' accent-3: '#5374AB' tint-1: '#9C8B7B' tint-2: '#AB1441' text: '#000000' dark-section: '#234C63' secondary: '#9A9892' cta: '#232122' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em note: fontFamily: Montserrat fontSize: 9px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 0px md: 0px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' tab-heading: backgroundColor: '{colors.background}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 56px cloud-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 200px band-heading: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.display}' height: 60px point-card: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 520px feature-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 56px button-primary: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 44px button-final: backgroundColor: '{colors.cta}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 80px before-after-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 16px --- # DESIGN.md — 黒×グレーの男前お掃除洗剤 LP（Monochrome Pro Cleaning Lineup LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 黒基調・極太ゴシック・方眼背景・商品別カラー・ビフォーアフター・モノトーン - **地の質感**: 前半は黒地に煙のような暗いテクスチャ、後半は薄グレーに細い方眼線。金属的なグレーのグラデーションで締める。 - **形**: 角丸なしの四角い枠と箱が基本。吹き出しだけ雲形の有機的な形。CTAは平行四辺形や太枠の矩形。 - **温度感**: クールで硬質。人物写真で生活感を少し足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | ブランドの黒（前半の地・吹き出し） | 25% | 画素の実測 | | `on-primary` | `#FFFFFF` | 黒地上の白文字 | 4% | 画素の実測 | | `background` | `#E5E5E5` | 商品紹介エリアの薄グレー地 | 18% | 画素の実測 | | `surface` | `#F9F8F8` | 方眼入りの商品カード地 | 15% | 画素の主要色に補正 | | `line` | `#D6D6D4` | 方眼の細い線 | 2% | 画素の主要色に補正 | | `accent-1` | `#65436B` | 商品カラー：紫（枠・特長バッジ） | 3% | 画素の実測 | | `accent-2` | `#527844` | 商品カラー：緑（枠・特長バッジ） | 3% | 画素の実測 | | `accent-3` | `#5374AB` | 商品カラー：青（枠・特長バッジ） | 3% | 画素の実測 | | `tint-1` | `#9C8B7B` | 商品カラー：グレージュ | 2% | 画素の実測 | | `tint-2` | `#AB1441` | 商品カラー：ワインレッド | 2% | 画素の実測 | | `text` | `#000000` | 明るい地の見出し・本文の黒文字 | 3% | 画素の実測 | | `dark-section` | `#234C63` | ブランドバナーのブルーグレー壁 | 5% | 画素の実測 | | `secondary` | `#9A9892` | 締めの金属調グレー地 | 5% | 画素の主要色に補正 | | `cta` | `#232122` | 締めの CTA 平行四辺形の黒 | 1% | 画素の実測 | - 前半のストーリー部は黒地＋白文字で統一する。 - 商品紹介部は薄グレー地に、方眼入りの白っぽいカードを置く。 - 商品ごとにテーマ色を 1 色決め、カード枠・見出し文字・特長バッジ・購入ボタン枠に同じ色を使う。 - テーマ色以外の有彩色は使わない。写真以外はモノトーンにする。 - 締めは金属調のグレーグラデーションと黒い CTA にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャッチや大見出しの極太文字 | ゴシック | Dela Gothic One | 900 | 48px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-md` | 商品カードのタイトル（英字ブランド＋品名） | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.0em | | `headline-sm` | ポイント見出し・吹き出し内の文字 | ゴシック | Noto Sans JP | 800 | 16px | 1.4 | 0.02em | | `body-md` | 商品の説明一文・リード文 | ゴシック | Noto Sans JP | 700 | 12px | 1.6 | 0.02em | | `accent` | 英字の飾り見出し（白抜き縁取りの文字） | 欧文サンセリフ | Montserrat | 900 | 26px | 1.1 | 0.04em | | `label-button` | 購入ボタン・特長バッジ | ゴシック | Noto Sans JP | 800 | 15px | 1.3 | 0.02em | | `note` | BEFORE/AFTER などの小ラベル | 欧文サンセリフ | Montserrat | 800 | 9px | 1.2 | 0.06em | - 全体を極太ゴシックで統一し、明朝や丸ゴシックは使わない。 - 大見出しは 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-f7cca041`（元 LP の URL から採番） - **元 LP**: https://www.matsukiyococokara-online.com/news/1473 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。