---
version: alpha
name: Pop Collage Striped Lifestyle Goods LP
description: 紫と黄緑の手描き風ストライプ地に、切り抜き人物写真と雲・飛行機・照明をコラージュした遊び心ある商品カタログ型LP。「外」と「家」の2シーンで色を切り替え、黄色の見出しと濃色ピルボタンで商品を次々に紹介する。
colors:
  primary: '#BD8DBD'
  secondary: '#98CA47'
  accent-1: '#F2E827'
  background-alt: '#FFF765'
  cta: '#8E2E8C'
  accent-2: '#369501'
  on-cta: '#FFFFFF'
  surface: '#FDFEFD'
  background: '#FDFEFE'
  text: '#553843'
  text-body: '#4A4A4A'
  accent-3: '#59B5CA'
  tint-1: '#FBFB6C'
  accent-2-accessible: '#318801'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.04em
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-detail:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  scene-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 140px
  band-heading:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    height: 34px
  product-feature:
    typography: '{typography.headline-lg}'
    height: 300px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 360px
  color-swatches:
    rounded: '{rounded.full}'
    height: 18px
  reason-item:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 90px
  faq-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 54px
---

# DESIGN.md — 紫×黄緑ストライプのポップ雑貨 LP（Pop Collage Striped Lifestyle Goods LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 日用品・生活雑貨 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: コラージュ・手描きストライプ・白フチ切り抜き・2シーン対比・商品カタログ・黄色見出し
- **地の質感**: 筆でなぞったような揺らぎのある縦ストライプ地。写真は白フチ付きの切り抜きでステッカー風
- **形**: 不定形のブロブ型写真マスク、ピル型ボタン、角丸カード、円形アイコン
- **温度感**: 明るく暖かい。彩度高めで陽気

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#BD8DBD` | 屋外シーンの地色（紫ストライプ） | 21% | 画素の実測 |
| `secondary` | `#98CA47` | 屋内シーンの地色（黄緑ストライプ） | 22% | 画素の実測 |
| `accent-1` | `#F2E827` | 大見出し・ロゴ風英字の黄色 | 2% | 画素の実測 |
| `background-alt` | `#FFF765` | リード文・安心の理由の帯（淡黄） | 9% | 画素の実測 |
| `cta` | `#8E2E8C` | 屋外側の詳細ボタン・帯見出し（濃紫） | 2% | 推定 |
| `accent-2` | `#369501` | 屋内側の詳細ボタン・帯見出し（濃緑） | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上・写真上の白文字 | 2% | 画素の主要色に補正 |
| `surface` | `#FDFEFD` | 商品カード・FAQの白地 | 8% | 画素の実測 |
| `background` | `#FDFEFE` | ページの基準地（ヘッダー下の白・淡色） | 4% | 画素の実測 |
| `text` | `#553843` | カード・見出しの濃い文字（こげ茶） | 2% | 画素の主要色に補正 |
| `text-body` | `#4A4A4A` | カード本文のグレー文字 | 1% | 推定 |
| `accent-3` | `#59B5CA` | ヘッダー帯・写真背面のブロブ水色 | 2% | 画素の実測 |
| `tint-1` | `#FBFB6C` | FAQ見出しの黄緑系淡色文字・アイコン | 0% | 画素の実測 |
| `accent-2-accessible` | `#318801` | AA を満たす補正値（計算） |  | 計算 |

