--- version: alpha name: Red Black Pop Character Collaboration Cosmetics LP description: 深紅・黒・白の3色で作るコスメのコラボキャンペーン LP。手描きキャラクター、星やハートの散らし、斜めにカットした黒帯の見出し、ずらして重ねた影ブロックでストリート感とポップさを出す。後半は真紅の面に黒いオフセット影付きの写真を置き、商品特長を落ち着いたトーンで見せる。 colors: primary: '#C80F2E' background: '#FFFFFF' background-alt: '#F1F2F4' dark-section: '#010101' on-dark: '#FDFEFD' cta: '#C80F2E' on-cta: '#FFFFFF' text: '#100F10' accent-1: '#A11429' accent-2: '#625C5C' tint-1: '#A8A4A5' surface: '#DADADA' line: '#070707' text-muted: '#606060' typography: display: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 72px 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.md}' height: 56px button-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px heading-slant-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 52px date-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 32px kit-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 340px step-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 300px accordion-venue: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 82px badge-new: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 44px concern-chip: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 40px nav-tab: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 70px --- # DESIGN.md — 真紅×黒のポップなキャラコラボ化粧品LP（Red Black Pop Character Collaboration Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ポップ・元気、力強い・インパクト、クール・先進的 - **キーワード**: 真紅×黒×白・手描きキャラクター・斜めカット帯見出し・オフセット影・星とハートの散らし・ストリート - **地の質感**: フラットな単色面が基本。グレーの水玉パターンと、斜めに傾けたグレーの面を背景の飾りに使う - **形**: 角丸は小さめ（8〜12px）の四角カード。見出し帯は斜めにカットした平行四辺形。黒やグレーのブロックをずらして重ね、影に見せる - **温度感**: 高彩度の赤で熱量が高いが、黒と白が引き締めて都会的な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C80F2E` | ブランドの真紅。帯・カード・後半セクションの地 | 20% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 35% | 画素の実測 | | `background-alt` | `#F1F2F4` | セット内容・キャンペーン枠の淡いグレー地 | 9% | 画素の実測 | | `dark-section` | `#010101` | フッター・タブボタン・見出し帯の黒 | 13% | 画素の実測 | | `on-dark` | `#FDFEFD` | 黒地・赤地の上の白文字 | 2% | 画素の実測 | | `cta` | `#C80F2E` | 店舗検索・オンラインストアの赤ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#100F10` | 見出し・本文の黒文字 | 3% | 画素の実測 | | `accent-1` | `#A11429` | STEP内の赤い見出し文字・テキストリンク | 0% | 画素の実測 | | `accent-2` | `#625C5C` | ずらした影ブロック・背景の斜め面に使う濃いグレー | 4% | 画素の実測 | | `tint-1` | `#A8A4A5` | 背景の斜め面に使う薄いグレー | 6% | 画素の実測 | | `surface` | `#DADADA` | 日付ピルラベルのグレー面 | 1% | 画素の実測 | | `line` | `#070707` | カード枠・アコーディオン枠の黒線 | 1% | 画素の実測 | | `text-muted` | `#606060` | フッターのリンク文字 | 0% | 画素の実測 | - 使う色は赤・黒・白の3色に絞り、グレーは背景の飾りと影だけに使う - キャンペーン部分は白と淡いグレーを地にし、赤はカード面とボタンに集中させる - 商品紹介セクションは全面を真紅にし、文字は黒、写真の影も黒にする - 主CTAは赤。補助の操作（コピー・外部サイトへの誘導）は黒ボタンにする - STEPの見出しやテキストリンクは赤文字で強調する - フッターは黒地に白とグレーの文字 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 欧文の大見出し（セクション英字） | 欧文サンセリフ | Montserrat | 800 | 36px | 1.15 | 0.02em | | `headline-lg` | キャンペーンの訴求見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.5 | 0.04em | | `headline-md` | 帯見出し・カード内の商品名 | ゴシック | Noto Sans JP | 700 | 18px | 1.45 | 0.04em | | `headline-sm` | STEPの赤見出し・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.06em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.04em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | 番号（01・02）・日付の大きな数字 | 欧文サンセリフ | Montserrat | 700 | 24px | 1.2 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.06em | - 欧文見出しは幅の広い極太サンセリフで、すべて大文字にする - 日本語は太めのゴシックだけで統一し、明朝は使わない - 本文は中央揃えで短く改行する。商品紹介セクションは左揃えにする - 数字（弾数・番号・日付）は大きく太くして、日本語より目立たせる - 注釈は※やアスタリスクを付け、小さい文字で本文のすぐ下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はキャンペーンカードが 2〜3 カラム - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に約28pxの余白をとって中央に置く - 番号付きの帯見出しは画面の端から伸ばし、左寄せと右寄せを交互にする - カードの後ろに黒やグレーのブロックを少し傾けて重ね、奥行きを出す - 商品特長は左に番号、右に写真と文という段組にする - アコーディオンの項目は縦に12〜16px間隔で並べる ## Elevation & Depth - ぼかした影は使わず、黒の塊を8〜12pxずらしたオフセット影にする - 日付ピルラベルは右下に黒い影を付ける - カードの背面に傾けた濃いグレーの板を重ねる - 基本はフラットで、立体感は重ね方だけで表す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角で角丸なし。黒いオフセット影を付ける。グッズは白か淡いグレーの面に切り抜きで置く - **セクション境界**: 白地から灰地への境は緩やかな曲線。赤地のセクションはまっすぐに切り替える。見出し帯は斜めにカットする - ボタンは角丸8〜10pxの横長の長方形 - 日付ラベルと会場見出しはピル型にし、影を付ける - カードは赤い1〜2px枠か、赤い塗りに角丸10px - 地域タグは黒の小さな四角に白文字 - カード同士は赤い丸に白い＋のアイコンでつなぐ ## Components - **赤い主CTAボタン**（`button-primary`）: 横幅いっぱいの赤ボタン。中央に白文字を置き、展開できるボタンは右端に＋を付ける - **黒の補助ボタン**（`button-dark`）: コピー操作や外部サイトへ誘導する黒い長方形ボタン - **斜めカットの番号帯見出し**（`heading-slant-band`）: 黒い平行四辺形の帯に白で番号と見出しを書き、下に赤い帯をずらして重ねる - **日付ピルラベル**（`date-pill`）: グレーのピル型ラベルに黒い影を付け、開始日と対象店舗を入れる - **商品＋特典カード**（`kit-card`）: 上部に商品アイコンと名前、赤丸の＋を挟んで特典グッズの写真とその名前を並べる。赤枠か赤塗りのカード - **STEPカード**（`step-card`）: 黒の太枠に角丸のカード。中には英字のSTEP番号と赤い見出しを置く。カードの間は黒い▼でつなぐ - **会場アコーディオン**（`accordion-venue`）: 黒枠の角丸ボックス。左に黒の地域タグ、中央に会場名、右に＋を置く - **NEWバッジ**（`badge-new`）: タブボタンの上に重ねる赤い円形バッジに白文字 - **悩みタグ**（`concern-chip`）: 赤地の上に黒い細線で描いたピル型のタグを、折り返しながら並べる - **ページ内タブ**（`nav-tab`）: 黒い四角のタブを2列に並べ、白文字と下向き矢印を入れる ## Do's and Don'ts **Do** - 色は赤・黒・白の3色を基本にする - 見出し帯は斜めにカットし、赤い帯をずらして重ねる - セクションの区切りに星とハートを散らす - 写真やカードの影は、ぼかさず黒をずらした影にする - 商品とおまけは赤丸の＋で結んで見せる - 大きな欧文見出しは極太の大文字にする **Don't** - パステルやグラデーションの配色にしない - ぼかした柔らかい影を使わない - 明朝体や細い書体で見出しを書かない - 赤以外の強調色を足さない - ボタンをピル型や丸ボタンにしない - キャラクターを写実的に描かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（サイト全体の案内と特典の告知）: 最上部に赤い告知バー、その下に黒地のロゴとアイコン、さらに黒いサブナビを置く 2. **ファーストビュー**（コラボの世界観を一目で伝える）: 白地にキャラが商品を持つビジュアルを置く。下に赤い帯を敷き、白の手書き風ロゴと欧文を入れる 3. **コラボの概要**（企画の背景を説明する）: キャラと商品の円形構図の画像の下に、中央揃えの短い本文、注釈、白い枠線ボタンを置く 4. **ページ内ナビ**（各コンテンツへ移動させる）: 黒い四角のタブを並べ、新しい項目にはNEWバッジを付ける 5. **限定キットの紹介**（セット内容と価格を示す）: 星とハートの装飾の下に欧文の大見出しを置く。灰色の枠の中に、赤い価格表カード、＋、黒枠のグッズカードを並べる 6. **販売形態別の特典（3種）**（時期や販路ごとの特典を示す）: 番号付きの斜め帯見出しを置く。日付ピルラベル、影付きのカード、赤いCTAの順に並べ、背景には傾けたグレーの面を敷く 7. **SNSキャンペーン**（投稿による参加を促す）: 灰色の地に、キャラと黒い斜め帯のタイトル、大きな日付、景品カード、黒枠の応募期間、赤文字のリンクを置く 8. **参加方法**（手順を3ステップで示す）: 黒枠のSTEPカードを縦に並べ、▼でつなぐ。中にSNSボタン、写真、コピーボタンを入れる 9. **イベント会場**（会場の一覧を示す）: ピル型の見出しの下に、地域タグ付きのアコーディオンを縦に並べる 10. **商品の詳細**（商品の価値と価格を伝える）: 全面を真紅にする。左上に黒帯の欧文見出し、その下に影付きの大きな写真、価格表、黒ボタンを置く 11. **特長ポイント**（成分と効果を3点で訴求する）: 赤地に、左に番号、右に影付きの写真と見出しと文を置く。悩みのピル型タグを並べ、ハウツー動画も入れる 12. **関連バナー**（他の企画やブランドのページへ回遊させる）: 白地に横長バナーを積み、最後に会員の案内と黒ボタンを置く 13. **フッター**（購入特典・問い合わせ先・リンクをまとめる）: 黒地に白い線画アイコンで特典を並べ、その下に問い合わせ先、グレー文字のリンク一覧、SNSアイコンを置く ## Imagery - キャラクターは黒い太線と白い塗りに赤を差した手描き風のイラストにする - 星（赤と黒）とハートを弧状か横一列に散らして飾る - 商品は光沢のある赤いボトルを白背景か明るいグレー背景で撮る - グッズは影を抑えて切り抜き、淡いグレーか白の面に置く - 特長の写真は花・テクスチャー・手元のクローズアップにし、黒いオフセット影を付ける - 背景の飾りとして、グレーの水玉パターンと傾けたグレーの面を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCのファーストビューは左右に分け、左に赤地のロゴ、右にキャラのビジュアルを置く - PCの概要は左に画像、右に本文の2カラムにする - PCの特典カード・STEP・会場は2〜3カラムで横に並べる - PCの会場一覧はアコーディオンをやめ、詳細を開いた状態のカードを3列に並べる - PCの商品特長は左に写真、右に文を置き、番号は左端に置く - 帯見出しはPCでも画面端から伸ばす配置を保つ ## 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-0811d59a`（元 LP の URL から採番） - **元 LP**: https://brand.shiseido.co.jp/ultimune-promotion26.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。