--- version: alpha name: Aqua Mint Translucent Skincare LP description: ミント〜ターコイズの地に、生成りの有機的な曲線と水滴の装飾を重ねたシートマスクLP。白抜きの見出しと筆記体の欧文アクセントで、透明感と上品さを演出する縦長1カラム構成。 colors: primary: '#63CEC8' secondary: '#81D7CE' background: '#E4F3ED' background-alt: '#F0EDDA' surface: '#FDFDFD' text: '#2A2A2A' on-primary: '#F5F9F1' dark-section: '#211716' tint-1: '#C2EBE7' accent-1: '#FEF2B2' accent-2: '#F6C4D0' line: '#60BAB9' primary-accessible: '#29817C' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-limited: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px label-pill-fv: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 40px heading-script-point: textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 110px badge-free: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 84px ingredient-circle: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 140px ingredient-cross: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px card-lineup: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px notice-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 120px --- # DESIGN.md — ミントアクア×生成りの透明感スキンケアLP（Aqua Mint Translucent Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、上品・高級、ナチュラル - **キーワード**: 透明感・ミントアクア・水滴・筆記体アクセント・有機的な曲線・成分訴求 - **地の質感**: フラットな単色面に、半透明の水滴・泡と淡い色の曲線ブロブを重ねたみずみずしい質感 - **形**: 大きな有機曲線の背景、正円の成分写真とバッジ、角丸の商品カード - **温度感**: 涼しげでやや柔らかい。生成りで冷たさを和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#63CEC8` | メイン地色ターコイズ | 35% | 画素の実測 | | `secondary` | `#81D7CE` | 明るめミントの曲線面 | 19% | 画素の実測 | | `background` | `#E4F3ED` | 淡いミントグレーのビジュアル地 | 11% | 画素の主要色に補正 | | `background-alt` | `#F0EDDA` | 生成りの有機曲線ブロブ | 7% | 画素の実測 | | `surface` | `#FDFDFD` | 成分バッジ・注意ボックス地 | 4% | 画素の実測 | | `text` | `#2A2A2A` | 見出し・本文の濃色 | 3% | 推定 | | `on-primary` | `#F5F9F1` | 地色上の白抜き見出し | 2% | 画素の主要色に補正 | | `dark-section` | `#211716` | 注意喚起の黒帯・黒ボックス | 3% | 画素の実測 | | `tint-1` | `#C2EBE7` | 商品ラインナップの淡ミントカード | 2% | 画素の実測 | | `accent-1` | `#FEF2B2` | シリーズ別のイエロー | 1% | 画素の実測 | | `accent-2` | `#F6C4D0` | シリーズ別のピンク | 1% | 画素の実測 | | `line` | `#60BAB9` | 外枠のダークティール | 2% | 画素の実測 | | `primary-accessible` | `#29817C` | AA を満たす補正値（計算） | | 計算 | - 地はターコイズとミントの2色を曲線で切り替え、単調さを防ぐ - 生成りのブロブを画面端にはみ出させて差し色にする - 見出しは地色上なら白抜き、本文は濃色で可読性を確保 - 白は円形バッジとカード面に限定する - 黒は注意喚起ボックスだけに使い、販促要素には使わない - シリーズ紹介のみイエロー・ピンクのパステルを解禁する - `label-pill-fv` は文字 `#63CEC8` × 背景 `#FDFDFD` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#29817C`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大型見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション白抜き見出し | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.5 | 0.12em | | `headline-md` | コピー・成分名見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.06em | | `headline-sm` | 小見出し・成分の組み合わせ | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.05em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 500 | 15px | 1.9 | 0.04em | | `note` | *付き注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | Point番号や成分名の筆記体欧文 | 欧文スクリプト | Great Vibes | 400 | 40px | 1.1 | 0.0em | | `label-button` | 成分フリーバッジ・タグ | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.02em | - 本文・見出しはほぼ全て中央揃え - 白抜き見出しは字間を広めに取り軽やかに - 筆記体欧文は細線で大きく、和文見出しの上に添える - 注釈番号は*と上付き数字で表記 - 縦書きの明朝コピーをビジュアル内に置いてもよい - 1行は短く、意味の区切りで改行する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分写真は 2〜4 列の円形グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - Point.1〜3を筆記体番号→見出し→説明→写真の順で縦に積む - 成分の掛け合わせは2枚の写真の間に細い×を置く - フリー表示は白い正円を4+3の千鳥配置 - 注釈は各ブロック直下に小さくまとめる - 曲線ブロブはセクションをまたいで背景に流す ## Elevation & Depth - 基本はフラットで影を使わない - 商品写真のみ接地影を淡く付ける - 水滴・泡は半透明のハイライトで立体感を出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 成分写真は正円、ビジュアルは横長の角なし矩形 - **セクション境界**: 直線ではなく有機的な大きな曲線ブロブで色を切り替える - 成分写真とバッジは必ず正円 - シリーズカードは上辺のみ大きく丸めたアーチ型 - タグは白地に細枠のピル型 - 注意喚起は黒のピル帯と角丸ボックス ## Components - **数量限定の円バッジ**（`badge-limited`）: 淡ミントの正円に2行の強調文字 - **FV告知ピル**（`label-pill-fv`）: 白いピルに太字ターコイズ文字で告知 - **筆記体ポイント見出し**（`heading-script-point`）: 白の細い筆記体番号の下に白抜き和文見出し - **成分フリー円バッジ**（`badge-free`）: 白い正円に2〜3行の小さな文字 - **成分写真サークル**（`ingredient-circle`）: 正円写真＋下に2行の成分名、筆記体の英名を重ねる - **成分掛け合わせ帯**（`ingredient-cross`）: 写真帯2枚の間に細線の×を交差させる - **シリーズアーチカード**（`card-lineup`）: 上辺が大きく丸いパステルカードに商品と効能タグ - **注意喚起ボックス**（`notice-box`）: 白地に黒ピル見出しと黒角丸ボックスの白文字 ## Do's and Don'ts **Do** - 地色はターコイズ系で統一し曲線で明暗を切り替える - 水滴・泡のモチーフを商品周りに散らす - 成分は正円写真と英字筆記体で上品に見せる - 効能表現には*注釈を必ず添える - テキストは中央揃えで短く改行する **Don't** - 原色の赤や強いグラデーションCTAを使わない - 直線的な帯や角ばった区切りで分割しない - 黒を販促要素に使わない - 写真を四角いサムネイルで並べない - 太すぎる書体を本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（再入荷と大容量・限定を告知）: ターコイズ地に告知ピル、帯付き商品名、大型見出し、商品写真と円バッジ 2. **キービジュアル**（世界観と受賞実績の提示）: 淡ミントの台座写真に縦書きコピーと受賞エンブレム、筆記体 3. **形状紹介**（容器の利便性を伝える）: 曲線ブロブ背景に見出し、商品写真、中央揃え説明 4. **ブランドコンセプト**（商品の想いと価格提示）: 筆記体見出し、カギ括弧コピー、リボン線画、横長写真と価格 5. **処方・フリー表示**（低刺激の安心感）: 白抜き見出しと白い円バッジ7個の千鳥配置 6. **ポイント1〜3**（成分ごとの効果訴求）: 筆記体番号＋見出し＋成分の×組み合わせ写真 7. **植物オイル紹介**（保湿成分の説明）: 大きな円形写真と筆記体英名、長めの説明文 8. **香り**（精油の香りの魅力）: 4+3の円形写真グリッドと2行の成分名 9. **シート素材**（密着シートの訴求）: 白いマスクの切り抜き写真に水滴を散らす 10. **シリーズ紹介**（関連商品への回遊）: 色分けしたアーチ型カードを3つ並べ効能タグ 11. **注意事項**（使用時の注意）: 外枠ティールの白ボックスに黒ピル見出しと黒ボックス ## Imagery - 商品は正面からの切り抜きで、淡い接地影を付ける - 成分写真は寄りのマクロで円形にトリミング - 美容液のしずくや気泡の透明感ある写真を帯で使う - 半透明の水滴・泡のイラストを余白に散らす - 細線の筆記体英字やリボン線画を装飾に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPC中央の細い1カラムで、SPはほぼそのまま全幅化 - SPでは円バッジを4+3、成分写真は2〜4列を維持 - PCでは本文幅を480〜750px程度に絞り左右を地色で埋める - 曲線ブロブは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-a9e0966d`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/marumanhealth/10000729/?s-id=rk_shop_sp_rnkInShop - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。