---
version: alpha
name: Mauve Elegant Botanical Branding LP
description: 深いモーヴのグラデーション地と淡いピンクベージュの地を交互に使う、女性的で上品なブランディング会社のLP。細い欧文セリフの大見出しと明朝の本文、線画の花の装飾、片側だけ大きく角丸にした写真枠が特徴。
colors:
  primary: '#8D3A68'
  dark-section: '#9C5D72'
  background: '#EBDCDF'
  surface: '#FFFFFF'
  text: '#9E5F76'
  on-dark: '#FFFFFF'
  accent-1: '#E1C2CD'
  cta: '#9B6172'
  on-cta: '#FFFFFF'
  line: '#9E5F76'
  accent-2: '#CDB7A8'
  text-accessible: '#895367'
typography:
  display:
    fontFamily: Cinzel
    fontSize: 110px
    fontWeight: 400
    lineHeight: 0.9
  headline-lg:
    fontFamily: Cinzel
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Marcellus
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.06em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 11px
    fontWeight: 400
    lineHeight: 2.2
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Serif JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1em
  label-button:
    fontFamily: Cinzel
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 24px
  lg: 60px
  full: 999px
spacing:
  unit: 8px
  card: 28px
  section: 110px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 36px
  button-outline:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 66px
  button-ghost-dark:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 36px
  section-title-en:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 50px
  service-item:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 150px
  work-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 480px
  contact-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 440px
  emblem-circle:
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 110px
---

# DESIGN.md — モーヴ×淡ピンクの上品なブランディング会社 LP（Mauve Elegant Botanical Branding LP）

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

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
- **キーワード**: モーヴ・欧文セリフ・線画の花・非対称の角丸・余白多め・フェミニン
- **地の質感**: 斜め方向のゆるいグラデーションのモーヴ地と、フラットな淡ピンク地。ベージュの細い線画の花を透かすように重ねる。
- **形**: 大きな円弧のセクション境界と、対角の2隅だけ大きく丸めた写真枠・カード。ボタンは片側だけ丸い。
- **温度感**: やや暖かく、落ち着いた大人の甘さ

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#8D3A68` | ブランドのモーヴ（ダークセクション地） | 45% | 画素の実測 |
| `dark-section` | `#9C5D72` | FV下部のくすんだモーヴ（グラデーション終端） | 10% | 画素の実測 |
| `background` | `#EBDCDF` | 淡いピンクベージュの明るいセクション地 | 27% | 画素の実測 |
| `surface` | `#FFFFFF` | 問い合わせカードと写真枠 | 7% | 画素の実測 |
| `text` | `#9E5F76` | 明るい地の見出し・本文 | 2% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | モーヴ地の文字 | 2% | 画素の主要色に補正 |
| `accent-1` | `#E1C2CD` | FVの大きな欧文ロゴ文字 | 3% | 画素の実測 |
| `cta` | `#9B6172` | 問い合わせボタンの面 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `line` | `#9E5F76` | アウトラインボタンの枠線 | 0% | 画素の主要色に補正 |
| `accent-2` | `#CDB7A8` | 線画の花のベージュ線 | 1% | 推定 |
| `text-accessible` | `#895367` | AA を満たす補正値（計算） |  | 計算 |