- シーンAは紫、シーンBは黄緑と、地の色で場面をはっきり分ける
- 地は同系色2トーンの手描き風縦ストライプにする
- 大見出しは黄色。地の色と補色関係でコントラストを出す
- ボタン色はそのセクションの地色を濃くした色にする（紫地→濃紫、緑地→濃緑）
- 商品カードとFAQは白地で、色の多い地から浮かせる
- リード文と安心の理由は淡黄の帯にして、商品パートと区切る
- 水色はヘッダーと写真背面のブロブにだけ使う
- `band-heading` は文字 `#FFFFFF` × 背景 `#369501` のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#318801`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | シーン切替の大見出し（2行） | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.2 | 0.02em |
| `headline-lg` | 商品名（欧文・丸みのあるサンセリフ） | 欧文サンセリフ | Montserrat | 800 | 24px | 1.2 | 0em |
| `headline-md` | 帯見出し・セクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.04em |
| `headline-sm` | カード内の商品名・安心の理由の小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em |
| `body-md` | 商品説明・リード文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em |
| `note` | カナ読み・税込表記 | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.05em |
| `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 700 | 18px | 1.2 | 0em |
| `label-button` | 詳しく見るボタン | ゴシック | Noto Sans JP | 700 | 12px | 1 | 0.04em |

- 大見出しは極太ゴシックを2行で積み、句読点まで黄色にする
- 英字のサブ見出しはシーン名を英大文字で入れ、一部の文字だけ白抜き二重線にする
- 商品名は欧文太字＋その下に小さなカナ読みを置く
- 価格は数字を大きく、税込表記を小さく横に並べる
- ブロブ写真の反対側に文字を寄せ、左右交互に配置する
- ストライプ地の上の本文は白文字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品紹介は写真と文字の左右交互、比較カードは 2 カラム
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
- 商品紹介は写真と文字を左右交互にずらし、ジグザグの流れを作る
- 雲・星・飛行機などのモチーフを商品間の余白に散らす
- シーン見出しの下に帯見出しを右寄せまたは左寄せではみ出させる
- 2カラムカードは左右余白を4px程度と狭くし、画面いっぱいに並べる
- 安心の理由は円形アイコン＋テキストの横並びを縦に4つ

## Elevation & Depth

- 影はほぼ使わない。白フチ切り抜きでステッカーらしい立体感を出す
- 雲モチーフだけ柔らかい陰影の3D風
- カード・FAQは影なしのフラットな白地

## Shapes

- **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 不定形のブロブ型マスク＋背後に水色のブロブを少しずらして重ねる。人物と商品は白フチ付きで切り抜く
- **セクション境界**: 直線で切り替え。地のストライプの色を変えて区切る
- ボタンはすべてピル型で右向き山カッコ付き
- 商品カードは角丸10px前後の白カード
- 安心の理由のアイコンは白い正円
- FAQは角丸の白い横長バー

## Components

- **詳しく見るボタン**（`button-detail`）: 濃色ピル型で白文字＋右山カッコ。シーンの地色に合わせて紫か緑にする
- **シーン大見出し**（`scene-heading`）: 黄色の極太2行見出し＋白抜き英字サブ見出し。横に切り抜き人物を配置
- **帯見出し**（`band-heading`）: 濃色の長方形帯に白文字のキャッチ。画面端まで伸ばす
- **ブロブ写真の商品紹介**（`product-feature`）: ブロブ写真＋白フチ商品切り抜き、反対側に商品名・カナ・説明・価格・ボタンを縦積み
- **比較用商品カード**（`product-card`）: 写真・カラー見本の丸・商品名・説明・価格・全幅ボタンを白カードに収める
- **カラー見本**（`color-swatches`）: 小さな正円を横一列に並べ、端に右矢印を置く
- **安心の理由アイテム**（`reason-item`）: 白い円に線画イラスト、右に太字小見出しと説明2行
- **FAQアコーディオン**（`faq-item`）: 白い角丸バーに太字の質問、右端に緑のV字アイコン

## Do's and Don'ts

**Do**
- 地は必ず手描き風の縦ストライプにする
- 人物・商品写真は白フチ付きの切り抜きにし、コラージュ風に重ねる
- 雲・星・飛行機・照明などの小物を余白に散らす
- シーンごとに地色とボタン色を揃える
- 価格は数字を大きく、税込を小さく添える

**Don't**
- 写真を四角いまま並べない（比較カード以外）
- 無地のベタ背景だけでセクションを作らない
- 落ち着いたモノトーンや細い明朝体を使わない
- 紫シーンに緑ボタンなど、地色と合わないボタン色を混ぜない
- 強いドロップシャドウで立体感を出さない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ヘッダー**（ブランドの表示）: 水色の帯の中央に白いロゴ
2. **ファーストビュー**（2つの利用シーンの対比を一目で見せる）: 左半分を紫、右半分を緑に斜めで分ける。両側に切り抜き人物、縦書きの黄色コピー、下に英字ロゴと商品切り抜きを散らす
3. **リード文**（コンセプトを伝える）: 淡黄の帯に中央揃えの3行文
4. **シーンA見出し**（屋外向け商品の導入）: 紫ストライプ地に黄色の大見出し、切り抜き人物、濃紫の帯見出し
5. **シーンA商品紹介**（屋外向け商品を1点ずつ見せる）: ブロブ写真と文字を左右交互に4商品並べる
6. **シーンA比較カード**（類似商品を並べて比べる）: 白カードを2カラムで配置
7. **シーンB見出し**（屋内向け商品の導入）: 緑ストライプ地に黄色の大見出し、切り抜き人物、濃緑の帯見出し
8. **シーンB商品紹介**（屋内向け商品を1点ずつ見せる）: ブロブ写真と文字を左右交互に4商品並べる
9. **シーンB比較カード**（定番商品を一覧で見せる）: 白カードを2×2で配置
10. **安心の理由**（購入後の不安を減らす）: 黄色ストライプ地に緑の見出し、円アイコン付きの4項目
11. **よくある質問**（疑問を解消する）: 緑ストライプ地に黄色の見出し、白いアコーディオンを3つ

## Imagery

- 人物は明るい表情でカメラ目線、カラフルな服装。全身または上半身を白フチ付きで切り抜く
- 商品単体も白フチ＋細い黒線で縁取ったステッカー風にする
- 使用シーン写真はブロブ型マスクに入れ、背後に水色のブロブを少しずらして重ねる
- 雲は3Dで丸く柔らかい白、星は黄色の線のきらめき
- 安心の理由のアイコンは白い円の中に細い線画イラスト
- 比較カードの写真は明るい室内でのナチュラルなライフスタイル写真
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像なし。PC では中央に最大幅 1000px 程度で配置し、左右にストライプ地を広げる
- 商品紹介はブロブ写真と文字を横並びにし、交互配置はそのまま維持する
- 比較カードは 3〜4 カラムに増やす
- ファーストビューの2シーン対比は左右に広げて大きく見せる
- 大見出しは 64px 前後に拡大する

## 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-1b15e406`（元 LP の URL から採番）
- **元 LP**: https://yogibo.jp/pages/indoor-outdoor
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-16、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。