--- version: alpha name: Anime Collaboration Teal and Crimson Skincare LP description: 青緑と深紅の 2 色を左右・上下に割った面に、デフォルメキャラと金色の六角形枠を合わせたコラボ限定パッケージの LP。前半はポップなゴシック体と斜線ストライプの区切り、後半はグレー地に明朝体と大きな円を使った落ち着いた成分説明に切り替わる。 colors: primary: '#0A5662' secondary: '#C82842' accent-1: '#E1CD9A' background: '#FFFFFF' background-alt: '#DEDEDE' dark-section: '#0E3D3C' on-dark: '#FFFFFF' text: '#0B0A0B' accent-2: '#CD4350' accent-3: '#C3AD62' tint-1: '#EAB1AA' cta: '#010101' on-cta: '#F0F0F0' line: '#CECECE' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.03em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.02em accent: fontFamily: Oswald fontSize: 30px fontWeight: 500 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hex-catch-frame: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.display}' height: 100px stripe-divider: backgroundColor: '{colors.line}' height: 20px heading-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 80px variant-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 190px dark-concept-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 240px circle-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 140px hex-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 60px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px --- # DESIGN.md — 青緑×深紅のアニメコラボ化粧品 LP（Anime Collaboration Teal and Crimson Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ポップ・元気、上品・高級、クール・先進的 - **キーワード**: 2色分割・六角形フレーム・デフォルメキャラ・斜線ストライプ・円モチーフ・明朝の成分説明 - **地の質感**: フラットなベタ塗りに、うすい六角形パターンと黒い太線を重ねる。後半はマットなグレー地 - **形**: 六角形・八角形の金縁バッジ、斜線ストライプの帯、大きな正円 - **温度感**: 前半は鮮やかで力強い。後半はくすんだグレーと赤で落ち着いた温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0A5662` | ブランド青緑（GREEN 側の面） | 7% | 画素の主要色に補正 | | `secondary` | `#C82842` | 深紅（RED 側の面・強調文字） | 5% | 画素の実測 | | `accent-1` | `#E1CD9A` | 金ベージュの見出し帯・枠 | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#DEDEDE` | 成分説明のグレー地 | 18% | 画素の実測 | | `dark-section` | `#0E3D3C` | コンセプト説明の深緑ボックス | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 深緑ボックス上の文字 | 1% | 画素の主要色に補正 | | `text` | `#0B0A0B` | 見出し・本文の黒 | 3% | 画素の実測 | | `accent-2` | `#CD4350` | 低刺激の円バッジの赤 | 4% | 画素の実測 | | `accent-3` | `#C3AD62` | 円背景のくすみ金 | 2% | 画素の実測 | | `tint-1` | `#EAB1AA` | 背景装飾のくすみピンク円 | 2% | 画素の実測 | | `cta` | `#010101` | 購入ボタンの黒 | 1% | 画素の実測 | | `on-cta` | `#F0F0F0` | 購入ボタン文字 | 0% | 画素の実測 | | `line` | `#CECECE` | 斜線ストライプ区切りのグレー | 1% | 画素の実測 | - 青緑と深紅は 2 種のバリエーションを表す。1 対のペアとして上下・左右に割って使う - 見出し帯・バッジ枠・区切りの点には金ベージュを使う - 前半の商品紹介は白地。成分説明はグレー地のパネルに切り替える - 成分見出しと本文の強調は深紅の明朝で書く - 購入ボタンだけは黒ベタにして、商品の世界観から切り離す - バリエーションごとの紹介カードは、枠線と強調ラベルをその色で塗り分ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の金枠内キャッチ | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.02em | | `headline-lg` | 金帯のセクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.02em | | `headline-md` | 成分説明の明朝見出し | 明朝 | Noto Serif JP | 500 | 17px | 1.7 | 0.03em | | `body-lg` | コンセプト文・商品名 | ゴシック | Noto Sans JP | 700 | 14px | 2.2 | 0.03em | | `body-md` | 成分説明の本文 | 明朝 | Noto Serif JP | 400 | 12px | 2.0 | 0.02em | | `accent` | 英字のバリエーション名 | 欧文サンセリフ | Oswald | 500 | 30px | 1.1 | 0.0em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 500 | 15px | 1.0 | 0.05em | - キャラクター周りの前半はゴシック太字で中央揃えにする - 成分・機能を説明する後半は明朝に切り替えて上品にする - 英字のバリエーション名は細長いサンセリフを大きく金色で置く - 色の名前は対応する色で塗り分ける - 注釈は 9〜10px で ※ 付きにし、右寄せか本文の下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は商品カードを 2 列、購入エリアを左右 2 分割にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - コンセプト文は余白を広く取り、中央揃えで短く改行する - バリエーション紹介はパッケージ画像と説明カードを交互に並べる - 成分セクションはグレーのパネルを左右 5% 内側に置く - 大きな円は画面端からはみ出させて背景に重ねる - 購入エリアは商品画像→商品名→内訳→価格→ボタンの順に縦に積む ## Elevation & Depth - 基本はフラットで、影を付けない - パッケージ画像の背後に薄いグレーの板をずらして置き、奥行きを出す - FV の金枠キャッチには黒い太線のオフセットを付けて立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は正円に切り抜く。キャラは透過で配置する - **セクション境界**: グレーの斜線ストライプの帯。2 本の線がつながる縦線と金色の点 - 見出しの帯や枠は角を落とした八角形にする - バッジは六角形か正円にする - ボタンとカードは角丸なしの四角にする - 大きな円を重ねて背景をリズムよく見せる ## Components - **八角形キャッチ枠**（`hex-catch-frame`）: 金ベージュの面に青緑の細い二重線を入れ、黒いオフセット影を付けた角落ちの枠 - **斜線ストライプ区切り**（`stripe-divider`）: グレーの斜線を全幅で並べた帯 - **金帯見出し**（`heading-band`）: 左右の角を斜めに落とした金ベージュの帯に、黒太字を 2 行で置く - **バリエーション紹介カード**（`variant-card`）: 色付きの細い枠に大きな英字見出し、反転ラベル、ミニキャラ、詳細リンク（丸矢印付き）を入れる - **深緑コンセプトボックス**（`dark-concept-box`）: 深緑の面に白い明朝本文を入れ、注釈は右寄せにする - **円形訴求バッジ**（`circle-badge`）: 赤い正円に白い明朝で無添加項目を入れ、2×2 に並べる - **六角形ミニバッジ**（`hex-badge`）: 商品画像に添える補足の吹き出し。赤または青緑の六角形に白文字 - **購入ボタン**（`button-primary`）: 全幅の黒ベタ四角に白文字を中央寄せ ## Do's and Don'ts **Do** - 2 色のペアは常にセットで、対になるように配置する - 金ベージュは枠・帯・点などのアクセントに絞って使う - 機能説明は明朝とグレー地にして、前半との世界観を切り替える - キャラは透過のミニキャラで添えて、親しみを出す - コピーライト表記は画像の右下に小さく置く **Don't** - 角丸のピル型ボタンやグラデーションのボタンを使わない - 青緑と深紅以外の鮮やかな色を足さない - 成分説明にポップなゴシック太字を使わない - 影の強いカード UI を使わない - 白地に文字を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観を一目で伝える）: 上を青緑、下を深紅に塗り分け、キャラ立ち絵 4 体を置く。中央に八角形のキャッチ枠を重ねる 2. **コンセプト**（情緒的な共感をつくる）: 白地に短い詩的な文を中央揃えで置き、下にキャラを 1 体添える。上下を斜線ストライプで区切る 3. **限定パッケージ紹介**（セット内容を伝える）: ロゴ入りの枠見出しと金帯見出しの後に、色名を塗り分けた説明文を入れる 4. **バリエーション詳細**（2 種の違いを示す）: パッケージ画像と色枠の紹介カードを 2 組、交互に置く 5. **シリーズ説明**（ベース商品の価値を説明する）: 縦線と金色の点でつないだ見出しの後に、グレーのパネル内に深緑のボックスを置く 6. **成分特長**（浸透成分を訴求する）: 水滴写真を円に切り抜き、赤い円と重ねる。下に明朝の見出しと本文を置く 7. **シート特長**（シートの厚みを訴求する）: 大きな円の中にマスク写真を置き、断面の拡大を円で示す。赤い明朝で説明する 8. **低刺激処方**（安心感を出す）: 金の大円の上に赤い円バッジを 2×2 で並べる 9. **購入**（商品情報と購入導線）: 商品画像に六角形バッジと矢印を添え、商品名・内訳・価格・黒ボタンを順に置く 10. **注意事項**（販売上の注意）: 白地に小さな左揃えのテキスト ## Imagery - キャラは黒い主線のデフォルメ等身で描き、透過で配置する - 立ち絵の背景は単色の縦長パネルにし、薄いシルエットと縦書きの英字名を重ねる - 背景に薄い六角形のハニカムパターンを敷く - 成分写真は青い水滴などのクローズアップを正円に切り抜く - グレー地には巨大な英字の一部やくすんだ円を、淡い色で装飾として敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は左右に青緑と深紅を分け、中央に六角形の枠を置く - PC のコンセプト文は左揃えにし、キャラを右に並べる - PC のパッケージとカードは 2 列で並べ、下を線でつなぐ - 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-b1632328`（元 LP の URL から採番） - **元 LP**: https://lululun.com/lp?u=kaiju-no8 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。