--- version: alpha name: Street Graffiti Anime Collab Cosmetics Campaign LP description: 黒地と白パネルを交互に重ね、蛍光イエローのマーカー帯と斜体の極太ゴシックで勢いを出すコラボキャンペーンLP。インクの飛沫やハーフトーンを背景に散らし、チームカラーの帯で商品やキャラクターを分類する。 colors: primary: '#000000' background: '#FEFFFE' marker: '#FEEB42' text: '#000000' on-dark: '#FFFFFF' background-alt: '#DBDBDB' accent-1: '#C94871' accent-2: '#034DFD' accent-3: '#F10001' secondary: '#0E214F' dark-section: '#323147' cta: '#3A7D91' on-cta: '#F4FEFF' line: '#222222' accent-3-accessible: '#EE0001' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.25 letterSpacing: -0.02em headline-lg: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.01em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 16px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.display}' height: 48px slant-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px black-band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px circle-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px step-row: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 28px team-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 140px accordion-gradient: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 64px --- # DESIGN.md — 黒×蛍光イエローのグラフィティ系コラボ美容液キャンペーンLP（Street Graffiti Anime Collab Cosmetics Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、クール・先進的 - **キーワード**: ストリート・グラフィティ・蛍光マーカー・斜体極太・チームカラー・特典訴求 - **地の質感**: 黒地にインク飛沫・ハーフトーンドット・星空グラデーションを散らす。白パネルはフラットに置く - **形**: 角のある四角帯、斜めにカットしたラベル、黒い円形バッジ、細枠のピル型ボタン - **温度感**: 黒ベースのクールさに、蛍光イエローとマゼンタで熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | ベースの黒（セクション地・見出し帯） | 30% | 画素の実測 | | `background` | `#FEFFFE` | 白パネル地 | 25% | 画素の実測 | | `marker` | `#FEEB42` | 蛍光イエローのマーカー帯・強調ラベル | 4% | 画素の主要色に補正 | | `text` | `#000000` | 見出し・本文の黒文字 | 3% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 2% | 画素の実測 | | `background-alt` | `#DBDBDB` | 参加方法などの薄グレーブロック | 5% | 画素の実測 | | `accent-1` | `#C94871` | マゼンタ（限定特典の見出し文字・帯） | 2% | 画素の実測 | | `accent-2` | `#034DFD` | チームカラーの青帯 | 2% | 画素の実測 | | `accent-3` | `#F10001` | チームカラーの赤帯 | 2% | 画素の実測 | | `secondary` | `#0E214F` | ネイビー（英字セクション見出し） | 1% | 画素の実測 | | `dark-section` | `#323147` | 星空の深紺グラデーション地 | 6% | 画素の主要色に補正 | | `cta` | `#3A7D91` | 診断ボタンのくすみ青緑 | 1% | 画素の実測 | | `on-cta` | `#F4FEFF` | ボタン上の白文字 | 0% | 画素の実測 | | `line` | `#222222` | ボタン枠・店舗リスト枠の黒線 | 0% | 推定 | | `accent-3-accessible` | `#EE0001` | AA を満たす補正値（計算） | | 計算 | - 地は黒と白を交互に切り替え、白パネルは黒地の上に左右少し余白を残して浮かせる - 最も伝えたい語句には蛍光イエローの帯を敷き、黒文字を載せる - 限定特典やEC限定の訴求だけマゼンタを使い、ピンクのインク飛沫を合わせる - キャラクターや商品の分類は赤・黄・灰・青・橙・紫・ピンクのチームカラー帯で区別する - 商品のアコーディオン帯は、チームカラーから下に向けて白へ抜けるグラデーションにする - 注釈は黒・グレーの小さい文字で右に寄せ、色は付けない - `accordion-gradient` は文字 `#FFFFFF` × 背景 `#F10001` のコントラスト比が 4.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#EE0001`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 特典の大見出し（斜体の極太） | ゴシック | Noto Sans JP | 900 | 34px | 1.25 | -0.02em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.01em | | `headline-md` | コース名の帯見出し・特典名 | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.0em | | `headline-sm` | グレー帯の小見出し・ラベル | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.0em | | `body-md` | 本文・リスト | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | STEP番号・CLICKラベル | 欧文サンセリフ | Montserrat | 800 | 16px | 1.2 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.02em | - 特典見出しは極太ゴシックをイタリック風に傾け、勢いを出す - 助詞や接続語は小さくし、名詞と数字を大きくするジャンプ率を使う - 英字見出しの直下に、和文の小さいサブ見出しを中央揃えで添える - 強調したい行には黒の下線、または黄色帯を付ける - 注釈は ※ で始め、右揃えで小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典カードや店舗ボタンなど一部だけ 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは画面幅の約90%にして、左右に黒地を少し見せる - 特典は『商品＋特典画像』を＋記号でつなぎ、横に並べる - 注目させたいバッジは円形にし、画像の右上に重ねる - キャラクター帯は全幅に近い横長バナーを縦に連続で並べる - セクション見出しは中央揃えにする ## Elevation & Depth - 影はほぼ使わず、フラットな色面のコントラストで階層を作る - 白パネルの下や横にグレーの段差を付け、紙を重ねたように見せる - トレカ画像には薄い影を付け、少し浮かせる ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは帯からはみ出す切り抜き、商品ボトルは背景なしの切り抜き - **セクション境界**: 直線で切り替え、境目にインク飛沫やハーフトーンを重ねる - 見出し帯・ラベルは角丸なしの四角か斜めカットにする - サブボタンは白地に黒の細枠を付けたピル型にする - 限定や数量のバッジは黒またはマゼンタの正円にする - 店舗リストは角丸なしの細枠長方形を縦に並べる ## Components - **蛍光マーカー見出し**（`marker-highlight`）: 黄色の帯に斜体極太の黒文字を載せ、行ごとにずらして重ねる - **斜めカットラベル**（`slant-label`）: 斜めに傾けた黄色または黒の札。『〜でプレゼント！』のような短い句を載せ、パネル左上に重ねる - **黒帯コース見出し**（`black-band-heading`）: 全幅の黒帯に、白の斜体極太で見出しを入れる - **数量限定の円バッジ**（`circle-badge`）: 黒の正円に白と黄の文字を入れ、特典画像に重ねる - **詳細ピルボタン**（`button-outline`）: 白地に黒の細枠を付けたピル型。右端に › または ⌄ を置く - **STEP行**（`step-row`）: 黒い斜体の『STEP n』ラベルを左に置き、右に説明文を並べる - **チームカラーバナー**（`team-banner`）: チームカラーの帯にキャラクターをはみ出させて配置。左下に大きな白文字、右下にCLICKタグを置く - **グラデーション商品アコーディオン**（`accordion-gradient`）: チームカラーから白へ抜ける帯。白文字の商品名と右端の⌄を入れる - **診断CTA**（`button-cta`）: くすみ青緑の大きな角丸ボタン。白文字で右にアイコンを置く ## Do's and Don'ts **Do** - 強調は黄色帯・黒帯・マゼンタの3つに絞り、それ以外の色は分類だけに使う - 見出しは斜体の極太ゴシックで統一する - 背景の空きにインク飛沫やハーフトーンを散らす - 特典は『商品＋特典』の図式で見せ、数量限定バッジを重ねる - 注釈は省略せず、小さく右揃えで添える **Don't** - パステル調や明朝体で上品にまとめない - 角丸の大きいカードを多用しない - チームカラーを強調目的で使わない - 影やグラデーションを白パネルに付けない - 長い本文を装飾帯の中に入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と期間を一目で伝える）: 六角形に区切ったキャラクターを敷き詰め、中央にタイトルと商品を置く 2. **導入**（キャンペーンの趣旨を説明する）: 星空グラデーション地に2ブランドのロゴを×でつなぎ、白文字の中央揃え。下に商品の集合写真 3. **期間・ステータス**（開催期間と終了告知）: 黒帯に期間を入れ、黄色の太枠で囲んだ大きな告知を置く 4. **特典サマリー**（特典の全体像を示す）: 大きな英字を背景に敷き、斜めラベル付きの白パネルで特典を並べる 5. **ページ内ナビ**（主要セクションへ誘導する）: 黒地に英字と和文小見出しを2列で置き、⌄を付ける 6. **オンライン特典詳細**（条件と参加方法を伝える）: 黄色帯の見出し、商品＋特典の図、STEPリスト、コース別の黒帯見出しと対象リスト 7. **EC限定追加特典**（購入先ごとの限定特典を伝える）: マゼンタの見出しとピンクの飛沫。購入先ボタンを2×2で並べる 8. **キャラクター一覧**（特典の絵柄を見せる）: 黒地にチームカラーのバナーを縦に連続させ、CLICKタグを付ける 9. **店舗・期間限定特典**（店舗で受け取れる特典の紹介）: 白パネルに斜めラベル。セット内容を2×2で並べ、各セット名を［］で囲む 10. **抽選特典**（SNS投稿で応募する特典）: 黒地に黄色マーカーの見出しを置き、寸法線付きの商品画像を見せる 11. **対象商品**（商品をコース別に一覧で見せる）: 商品の集合写真の下に、グラデーションのアコーディオンを並べる 12. **診断CTA**（肌診断へ誘導する）: 白地に英字の大見出しを置き、黄色飛沫の上に大きな角丸ボタン 13. **応募方法・規約**（応募手順と規約を伝える）: 黒地に白枠の番号付きステップ。規約は折りたたみにし、ピル型ボタンで展開 14. **作品紹介・店舗一覧・問い合わせ**（補足情報と連絡先を載せる）: 白パネルに本文、細枠のエリアボタンを縦に並べ、黒帯見出しの下に電話番号を大きく出す ## Imagery - キャラクターはアニメ調の全身または上半身の切り抜き。ポーズを付けて帯からはみ出させる - 商品ボトルは白〜グレーの台に並べた集合写真。背景はぼかした青白い光 - 背景装飾はスプレーやインクの飛沫と、ハーフトーンドット（黄・ピンク・黒） - 特典グッズ画像には『sample』の透かしを入れて見本だとわかるようにする - 大きな英字を薄く敷いた背景テキストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため SP を基準に設計する - PC では白パネルを最大幅 960px 程度で中央に置き、両脇の黒地に飛沫装飾を広げる - キャラクターバナーは PC では 2〜3 列のグリッドにする - 特典カードや店舗エリアのボタンは PC では 3〜4 列に広げる - 見出しサイズは SP の 1.3〜1.5 倍にする ## 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-c3c3b4fc`（元 LP の URL から採番） - **元 LP**: https://www.kyusai.co.jp/shop/pages/colarich-hypnosismic-cp/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。