---
version: alpha
name: Greige Editorial Grid Cosmetics Corporate LP
description: グレージュ一色の地に黒の文字と細い罫線だけで組んだ、エディトリアル調の化粧品メーカーサイト。商品写真を手で切ったような多角形に切り抜き、色は写真だけに任せる。縦書きの英字ラベル、括弧付きの番号、画面からはみ出す巨大な英字コピーが先進的な印象を作る。
colors:
  background: '#DCD9D2'
  primary: '#141310'
  text-body: '#151313'
  line: '#3A3835'
  secondary: '#3A3835'
  tint-1: '#DCD9D2'
  surface: '#FFFFFF'
  text: '#1A1A19'
  accent-1: '#ABBFCA'
  text-muted: '#3D3A36'
typography:
  display:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 31px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.65
    letterSpacing: 0.02em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 600
    lineHeight: 2.3
    letterSpacing: 0.04em
  note:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
  accent:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.04em
  label-button:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 2.0
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  link-paren-arrow:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 32px
  vertical-section-label:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 200px
  giant-ticker-text:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 70px
  brand-card:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 330px
  news-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 370px
  grid-pattern:
    height: 120px
  vertical-side-copy:
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 200px
  footer-nav:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.body-lg}'
    height: 400px
---

# DESIGN.md — グレージュ地×細罫線の化粧品メーカーLP（Greige Editorial Grid Cosmetics Corporate LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: シンプル・ミニマル、クール・先進的、上品・高級
- **キーワード**: グレージュ単色地・細い黒罫線・多角形の切り抜き写真・縦書き英字ラベル・はみ出す巨大英字・括弧付きナンバリング
- **地の質感**: 紙のようなマットなグレージュ地。一部に方眼紙のような薄いグリッドを敷き、製図や企画書のような質感を出す。
- **形**: 角丸は使わない。写真だけをいびつな多角形やボトル形に切り抜き、手作業のコラージュ感を出す。
- **温度感**: やや暖かいニュートラル。地は落ち着いた温かみのあるグレー、文字はほぼ黒で冷静に締める。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#DCD9D2` | ページ全体の地色（グレージュ） | 70% | 画素の実測 |
| `primary` | `#141310` | 見出し・ロゴ文字のほぼ黒 | 4% | 画素の実測 |
| `text-body` | `#151313` | 本文テキスト | 2% | 画素の実測 |
| `line` | `#3A3835` | セクション区切りの細い横罫線 | 0% | 推定 |
| `secondary` | `#3A3835` | 縦ラベル脇の縦罫線 | 0% | 推定 |
| `tint-1` | `#DCD9D2` | 方眼グリッドの薄い線 | 2% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | お知らせカードのサムネイル面（白） | 3% | 画素の実測 |
| `text` | `#1A1A19` | 画面からはみ出す巨大英字コピー | 2% | 画素の実測 |
| `accent-1` | `#ABBFCA` | ロゴのボトルシルエットのくすみブルー | 0% | 画素の実測 |
| `text-muted` | `#3D3A36` | コピーライト・日付などの小さい文字 | 0% | 画素の実測 |

- 地はグレージュ1色だけにする。セクションごとに地色を変えない。
- UIの色はほぼ黒の文字と罫線だけにする。ブランドカラーのボタンは作らない。
- 彩度のある色は商品写真だけに任せ、写真がページの色の役割を担う。
- 白い面はお知らせのサムネイルなど小さな面だけに使う。
- 方眼グリッドは薄いグレーで、巨大英字や見出しの背後に部分的に敷く。
- ロゴのアクセントにくすんだ淡いブルーを1点だけ使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 画面からはみ出す巨大英字コピー | 欧文サンセリフ | Inter | 500 | 56px | 1 | -0.02em |
| `headline-lg` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 31px | 1.5 | 0.04em |
| `headline-md` | 各セクションのリード見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.65 | 0.02em |
| `body-md` | コンセプト文・お知らせのタイトル | ゴシック | Zen Kaku Gothic New | 600 | 15px | 2.3 | 0.04em |
| `note` | 日付・カテゴリ名・コピーライト | 欧文サンセリフ | Inter | 500 | 10px | 1.5 | 0em |
| `accent` | 縦書きの英字セクションラベルと括弧付き番号 | 欧文サンセリフ | Inter | 500 | 15px | 1.2 | 0.04em |
| `label-button` | 下線付きのテキストリンク | 欧文サンセリフ | Inter | 600 | 16px | 1.4 | 0.02em |
| `body-lg` | フッターのナビ項目 | 欧文サンセリフ | Inter | 500 | 15px | 2 | 0em |

- 和文は太めのゴシック、欧文はグロテスク系サンセリフの2系統だけにする。
- セクション名は英字の大文字にし、先頭に「<」を付けて90度回転させた縦書きにする。
- 英字ラベルの一部の文字を下線付きの別字形にして遊びを入れる。
- 番号は「(001)」のように括弧付き3桁にして、写真の右下に大きく重ねる。
- 巨大英字は括弧や記号を含む数式風の言葉にして、左右にはみ出させる。
- 本文は行間を2倍以上と広く取り、短く改行する。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。左に縦ラベル用の細い列（約43px）を罫線で区切る
- **本文ブロックの幅**: 画面幅の約 75%
- **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
- 各セクションは上端の横罫線と縦ラベル脇の縦罫線でL字に囲む。
- 本文ブロックは縦ラベル列の右から始め、左端をそろえる。
- 写真は画面幅の約90%で配置し、縦に積む。
- 巨大英字の帯をセクションの間に挟み、区切りにする。
- お知らせはサムネイル・タイトル・日付を縦に積み、横罫線で区切る。
- 採用など一部のセクションは縦ラベルを右側に置き、左右を交互にする。

