---
version: alpha
name: Cloud Blue Premium Mattress Brand LP
description: 深い紺と雲のある空色グラデーションで眠りの世界観を描く、高級マットレスのブランドLP。白抜きの明朝寄りゴシックで短い詩的コピーを置き、写真をずらしたコラージュで余韻を出す。後半は淡いグレーのカードと紺のトピックス帯、店舗案内へ続く。
colors:
  primary: '#1C3E61'
  dark-section: '#062C51'
  cta: '#062C51'
  on-cta: '#E2F3FC'
  background: '#FFFFFF'
  background-alt: '#EAEAEA'
  secondary: '#5A8CA3'
  tint-1: '#92B2BD'
  surface: '#CCD5DC'
  text: '#183A5C'
  text-muted: '#61809F'
  on-dark: '#E5F7FC'
  accent-1: '#072E55'
  line: '#D3D7DA'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.15em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.12em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.08em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.1em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.05em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 56px
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.sm}'
    height: 52px
  button-detail:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 46px
  header-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 54px
  heading-line:
    textColor: '{colors.accent-1}'
    height: 3px
  photo-collage:
    backgroundColor: '{colors.secondary}'
    height: 1200px
  topic-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 260px
  scroll-hint:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 30px
  store-card:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 260px
---

# DESIGN.md — 紺×空色グラデの高級寝具ブランド LP（Cloud Blue Premium Mattress Brand LP）

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

## Overview

- **業種**: 日用品・生活雑貨 ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、シンプル・ミニマル
- **キーワード**: 紺と空色・雲のグラデーション・写真コラージュ・余白の多い詩的コピー・ホテル品質
- **地の質感**: 雲や空の写真を背景に使う。うっすらノイズのある青のグラデーション地。
- **形**: 角はほぼ直角。ボタンとカードだけ小さな角丸。写真は四角で、ずらして重ねる。
- **温度感**: ひんやりと静かで落ち着いた寒色。夜明けや睡眠を思わせる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1C3E61` | ブランドの紺（トピックス帯） | 12% | 画素の実測 |
| `dark-section` | `#062C51` | ヘッダー・フッターの濃紺 | 9% | 画素の実測 |
| `cta` | `#062C51` | 来店予約ボタンの紺 | 1% | 画素の実測 |
| `on-cta` | `#E2F3FC` | ボタン上の白文字 | 0% | 画素の実測 |
| `background` | `#FFFFFF` | カードセクションの白地 | 10% | 画素の実測 |
| `background-alt` | `#EAEAEA` | 店舗案内の明るいグレー地 | 9% | 画素の実測 |
| `secondary` | `#5A8CA3` | 中盤の空色グラデ地 | 20% | 画素の実測 |
| `tint-1` | `#92B2BD` | 雲背景の淡い空色 | 8% | 画素の実測 |
| `surface` | `#CCD5DC` | 詳細ボタンの淡いグレー青 | 2% | 画素の実測 |
| `text` | `#183A5C` | 見出しの紺文字 | 0% | 画素の主要色に補正 |
| `text-muted` | `#61809F` | フッターの補助リンク色 | 0% | 画素の実測 |
| `on-dark` | `#E5F7FC` | 暗色地の白文字 | 1% | 画素の実測 |
| `accent-1` | `#072E55` | 見出し上の短い紺ライン | 0% | 画素の主要色に補正 |
| `line` | `#D3D7DA` | 店舗カード上の区切り線 | 0% | 画素の主要色に補正 |

- 紺と空色の寒色だけで構成し、暖色は使わない。
- 冒頭は濃紺→雲の白→空色の縦グラデーションで、眠りへ沈む流れを作る。
- 暗い地や写真の上のコピーは白抜きにする。
- 明るい地の見出し・ボタン・矢印アイコンは紺にする。
- トピックスとフッターは紺のベタ面で締める。
- サブボタンは淡いグレー青の面に紺文字と紺の丸矢印を置く。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのメインコピー | 明朝 | Shippori Mincho | 500 | 22px | 1.5 | 0.15em |
| `headline-lg` | 詩的コピーの締めの一文 | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.6 | 0.1em |
| `headline-md` | カード見出し・店舗の都市名 | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.6 | 0.1em |
| `headline-sm` | セクションの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.5 | 0.12em |
| `body-md` | ブランド説明の中央揃え本文 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.9 | 0.08em |
| `body-lg` | 冒頭の詩的コピー | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.9 | 0.1em |
| `note` | 住所・コピーライト・補助リンク | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.7 | 0.05em |
| `label-button` | 詳細・来店予約ボタン | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.1em |

- FVのメインコピーだけ明朝にし、字間を広めにする。
- 本文は太めのゴシックで中央揃え。短い文を改行して詩のように置く。
- 段落の間は1行分あける。
- 見出しは大きくしすぎない。最大でも22px程度で静かに見せる。
- 英字は使いすぎず、和文が中心。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。トピックスと店舗案内は横スクロールのカルーセル。
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 56px、基本単位 8px、カード内 0px（375px 幅換算）
- コンテンツは左右に約7%の余白をとる。
- 詩的コピーの前後は200px以上あけて余韻を出す。
- 写真コラージュは左右にずらし、画面端まで出してもよい。
- カードは画像→中央の見出し→全幅の詳細ボタンの順に縦に並べる。
- 店舗カードは1.2枚分見せて、横スクロールできることを示す。