- 地はモーヴ（濃）と淡ピンクベージュ（明）の2系統だけを交互に使う。
- モーヴ地は左上から右下へ少し明度が変わる斜めグラデーションにする。
- 明るい地の文字は純黒を使わず、くすんだモーヴで統一する。
- モーヴ地の文字は白、FVの装飾的な大文字は淡いピンクにする。
- 白はカードと写真枠に限定し、強い差し色は入れない。
- 線画の花はベージュの細線で、地色になじませる。
- `page` は文字 `#9E5F76` × 背景 `#EBDCDF` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#895367`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの縦に崩して積んだ欧文ロゴ | 欧文セリフ | Cinzel | 400 | 110px | 0.9 | 0.0em |
| `headline-lg` | セクションの英字見出し | 欧文セリフ | Cinzel | 400 | 34px | 1.2 | 0.04em |
| `headline-md` | サービス名の英字と和文のキャッチ | 欧文セリフ | Marcellus | 400 | 28px | 1.3 | 0.02em |
| `headline-sm` | 和文の小見出し・事例名 | 明朝 | Shippori Mincho | 500 | 19px | 1.6 | 0.06em |
| `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 14px | 2.0 | 0.05em |
| `accent` | 英文の説明文・小さな英字ラベル | 欧文セリフ | Cormorant Garamond | 400 | 11px | 2.2 | 0.06em |
| `note` | サービス名下のふりがな・コピーライト | 明朝 | Noto Serif JP | 400 | 9px | 1.5 | 0.1em |
| `label-button` | ボタン上の英字 | 欧文セリフ | Cinzel | 400 | 11px | 1.0 | 0.08em |

- 見出しは英字の細いセリフ体を大きく置き、太字にしない。
- 和文は明朝で統一し、ゴシックは使わない。
- 本文は行間2.0前後でゆったり組む。
- サービス名は英字の大見出しの下に小さな和文ふりがなを添える。
- 見出しは中央揃え、本文は左揃えにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、PC は2カラム（見出し左・本文右）と3カラムのサービス一覧
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 110px、基本単位 8px、カード内 28px（375px 幅換算）
- セクション間は100px以上あけ、余白で区切る。
- 英字見出しはセクション上部の中央に置く。
- 写真は画面幅の約85%で中央に置き、下にラベルと説明文を左揃えで並べる。
- 会社概要は項目名とその値を2列の表にし、罫線は引かない。
- FVではロゴ文字を斜めに崩して重ね、右側に縦書き風の小さな英字を添える。

## Elevation & Depth

- 影は使わず、すべてフラットにする。
- 奥行きは地色の切り替えと白い枠で表す。
- 線画の花をコンテンツの背面に重ねてレイヤー感を出す。

## Shapes

- **角丸**: 小 0px ／ 中 24px ／ 大 60px。ボタンは角丸の長方形。
- **写真の切り抜き**: 白い枠の写真で、左上と右下（または右上と左下）の対角2隅だけ大きく丸める
- **セクション境界**: FVから明るい地へは上に膨らむ大きな円弧。中央に縦の細線をまたがせる。
- 角丸は対角の2隅だけに付け、非対称にする。
- ボタンは右側だけ丸めた形にし、右端から細い横線がはみ出す。
- アウトラインボタンは角丸なしの細枠にする。
- 円形に並べた小さな英字のエンブレムをアクセントに使う。

## Components

- **問い合わせボタン**（`button-primary`）: くすんだモーヴの面に白い英字。右側だけ角丸で、右端から細線が外へ伸びる。
- **資料案内のアウトラインボタン**（`button-outline`）: 明るい地に置く細枠の長方形。中央に明朝の文字。
- **モーヴ地の線ボタン**（`button-ghost-dark`）: 白い細線だけで描き、片側を丸める。アイコンと英字、右へ伸びる矢印線を付ける。
- **英字セクション見出し**（`section-title-en`）: 細いセリフ体の大文字を中央に置く。下線などの装飾は付けない。
- **サービス項目**（`service-item`）: 英字のサービス名、小さな和文ふりがな、2〜3行の業務内容をすべて中央揃えで縦に積む。
- **実績カード**（`work-card`）: 非対称に角丸を付けた白い枠の写真。下に英字のカテゴリラベル、和文の案件名、説明文を並べる。
- **問い合わせカード**（`contact-card`）: モーヴ地に浮かべた白いカード。左上と右下を大きく丸め、中に見出し・メールアドレス・ボタン2つを置く。
- **円形エンブレム**（`emblem-circle`）: 中央にイニシャルを置き、まわりに小さな英字を円形に並べたバッジ。

## Do's and Don'ts

**Do**
- 地は濃いモーヴと淡いピンクの2系統で交互に切り替える。
- 英字は細いセリフ体、和文は明朝で組む。
- 写真や白いカードは対角の2隅だけ大きく丸める。
- ベージュの線画の花を余白に薄く散らす。
- 余白をたっぷりとり、要素を少なく見せる。

**Don't**
- 太いゴシックや極太の見出しを使わない。
- 原色の赤や青など、強い差し色を入れない。
- ボタンや見出しにドロップシャドウやグラデーションの光沢を付けない。
- 四隅すべて同じ角丸のありふれたカードにしない。
- 本文を詰めて組まない。行間を狭くしない。

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（ブランドの世界観を印象づける）: モーヴのグラデーション地に、淡いピンクの巨大な欧文ロゴを崩して配置する。右上に和文2行のキャッチと円形エンブレム、下に英文説明と和文コピーを置く。
2. **理念**（会社の考え方を伝える）: 円弧で切り替えた淡ピンク地に、英字見出し、かぎ括弧付きの和文見出し、左揃えの長文を置く。
3. **サービス**（提供領域を一覧で示す）: 英字のサービス名3つを中央揃えで縦に積み、それぞれに業務内容を添える。背景に線画の花を置く。
4. **資料案内**（資料請求への導線をつくる）: 細枠のアウトラインボタンを1つ中央に置く。
5. **実績**（事例で信頼を得る）: モーヴ地に、非対称角丸の白枠写真とラベル・案件名・説明文のセットを縦に繰り返す。
6. **代表紹介**（人柄と経歴を伝える）: 白枠の人物写真に、英字の氏名を大きく重ねる。役職、和名、SNSリンク、経歴文を続ける。
7. **ブログ導線**（発信への誘導）: 英字見出しの下に、白い線だけで描いたゴーストボタンを置く。
8. **会社概要**（基本情報を示す）: 英字の項目名と和文の値を、罫線のない2列の表にする。
9. **問い合わせ**（問い合わせへ誘導する）: 非対称角丸の白いカードに、メールアドレス、フォームボタン、チャット案内と2つ目のボタンを置く。
10. **フッター**（締めとブランド表示）: モーヴ地に白いロゴを中央に置き、下に小さなコピーライトを添える。

## Imagery

- 自然光で撮った、柔らかく明るい写真を使う。緑・白木・水辺など清潔感のある背景がよい。
- 人物は横向きや笑顔の上半身で、ベージュや白の落ち着いた服装にする。
- インテリア写真は白壁と海や窓の光を生かした、リゾート感のある構図にする。
- 装飾は百合や芍薬などの花を細いベージュの単線で描いた線画にする。
- 写真には白い太枠を付け、対角の2隅を大きく丸める。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCのFVは左にロゴとコピー、右に角丸の写真を置く2分割にする。
- PCの理念セクションは、大きな円形の淡ピンク面の上で見出しを左、本文を右に分ける。
- PCのサービス一覧は3カラム横並びで、項目をダッシュ付きのリストにする。
- PCの実績は写真と説明文を左右交互に配置し、左右に矢印を付けたスライダー風にする。
- PCではヘッダーに英字の横並びナビを出し、SPではハンバーガーメニューにする。
- 問い合わせカードはPCで幅約50%の中央配置にする。

## 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-8e50fad1`（元 LP の URL から採番）
- **元 LP**: https://lamauve.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。