DESIGN.md — 金装飾と生成り大理石のアール・ヌーヴォー化粧品 LP（Art Nouveau Gold Marble Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、レトロ、やさしい・柔らかい
• キーワード: アール・ヌーヴォー・金箔装飾・大理石テクスチャ・美術館・限定コラボ・明朝体
• 地の質感: 生成り〜クリームの淡い大理石模様を全面に敷き、金のグラデーション罫で区切る
• 形: 角丸はほぼ使わず、四隅に唐草飾りの付いた額縁風パネル。ボタンのみ一部ピル型
• 温度感: 暖色寄り。ベージュ・金・焦げ茶で温かくクラシック

Colors

• 地は生成りの大理石テクスチャを基本にし、セクション毎にベージュ地と交互に切り替える
• セクション境界は金のグラデーション細帯か唐草装飾罫で区切る
• 解説・人物紹介など読ませる塊は焦げ茶パネル＋白文字で反転させる
• 文字は黒を使わず濃い茶〜金茶で統一する
• ミント・ティールは図解と対象商品リストだけに限定する
• 主ボタンは強い色を使わず、白地＋茶枠＋茶文字で控えめにする

Typography

• 全編を明朝体で統一し、ゴシックは使わない
• 見出し・本文とも基本は中央揃え
• 本文は行間 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

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

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