--- version: alpha name: Soft Grid Organic Cleansing LP description: 白い方眼の地に、くすんだローズの見出しと黒い英字ラベルを合わせたスキンケアLP。明朝とゴシックを混ぜ、黄色マーカーで要点を目立たせる。丸く切り抜いた成分写真や線画イラストで、やさしく清潔な印象をつくる。 colors: primary: '#A5545A' background: '#FEFEFE' text: '#0B0A09' text-body: '#555555' dark-section: '#020202' on-dark: '#EFEFEF' marker: '#FCE59C' background-alt: '#D3E2EE' tint-1: '#E4D4CA' accent-1: '#5A352C' accent-2: '#495E7B' surface: '#FEFEFD' line: '#DCE1E4' accent-3: '#D4EBDF' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Kalam fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.15em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 26px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px worry-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px badge-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px ingredient-orb: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 90px free-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px boxed-keyword: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 34px step-item: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — 方眼地にくすみローズのオーガニック化粧品LP（Soft Grid Organic Cleansing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、ナチュラル、情報量多め・訴求型 - **キーワード**: 方眼ノート地・くすみローズ・黄色マーカー・黒ラベル・丸抜き成分・線画イラスト - **地の質感**: 白地に薄いグレーの方眼線。ノートのような軽い質感で、写真カードには柔らかい影を付ける - **形**: 角丸カード、円形の成分写真、手書き風の楕円タグ - **温度感**: やや暖かいニュートラル。肌色とローズに淡い水色を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A5545A` | 見出しの強調色（ローズ） | 3% | 画素の実測 | | `background` | `#FEFEFE` | 方眼地のベース | 45% | 画素の実測 | | `text` | `#0B0A09` | 見出し・本文の黒 | 4% | 画素の実測 | | `text-body` | `#555555` | 説明文のグレー | 2% | 推定 | | `dark-section` | `#020202` | POINT ラベルの黒帯 | 1% | 画素の実測 | | `on-dark` | `#EFEFEF` | 黒ラベル上の白文字 | 0% | 画素の実測 | | `marker` | `#FCE59C` | 見出しの黄色マーカー | 1% | 画素の実測 | | `background-alt` | `#D3E2EE` | ランキング帯の淡い水色 | 7% | 画素の実測 | | `tint-1` | `#E4D4CA` | 共感セクションの肌色グラデ地 | 5% | 画素の実測 | | `accent-1` | `#5A352C` | 商品ボトルのブラウン | 5% | 画素の主要色に補正 | | `accent-2` | `#495E7B` | 悩みカード内の青い強調文字 | 0% | 画素の実測 | | `surface` | `#FEFEFD` | 口コミ・悩みカードの白 | 15% | 画素の実測 | | `line` | `#DCE1E4` | 方眼線・タグ枠 | 3% | 画素の主要色に補正 | | `accent-3` | `#D4EBDF` | 成分マップの補助色（淡ミント） | 0% | 推定 | - 地は白×方眼で通す。帯セクションだけ淡い水色や肌色のグラデを使う - ローズは大見出しの数字・特長名・本文中の強調語にだけ使う - 重要語には黄色マーカーを半分の高さで敷く - セクションの英字ラベルは黒地に白抜きで統一する - 悩みカード内の強調語は青で書き、ローズの強調と区別する - 彩度の高い色は避け、くすみ寄りのトーンでまとめる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 実績の大きな数字・順位 | 明朝 | Shippori Mincho | 700 | 48px | 1.2 | 0.02em | | `headline-lg` | 特長見出しの主語（マーカー付き） | 明朝 | Shippori Mincho | 600 | 28px | 1.4 | 0.1em | | `headline-md` | 太字ゴシックの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `headline-sm` | 小見出し・成分名 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.05em | | `body-md` | 説明文・口コミ本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | POINT・STEP などの英字ラベル | 欧文サンセリフ | Kalam | 700 | 13px | 1.2 | 0.1em | | `label-button` | 楕円タグ・ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.3 | 0.15em | - 特長見出しは 2 行。1 行目は小さめの明朝、2 行目の主語は大きく強調する - 主語には黄色マーカーを敷き、後ろに続く助詞は小さくする - 字間は広め（0.08〜0.15em）にとり、ゆったり組む - 要点は『\ ○○ /』のように斜線で挟んで強調する - 強調語は赤枠で囲むか、ローズの文字色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みカード・使い方は 3 列、成分は 4 列×2 段 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 各特長は黒ラベル→2 行見出し→説明→写真カードの順に縦に積む - 写真カードは左右に余白をとり、幅を約 85% にする - 成分は円形サムネイルの下に名前を中央揃えで置く - before/after は左右 2 枚を矢印でつなぐ - 比較マップは十字の軸の 4 方向にラベルを置く ## Elevation & Depth - 口コミカードと写真カードには、ぼかしの大きい薄い影（0 4px 12px rgba(0,0,0,.08)） - 成分の円形写真はガラス玉のような縁ハイライトと影で浮かせる - 楕円タグは右下にずらした濃い影線で手描き風にする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形、成分写真は円形に切り抜く - **セクション境界**: 多くは直線のまま方眼地が続く。共感セクションの上端だけ V 字に切る - タグはピル型の細い線枠にする - 吹き出しは白い角丸にしっぽを付ける - ラベルは角のない黒い長方形にする ## Components - **POINT 黒ラベル**（`point-label`）: 手書き風の英字に番号を付けた黒い帯。特長ごとの見出しの上に中央揃えで置く - **マーカー見出し**（`marker-heading`）: 明朝の大きな主語の下に黄色マーカーを敷く - **口コミカード**（`review-card`）: 星評価と本文を左に、写真を右に置く。強調語はローズの太字 - **悩みチェックカード**（`worry-card`）: チェックアイコンと 2 行の悩み文。3 枚を横に並べる - **FV 円形バッジ**（`badge-circle`）: 白い円の中に短い特長を 3 行で書く。3 つ並べる - **成分の円形写真**（`ingredient-orb`）: 円形の写真の下に成分名を置く - **無添加タグ**（`free-tag`）: 影線付きのピル型の線枠タグ。3 列のグリッドに並べる - **枠囲みキーワード**（`boxed-keyword`）: ローズの文字を細い線枠で囲む - **使い方ステップ**（`step-item`）: ローズの STEP 英字、線画イラスト、説明文を縦に並べる ## Do's and Don'ts **Do** - 地は白の方眼に統一する - 見出しは明朝とゴシックを組み合わせ、主語を大きくする - 強調語にはローズ・黄色マーカー・枠囲みのいずれかを使う - 各特長の先頭には POINT 黒ラベルを置く - イラストは細い線画に、淡いピンクや水色を差す **Don't** - 原色の赤や青で大きな面を塗らない - 太くて重いディスプレイ書体を使わない - 写真を角張った長方形のまま置かない - 1 画面に強調手法を 3 種類以上重ねない - 暗い背景のセクションを入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（肌の質感と商品を一目で伝える）: 顔のアップ写真に縦書き風のコピーを重ね、左上に実績の円形バッジ、下に円形の特長バッジを 3 つ並べる 2. **実績**（ランキングと販売数で信頼を得る）: 淡い水色の布地背景に、ローズの明朝で大きな数字を置き、月桂樹の飾りで囲む。商品ボトルを横一列に並べる 3. **お客様の声**（使用感を伝える）: 斜線で挟んだ見出しの下に、写真付きの口コミカードを縦に並べる 4. **悩みの提起**（商品カテゴリへの不安を示す）: チェック付きのカードを 3 枚並べる 5. **解決提示**（不安への答えを示す）: V 字に切った肌色グラデの帯に、商品写真と吹き出しで強調した語を置く 6. **特長1〜5**（成分・保湿・低刺激・香り・洗い上がりを順に説明する）: POINT ラベル、マーカー見出し、説明文、角丸の写真の順に並べる。before/after・成分の円形写真・肌の断面イラスト・無添加タグを挟む 7. **使い方**（正しい手順を伝える）: 3 列のステップを線画で示し、下に便利な点をアイコン 3 つで並べる 8. **比較マップ**（シリーズ内での位置づけを示す）: 十字の軸の上に、淡い円を背にした商品を配置する ## Imagery - 人物は肌のアップ。柔らかい自然光で、白い布やシーツを背景にする - 商品は琥珀色のボトル。とろみや滴りを見せる - 成分は素材のクローズアップを円形に切り抜く - アイコンや使い方は黒の細い線画に淡いピンクや水色を差す - 肌の断面は角丸のブロックを積んだフラットなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は PC 画像のみだが、スマホのような細い縦長で組まれている。SP ではほぼそのまま 1 カラムで使える - PC は中央に幅 480〜750px の列を置き、左右は方眼地で埋める - 3 列のカードは SP でも 3 列のまま、文字は 13px 程度にする - 成分グリッドは SP で 4 列。狭い場合は 3 列に落とす ## 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-37a1835a`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tsurunishi/905b07g9r2zp6/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。