--- version: alpha name: Warm Kraft Beige Pet Goods LP description: 段ボール色のクラフト茶と生成りベージュを地に、猫の写真を大きく見せるペット用品 LP。茶帯セクションに丸いバッジの POINT 番号と字間を広くとった白ゴシック見出しを置く。比較表・グラフ・サイズ図で機能を順に説明していく構成。 colors: primary: '#BC9963' on-primary: '#FEFCF2' background: '#FFF7EC' background-alt: '#F3F3F3' surface: '#FEFEFD' text: '#4C3D32' text-muted: '#706E63' secondary: '#6B4A35' marker: '#F5EEE3' line: '#DAD4CB' tint-1: '#EAE8E3' accent-1: '#3E9A7A' dark-section: '#BC9963' primary-accessible: '#8C6D3C' typography: display: fontFamily: Josefin Sans fontSize: 56px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Josefin Sans fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px section-band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 200px feature-icon-circle: backgroundColor: '{colors.surface}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 120px numbered-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 70px comparison-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 400px check-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px color-label: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px step-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — クラフト茶×生成りの猫用品 LP（Warm Kraft Beige Pet Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: ナチュラル、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型 - **キーワード**: クラフト茶・生成り・木目・猫写真・字間広め・POINT バッジ - **地の質感**: マットで紙っぽい質感。グラデーションはほぼ使わず、単色の帯と写真で組む - **形**: 四角い帯と白カード、丸いアイコン・バッジ、ピル型ラベル - **温度感**: 暖色寄りで、穏やかなぬくもりがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BC9963` | セクション帯・見出し帯のクラフト茶 | 14% | 画素の実測 | | `on-primary` | `#FEFCF2` | 茶帯上の白文字 | 2% | 画素の実測 | | `background` | `#FFF7EC` | ページ全体の生成り地 | 18% | 画素の主要色に補正 | | `background-alt` | `#F3F3F3` | ライトグレーの写真背景・組立てエリア | 9% | 画素の実測 | | `surface` | `#FEFEFD` | 口コミ・比較表の白カード | 11% | 画素の実測 | | `text` | `#4C3D32` | 濃いこげ茶の見出し・本文 | 4% | 画素の主要色に補正 | | `text-muted` | `#706E63` | 注釈・小さい説明文 | 1% | 画素の実測 | | `secondary` | `#6B4A35` | 比較表ヘッダー・ダーク木目のこげ茶 | 3% | 推定 | | `marker` | `#F5EEE3` | 強調語の下に引くベージュのマーカー | 1% | 画素の主要色に補正 | | `line` | `#DAD4CB` | カード枠・表の罫線 | 3% | 画素の主要色に補正 | | `tint-1` | `#EAE8E3` | 比較表の項目セル | 3% | 画素の主要色に補正 | | `accent-1` | `#3E9A7A` | チェックアイコンの緑 | 0% | 推定 | | `dark-section` | `#BC9963` | FV 下のアイコン帯 | 2% | 画素の実測 | | `primary-accessible` | `#8C6D3C` | AA を満たす補正値（計算） | | 計算 | - 生成り地を基本にして、セクションの切り替えはクラフト茶の全幅帯で行う - 茶帯の上は白文字だけにし、字間を広めにとる - 強調語には太字とベージュのマーカーを付ける。赤などの強い色は使わない - 比較表では自社側の列を茶のヘッダーにし、他社側はこげ茶かグレーにして差を見せる - グラフや凡例で使う色は、自社をクラフト茶、他社をピンクと紫系にする - `point-badge` は文字 `#BC9963` × 背景 `#FFF7EC` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8C6D3C`、4.53:1）を使う。 - `section-band-heading` は文字 `#FEFCF2` × 背景 `#BC9963` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8C6D3C`、4.51:1）を使う。 - `step-number` は文字 `#FEFCF2` × 背景 `#BC9963` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8C6D3C`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 累計数などの大きな数字 | 欧文サンセリフ | Josefin Sans | 400 | 56px | 1.1 | 0.02em | | `headline-lg` | 茶帯の上のセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.6 | 0.15em | | `headline-md` | 口コミタイトル・番号付きリストの見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.08em | | `headline-sm` | 茶帯の小見出し・問いかけ | ゴシック | Zen Kaku Gothic New | 500 | 15px | 1.6 | 0.12em | | `body-md` | 本文・口コミの本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em | | `note` | 注釈・モデル体重などの補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `accent` | POINT 番号・カラー名ラベル | 欧文サンセリフ | Josefin Sans | 400 | 14px | 1.2 | 0.1em | - 見出しは字間 0.1em 以上で、ゆったり組む - 見出しの下に白またはベージュの点線を引く - 大きな数字は細めの欧文で極太にはせず、上品に見せる - 助詞は小さくし、要の語を大きくしてリズムを作る - 本文はこげ茶、行間 1.8 で読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品バリエーションと写真グリッドは 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 茶帯の見出しセクションは全幅で、上下に 40px 前後の余白をとる - 口コミカードには人物イラストを付け、左右交互に置く - 比較表は項目列を狭くし、2 列で比べる - サイズ図は写真に寸法線と数値を添える - 手順は番号の丸、写真、説明の順で縦に並べる ## Elevation & Depth - カードには影をほとんど付けず、細い罫線か白地で区切る - 口コミカードにだけ、ごく薄い影を付けてもよい - 丸アイコンは白の円に、柔らかい影を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの四角で全幅、または 2 カラムのグリッドに切り抜く。商品単体は背景を抜いた切り抜きにする - **セクション境界**: 直線で色を切り替える（茶帯と生成り） - POINT 番号は円形のバッジにする - カラー名などのラベルはピル型にする - 比較表と商品カードは角丸を小さく - 特長アイコンは白い円の中に線画で描く ## Components - **POINT 番号バッジ**（`point-badge`）: 生成りの円に細い枠と「POINT」の文字、2 桁の番号を入れる。茶帯見出しの上に置く - **茶帯の見出し**（`section-band-heading`）: クラフト茶の全幅帯に白文字の 2 行見出しを置き、下に点線を引く - **特長の丸アイコン**（`feature-icon-circle`）: 白い円の線画アイコン 4 つを茶帯の上に並べ、下に白文字で 2 行のラベルを付ける - **口コミカード**（`review-card`）: 白カードに太字のタイトルと本文を入れ、強調語にマーカーを引く。横に人物と猫のイラストを添える - **番号付きの特長リスト**（`numbered-list`）: 枠で囲んだ「1.」の番号と、マーカー付きの見出し、2 行の説明を並べる - **比較表**（`comparison-table`）: 項目列はグレージュ。自社列は茶のヘッダーで◎を付け、他社列は△や×で示す - **チェックリストのピル**（`check-pill`）: 白いピルの枠に緑のチェックと短い症状を書き、縦に 2 つ並べる - **カラー名ラベル**（`color-label`）: 写真の下に白い半透明のピルを置き、欧文の大文字でカラー名を書く - **手順の番号**（`step-number`）: クラフト茶の円に白い数字を入れ、手順写真の左上に置く ## Do's and Don'ts **Do** - 地の色は生成りとクラフト茶の 2 色に絞る - 猫がくつろぐ写真を大きく使う - 見出しの字間を広めにとり、上品に見せる - 数値の根拠はグラフ・表・寸法図で見せる - 強調にはマーカーと太字を使う **Don't** - 原色の赤や黄色で煽るような強調をしない - 黒い面を広く使わない（商品色の見本は除く） - 見出しを詰め組みにしない - 強いグラデーションや光沢のある装飾を使わない - 角丸を大きくしすぎてポップにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の使い方と実績を一目で伝える）: 部屋でくつろぐ猫の写真の上に、2 行のコピーを下線付きで置く。右上に月桂樹付きの丸い実績バッジ、下に茶帯と丸アイコン 4 つを並べる 2. **新色の告知**（新しいカラーを訴求する）: グレーの背景で 2 色の商品と猫を並べ、下にピル型のカラー名を置く。キラキラの装飾を添える 3. **実績の訴求**（累計販売数で信頼を作る）: 巨大な細い数字を月桂樹と王冠で挟み、立ち上がった猫の写真と組み合わせる 4. **お客様の声**（使った人の評価を示す）: 茶帯の見出しの下に、白カードとイラストを左右交互に 3 件並べる 5. **ラインナップ**（カラーとサイズの選択肢を見せる）: カラー名のヘッダーを付けたカードを 2 カラムで並べ、中に切り抜き商品を置く 6. **特長**（形状・素材・耐久性を説明する）: POINT バッジと茶帯の見出しを置き、図解・番号リスト・比較グラフで説明する 7. **交換の案内**（替えの購入をうながす）: 新品と古い状態の素材写真を比べ、チェックリストのピルを並べる 8. **サイズ**（選びやすくする）: 猫が乗った写真に寸法線と大きな数値を付け、2 カラムで並べる 9. **写真ギャラリー**（暮らしの中のイメージを見せる）: 4 枚の写真を余白なしの 2×2 グリッドで並べる 10. **ブランド紹介**（作り手の思想を伝える）: 写真と、丸いロゴ・短い文章を左右に組み、茶の枠で囲む 11. **比較表**（一般品との違いを示す）: 6 項目を◎・△・×で比べる表にする 12. **組み立て方**（使う前の不安をなくす）: グレーのパネルに番号の丸・写真・説明を 3 ステップ並べる ## Imagery - 自然光の入る明るい室内で、猫がくつろぐ様子を撮る - 床は木目かジュートのラグにして、暖かく柔らかいトーンにする - 商品単体は背景を抜いた斜め上からのカットにする - 人物は線の柔らかいフラットなイラストで、猫を抱いた姿にする - アイコンは細い線画で 1 色にする - 月桂樹・王冠・キラキラは金茶色でさりげなく添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元 LP は PC でも中央寄せの縦長 1 カラムで、SP と同じ構成 - SP では見出しを 22〜24px にし、2 カラムのグリッドはそのまま残す - 比較表は SP でも 3 列のまま、文字を 12px に下げる - PC では本文幅を 480〜750px に抑え、両側を背景色で埋める - 口コミカードは SP ではイラストを小さくして、幅いっぱいに置く ## 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-7f5768c1`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/necoichi/nbbalibalibowl/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。