--- version: alpha name: Playful Pet-Themed Craft Drink Campaign LP description: くすみブルーと生成りベージュを交互に地色にし、黄緑・オレンジ・ラベンダーを差し色にしたポップな酒類EC向け期間限定キャンペーンLP。動物イラストと肉球の装飾、横流れのテキスト帯、横スクロールの商品カードで、楽しげに回遊させる。 colors: primary: '#8299BB' background: '#F0E9E1' background-alt: '#FFFCF5' cta: '#F76639' on-cta: '#FFFEFD' accent-1: '#E6E93C' accent-2: '#DBBDE6' secondary: '#4069AA' dark-section: '#2B291D' text: '#28231A' surface: '#FFFFFF' accent-3: '#F66639' marker: '#D8C9AE' text-muted: '#8A8378' cta-accessible: '#D83A09' accent-3-accessible: '#D93B0A' secondary-accessible: '#3D64A3' typography: display: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 26px button-join: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px button-sns: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px ribbon-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px marquee-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 50px product-card: textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px category-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 10px discount-blob: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 50px coupon-ticket: backgroundColor: '{colors.accent-1}' textColor: '{colors.secondary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 170px contest-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 900px --- # DESIGN.md — くすみ青×黄緑の猫犬モチーフ酒キャンペーンLP（Playful Pet-Themed Craft Drink Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感 - **キーワード**: 肉球モチーフ・動物イラスト・くすみブルー・黄緑の差し色・横スクロール商品棚・期間限定キャンペーン - **地の質感**: フラットな単色面。黒の細い輪郭線つきのイラストやリボンでステッカーのような手描き感を出す - **形**: ピル型ボタン、角丸の小さいカード、黒い線の旗型リボン見出し、チケット型クーポン - **温度感**: 暖かく親しみやすい。くすみ色でまとめて子どもっぽくなりすぎない ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8299BB` | キービジュアル・フォトコン部の地色（くすみブルー） | 14% | 画素の実測 | | `background` | `#F0E9E1` | 商品紹介セクションの地色（グレージュ） | 19% | 画素の実測 | | `background-alt` | `#FFFCF5` | テキスト帯・フッター・応募カードの生成り | 16% | 画素の実測 | | `cta` | `#F76639` | 一覧へ誘導する主ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFEFD` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E6E93C` | リボン見出し・バッジ・数字の黄緑 | 7% | 画素の実測 | | `accent-2` | `#DBBDE6` | 肉球・数字・サブボタンのラベンダー | 2% | 画素の実測 | | `secondary` | `#4069AA` | 日付・見出し・帯文字の青 | 2% | 画素の実測 | | `dark-section` | `#2B291D` | 参加ボタンの濃い焦茶黒 | 1% | 画素の実測 | | `text` | `#28231A` | 見出し・本文の黒 | 2% | 画素の実測 | | `surface` | `#FFFFFF` | 部門カード・SNS埋め込みの白 | 8% | 画素の実測 | | `accent-3` | `#F66639` | 「当たるお酒」リボンの橙赤 | 1% | 画素の実測 | | `marker` | `#D8C9AE` | フッター猫イラストのくすみベージュ | 2% | 画素の主要色に補正 | | `text-muted` | `#8A8378` | フッターリンク文字 | 0% | 推定 | | `cta-accessible` | `#D83A09` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#D93B0A` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#3D64A3` | AA を満たす補正値（計算） | | 計算 | - 地色はグレージュ（商品）とくすみブルー（参加企画）を大きく交互に使う - セクション間は生成りの横流れテキスト帯で区切る - 購入・一覧ボタンは全てオレンジのピル型に統一 - SNS参加ボタンだけ焦茶黒にして役割を分ける - 黄緑はリボン見出し・カテゴリバッジ・強調語に限定 - ラベンダーは肉球装飾とSNSサブボタンに使う - ブルー地の上の見出しは白、強調語は黄緑 - `button-primary` は文字 `#FFFEFD` × 背景 `#F76639` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D83A09`、4.6:1）を使う。 - `discount-blob` は文字 `#FFFEFD` × 背景 `#F66639` のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#D93B0A`、4.55:1）を使う。 - `coupon-ticket` は文字 `#4069AA` × 背景 `#E6E93C` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3D64A3`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キービジュアルの欧文・流れ帯文字 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.1 | 0.02em | | `headline-lg` | リード見出し（青・2行） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.5 | 0.02em | | `headline-md` | リボン見出し・カテゴリ見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.02em | | `headline-sm` | ブロック小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `body-lg` | 中央揃えのリード本文 | ゴシック | Noto Sans JP | 700 | 15px | 2.0 | 0.08em | | `body-md` | 説明文・商品名 | ゴシック | Noto Sans JP | 500 | 11px | 1.7 | 0.03em | | `note` | 価格・バッジ・注釈 | ゴシック | Noto Sans JP | 500 | 8px | 1.5 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.2 | 0.05em | - 見出しは極太ゴシックで、黒か青の単色 - 見出し直下に欧文の小ラベルを白抜き袋文字で添える - リード文は中央揃えで行間を広く取る - 流れ帯の欧文は袋文字と塗り文字の両方を使う - 日付は数字を大きく、曜日の欧文を小さく - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は横スクロールのカード、プランは 1〜2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - 商品棚は約2.4枚が見える横スクロールにして続きを示す - 棚の直下に全幅のオレンジ一覧ボタンを置く - 部門ごとに白い枠カードでまとめ、上端にリボン見出しをかける - セクション境界に高さ約50pxの流れ帯を挟む - 左右余白は約8〜16px ## Elevation & Depth - 影はほぼ使わずフラット - カードは細いグレー線か黒線で囲む - クーポンは青い面をずらして重ねたオフセット影で立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は正方形に切り抜いて細線で囲む。イラストは切り抜いて枠からはみ出させる - **セクション境界**: 直線で地色を切り替え、間に生成りの流れ帯を挟む - ボタン・バッジは全てピル型 - 見出しは黒線つきの旗型リボン - 割引率はブロブ形の肉球バッジ - クーポンはチケット型に切り込みと点線を入れる ## Components - **一覧誘導ボタン**（`button-primary`）: 全幅オレンジのピル型。白太字を中央に置く - **参加ボタン**（`button-join`）: 焦茶黒のピル型。部門カードの最下部に置く - **SNSサブボタン**（`button-sns`）: ラベンダーか黄緑のピル型。文字は黒 - **リボン見出し**（`ribbon-heading`）: 黄緑の旗型に黒線をつけ、極太黒文字を乗せる。下に橙赤のサブリボンを重ねることもある - **流れテキスト帯**（`marquee-band`）: 生成り地に肉球と欧文の袋文字を横に繰り返す - **商品カード**（`product-card`）: 正方形画像の下に商品名、黄緑のバッジ、右寄せの価格を置く - **カテゴリバッジ**（`category-badge`）: 黄緑かラベンダーの小さいピル型 - **割引バッジ**（`discount-blob`）: 画像の左上に肉球形のブロブを置き、白い大きな数字で割引率を見せる - **クーポンチケット**（`coupon-ticket`）: 黄緑のチケットに青い巨大数字と白いピル型ラベルを乗せ、下にコード枠を置く - **部門カード**（`contest-card`）: 白地に黒細線の大枠。中にリボン見出し、商品、SNS投稿、参加ボタンを順に並べる ## Do's and Don'ts **Do** - 肉球と動物イラストをあちこちに散らし、枠からはみ出させる - 地色を大きなブロックで交互に切り替える - 購入導線はオレンジのピル型に統一する - 商品棚は横スクロールにして続きを見せる - 黒の細い輪郭線で手描きステッカー感を出す **Don't** - 原色ベタの鮮やかすぎる青や赤を地色にしない - グラデーションや強い影を使わない - 明朝体や細い書体を見出しに使わない - ボタンを角張った四角にしない - 差し色を4色より増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と動物モチーフで世界観を伝える）: くすみブルー地に巨大な数字と欧文、商品ボトルを散らし、動物イラストを数字に絡める 2. **流れ帯**（区切りと賑やかさの演出）: 生成り地に欧文の袋文字と肉球を繰り返す 3. **企画導入**（開催期間と趣旨の説明）: グレージュ地に青い日付と青い太字のリード、中央揃えの本文。背景にぼかしたボトルを散らす 4. **カテゴリ別商品**（動物別の商品を紹介する）: 極太見出しに欧文ラベルと肉球を添え、横スクロールの商品棚とオレンジのボタンを置く 5. **限定プラン**（お得なセットを訴求する）: 黄緑リボン見出しの下に大きなプラン画像、名前、価格、ボタン。小さいセットは2列で割引バッジをつける 6. **フォトコンテスト**（SNSでの参加を促す）: ブルー地に白文字の概要と応募期限枠。部門別の白カードに賞品とSNS投稿を並べ、黒い参加ボタンを置く 7. **他動物の商品**（対象を広げて回遊させる）: ブルー地に白見出しと横スクロールの商品棚 8. **SNS・動画告知**（公式アカウントへ誘導する）: 告知画像と番号つきの手順、ラベンダーと黄緑のピル型ボタン 9. **関連グッズ**（酒器の販売）: グレージュ地に白背景の商品写真を横スクロールで並べる 10. **クーポン**（購入を後押しする）: チケット型の大きなクーポン図版とコード枠、オレンジのボタン 11. **フッター**（サイト全体への導線）: 生成り地に猫イラストを1列並べ、アコーディオンのリンク一覧、決済アイコン、SNSアイコンを置く ## Imagery - 商品ボトルは白背景で切り抜き、斜めに傾けて散らす - 動物イラストは太い輪郭線のゆるい漫画調。柴犬・猫・コーギーのお尻など - 商品写真は単色背景の正方形に、ラベルのイラストと同色系の地色を合わせる - 装飾には肉球・ブロブ・巨大な数字を重ねる - ユーザー投稿は実写のペット写真をSNSカード風に見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約1000pxの幅で表示し、商品棚を4〜5枚並べる - 限定プランはPCで2〜3列のグリッドにする - ファーストビューは横長にして数字とボトルを左右に広げる - 流れ帯は全幅のまま文字を大きくする - 部門カードは最大幅を約800pxに制限する ## 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-2b9a2cfc`（元 LP の URL から採番） - **元 LP**: https://kurand.jp/pages/nyanwan/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。