--- version: alpha name: Art Nouveau Gold Marble Cosmetics LP description: 生成りの大理石調テクスチャを地に、金のアール・ヌーヴォー装飾罫と焦げ茶のパネルで構成した、美術品のような限定コスメ LP。明朝体を中央揃えで組み、余白を広めに取って格調を出す。 colors: background: '#F3EEDB' background-alt: '#EEE7D4' primary: '#CFB990' dark-section: '#76573B' on-dark: '#F6F5F0' secondary: '#D2BC92' surface: '#FEFEFE' text: '#3E2E1E' text-body: '#5A4632' accent-1: '#8E6F3E' tint-1: '#E3F1E4' accent-2: '#2E8A8A' cta: '#FEFEFE' on-cta: '#4A3826' typography: display: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 14px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ornament-divider: textColor: '{colors.primary}' height: 20px heading-ruled: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px dark-frame-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 500px button-detail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px accordion-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px tab-chip: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 32px banner-link: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px product-list: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px label-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 金装飾と生成り大理石のアール・ヌーヴォー化粧品 LP（Art Nouveau Gold Marble Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、レトロ、やさしい・柔らかい - **キーワード**: アール・ヌーヴォー・金箔装飾・大理石テクスチャ・美術館・限定コラボ・明朝体 - **地の質感**: 生成り〜クリームの淡い大理石模様を全面に敷き、金のグラデーション罫で区切る - **形**: 角丸はほぼ使わず、四隅に唐草飾りの付いた額縁風パネル。ボタンのみ一部ピル型 - **温度感**: 暖色寄り。ベージュ・金・焦げ茶で温かくクラシック ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F3EEDB` | 大理石調の生成り地 | 55% | 画素の実測 | | `background-alt` | `#EEE7D4` | ベージュの区切りセクション地 | 10% | 画素の実測 | | `primary` | `#CFB990` | 金の装飾罫・アクセント | 6% | 画素の実測 | | `dark-section` | `#76573B` | 焦げ茶の解説パネル | 5% | 画素の実測 | | `on-dark` | `#F6F5F0` | 焦げ茶パネル上の文字 | 1% | 画素の主要色に補正 | | `secondary` | `#D2BC92` | 砂色の大型帯・アコーディオン | 7% | 画素の実測 | | `surface` | `#FEFEFE` | 白系カード・図解ボックス | 5% | 画素の実測 | | `text` | `#3E2E1E` | 見出しの濃い茶 | 2% | 推定 | | `text-body` | `#5A4632` | 本文の茶色 | 3% | 推定 | | `accent-1` | `#8E6F3E` | 見出しの金茶文字 | 1% | 推定 | | `tint-1` | `#E3F1E4` | 対象商品の淡いミント地 | 2% | 画素の実測 | | `accent-2` | `#2E8A8A` | 図解のティール | 1% | 推定 | | `cta` | `#FEFEFE` | 詳細ボタン地（生成り白） | 1% | 画素の実測 | | `on-cta` | `#4A3826` | ボタン文字の焦げ茶 | 0% | 推定 | - 地は生成りの大理石テクスチャを基本にし、セクション毎にベージュ地と交互に切り替える - セクション境界は金のグラデーション細帯か唐草装飾罫で区切る - 解説・人物紹介など読ませる塊は焦げ茶パネル＋白文字で反転させる - 文字は黒を使わず濃い茶〜金茶で統一する - ミント・ティールは図解と対象商品リストだけに限定する - 主ボタンは強い色を使わず、白地＋茶枠＋茶文字で控えめにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン・効果の大見出し | 明朝 | Shippori Mincho | 700 | 22px | 1.5 | 0.08em | | `headline-lg` | セクション見出し（Point番号付き） | 明朝 | Shippori Mincho | 700 | 20px | 1.5 | 0.06em | | `headline-md` | 小見出し（下線付き） | 明朝 | Noto Serif JP | 600 | 16px | 1.6 | 0.05em | | `body-md` | 本文・リード | 明朝 | Noto Serif JP | 400 | 13px | 2.0 | 0.04em | | `note` | 注釈・イメージ図表記 | 明朝 | Noto Serif JP | 400 | 10px | 1.7 | 0.02em | | `accent` | Point・周年などの欧文飾り | 欧文スクリプト | Playfair Display | 400 | 14px | 1.3 | 0.05em | | `label-button` | ボタン・アコーディオン文字 | 明朝 | Noto Serif JP | 600 | 14px | 1.4 | 0.1em | - 全編を明朝体で統一し、ゴシックは使わない - 見出し・本文とも基本は中央揃え - 本文は行間 2.0 前後でゆったり組む - Point 番号は欧文で上に小さく、和文見出しを下に置く - 日付や数字は見出し内で一回り大きくして強調する - 注釈は小さめの茶色で括弧付き - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品画像と説明は縦積み - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは装飾罫で上下を挟んだ見出しから始める - コンテンツは中央寄せの狭い幅にまとめる - ビフォーアフターは横並び2枚＋矢印 - アコーディオンは縦に等間隔で並べる - セクション間は広い余白で美術館的な間を取る ## Elevation & Depth - 影はほぼ使わずフラットに見せる - パネルは金の細枠と四隅の飾りで浮かせる - 商品写真のみ自然な落ち影を付ける ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 作品画像は額縁風の矩形、人物は円形トリミング、商品は切り抜き - **セクション境界**: 金グラデーションの水平帯、唐草装飾罫、一部は下辺が波打つアーチ形 - パネルの四隅に唐草の角飾りを置く - 見出しは上下を細い金罫で挟む - 詳細ボタンは白地のピル型＋茶枠 - タブ風ボタンは矩形で金枠 ## Components - **唐草装飾罫**（`ornament-divider`）: 金の唐草模様を横一列に並べたセクション区切り - **罫挟み見出し**（`heading-ruled`）: 上下を両端飾り付きの金罫で挟んだ明朝見出し - **焦げ茶額縁パネル**（`dark-frame-panel`）: 焦げ茶地に金細枠と角飾り。作品画像と白文字解説を左右に配置 - **詳細ボタン**（`button-detail`）: 白地・茶枠のピル型。右に下向き矢印アイコン - **アコーディオン**（`accordion-bar`）: 砂色の矩形バーに中央見出しと右端の山形矢印 - **効果タブ**（`tab-chip`）: 金枠の白い矩形チップを3つ横並び。ページ内リンク - **記事バナー**（`banner-link`）: 生成り地に金枠、商品画像と明朝見出し、右端に矢印 - **対象商品リスト**（`product-list`）: 淡ミント地に罫線区切りの中央揃え商品名一覧 - **予約受付ラベル**（`label-badge`）: 砂色地の小さな矩形ラベルを発売情報の上に置く ## Do's and Don'ts **Do** - 地には常に淡い大理石テクスチャを敷く - 見出しは必ず金の装飾罫で挟む - 文字は明朝体・茶系で統一する - アール・ヌーヴォー調の曲線装飾を角や区切りに使う - 余白を広く取り、要素数を絞って中央に並べる - 製品図解は白いボックス内にシンプルな線画で描く **Don't** - 原色や蛍光色のボタンを使わない - ゴシック体の太字で煽る表現をしない - 純黒の文字や背景を使わない - 大きな角丸や影の強いカードを使わない - 装飾をポップなアイコンやイラストに置き換えない - 左揃えの密な文章ブロックを作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と商品を一目で伝える）: 金の額縁装飾を持つ横長キービジュアル。左にロゴと縦二行のコピー、右に絵画 2. **コンセプト導入**（コラボの背景とテーマを語る）: 装飾罫で挟み、周年ロゴ・見出し・中央揃えの本文を段落で並べる 3. **作品と作家の紹介**（モチーフの芸術的価値を伝える）: 焦げ茶の額縁パネルに作品画像、解説、円形の人物写真カード、公認ブランド枠 4. **デザイン解説**（容器のレリーフや意匠を見せる）: ベージュ地に商品切り抜きを斜めに配置し、短い注釈を添える 5. **商品・発売情報**（仕様・発売日・取扱を示す）: 左に商品画像と受賞バッジ、右に罫線区切りのスペック表 6. **関連記事バナー**（外部記事や解説ページへ誘導）: 金枠の横長バナーを2本縦に並べる 7. **予約CTA**（オンライン予約へ誘導）: 白地の横長セレクト風ボタンと注釈 8. **キャンペーン**（予約特典を訴求）: 装飾罫で囲んだ見出し、特典品の大きな写真、ピル型詳細ボタン 9. **効果の目次**（3つの効果を予告する）: 砂色帯の下辺をアーチ状にし、金枠タブを3つ並べる 10. **特長（Point別）**（仕上がり効果を根拠付きで説明）: Point番号見出し、下線小見出し、図解ボックス、ビフォーアフター比較写真 11. **使い方**（使用方法を動画で示す）: 白地に動画埋め込みと砂色アコーディオン3本 12. **キャンペーン再掲・対象商品**（特典条件と対象を明示）: 特典写真、ミント地の対象商品リスト、小さな注釈 ## Imagery - アール・ヌーヴォー絵画風の女性像を額縁内に配置 - 金色の容器や紙袋を白背景で切り抜き、柔らかな落ち影を付ける - 唐草・蔓草の金色線画を角飾りや区切りに使う - 肌のビフォーアフターはクローズアップを同構図で並べる - 図解はティールと茶の細線で描く簡素なイラスト - 人物写真はセピア調の円形トリミング - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 60% 幅にコンテンツを集め、左右は大理石地を見せる - SP では作品画像と解説を縦積みにする - 効果タブは SP で横3つを維持するか縦に積む - キービジュアルは SP で絵画部分を下に回し縦長に再構成する - 装飾罫は 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-ea041de2`（元 LP の URL から採番） - **元 LP**: https://www.kanebo-cosmetics.jp/milano-collection/powder/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。