くすみ青×黄緑の猫犬モチーフ酒キャンペーンLP

Playful Pet-Themed Craft Drink Campaign LP

くすみブルーと生成りベージュを交互に地色にし、黄緑・オレンジ・ラベンダーを差し色にしたポップな酒類EC向け期間限定キャンペーンLP。動物イラストと肉球の装飾、横流れのテキスト帯、横スクロールの商品カードで、楽しげに回遊させる。

酒類ポップ・元気かわいい親しみ・手作り感SP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地色はグレージュ（商品）とくすみブルー（参加企画）を大きく交互に使う
セクション間は生成りの横流れテキスト帯で区切る
購入・一覧ボタンは全てオレンジのピル型に統一
SNS参加ボタンだけ焦茶黒にして役割を分ける
黄緑はリボン見出し・カテゴリバッジ・強調語に限定
ラベンダーは肉球装飾とSNSサブボタンに使う
ブルー地の上の見出しは白、強調語は黄緑

TYPOGRAPHY

書体

displayキービジュアルの欧文・流れ帯文字欧文サンセリフ／ Montserrat 800 ／ 34px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgリード見出し（青・2行）ゴシック／ Zen Kaku Gothic New 900 ／ 28px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdリボン見出し・カテゴリ見出しゴシック／ Zen Kaku Gothic New 900 ／ 26px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-smブロック小見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-lg中央揃えのリード本文ゴシック／ Noto Sans JP 700 ／ 15px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明文・商品名ゴシック／ Noto Sans JP 500 ／ 11px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

note価格・バッジ・注釈ゴシック／ Noto Sans JP 500 ／ 8px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 10px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

見出しは極太ゴシックで、黒か青の単色
見出し直下に欧文の小ラベルを白抜き袋文字で添える
リード文は中央揃えで行間を広く取る
流れ帯の欧文は袋文字と塗り文字の両方を使う
日付は数字を大きく、曜日の欧文を小さく

PAGE STRUCTURE

セクション構成

ファーストビュー企画名と動物モチーフで世界観を伝えるくすみブルー地に巨大な数字と欧文、商品ボトルを散らし、動物イラストを数字に絡める
流れ帯区切りと賑やかさの演出生成り地に欧文の袋文字と肉球を繰り返す
企画導入開催期間と趣旨の説明グレージュ地に青い日付と青い太字のリード、中央揃えの本文。背景にぼかしたボトルを散らす
カテゴリ別商品動物別の商品を紹介する極太見出しに欧文ラベルと肉球を添え、横スクロールの商品棚とオレンジのボタンを置く
限定プランお得なセットを訴求する黄緑リボン見出しの下に大きなプラン画像、名前、価格、ボタン。小さいセットは2列で割引バッジをつける
フォトコンテストSNSでの参加を促すブルー地に白文字の概要と応募期限枠。部門別の白カードに賞品とSNS投稿を並べ、黒い参加ボタンを置く
他動物の商品対象を広げて回遊させるブルー地に白見出しと横スクロールの商品棚
SNS・動画告知公式アカウントへ誘導する告知画像と番号つきの手順、ラベンダーと黄緑のピル型ボタン
関連グッズ酒器の販売グレージュ地に白背景の商品写真を横スクロールで並べる
クーポン購入を後押しするチケット型の大きなクーポン図版とコード枠、オレンジのボタン
フッターサイト全体への導線生成り地に猫イラストを1列並べ、アコーディオンのリンク一覧、決済アイコン、SNSアイコンを置く

COMPONENTS

部品

一覧誘導ボタン button-primary全幅オレンジのピル型。白太字を中央に置く
参加ボタン button-join焦茶黒のピル型。部門カードの最下部に置く
SNSサブボタン button-snsラベンダーか黄緑のピル型。文字は黒
リボン見出し ribbon-heading黄緑の旗型に黒線をつけ、極太黒文字を乗せる。下に橙赤のサブリボンを重ねることもある
流れテキスト帯 marquee-band生成り地に肉球と欧文の袋文字を横に繰り返す
商品カード product-card正方形画像の下に商品名、黄緑のバッジ、右寄せの価格を置く
カテゴリバッジ category-badge黄緑かラベンダーの小さいピル型
割引バッジ discount-blob画像の左上に肉球形のブロブを置き、白い大きな数字で割引率を見せる
クーポンチケット coupon-ticket黄緑のチケットに青い巨大数字と白いピル型ラベルを乗せ、下にコード枠を置く
部門カード contest-card白地に黒細線の大枠。中にリボン見出し、商品、SNS投稿、参加ボタンを順に並べる

