--- version: alpha name: Bright Magenta Accent Clean Skincare LP description: 白とライトグレーを地にした写真中心のスキンケア LP。強調にはビビッドなマゼンタだけを使い、ピル型の枠、マーカー、手書き風文字、線画イラストで軽さと親しみを出している。後半は方眼ノート風の手書きパートとマゼンタ一色のスタッフ紹介で、ページの空気を切り替える。 colors: primary: '#FD005B' on-primary: '#FFFFFF' background: '#FEFEFE' background-alt: '#C2CBCA' surface: '#FEFEFC' text: '#515151' text-body: '#5A5A5A' text-muted: '#8D857D' line: '#FD2371' accent-1: '#FCD5A2' accent-2: '#4FB3B0' dark-section: '#9CA2A2' primary-accessible: '#EB0055' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Zen Maru Gothic fontSize: 19px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Yomogi fontSize: 22px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 30px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' title-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 40px pill-ingredient: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px marker-highlight: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' height: 20px step-number: textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px circle-icon: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px notebook-point: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 800px voice-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.md}' height: 220px note-list: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 120px --- # DESIGN.md — 白×マゼンタの透明感スキンケア LP（Bright Magenta Accent Clean Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、かわいい、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 透明感・白地・マゼンタ一点強調・手書き・ステップ解説・線画イラスト - **地の質感**: グレーがかった柔らかい自然光の写真と白い余白が中心。後半だけ方眼紙・リングノート・破れ紙の紙の質感が入る。 - **形**: ピル型の細線の枠、円形の線画アイコン、STEP 番号を囲む大きな円弧、吹き出しの付いた角丸カード。 - **温度感**: クールで明るい白〜グレーに、温かくポップなマゼンタを効かせる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FD005B` | ブランド強調色（帯・マーカー・枠線） | | 画素の実測 | | `on-primary` | `#FFFFFF` | マゼンタ上の文字 | | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の地色 | | 画素の実測 | | `background-alt` | `#C2CBCA` | 写真背景の淡いグレー | | 画素の実測 | | `surface` | `#FEFEFC` | 方眼ノート・紙の地色 | | 画素の実測 | | `text` | `#515151` | 見出しの濃いグレー文字 | | 画素の実測 | | `text-body` | `#5A5A5A` | 本文のグレー文字 | | 推定 | | `text-muted` | `#8D857D` | 注釈の文字 | | 画素の主要色に補正 | | `line` | `#FD2371` | 見出し下線・区切り線 | | 画素の主要色に補正 | | `accent-1` | `#FCD5A2` | 図解の肌色ベージュ | | 画素の実測 | | `accent-2` | `#4FB3B0` | 図解の円枠のティール | | 推定 | | `dark-section` | `#9CA2A2` | フッター写真帯の暗いグレー | | 画素の実測 | | `primary-accessible` | `#EB0055` | AA を満たす補正値（計算） | | 計算 | - 地は白か淡いグレーの写真背景にして、有彩色はマゼンタ 1 色に絞る。 - マゼンタは帯見出し、マーカー、ピル枠の線、STEP 円弧、手書き文字に使う。 - マゼンタで面を塗るのは、商品名帯・縦帯・スタッフ紹介セクションだけにする。 - 文字は黒ではなくグレー（#4A4A4A 前後）で柔らかく見せる。 - 図解だけは肌色やティールの補助色を使ってよい。 - `title-band` は文字 `#FFFFFF` × 背景 `#FD005B` のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#EB0055`、4.5:1）を使う。 - `marker-highlight` は文字 `#FFFFFF` × 背景 `#FD005B` のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#EB0055`、4.5:1）を使う。 - `notebook-point` は文字 `#FD005B` × 背景 `#FEFEFC` のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#EB0055`、4.53:1）を使う。 - `voice-bubble` は文字 `#FFFFFF` × 背景 `#FD005B` のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#EB0055`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.3 | 0.1em | | `headline-lg` | セクションの大見出し（下線付き） | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.6 | 0.15em | | `headline-md` | STEP 見出し・ピル枠内の成分名 | 丸ゴシック | Zen Maru Gothic | 700 | 19px | 1.7 | 0.12em | | `headline-sm` | 見出し上のリード文 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 手書きの POINT 見出し・写真上の一言 | 手書き・筆 | Yomogi | 400 | 22px | 1.4 | 0.02em | | `label-button` | STAFF VOICE などの欧文見出し | 欧文サンセリフ | Montserrat | 500 | 30px | 1.2 | 0.1em | - 見出しは字間を 0.1〜0.15em と広めに取り、ゆったり見せる。 - 大見出しには下に細いグレーの線を引く。強調語の上にはマゼンタの丸い圏点を打つ。 - 本文中の重要語は、マゼンタの面に白文字を乗せたマーカーにする。 - 写真の上の一言は、マゼンタの手書き文字を少し傾けて置く。 - 成分名には上付きの注釈番号を付け、セクションの末尾に注釈をまとめる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円形アイコンだけ 3 列。 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は端まで広げた全幅で入れ、テキストブロックとは交互に配置する。 - STEP 見出しは左に大きな番号と円弧、右に見出しと本文を置く。 - 見出しはすべて中央揃え、本文は左揃えにする。 - 成分紹介は、ピル枠を縦に積み、間を × 記号でつなぐ。 ## Elevation & Depth - 影はほぼ使わず、平面的に作る。 - ノートと破れ紙のパートだけ、紙の重なりで奥行きを出す。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 全幅の長方形。人物イラストは円形に切り抜き、マゼンタの細い枠を付ける。 - **セクション境界**: マゼンタの細い横線で区切り、吹き出し型の切り込みを入れる。ノートのパートは破れ紙のギザギザで区切る。 - 枠は 1〜1.5px のマゼンタの細線にする。 - ベネフィットは大きな円の中に文字を入れて並べる。 - スタッフのコメントは白枠の角丸吹き出しにする。 ## Components - **商品名帯**（`title-band`）: マゼンタの長方形に白い太字の商品名を入れる。 - **成分ピル枠**（`pill-ingredient`）: 白地にマゼンタの細線のピル枠。上に小さなリード文、間に × 記号を置く。 - **マゼンタマーカー**（`marker-highlight`）: 本文中の強調語を、マゼンタの面に白文字で抜く。 - **STEP 番号**（`step-number`）: 手書き風の STEP の文字と白抜きの大きな数字を、マゼンタの円弧で囲む。 - **円形ベネフィット**（`circle-icon`）: マゼンタの細線の円に、グレーの文字か線画イラストを入れて 3 列に並べる。 - **方眼ノート POINT**（`notebook-point`）: リングノートや方眼紙の上に、マゼンタの手書き見出し、手書きのピルタグ、チェックリストを置く。 - **スタッフ吹き出し**（`voice-bubble`）: マゼンタの地に円形の似顔絵と白枠の角丸吹き出しを置き、左右を交互に入れ替える。 - **注釈リスト**（`note-list`）: セクション末尾に、小さなグレー文字で番号付きの注釈を並べる。 ## Do's and Don'ts **Do** - 有彩色はマゼンタ 1 色に絞り、白地を広く取る。 - 写真は淡いグレー背景、自然光、素肌の人物で揃える。 - 見出しは字間を広めに取り、グレーの下線や圏点を添える。 - 後半は手書きや紙の質感で親しみを足す。 **Don't** - 文字に真っ黒を使わない。 - マゼンタ以外のビビッドな色を足さない。 - 重い影やグラデーションのボタンを使わない。 - 太い枠線や角張った箱で囲まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使用感と仕上がりを一目で伝える）: 顔に手を添えた人物と商品の写真を全幅で置く。右側に縦書きのキャッチ、一部の語は手書き文字にする。 2. **商品概要・成分**（商品名と主要成分を示す）: グレー写真の上にマゼンタの商品名帯と下線付きリードを置き、ピル枠を × でつないで縦に並べる。 3. **仕組みの図解**（効果のメカニズムを説明する）: マーカー付きの本文の下に、円形の図解と下向きの矢印、下線付きの大見出しを置く。 4. **使い方**（4 ステップの使用手順を示す）: マゼンタの線で吹き出し型に区切った導入見出しのあと、STEP 番号・本文・全幅写真を繰り返す。写真には手書きの一言を添える。 5. **使用シーン**（使いたい場面を想起させる）: 円形の線画イラストを 3 つ並べ、下に短い文を置く。 6. **商品紹介**（商品・容量・価格を示す）: 静物写真の上にマゼンタの縦帯でコピーを重ね、下に価格を置く。 7. **成分まとめ・ベネフィット**（成分と得られる効果を整理する）: ピル枠を縦に積み、その下に円形のベネフィットを 5 つ並べる。 8. **こだわりポイント**（処方へのこだわりを親しみやすく伝える）: 方眼ノート風の紙にマゼンタの手書き文字を書き、チェックリストを置く。 9. **スタッフの声**（第三者目線のおすすめを伝える）: 破れ紙の境界から、全面マゼンタのセクションに切り替える。似顔絵と吹き出しを左右交互に並べる。 10. **ブランドメッセージ**（ブランド全体への信頼で締める）: 人物写真を全幅で敷き、白文字のメッセージを重ねる。 ## Imagery - 人物写真は、明るいグレー背景、柔らかな自然光、素肌、白いタンクトップで撮る。 - 商品は白いパウチを使い、石や大理石の上に光と影のある静物写真として撮る。 - クリームはテクスチャのアップを切り抜いて添える。 - イラストは細いペン線に淡い水彩で色を付けた女性画にする。 - 手書きのマゼンタ文字と、方眼紙・リングノートの素材を使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP と同じ幅の 1 カラムを中央に置き、左右は白い余白にする。 - PC の FV だけは全幅にして、人物と商品を横に並べる。 - PC でも本文のサイズや構成は変えず、SP のデザインを流用する。 ## 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-5d277fc9`（元 LP の URL から採番） - **元 LP**: https://lp.lits.jp/022/?utm_medium=paid&utm_source=ig&utm_id=120220947456730663_v2_s01&utm_content=120220947838570663&utm_term=120220947456710663&utm_campaign=120220947456730663&fbclid=PAZXh0bgNhZW0BMABhZGlkAascUMP4SpcBpkzfJCSEoRaDVFSABhylu8vEvv28mrk7tgH3X - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。