--- version: alpha name: Warm Beige Hand-Drawn Pet Photo Contest LP description: 生成りと淡いピンクベージュの地に、焦げ茶の細い線画イラストを散らしたやさしい雰囲気のペットフード投稿キャンペーン LP。リボン型の見出しと白いカードで賞品や概要を整理し、オレンジのピル型 CTA ボタンを一点だけ強く目立たせる。 colors: primary: '#6C6662' background: '#FFFFFF' background-alt: '#FFFCF3' tint-1: '#FDF6F0' tint-2: '#F0F4F5' line: '#E1D9D1' surface: '#FEFEFE' cta: '#F59900' on-cta: '#FFFFFF' text: '#4A4A4A' accent-1: '#A67C52' accent-2: '#F08DC0' text-muted: '#918C87' cta-accessible: '#A66800' accent-2-accessible: '#DE1D80' text-muted-accessible: '#736F6A' typography: display: fontFamily: Zen Maru Gothic fontSize: 56px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em label-button: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.2em rounded: sm: 2px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 12px section: 50px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px heading-ribbon: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 32px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px date-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 34px hashtag-chip: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 18px button-secondary: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px share-icons: textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px photo-frame: height: 190px --- # DESIGN.md — 生成り×焦げ茶線画のペット投稿キャンペーン LP（Warm Beige Hand-Drawn Pet Photo Contest LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: やさしい・柔らかい、かわいい、親しみ・手作り感、ナチュラル - **キーワード**: 生成り・線画イラスト・リボン見出し・写真フレーム・ゆるい手書き感 - **地の質感**: 紙のような無地の淡色面。グラデーションや影はほぼ使わない - **形**: アーチ型・楕円の写真マスク、細線のずらし枠、角丸小さめのカード - **温度感**: 暖色寄りでやわらかい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6C6662` | 線画・見出し線・タイトル文字の焦げ茶 | 3% | 画素の実測 | | `background` | `#FFFFFF` | ページ地色（白） | 26% | 画素の実測 | | `background-alt` | `#FFFCF3` | 賞品・投稿例セクションの生成り地 | 24% | 画素の実測 | | `tint-1` | `#FDF6F0` | 概要・応募方法セクションの淡いピンクベージュ地 | 17% | 画素の実測 | | `tint-2` | `#F0F4F5` | 注意事項エリアの淡いグレー地 | 9% | 画素の実測 | | `line` | `#E1D9D1` | 写真フレームやカード境界のベージュ線 | 3% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 賞品リストの白カード | 5% | 画素の実測 | | `cta` | `#F59900` | 応募ボタンのオレンジ | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#4A4A4A` | 見出し・本文の濃いグレー | 2% | 推定 | | `accent-1` | `#A67C52` | 手書き風キャプションの茶色 | 0% | 推定 | | `accent-2` | `#F08DC0` | ハッシュタグ強調のピンク | 0% | 推定 | | `text-muted` | `#918C87` | 注釈・補足の薄いグレー | 0% | 画素の実測 | | `cta-accessible` | `#A66800` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DE1D80` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#736F6A` | AA を満たす補正値（計算） | | 計算 | - 地色は白・生成り・ピンクベージュ・淡グレーをセクションごとに切り替える - 線画・見出し装飾はすべて焦げ茶の単色細線にする - オレンジは主 CTA ボタンだけに使う - ピンクはハッシュタグなど1点だけの強調にする - 濃い色の面は使わない。全体を明るく保つ - `button-primary` は文字 `#FFFFFF` × 背景 `#F59900` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A66800`、4.56:1）を使う。 - `hashtag-chip` は文字 `#F08DC0` × 背景 `#FEFEFE` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DE1D80`、4.53:1）を使う。 - `button-secondary` は文字 `#918C87` × 背景 `#F0F4F5` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#736F6A`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーンロゴ文字 | 丸ゴシック | Zen Maru Gothic | 700 | 56px | 1.1 | 0.05em | | `headline-md` | リボン型のセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.08em | | `headline-sm` | 賞名などの小見出し | ゴシック | Zen Kaku Gothic New | 500 | 15px | 1.4 | 0.1em | | `body-md` | 中央揃えの説明文 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 2.0 | 0.08em | | `note` | 注意事項・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.9 | 0.03em | | `accent` | 写真に添える斜めの手書き風キャプション | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.5 | 0.1em | | `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.0 | 0.2em | - 本文は小さめで行間を広く取り、中央揃えにする - 見出しは字間を少し広げて落ち着かせる - 日付は欧文の数字を大きくし、曜日は小さい英字にする - キャプションは少し傾けて手書き感を出す - 太字はボタンと見出しだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（中央 90% 幅の帯） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 50px、基本単位 8px、カード内 12px（375px 幅換算） - セクションは左右に余白がある地色帯として置く - 見出し・本文は中央揃え - 賞品カードは左にテキスト、右に商品写真を少しはみ出させる - 投稿例は縦長と横長の写真を左右ジグザグに配置する - 注意事項は左揃えのテキストで最下部にまとめる ## Elevation & Depth - 影はほぼ使わずフラットにする - CTAボタンだけ下にやや濃いオレンジの影をつけて立体感を出す - 写真は細線の枠をずらして重ね、奥行きを出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: FVは楕円・アーチ型マスク、投稿例は四角写真に細線のずらし枠と少しの傾き - **セクション境界**: 線画イラストの横帯（猫・麦・器）でセクションを区切る - 中央のロゴ枠は縦長アーチの細線枠にする - 見出しはリボン端のある細線フレームで囲む - カードの角はほぼ直角にする ## Components - **応募CTAボタン**（`button-primary`）: オレンジのピル型ボタン。右端に白丸の肉球アイコン、左右に線画の動物を添える - **リボン見出し**（`heading-ribbon`）: 焦げ茶細線の横長フレームと、両端に折り返したリボン端 - **賞品カード**（`prize-card`）: 王冠アイコン付きの賞名の下に、白カードで中黒の箇条書きと商品写真を置く - **期間バッジ**（`date-badge`）: 白地に細枠と少しずらした影線をつけた横長ボックスに期間を書く - **ハッシュタグ枠**（`hashtag-chip`）: ピンクの細枠とピンク文字で囲んだタグ - **コピーボタン**（`button-secondary`）: 淡いグレーの小さなピル型ボタン - **SNS共有アイコン**（`share-icons`）: 斜線で挟んだ小見出しの下に、丸いアイコンを3つ並べる - **ずらし枠写真**（`photo-frame`）: 写真の後ろに細線枠をずらして重ね、縁に斜線のハッチを入れる ## Do's and Don'ts **Do** - 線画は焦げ茶の単色の細い線でゆるく描く - 地色はセクションごとに淡色を切り替える - CTAは1つの色だけにして大きく目立たせる - 写真には傾きやずらし枠をつけて遊びを出す - 余白は大きめに取り、文字は小さく品よく見せる **Don't** - 原色や濃い色の面を広く使わない - 太い影やグラデーションを入れない - 見出しを塗りの帯にしない - オレンジをCTA以外に使わない - 写真を楕円・フレームなしの全幅でだけ並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と開催期間を伝える）: 中央にアーチ枠のロゴを置き、左右に楕円マスクのペット写真をコラージュする。下に期間バッジを置く 2. **リード**（参加すると得られるものを一言で示す）: 中央揃えの2行テキストの下に、線画イラストの横帯を入れる 3. **賞品紹介**（賞のランクと内容を見せる）: 生成り地にリボン見出しを置き、王冠付きの賞名と白カードを3段並べる 4. **キャンペーン概要・期間**（企画の内容と日程を伝える）: ピンクベージュ地にリボン見出しを2つ置き、短い中央揃えの文を入れる 5. **応募方法**（参加のしかたとハッシュタグを案内する）: 中央揃えの文、ピンクのタグ枠、小さいコピーボタンを並べる 6. **CTA**（応募へ誘導する）: 白地に線画の動物を添えたオレンジのピル型ボタンを置き、下にSNS共有アイコンを並べる 7. **投稿例**（どんな投稿をすればいいか例を見せる）: 生成り地に、ずらし枠の写真と斜めの手書きキャプションをジグザグに配置する 8. **注意事項**（規約と個人情報の扱いを示す）: 淡グレー地に【】で区切った小見出しと、※付きの小さい文を左揃えで並べる ## Imagery - 家庭で撮った自然光のペット写真を使い、生活感を残す - 線画は猫・麦の穂・器などを焦げ茶の一筆書き風で描く - 線画は区切りの帯やボタンの脇にゆるく散らす - 商品は白背景の切り抜きにしてカードの右下からはみ出させる - 写真の脇には小さい丸や波線の手描き装飾を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは SP の幅のまま中央に置き、左右は淡グレーの地にする想定 - PCに広げる場合も、本文の幅は最大480〜600px程度に抑える - 投稿例のジグザグ配置はPCで2カラムのグリッドにしてもよい - FVのコラージュは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-18aa2d66`（元 LP の URL から採番） - **元 LP**: https://grands-pets.com/shop/pages/medeneko/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。