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