--- version: alpha name: Clean Teal Marble Daily Goods LP description: 白〜薄グレーの大理石・布地背景に、深いティールと茶色の強調を合わせた商品説明型のLP。明朝体の大見出しで落ち着いた品のある印象を出し、写真を大きく使って機能を一つずつ縦に見せていく。 colors: primary: '#167A6E' secondary: '#6B4A22' background: '#FFFFFF' background-alt: '#F1F2F2' text: '#272727' text-body: '#4A4A4A' accent-1: '#1F9A8A' on-primary: '#FFFFFF' tint-1: '#DFD5C9' line: '#9A9A9A' accent-2: '#8FC8E0' dark-section: '#2E2F34' accent-1-accessible: '#1A8375' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Playfair Display fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 15px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' feature-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 150px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' rounded: '{rounded.full}' height: 120px star-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 60px slant-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 30px step-number: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px photo-caption: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 22px section-title-en: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 50px --- # DESIGN.md — 白大理石×ティールの清潔系日用品LP（Clean Teal Marble Daily Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: 清潔・爽やか、上品・高級、情報量多め・訴求型 - **キーワード**: 白大理石・ティール・明朝見出し・清潔感・機能訴求 - **地の質感**: 大理石・白い布のドレープ・柔らかなボケ写真を背景に敷き、紙のような白さと光沢感を出す - **形**: 角丸ピル、円形バッジ、ギザギザの星形バッジ、斜めの帯ラベル - **温度感**: やや冷たい。茶色の差し色で温度を少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#167A6E` | ブランドのティール（ピル・円バッジ） | 4% | 推定 | | `secondary` | `#6B4A22` | 茶色の星形バッジと悩み見出しの面 | 2% | 推定 | | `background` | `#FFFFFF` | ページの地色 | 30% | 画素の実測 | | `background-alt` | `#F1F2F2` | 大理石・布地背景の薄グレー | 25% | 画素の主要色に補正 | | `text` | `#272727` | 見出しの濃い墨色 | 3% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文グレー | 2% | 推定 | | `accent-1` | `#1F9A8A` | 見出し強調の明るいティール文字 | 1% | 推定 | | `on-primary` | `#FFFFFF` | ティール面の上の白文字 | 1% | 画素の主要色に補正 | | `tint-1` | `#DFD5C9` | ファーストビューのベージュ地 | 5% | 画素の実測 | | `line` | `#9A9A9A` | 見出し下の細い区切り線 | 0% | 推定 | | `accent-2` | `#8FC8E0` | 吸水説明の水色 | 1% | 推定 | | `dark-section` | `#2E2F34` | 黒いカラー展示の商品色 | 3% | 画素の主要色に補正 | | `accent-1-accessible` | `#1A8375` | AA を満たす補正値（計算） | | 計算 | - 白と薄グレーの大理石・布地を地にして、清潔感を最優先にする - ティールは機能ピル、円バッジ、斜めの帯ラベルだけに使う - 茶色は悩み・汚れ系の訴求（星形バッジ・見出しの面）に限って使う - 見出しは墨色にし、キーワードだけティール文字で大きくする - ファーストビューだけはベージュ系の暖色写真で始める - `circle-badge` は文字 `#1F9A8A` × 背景 `#FFFFFF` のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1A8375`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出しの強調語 | 明朝 | Shippori Mincho | 800 | 34px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 700 | 24px | 1.4 | 0.05em | | `headline-md` | FVのタイトル・リード | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.03em | | `headline-sm` | 英字セクション見出し | 欧文セリフ | Playfair Display | 500 | 18px | 1.3 | 0.1em | | `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `label-button` | ピル型の機能ラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.05em | | `accent` | Answerなどの手書き風の添え字 | 手書き・筆 | Klee One | 600 | 15px | 1.4 | 0.02em | | `note` | 素材・カラー名などの注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | - 見出しは明朝体にし、強調語だけ 1.3〜1.5 倍に大きくする - 強調語はティール、助詞は小さめの墨色にする - 本文は 11px 前後のゴシックで中央揃えにし、3〜4 行に収める - 英字見出しはセリフ体の大文字で字間を広く取る - 数字は明朝で特大にして円バッジの中に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。画像の並びは 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は端まで広げ、見出しと本文はその下か上に重ねる - 見出しの下に、幅 80% ほどの細い線を引く - STEP 説明は 2 列の写真グリッドにし、左下に番号を置く - スペック部は余白を多めに取り、英字見出し・短い下線・図の順に並べる ## Elevation & Depth - 影は基本的に使わない - 白いカードの上に、写真からわずかに浮く程度の弱い影を付ける - 奥行きは、写真の切り抜きを重ねて出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品は白抜きの切り抜き。シーン写真は角丸なしの矩形で端まで広げる - **セクション境界**: 区切りは写真背景の切り替えで作り、直線で区切る - 機能ラベルはティールのピル型にする - 訴求は白地に細いティール線の円形バッジで囲む - 悩みワードは茶色のギザギザ星形バッジに入れる - ラベル帯は斜めの平行四辺形にする ## Components - **機能ピル**（`feature-pill`）: 機能名を 2 列×3 行で並べるティールのピル - **円形訴求バッジ**（`circle-badge`）: 白地にティールの線で囲んだ円。中に小さな前置きと大きな強調語を入れる - **数字の円バッジ**（`number-badge`）: ティールで塗った円に、白の明朝で大きな数字を入れる。周囲に英字の弧を添える - **星形の悩みバッジ**（`star-badge`）: 茶色のギザギザ円に白文字で悩みワードを入れ、写真の周囲に散らす - **斜め帯の見出し**（`slant-label`）: ティールの平行四辺形に、白の明朝で検証タイトルを入れる - **STEP番号**（`step-number`）: 写真の左下に、小さな英字と斜線、大きな明朝の数字を重ねる - **写真キャプション帯**（`photo-caption`）: 写真の上に置く、ティール地に白文字の短い説明帯 - **英字セクション見出し**（`section-title-en`）: セリフ体の大文字に、短い太下線を中央に添える ## Do's and Don'ts **Do** - 地は白〜薄グレーに保ち、清潔さを最優先にする - 見出しは明朝体にし、キーワードをティールで大きくする - 機能は円バッジやピルに入れて短い言葉で示す - 商品は白抜きの切り抜きで大きく見せる - 説明文は中央揃えで短くまとめる **Don't** - ビビッドな赤や黄色の CTA 色を入れない - 見出しを丸ゴシックにしない - 濃い色の面を広く敷かない - 強い影やグラデーションのボタンを使わない - 本文を長い段落にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の用途と入数をひと目で伝える）: ベージュ系の使用シーン写真に、右上へ白抜きのゴシックのタイトルと入数ラベルを置く 2. **悩みの提起**（汗による汚れの悩みを喚起する）: シャツと帽子の写真の中央に、茶色の面で悩みワードを大きく置く 3. **解決と機能一覧**（商品で解決できることを列挙する）: 白いカードに明朝のリードを入れ、ティールのピルを 6 個並べる 4. **効果の説明**（防汚の効果を示す）: 商品の写真の周囲に茶色の星形バッジを散らし、その下に明朝見出しと中央揃えの本文を置く 5. **特長（貼りやすさ）**（使いやすさを訴求する）: 大理石の背景に、大きな明朝見出しと円形の訴求バッジを置く 6. **対応アイテム**（使える範囲の広さを示す）: 切り抜いた帽子写真を 5 点散らし、その下に見出しと本文を置く 7. **検証**（吸水力を実験で証明する）: 斜め帯の見出しの下に、STEP 番号付きの写真グリッドを置き、手書き風の結論で締める 8. **構造の説明**（層の構造で防水性を説明する）: 断面の写真に、点線と層名のラベルを重ねる 9. **素材**（肌へのやさしさを伝える）: 白い布のドレープに素材のアップ写真を円形に重ね、その下に見出しを置く 10. **枚数の選択**（入数の選び方を案内する）: ティールの円バッジ 2 つを「or」でつなぐ 11. **カラー展開**（色の使い分けを示す）: 大きな明朝の数字見出しに、左右 2 分割の使用写真とティールのキャプション帯を合わせる 12. **サイズ情報**（寸法と素材を明示する）: 英字見出しの下に、寸法線付きの商品図と素材の注記を置く 13. **カラーバリエーション**（セットの内容を見せる）: 扇状に広げた商品を 2×2 で並べ、英字の色名と注記を添える ## Imagery - 白い大理石や白い布のドレープを、明るく柔らかい光で撮って背景にする - 商品は白抜きの切り抜きにし、斜めや扇状に並べる - 使用シーンは自然光で、清潔感のある白いシャツやキャップと合わせて撮る - 検証写真は水を青く着色し、効果を見える化する - 汚れやカビは、小さくかわいいイラストで添える程度にとどめる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 750px 前後の 1 カラムでそのまま見せ、左右は白〜薄グレーの地にする - 写真グリッドは PC で 3〜4 列に広げてもよい - 見出しサイズは PC で 1.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-dbc1afd8`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/forthon/r973/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。