--- version: alpha name: Manga Grid Character Collab Skincare LP description: 白い方眼紙の地に、黒い漫画風の効果線・集中線・星を散らしたキャラクターコラボのフェイスマスクLP。黒の極太ゴシックと黒い枠線のピル型ボタンが軸になる。商品ごとに黄×緑、黄×水色などのパステルグラデーションで色分けし、遊び心と情報の整理を両立させている。 colors: background: '#FEFEFE' line: '#F1F1EE' background-alt: '#EEEEEE' text: '#080C11' text-body: '#383838' primary: '#FEEA4B' cta: '#FBE24D' on-cta: '#080200' secondary: '#F0BF59' accent-1: '#AADE94' accent-2: '#ADEAF6' surface: '#FEFEFE' text-muted: '#464646' marker: '#FDED61' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: -0.02em headline-lg: fontFamily: Inter fontSize: 22px fontWeight: 800 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Inter fontSize: 16px fontWeight: 800 lineHeight: 1.2 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 40px button-ec: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px band-concern: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 34px band-benefit: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 34px badge-round: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px card-ingredient: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 290px label-callout: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px caption-dotted: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px card-event: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 340px --- # DESIGN.md — 方眼地×漫画効果線のキャラコラボ化粧品LP（Manga Grid Character Collab Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ポップ・元気、かわいい、シンプル・ミニマル - **キーワード**: 方眼紙・漫画効果線・黒枠ピル・パステルグラデ・ステッカー風キャラ・モノトーン+差し色 - **地の質感**: 薄いグレーの方眼グリッドを全面に敷き、手描きの黒い稲妻・爆発線・星を余白に散らしている - **形**: 黒1〜2pxの細線枠、ピル型ボタン、角丸の情報カード、白フチのステッカー切り抜き - **温度感**: 明るくニュートラル。黒と白が中心で、差し色の黄・緑・水色が温度を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | 方眼紙の地色 | 55% | 画素の実測 | | `line` | `#F1F1EE` | 方眼グリッド線 | 5% | 画素の主要色に補正 | | `background-alt` | `#EEEEEE` | 悩み別見出し帯・区切り帯 | 6% | 画素の実測 | | `text` | `#080C11` | 見出し・ボタン枠・効果線 | 8% | 画素の実測 | | `text-body` | `#383838` | 本文 | 3% | 画素の実測 | | `primary` | `#FEEA4B` | メインイエロー（バッジ・成分円） | 5% | 画素の実測 | | `cta` | `#FBE24D` | 公式ストアボタンの黄 | 2% | 画素の実測 | | `on-cta` | `#080200` | CTA上の文字 | 0% | 画素の実測 | | `secondary` | `#F0BF59` | エイジング系のオレンジ黄 | 2% | 画素の実測 | | `accent-1` | `#AADE94` | 肌トラブル系の若草グリーン | 2% | 画素の実測 | | `accent-2` | `#ADEAF6` | 保湿系の水色 | 2% | 画素の実測 | | `surface` | `#FEFEFE` | カード・ボタンの白面 | 10% | 画素の実測 | | `text-muted` | `#464646` | 注釈 | 0% | 画素の実測 | | `marker` | `#FDED61` | テーマ文の黄色マーカー | 0% | 画素の主要色に補正 | - 地は白×薄グレーの方眼で統一し、面の色は増やさない - 文字・枠線・効果線はすべてほぼ黒の1色にする - 商品ごとにテーマ色（黄・オレンジ黄・緑・水色）を決め、成分円とグラデーション帯で色分けする - グラデーションは黄から各テーマ色への横方向グラデに限る - 外部ECボタンは白地に黒枠で、色はブランドロゴの色だけにする - セクションは薄グレーの帯で区切る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し（助詞は小さく） | ゴシック | Noto Sans JP | 900 | 40px | 1.2 | -0.02em | | `headline-lg` | 英字セクション見出し・キャラ名 | 欧文サンセリフ | Inter | 800 | 22px | 1.3 | 0.0em | | `headline-md` | メッセージ見出し・告知タイトル | ゴシック | Noto Sans JP | 800 | 20px | 1.5 | 0.02em | | `headline-sm` | 悩み別の帯見出し・効能帯 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `body-lg` | 成分説明の本文 | ゴシック | Noto Sans JP | 700 | 15px | 1.8 | 0.02em | | `body-md` | ブランドメッセージ本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | CTAのストア名 | 欧文サンセリフ | Inter | 800 | 16px | 1.2 | 0.0em | - 見出しはすべて極太ゴシックで黒にする - FV見出しは助詞を小さくして、文字の大小でリズムをつける - 英字見出しと日本語の小見出しを2段に重ねる - キャラ名は欧文太字で大きく、下に日本語を小さく添える - 注釈は※付きの極小サイズで右寄せまたは中央に置く - 本文は中央揃えで短く改行する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧は 3 カラム、詳細は画像と補足の 2 カラム、外部ECボタンは 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 余白に効果線を散らすが、本文の上には重ねない - 悩み別ブロックは「帯見出し→キャラ名→効能帯→商品画像→成分カード→CTA群」を繰り返す - 主CTAは全幅、サブECボタンは2列グリッドにする - セクション間は全幅のグレー帯で区切る - 中央揃えを基本にする ## Elevation & Depth - 影は使わずフラットにする - 立体感は黒い細枠線で出す - キャラはステッカー風の白フチで浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: キャラは白フチ付きのステッカー切り抜き。商品は角型のまま置き、写真は角丸の枠に入れる - **セクション境界**: 全幅の薄グレー帯（直線） - ボタンはすべて黒枠のピル型で、右端に丸い再生アイコンを付ける - 成分は円を2つ並べて×でつなぎ、円の背面に色の円をずらして重ねる - 効能ラベルは角丸小の黒枠矩形にする - カードは黒1.5px枠の角丸12pxにする ## Components - **公式ストアCTA**（`button-primary`）: 黄から商品のテーマ色へ流れるグラデのピル型。黒枠で、ロゴ＋ストア名を置き、右端に▶丸アイコンを付ける - **外部ECボタン**（`button-ec`）: 白地に黒枠のピル型。中央にECロゴ、右に▶丸アイコンを置き、2列に並べる - **悩み別帯見出し**（`band-concern`）: 全幅のグレー帯。見出しの両側に▼▼▼を付けて中央に置く - **効能グラデ帯**（`band-benefit`）: 黒枠の長方形に、黄からテーマ色への横グラデを敷き、効能名を中央に置く - **黄色丸バッジ**（`badge-round`）: FV右上に置く黄色の正円。黒文字で選べる種類数を強調する - **成分カード**（`card-ingredient`）: 黒枠の白カード。成分円2つを×でつなぎ、両側にキャラアイコンを置き、下に太字の説明と注釈を入れる - **斜線括り吹き出しラベル**（`label-callout`）: 黒枠の矩形。＼／で囲んだ小文字の前置きと、太字の訴求を2段で入れる - **点線下線キャプション**（`caption-dotted`）: 補足画像の下に置く太字キャプション。黒の点線で下線を引く - **告知カード**（`card-event`）: 黒枠の角丸カード。日付を▶▶▶でつないで大きく見せ、下に会場情報と写真を入れる ## Do's and Don'ts **Do** - 方眼の地と黒い漫画効果線を、全セクションの余白に散らす - 商品ごとのテーマ色を、成分円・効能帯・CTAグラデで一貫させる - ボタンは黒枠のピル型に▶アイコンを付けて統一する - キャラはステッカー風の白フチで、見出しの両脇に添える - 注釈の※は本文中に小さく入れ、ブロック下にまとめる **Don't** - 濃いベタ塗りの背景セクションは作らない - ドロップシャドウや立体的なボタンは使わない - テーマ色以外の派手な色を足さない - 効果線を文字の上に重ねて可読性を落とさない - 明朝体や細い書体は混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ商品であることと悩み別に選べることを伝える）: 極太の黒い大見出しに英字サブを添え、右上に黄色丸バッジを置く。下にキャラ集合のステッカーを入れ、周囲に効果線を散らす 2. **ラインナップ**（3種の比較と購入導線）: 3カラムで「商品パッケージ→マスク図→キャラ名→効能ラベル→EC縦ボタン列」と並べる 3. **商品情報（悩み別×3）**（各商品の詳細と成分を訴求する）: グレー帯見出し→キャラ名→グラデ効能帯の順に置き、続けて商品画像と補足2点の2カラムを入れる 4. **成分訴求**（配合成分の価値を説明する）: 黒枠カードに成分円2つを×でつないで入れ、太字の説明文を添える 5. **購入CTA**（各商品の購入へ誘導する）: 全幅のグラデ主CTAを置き、下に2列の白いECボタンを並べる 6. **イベント告知**（発表会などの話題を伝える）: キャラを両脇に置いた見出しの下に、日付を大きく見せた告知カードと写真を入れる 7. **ブランドメッセージ**（ブランドの想いを伝える）: 中央揃えの短文を積み、テーマ文に黄色マーカーを引く。周囲にキャラと効果線を散らす 8. **取扱店舗**（販売チャネルと発売日を案内する）: 英字＋日本語の見出しの下に太字の案内文を置き、キャラ後ろ姿の並びとコピーライトで締める ## Imagery - キャラは太い輪郭線のフラットイラストにし、白フチのステッカーとして切り抜く - 効果線は黒ベタの手描き風。稲妻・爆発フキダシ・四芒星・黒丸を使う - 商品パッケージは正面から撮った白背景の切り抜きにする - マスクの形は細い線画のアイコンで、中にキャラを小さく描く - 写真を入れる場合は明るい屋外の建物写真を、枠の中に収める - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像がないため、ここからは推奨。PCでは本文ブロックを最大幅720px程度で中央に置き、方眼の地は全幅に敷く - PCではラインナップの3カラムを保ちつつ、余白を広げる - 商品詳細は画像と補足を横並びにし、成分カードを右側に並べてもよい - ECボタンはPCで4列の横並びにする - 効果線の装飾は左右の余白に多めに配置する ## 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-3ba8e8bc`（元 LP の URL から採番） - **元 LP**: https://alface-mask.com/pages/pokemon-bps2025/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。