--- version: alpha name: Warm Beige Organic Pet Care LP description: 白地にベージュ・モカ・淡いクリームを重ね、オレンジとピンクの強調文字で温かく見せるペットシャンプーのLP。犬の写真とゆるい線画イラスト、斜めのストライプ帯やドット柄で親しみを出している。 colors: primary: '#BC9D82' background: '#FEFEFE' background-alt: '#B4A69B' tint-1: '#E6D5C5' tint-2: '#FBF5DB' secondary: '#D9F2F9' surface: '#FEFEFE' accent-1: '#EB950D' accent-2: '#E0407A' accent-3: '#EDD06C' marker: '#63A47B' cta: '#974140' on-cta: '#FFF3EF' text: '#1C1C1C' text-muted: '#64514A' primary-accessible: '#8B694A' marker-accessible: '#487B5A' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 20px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-point-label: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 30px badge-feature: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px bubble-brush: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 56px label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 48px band-not-used: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 32px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 28px card-ingredients: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px list-point-number: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px step-circle: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px --- # DESIGN.md — ベージュ×オレンジのやさしいペット用品LP（Warm Beige Organic Pet Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、かわいい - **キーワード**: ベージュ系の地色・オレンジの強調文字・犬の切り抜き写真・線画イラスト・斜めストライプ・ドット柄 - **地の質感**: フラットな面に筆ブラシ風の白い吹き出しやドット柄、細いストライプを重ね、手作りの雑貨のような質感を出す - **形**: 角丸の小さいラベル、正円のバッジ、斜めにカットしたセクション境界、下向きの三角 - **温度感**: 暖色寄り。ベージュとクリームが基調で、全成分のブロックだけ淡い水色にして清潔感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BC9D82` | ブランドのモカベージュ（帯・ラベル） | 5% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地色 | 46% | 画素の実測 | | `background-alt` | `#B4A69B` | 悩みセクションのグレージュの地 | 5% | 画素の実測 | | `tint-1` | `#E6D5C5` | 淡いベージュの地・斜め帯 | 6% | 画素の実測 | | `tint-2` | `#FBF5DB` | 淡いクリームの訴求帯 | 4% | 画素の実測 | | `secondary` | `#D9F2F9` | 全成分ブロックの淡い水色の地 | 4% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード面 | 4% | 画素の実測 | | `accent-1` | `#EB950D` | 見出しのオレンジ強調文字 | 1% | 画素の実測 | | `accent-2` | `#E0407A` | 手順中のピンク強調文字・右列のバッジ | 0% | 推定 | | `accent-3` | `#EDD06C` | 番号バッジのマスタードイエロー | 2% | 画素の実測 | | `marker` | `#63A47B` | 文字の背景にするグリーンのマーカー | 0% | 画素の実測 | | `cta` | `#974140` | 不使用ラベルの赤茶の帯 | 1% | 画素の実測 | | `on-cta` | `#FFF3EF` | 赤茶帯の上の白文字 | 0% | 画素の実測 | | `text` | `#1C1C1C` | 見出し・本文の濃いチャコール | 3% | 画素の実測 | | `text-muted` | `#64514A` | ポイントラベルのダークブラウン | 1% | 画素の主要色に補正 | | `primary-accessible` | `#8B694A` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#487B5A` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にし、セクションの区切りにベージュ・グレージュ・クリームの淡い面を使う - 見出しの中の重要な語だけオレンジにし、ほかはチャコールのままにする - 飼い主向けの情報や使い方の強調はピンク、犬向けの情報はマスタードと、色で列を分ける - 成分の一覧だけ淡い水色の地にして、清潔さと安心感を出す - 濃い色の面はラベルや帯などの小さい面だけに使う - `label-tag` は文字 `#FFF3EF` × 背景 `#BC9D82` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8B694A`、4.58:1）を使う。 - `marker-highlight` は文字 `#FFF3EF` × 背景 `#63A47B` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#487B5A`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し（白文字＋影） | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.3 | 0.08em | | `headline-lg` | ポイントの大見出し（強調語を大きくする） | ゴシック | Zen Kaku Gothic New | 900 | 32px | 1.4 | 0.1em | | `headline-md` | セクションの見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.12em | | `headline-sm` | 見出しの前に置くリード文 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.08em | | `body-md` | 本文・手順の説明 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.06em | | `note` | 注釈・調査の期間 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `accent` | POINT の英字ラベル・大きな数字 | 欧文サンセリフ | Montserrat | 600 | 20px | 1.2 | 0.05em | | `label-button` | ラベル・帯の文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | - 見出しの字間は0.1em前後と広めにして、ゆったり見せる - 同じ見出しの中で強調語だけ1.3〜1.5倍に大きくし、色をオレンジにする - 見出しの上には英字のラベルを、両側に斜めの線を付けて添える - 数字は欧文セリフ体などで大きく見せ、単位は和文で小さくする - 本文は中央揃えにし、2〜3行の短い文にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。部分的に 2 カラムの比較リストを使う - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは中央揃えで、英字ラベル→リード文→大見出しの順に積む - 写真と文字は左右に分け、片側に犬の切り抜き写真を置く - ポイントの番号リストは2列にし、各行に細い下線を引く - 手順は円形の番号バッジと説明文を横に並べ、行の間に下向きの山形を挟む - セクションの間は斜めの面やストライプで区切る ## Elevation & Depth - 基本はフラットで、影はほぼ付けない - FVの見出しは白文字に薄いグレーの影を付けて、写真から浮かせる - 成分のカードは影を付けず、白い面と角丸だけで見せる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 犬は背景を消した切り抜き。素材は淡い色の正円の上に乗せる - **セクション境界**: 斜めのカット、下向きの三角、斜めストライプの帯、ドット柄の帯 - ラベルは角丸を小さく（4〜8px）した長方形にする - 番号バッジや素材の背景は正円にする - 吹き出しは筆ブラシ風の白い不定形にする - 区切りは直線ではなく、斜めや三角にする ## Components - **POINTラベル**（`heading-point-label`）: 英字の見出しラベルを、両側の斜めの線で挟む - **特長の3連ラベル**（`badge-feature`）: FVの下部に、淡いベージュの縁が付いた白い四角を3つ並べ、赤茶の文字を入れる - **筆ブラシ風の吹き出し**（`bubble-brush`）: グレージュの地の上に白い筆ブラシ風の形を4つ並べ、悩みを短い言葉で書く - **モカのタグ**（`label-tag`）: モカの角丸の長方形に白文字を入れ、×の記号と組み合わせる - **不使用の帯**（`band-not-used`）: 無添加の成分リストの下に、赤茶の帯を敷いて白文字を載せる - **マーカー強調**（`marker-highlight`）: キーワードの後ろにグリーンの面を敷き、白文字にする - **全成分のカード**（`card-ingredients`）: 水色の地の上に白い角丸カードを置き、成分を詰めて書く - **番号付きの比較リスト**（`list-point-number`）: 円形のバッジ（POINT と番号）と短い文を組み、下に細い線を引く。左列はマスタード、右列はピンク - **手順の番号**（`step-circle`）: マスタードの円の中に Step と大きな数字を入れ、行の間に下向きの山形を置く ## Do's and Don'ts **Do** - 淡い暖色の面を交互に使い、柔らかい印象を保つ - 強調語はオレンジかピンクにし、大きさも変える - 犬の切り抜き写真と、ゆるい線画の人物や犬のイラストを組み合わせる - 斜めのストライプやドット柄の帯でセクションを区切る - 英字のPOINTラベルで、内容の区切りをはっきりさせる **Don't** - 濃い黒や原色のベタ面を広く使わない - 角の鋭い硬いボタンやグラデーションを多用しない - 強調色を1つの見出しに3色以上入れない - 本文を左揃えで長く続けない - 寒色を成分のブロック以外で使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値と、犬へのやさしさを伝える）: 犬のアップ写真の上に白い大見出しを置く。吹き出し、商品ボトル、3連の特長ラベルを添え、下端はドット柄にする 2. **悩みの提起**（飼い主の気持ちに共感する）: グレージュの地に、悩む女性の線画を中央に置く。両側に筆ブラシ風の吹き出しを4つ並べ、下端は三角にする 3. **想いの提示**（商品が作られた背景を示す）: 白地の左に大きな文字の宣言、右に犬と商品を置き、一語だけオレンジにする 4. **特長1（成分）**（成分へのこだわりを伝える）: POINTラベルの後に大見出しを置き、波線の下線を付ける。モカのタグを×でつなぎ、ハーブを正円の背景に乗せ、不使用の帯を添える 5. **訴求帯**（肌へのやさしさを補足する）: クリームの帯に、マーカーで強調した文と犬の写真を左右に並べる 6. **特長2（香り・泡）**（使い心地を伝える）: ストライプの斜め帯の後に見出しを置き、強調語をオレンジにする。犬の写真と、花や泡の円形画像を並べる 7. **全成分**（安心感と透明性を示す）: 水色の地に白いカードを置き、両側に白い丸の装飾を付ける 8. **メリット比較**（犬と飼い主、それぞれのメリットを示す）: マスタードとピンクの見出し帯で2列に分け、番号の円バッジのリストにイラストを添える 9. **使い方**（手順をわかりやすく示す）: Stepの円を縦に4つ並べ、山形でつなぎ、重要語をピンクにする 10. **関連商品・実績**（ほかの商品と販売の実績を示す）: ドット柄の帯の後に、ピンクと黄色の円に商品を乗せて吹き出しを付ける。大きな数字の実績と注釈を置く ## Imagery - 犬は明るい自然光で正面から撮り、背景を消して切り抜く - 人物や犬は、細い線と淡い色のゆるいイラストにする - ハーブや花は水彩風の植物画を、淡い色の正円の上に乗せる - 泡や手元の写真は、白く柔らかいトーンにする - 装飾は、斜めのストライプ、白いドット、筆ブラシの形、放射状の短い線 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため推奨案。本文の幅は最大で 960px に収め、中央に配置する - 悩みの吹き出しは、イラストを中心にして左右2列のまま広げる - 比較リストと手順は、PC では2カラムのグリッドにする - FVは写真を横長にして、見出しを左側に寄せる - 見出しのサイズは、SP の約1.4倍を目安にする ## 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-2e5ca15f`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tsurunishi/90xb0823n2h7q/?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。