--- version: alpha name: Soft Pink Blob Family Pet Snack LP description: 淡いピンクの地に不定形の有機的な曲線（ブロブ）を何層にも重ね、深紅を強調色に使う、やさしく親しみのある食品 LP。写真はブロブ形や角丸で切り抜き、商品は白い楕円の台座に載せる。手書き風の丸い見出しと深紅のピル型ボタンでまとめる。 colors: primary: '#BD193E' background: '#FBF5F5' background-alt: '#F4D9E0' tint-1: '#ECB8C4' tint-2: '#E299AA' accent-1: '#CD4C6A' surface: '#FFFFFF' cta: '#BB012B' on-cta: '#FFFFFF' text: '#0F0104' text-body: '#3A3333' secondary: '#A97D77' accent-2: '#F6BA8E' on-dark: '#FFFFFF' typography: display: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Kosugi Maru fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 12px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Kosugi Maru fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 8px md: 20px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px product-pedestal: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px number-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px card-section: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' info-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' photo-blob: height: 140px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' pagetop: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — ピンクの有機ブロブと深紅の人とペットのおやつ LP（Soft Pink Blob Family Pet Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: かわいい、やさしい・柔らかい、親しみ・手作り感、ポップ・元気 - **キーワード**: ブロブ形・淡ピンクの重なり・深紅アクセント・家族とペット・丸ゴシック・白い台座 - **地の質感**: フラットな単色面。グラデーションや影はほぼ使わず、濃淡の違うピンクの面を重ねて奥行きを出す - **形**: 不定形の曲線ブロブ、波形のセクション境界、大きな角丸カード、ピル型ボタン、円形バッジ - **温度感**: 暖色寄り。ピンクと深紅で温かく甘い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BD193E` | ブランドの深紅（理念セクションの地・見出し） | 10% | 画素の実測 | | `background` | `#FBF5F5` | ごく淡いピンクの基本地 | 22% | 画素の実測 | | `background-alt` | `#F4D9E0` | やや濃い淡ピンクの地 | 13% | 画素の実測 | | `tint-1` | `#ECB8C4` | 重ねるブロブの中間ピンク | 6% | 画素の実測 | | `tint-2` | `#E299AA` | 濃いめのブロブピンク | 5% | 画素の実測 | | `accent-1` | `#CD4C6A` | ファーストビューの赤ピンクのブロブ | 2% | 画素の実測 | | `surface` | `#FFFFFF` | 商品カード・台座の白 | 10% | 画素の実測 | | `cta` | `#BB012B` | 購入ボタンの深紅 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#0F0104` | 見出し・本文の黒 | 1% | 画素の実測 | | `text-body` | `#3A3333` | 本文のやや淡い黒 | 1% | 推定 | | `secondary` | `#A97D77` | 商品紹介見出しのくすみブラウン | 0% | 画素の主要色に補正 | | `accent-2` | `#F6BA8E` | キャラクターの肌・耳のオレンジ | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 深紅地の上の白文字 | 0% | 画素の主要色に補正 | - 地は淡ピンク2〜3段階を使い分け、ブロブ形の面を重ねて区切る - 深紅は見出し文字・CTA・バッジ・理念セクションの全面地に限定する - 商品セクションは白に近いカードで囲い、写真と商品を引き立てる - 本文は黒〜濃グレー。深紅地では白文字 - 寒色は使わない。差し色はキャラクターのオレンジ程度 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（深紅） | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.4 | 0.12em | | `headline-lg` | 商品カテゴリ見出し・メッセージ見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.1em | | `headline-md` | 特長タイトル・商品名 | 丸ゴシック | Kosugi Maru | 700 | 17px | 1.6 | 0.08em | | `headline-sm` | 声のキャプション・小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 12px | 1.6 | 0.08em | | `body-md` | 本文 | 丸ゴシック | Kosugi Maru | 400 | 12px | 1.9 | 0.08em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.04em | | `accent` | 番号バッジの数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.0 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.0 | 0.05em | - 見出しは字間を広めにとった丸ゴシックで、手書き感のある柔らかさを出す - 大見出しは深紅、中見出しは黒で使い分ける - 本文も丸ゴシック系で行間を広く（1.8〜2.0） - 見出しは2〜3行に短く改行し中央揃え、特長は左揃え - 数字バッジは大きく太い数字と小さなラベルの組み合わせ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真の並びはブロブ写真を互い違いに配置 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションはブロブ・波形の面で区切り、直線の区切りを避ける - 特長は写真と番号バッジを左右交互に置く - 商品は中央揃えで、バッジ→商品画像→商品名→説明→ボタン2つの順 - ボタンは幅約60%で中央に縦積み - 余白はたっぷり取り、詰め込まない ## Elevation & Depth - 影はほぼ使わずフラット - 奥行きは濃淡違いのピンクの面を重ねて表現する - 白カードも影なしで地との色差だけで浮かせる ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 写真は不定形ブロブ形か大きな角丸長方形、人物紹介は円形で切り抜く - **セクション境界**: ゆるい波形・ブロブ形の曲線 - 円形の深紅バッジを商品画像の左上に重ねる - 商品は白い楕円の台座に載せる - 番号バッジは白いピル型 - 鋭い角や直線の区切りは使わない ## Components - **購入ピルボタン**（`button-primary`）: 深紅のピル型、白太字、右端に外部リンクアイコン。2つ縦積み - **円形訴求バッジ**（`badge-circle`）: 深紅の大きな円に白文字3行の短い訴求。商品画像の左上に重ねる - **商品台座**（`product-pedestal`）: 白い横長楕円の上に商品パッケージを立たせ、下に味のラベルと商品名 - **番号ピルバッジ**（`number-badge`）: 白いピルに小さなラベルと大きな深紅の数字 - **白系の大角丸カード**（`card-section`）: 商品カテゴリや監修者情報をまとめる、ピンク地上の大きな角丸パネル - **半透明情報ボックス**（`info-box`）: ブロブ上に置く淡い白の角丸ボックス。会社説明など補足文 - **ブロブ写真**（`photo-blob`）: 家族とペットの写真をブロブ形に切り抜き、重ねたりばらまいたりする - **Q&A**（`faq-item`）: 深紅の大きなQと太字の質問、黒いAと回答。区切り線なし - **ページトップボタン**（`pagetop`）: 淡ピンクのピル、両端にキャラクターの顔アイコン ## Do's and Don'ts **Do** - 淡ピンクの濃淡ブロブを重ねて背景を作る - 深紅は見出し・ボタン・バッジに絞って使う - 写真はブロブ形・角丸・円で柔らかく切り抜く - 見出しは丸ゴシックで字間を広く - 商品は白い楕円台座＋円形バッジで見せる **Don't** - 直線的なセクション区切りや鋭角の図形を使わない - 青や緑など寒色を面に使わない - 影やグラデーションで立体感を出さない - 明朝や硬いゴシックで見出しを組まない - 写真を四角いままで並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（人とペットが一緒に食べる情景で世界観を伝える）: 全幅写真の下に淡ピンクのブロブ面、商品を白い楕円台座に散らして配置 2. **コンセプト**（一緒に食べられる新しいおやつを提示）: 赤ピンクと深紅のブロブにブロブ写真を重ね、白文字で短いメッセージ 3. **動画**（ブランドムービーで共感を作る）: 中央に埋め込み動画を配置 4. **生まれた背景（ユーザーの声）**（利用者の願いを短い言葉で4つ示す）: 大きな花形の線囲みに見出し、ブロブ写真と深紅キャプションをジグザグ配置、背景に動物シルエット 5. **理念**（ブランドの想いを語る）: 深紅の全面地に大きなキャラクターイラストと白文字本文、上下は波形 6. **大切にしていること**（安心・品質の特長を4つ伝える）: ピンクブロブ地に角丸写真と番号ピルバッジを左右交互、見出しと本文 7. **商品紹介**（カテゴリ別に商品を見せ購入へ導く）: カテゴリ見出しの下、白系角丸カードに円形バッジ・台座・説明・ピルボタン2つ 8. **共同開発・監修**（専門家・パートナーで信頼性を担保）: 波形切り抜き写真、円形の人物写真、プロフィールとコメント本文 9. **研究結果**（一緒に食べる効果を示す）: ブロブ重ね地、白い吹き出しバッジ、深紅の問いかけ見出し、重ねたブロブ写真 10. **フォトギャラリー**（多くの家族の幸せな情景で余韻を作る）: 小さなブロブ写真をばらまくように配置 11. **購入CTA**（購入先へ誘導）: 深紅見出し、商品集合画像、白い大角丸カードにストアロゴと深紅ピルボタン 12. **よくある質問**（不安を解消）: 白地にQ（深紅）とA（黒）を並べる 13. **フッター**（ページトップと規約リンク）: キャラクター付きピルのページトップ、細線の下にリンクとコピーライト ## Imagery - 子どもや家族とペットが一緒におやつを食べる自然光の温かい写真 - 背景はやや淡く、生活感のある室内や屋外の芝生 - 写真はブロブ形・角丸・円で切り抜き、重ねて配置 - 人とペットの顔を太い深紅線で描いたシンプルなキャラクターイラスト - 背景に淡ピンクの動物シルエットを散らす - 商品はパッケージ切り抜きを白い楕円台座に載せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約1000px幅、特長は写真とテキストの2カラム交互 - PC の商品カードは2カラムで並べる - Q&A や購入先は PC で2カラム - ブロブ背景は PC でも全幅で広げる - ギャラリー写真は 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-f7266f55`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/hitotopet/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。