--- version: alpha name: Warm Beige and Gold Pet Goods Feature LP description: 白と生成りベージュの地に、金茶のアクセントと明朝体の見出しを合わせたペット用品の商品紹介 LP。切り抜いた商品写真を大きく見せ、特長を一つずつ縦に並べる EC 商品ページ型。金箔の散らし、水滴、手書き風の吹き出しなどの装飾で、上品さと親しみやすさを両立させている。 colors: primary: '#B28B5A' background: '#FFFFFF' background-alt: '#F8EEE4' dark-section: '#8A6A45' text: '#3A3A3A' text-body: '#5C585B' accent-1: '#8E2E3A' secondary: '#1F242C' line: '#8C8D8F' tint-1: '#FEFEFC' on-dark: '#FFFFFF' primary-accessible: '#927044' typography: display: fontFamily: Playfair Display fontSize: 56px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.15em headline-sm: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 2px md: 6px lg: 16px 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-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px round-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.full}' height: 64px heart-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px handwritten-lead: textColor: '{colors.text}' typography: '{typography.accent}' height: 20px detail-callout: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px gold-textbox: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 140px section-title-en: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px spec-bar: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — 生成り×金茶の上品なペット用品 LP（Warm Beige and Gold Pet Goods Feature LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 生成りベージュ・金茶アクセント・明朝見出し・切り抜き商品写真・特長の縦積み・手書き吹き出し - **地の質感**: 白〜生成りのフラットな面。金箔の散らしや水滴の素材で質感を足す - **形**: 四角い面が基本。円形の拡大写真、ピル型ラベル、吹き出し、ハートのバッジを添える - **温度感**: 暖色寄り。ベージュと金茶が温かく、グレーと黒の商品写真で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B28B5A` | 金茶のアクセント（強調語・ラベル・バッジ） | 6% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 28% | 画素の主要色に補正 | | `background-alt` | `#F8EEE4` | 生成りベージュのセクション地 | 12% | 画素の主要色に補正 | | `dark-section` | `#8A6A45` | 注意事項セクションの茶色地 | 6% | 推定 | | `text` | `#3A3A3A` | 見出しの濃いグレー文字 | 2% | 推定 | | `text-body` | `#5C585B` | 本文のグレー文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#8E2E3A` | ワインレッドのバッジ | 0% | 推定 | | `secondary` | `#1F242C` | 濃色の商品写真と黒い面 | 6% | 画素の主要色に補正 | | `line` | `#8C8D8F` | 見出し下の細い区切り線 | 0% | 画素の主要色に補正 | | `tint-1` | `#FEFEFC` | ラベル帯の薄いベージュ | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | 金茶の面の上の白文字 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#927044` | AA を満たす補正値（計算） | | 計算 | - 地の色は白と生成りベージュを交互に使い、セクションを区切る - 見出しの中で一番伝えたい語だけを金茶にする - ラベルとバッジは金茶の面に白文字で作る - ワインレッドは小さな円やハートのバッジだけに使う - 注意事項のセクションだけは茶色の地にして目立たせる - 商品のグレー・ネイビー・黒の色味を邪魔しないよう、彩度の高い色は使わない - `feature-label` は文字 `#FFFFFF` × 背景 `#B28B5A` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#927044`、4.54:1）を使う。 - `round-badge` は文字 `#FFFFFF` × 背景 `#B28B5A` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#927044`、4.54:1）を使う。 - `gold-textbox` は文字 `#FFFFFF` × 背景 `#B28B5A` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#927044`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大きな数字や欧文の飾り文字 | 欧文セリフ | Playfair Display | 400 | 56px | 1.0 | 0.02em | | `headline-lg` | 特長の大見出し | 明朝 | Shippori Mincho | 600 | 30px | 1.3 | 0.05em | | `headline-md` | サイズ情報などの欧文セクション見出し | 欧文セリフ | Cormorant Garamond | 400 | 20px | 1.3 | 0.15em | | `headline-sm` | 細部紹介の小見出し | 明朝 | Shippori Mincho | 600 | 15px | 1.4 | 0.03em | | `accent` | 見出しの上に添える手書き風の一言 | 手書き・筆 | Klee One | 600 | 14px | 1.4 | 0.05em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | - 見出しは明朝体、本文はゴシック体に統一する - 見出しの中の強調語は金茶にし、他の文字より一回り大きくする - 数字と欧文の飾り文字はセリフ体で大きく組む - 本文は 3 行程度の中央揃え、または左揃えにする - セクション見出しの欧文は大文字にし、字間を広く取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。細部紹介だけは左に写真、右に円形の拡大写真と文章を置く 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 1 セクションにつき特長を 1 つだけ見せる - 見出し、短い本文、大きな切り抜き商品写真の順に並べる - 写真は画面幅いっぱい、または片側の端まではみ出させる - サイズとカラーの情報は白地に中央揃えで、整理して見せる ## Elevation & Depth - 基本はフラットにする - 金茶の文章ボックスの背後に、ずらした細線の枠を重ねて奥行きを出す - 商品写真の下に柔らかい接地影を入れる ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を切り抜く。細部の拡大写真は金色の細い縁取りを付けた円形にする - **セクション境界**: 直線で地の色を切り替える - ラベルは角の小さい長方形かリボン型にする - 円形の拡大写真は点線で本体の該当箇所とつなぐ - 吹き出しは手描き風の線にする - 注意事項の写真は角丸の四角に、斜線のストライプ枠を付ける ## Components - **金茶の小ラベル**（`feature-label`）: 商品の使い方の種類などを並べる、小さな四角いタグ - **円形の数値バッジ**（`round-badge`）: 重さなどの数値をセリフ体で大きく入れる円形バッジ - **ハートのバッジ**（`heart-badge`）: ワインレッドのハートか円の中に、短い訴求を白文字で入れる - **手書き風の前置き**（`handwritten-lead`）: 見出しの上に置く一言。手書き書体に、斜めの集中線や下線を添える - **円形の拡大写真と点線**（`detail-callout`）: 金色の縁取りを付けた円形写真。星印と点線で本体の該当箇所につなぐ - **金茶の文章ボックス**（`gold-textbox`）: 金茶の面に明朝の白い見出しと本文を入れる。背後にずらした線の枠を重ねる - **欧文のセクション見出し**（`section-title-en`）: 字間を広げた大文字のセリフ体。下に短い細線を引く - **仕様の帯**（`spec-bar`）: 左に金茶のラベル、右に薄いベージュの帯を置き、仕様の数値を 1 行で入れる ## Do's and Don'ts **Do** - 見出しは明朝体にし、強調語だけを金茶にする - 商品は切り抜き写真で大きく見せる - 地の色は白と生成りを交互に切り替える - 数字や欧文はセリフ体で大きく飾る - 手書き風の一言や吹き出しで、親しみやすさを足す **Don't** - 原色や蛍光色は使わない - 角の大きく丸いポップなボタンは置かない - 本文を長文にしない（3 行程度までにする） - 影の強いカードを並べない - 1 つのセクションに特長を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の特長とバリエーションを一目で伝える）: 使用シーンの写真の上に明朝のキャッチを置く。下部に円形バッジ、セリフ体の数字、金茶のラベルを並べる 2. **使い方の紹介**（複数の使い方ができることを示す）: 金箔を散らした白地に大きな数字の見出しを置き、使用写真を 3 枚並べる 3. **収納性**（折り畳めることを訴求する）: 左揃えの明朝見出しと切り抜き写真を置き、矢印と大きな欧文の飾り文字を添える 4. **軽さ**（軽くて持ち運びやすいことを伝える）: 生成り地に人物の写真を大きく置き、円形の数値バッジを重ねる 5. **お手入れ**（洗えて清潔に保てることを伝える）: 水滴の素材を散らし、手書き風の前置きと明朝見出しを置く 6. **通気性**（ペットが安心して過ごせることを伝える）: ラベル付きの見出しに、ハートのバッジとメッシュ部分を開いた写真を合わせる 7. **細部の紹介**（ファスナーや肩紐などの機能を見せる）: 前面・背面の写真に円形の拡大写真を点線でつなぎ、それぞれに小見出しと説明を付ける 8. **安全機能**（飛び出し防止の機能を伝える）: 円形の拡大写真、吹き出し、金茶の文章ボックスを組み合わせる 9. **容量**（中の広さと入る目安を伝える）: 明朝見出しと、ペットが入った写真を置き、ワインレッドの円形バッジを添える 10. **注意事項・改良点**（改良された点を伝える）: 茶色地にリボン型の見出しを置き、ストライプ枠の写真と手書き風のラベルを並べる 11. **サイズ情報**（寸法と適応体重を示す）: 白地に欧文見出しを置き、寸法線入りの写真と仕様の帯、注釈を並べる 12. **カラーバリエーション**（選べる色を見せる）: 切り抜き写真を 2 枚と 1 枚で並べ、セリフ体の色名とカナ表記を添える ## Imagery - 商品は白背景で切り抜き、柔らかい接地影を付ける - 使用シーンは明るい自然光の中で、人物が持つ・背負う姿を撮る - 猫や犬が中から顔を出す、親しみのある写真を入れる - 金箔の散らしや水滴の素材を、セクションの端に添える - 細部はマクロで撮り、円形に切り抜く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 750px 前後の幅で、SP と同じ縦長の構成を表示する - PC の左右の余白は、白または生成りで埋める - PC では細部紹介の 2 列を、広い間隔で見せる - PC でも文字サイズは画像の比率に合わせて拡大する ## 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-04190aa3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/forthon/r925/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（1/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。