## Elevation & Depth

- 影は使わずフラットにする。
- 奥行きは写真の切り抜きを重ねることと、方眼グリッドの上に文字を乗せることで出す。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: いびつな多角形や角を斜めに落とした形で切り抜く。ファーストビューはボトルのシルエット形にする
- **セクション境界**: 幅いっぱいの1pxの黒い横罫線と縦罫線でL字に区切る
- ボタンも枠も角丸にしない。
- 写真の切り抜きは1枚ごとに形を変え、手で切ったような不ぞろいさを出す。
- 枠線で囲んだボタンは作らない。リンクは括弧と矢印で囲む。
- 方眼グリッドは一部だけに敷き、端を途中で切る。

## Components

- **括弧付きテキストリンク**（`link-paren-arrow`）: 「( 下線付き英字 → )」の形をしたCTA。枠も塗りも使わない
- **縦書きセクションラベル**（`vertical-section-label`）: 「<」付きの英字を90度回転させ、右側に縦罫線を引く
- **はみ出す巨大英字帯**（`giant-ticker-text`）: 括弧や記号を含む英字コピーを画面幅より大きく置き、背後に方眼グリッドを敷く
- **ブランド紹介カード**（`brand-card`）: ロゴ文字、多角形に切り抜いた商品写真、右下の括弧付き番号とカテゴリ名のセット
- **お知らせ項目**（`news-item`）: 白地のサムネイル、太字のタイトル3行、日付を縦に積み、下に横罫線を引く
- **方眼グリッド装飾**（`grid-pattern`）: 薄いグレーの方眼を部分的に敷き、見出しや巨大英字の背後に置く
- **縦書きの英字サブコピー**（`vertical-side-copy`）: ファーストビューの右端に小さな英文を縦に置き、縦罫線を添える
- **2列のフッターナビ**（`footer-nav`）: 左に主要ページ、右にブランド一覧を英字で並べ、SNSアイコンは線画にする

## Do's and Don'ts

**Do**
- 地はグレージュ1色にして、色は写真に任せる。
- 写真は1枚ごとに形の違う多角形に切り抜く。
- セクション名は縦書きの英字ラベルにして、細い罫線とセットで使う。
- CTAは「( 下線付き英字 → )」のテキストリンクにする。
- 巨大英字をはみ出させて、セクションの間にリズムを作る。
- 番号は括弧付き3桁で大きく扱う。

**Don't**
- 塗りのあるピル型ボタンや色付きのCTAを置かない。
- 角丸カードやドロップシャドウを使わない。
- セクションごとに背景色を変えない。
- 写真を四角や円でそのまま配置しない。
- 明朝体や丸ゴシックを混ぜない。
- 装飾的なアイコンやイラストを増やさない。

## Page Structure

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

1. **ファーストビュー**（企業の姿勢を一言で伝える）: ボトル形に切り抜いた商品写真の下に、太字ゴシックの2行キャッチを置く。右端に縦書きの英字サブコピーを添える
2. **企業紹介**（ものづくりの想いを伝える）: 縦ラベルと罫線のL字枠の中に、行間の広い短文を6行ほど並べる。下に括弧付きリンクと多角形の写真を置く
3. **巨大英字帯**（コンセプトを印象づける区切り）: 数式風の英字を画面からはみ出させ、方眼グリッドを重ねる
4. **ブランド一覧**（取り扱いブランドを紹介する）: リード見出しと補足文の後に、ロゴ・切り抜き写真・括弧付き番号のカードを縦に7つ並べる
5. **お知らせ**（新着情報を伝える）: 縦ラベル列の右に、サムネイル・タイトル・日付の項目を横罫線で区切って3件並べる
6. **採用**（人材を募集する）: 縦ラベルを右に置き、方眼の上に2行の見出しとリンクを置く。手で商品を持つ写真と巨大英字を続ける
7. **お問い合わせ**（問い合わせへ誘導する）: 3行の太字見出しと括弧付きリンクだけのシンプルな構成にする
8. **フッター**（サイト全体へのナビゲーション）: ロゴの下に2列の英字ナビ、SNSアイコン、プライバシーポリシーとコピーライトを並べる

## Imagery

- 商品ボトルを斜めに浮かせ、液体のしぶきや泡、原料と一緒に撮った3DCG風の広告ビジュアルを使う。
- 背景は商品ごとに1色（水色・金色・グレー・黄色・くすみピンク）でまとめ、ページの彩りにする。
- 手でボトルを持つ写真は、暖かい斜光と影を活かした温かみのあるトーンにする。
- 写真はすべていびつな多角形に切り抜き、コラージュのように見せる。
- 装飾は方眼グリッドと罫線だけにする。イラストは使わない。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは右上に英字のグローバルナビを縦に並べ、件数を小さな上付き数字で添える。
- PCのブランド一覧は2カラムで、左右の写真を上下にずらして並べる。
- PCの企業紹介・採用セクションは、文章と写真を左右に並べる。
- PCのお知らせは、左にテキスト、右にサムネイルを置く横並びにする。
- 巨大英字はPCでも画面からはみ出させ、1行で長く見せる。
- PCのフッターはロゴとナビを横に並べ、ブランド一覧を2列にする。

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