## Elevation & Depth

- 基本はフラットにする。
- 詳細ボタンにはごく弱い影をつける。
- スクロール案内のラベルは白地にして、地から浮かせる。
- 写真の重なりは影ではなく、ずらしで奥行きを出す。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの四角。大小のサイズで不揃いに重ねる。
- **セクション境界**: グラデーションで地続きにつなぐ。紺の帯の境は直線。
- ボタンは2〜4pxの角丸の長方形にする。
- 矢印は紺の丸の中に白い山形を置く。
- 見出しの上に短い紺の横線を置く。
- 雲の写真は四角く切らず、背景全体に溶かす。

## Components

- **来店予約ボタン**（`button-primary`）: 紺の面に白文字を左寄せし、右端に白線の丸矢印を置く。
- **詳細ボタン**（`button-detail`）: 淡いグレー青の全幅ボタン。左に紺の文字、右に紺の丸矢印を置く。
- **固定ヘッダー**（`header-bar`）: 濃紺のバー。左にロゴ、右に購入案内リンクとハンバーガーを置く。
- **見出し上ライン**（`heading-line`）: カードの左上に、長さ約28pxの紺の短線を置く。
- **写真コラージュ**（`photo-collage`）: 大小の四角い写真を、グリッドから外して階段状に重ねる。
- **トピックスカード**（`topic-card`）: 紺の地に16:9のサムネイル、白い見出し、丸矢印つきの詳細リンクを並べる。
- **スクロール案内ラベル**（`scroll-hint`）: 右端に白地または紺地の小さなラベルを出し、二重矢印を添える。
- **店舗カード**（`store-card`）: 上に区切り線。都市名を大きく、地区名に点線の下線を引き、住所と予約ボタンを続ける。

## Do's and Don'ts

**Do**
- 寒色の紺と空色だけでまとめる。
- 雲や空の写真で眠りの世界観をつなぐ。
- コピーは短く区切って中央に置き、余白を十分にとる。
- 写真は四角のまま、ずらして重ねる。
- 紺の丸矢印アイコンをリンクやボタンにそろえて使う。

**Don't**
- 赤や黄色など、暖色の強調色を入れない。
- ピル型ボタンや大きな角丸を使わない。
- 価格訴求のバッジや煽り文句を置かない。
- 文字を詰め込まない。1画面に置くのは2〜3行の短文まで。
- ドロップシャドウを強くしない。

## Page Structure

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

1. **ファーストビュー**（ブランドの世界観と信頼感を一目で伝える）: 濃紺の部屋と雲の窓の前に、人物とベッドを置く。上部に明朝のコピーとロゴを入れる。
2. **雲のトランジション**（眠りへ沈むような流れを作る）: 白い雲から空色へのグラデーションで、FVと次をつなぐ。
3. **ブランドメッセージ**（眠りの価値を詩的に訴える）: 空色の地に白文字の短文を3行並べ、最後の一文を大きくする。
4. **眠りの写真コラージュ**（深い眠りの情景を見せる）: 眠る人や寝具、製造工程の写真を大小ずらして階段状に重ねる。
5. **ブランドの歴史と品質**（実績と品質の信頼を伝える）: グラデーション地に、中央揃えの白文字で3段落を置く。
6. **特長・製品・導入実績カード**（詳しい情報へ誘導する）: 短線、白地の画像、中央の見出し、詳細ボタンを1セットにして縦に3つ並べる。
7. **トピックス**（最新の企画やキャンペーンを紹介する）: 紺の帯に大きな特集カードを置き、その下にカードの横スクロールを続ける。
8. **店舗案内**（来店や購入の導線を作る）: ベッドのミニチュアを散らした明るいグレーの地に、導入文と店舗カードの横スクロールを置く。
9. **フッター**（サイト内の回遊と会社情報を示す）: 濃紺の地に白い主リンクとグレーの補助リンクを縦に並べる。

## Imagery

- 雲が広がる青空の写真を背景に使い、白く溶かしながらつなぐ。
- 人物は寝顔のクローズアップにし、白いリネンと紺のウェアで寒色にそろえる。
- 製造工程やスプリングの写真は青みを強めに補正する。
- 製品画像は白い背景に置き、立体の物撮りにする。
- 店舗案内には、ミニチュア人物とベッドを俯瞰したアイソメトリック風のイラストを散らす。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは、FVの部屋のセットを横長に見せ、ナビを左上に置く。
- PCのコラージュは2列の大きな写真を左右に配置する。
- PCの特長カードは3列の白い枠に横並びにする。
- PCのトピックスは4列のグリッドに一覧表示する。
- PCの店舗カードは4列を横並びにする。フッターは横並びのリンクにする。

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