守ること

肉球と動物イラストをあちこちに散らし、枠からはみ出させる
地色を大きなブロックで交互に切り替える
購入導線はオレンジのピル型に統一する
商品棚は横スクロールにして続きを見せる
黒の細い輪郭線で手描きステッカー感を出す

DON'T

避けること

原色ベタの鮮やかすぎる青や赤を地色にしない
グラデーションや強い影を使わない
明朝体や細い書体を見出しに使わない
ボタンを角張った四角にしない
差し色を4色より増やさない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（企画名と動物モチーフで世界観を伝える）: くすみブルー地に巨大な数字と欧文、商品ボトルを散らし、動物イラストを数字に絡める
流れ帯（区切りと賑やかさの演出）: 生成り地に欧文の袋文字と肉球を繰り返す
企画導入（開催期間と趣旨の説明）: グレージュ地に青い日付と青い太字のリード、中央揃えの本文。背景にぼかしたボトルを散らす
カテゴリ別商品（動物別の商品を紹介する）: 極太見出しに欧文ラベルと肉球を添え、横スクロールの商品棚とオレンジのボタンを置く
限定プラン（お得なセットを訴求する）: 黄緑リボン見出しの下に大きなプラン画像、名前、価格、ボタン。小さいセットは2列で割引バッジをつける
フォトコンテスト（SNSでの参加を促す）: ブルー地に白文字の概要と応募期限枠。部門別の白カードに賞品とSNS投稿を並べ、黒い参加ボタンを置く
他動物の商品（対象を広げて回遊させる）: ブルー地に白見出しと横スクロールの商品棚
SNS・動画告知（公式アカウントへ誘導する）: 告知画像と番号つきの手順、ラベンダーと黄緑のピル型ボタン
関連グッズ（酒器の販売）: グレージュ地に白背景の商品写真を横スクロールで並べる
クーポン（購入を後押しする）: チケット型の大きなクーポン図版とコード枠、オレンジのボタン
フッター（サイト全体への導線）: 生成り地に猫イラストを1列並べ、アコーディオンのリンク一覧、決済アイコン、SNSアイコンを置く

Imagery

商品ボトルは白背景で切り抜き、斜めに傾けて散らす
動物イラストは太い輪郭線のゆるい漫画調。柴犬・猫・コーギーのお尻など
商品写真は単色背景の正方形に、ラベルのイラストと同色系の地色を合わせる
装飾には肉球・ブロブ・巨大な数字を重ねる
ユーザー投稿は実写のペット写真をSNSカード風に見せる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは中央に約1000pxの幅で表示し、商品棚を4〜5枚並べる
限定プランはPCで2〜3列のグリッドにする
ファーストビューは横長にして数字とボトルを左右に広げる
流れ帯は全幅のまま文字を大きくする
部門カードは最大幅を約800pxに制限する

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://kurand.jp/pages/nyanwan/sp=1（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

酒類炎と赤黒の激辛ビール系 LPFiery Red Spicy Beverage LP 酒類朱赤と金の和柄な正月福袋酒類 LPFestive New Year Red & Gold Lucky Bag LP 酒類青空ブルー×泡白の爽快ビール LPComfort Blue Refreshing Beer Brand LP 酒類赤×金×白の斜体で攻める新発売ビール LPBold Red and Gold Beer Launch LP 酒類レモン黄×木目×黒帯の居酒屋風酒類LPIzakaya Wood and Lemon Yellow Pop Drink LP 酒類漆黒×金の帯見出しで魅せるビール LPBlack and Gold Premium Beer LP