DESIGN.md — 白×マゼンタの透明感スキンケア LP（Bright Magenta Accent Clean Skincare LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、かわいい、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 透明感・白地・マゼンタ一点強調・手書き・ステップ解説・線画イラスト
• 地の質感: グレーがかった柔らかい自然光の写真と白い余白が中心。後半だけ方眼紙・リングノート・破れ紙の紙の質感が入る。
• 形: ピル型の細線の枠、円形の線画アイコン、STEP 番号を囲む大きな円弧、吹き出しの付いた角丸カード。
• 温度感: クールで明るい白〜グレーに、温かくポップなマゼンタを効かせる。

Colors

• 地は白か淡いグレーの写真背景にして、有彩色はマゼンタ 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

• 見出しは字間を 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。