透明感のクリーンビューティー Clean Beauty

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/clean-beauty/DESIGN.md

# DESIGN.md — 透明感のクリーンビューティー / clean-beauty

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

スキンケアD2Cの王道「クリーンビューティー」を、白背景・パステル・丸ゴシック・
ぷっくりボタンの量産形に堕とさずに作る。細く硬質なサンセリフの規律と、
質の高い写真、たっぷりの余白で「透明感の中に芯がある」を成立させる。
彩度は抑えるが、締める場所は黒に近い濃いインクで一段落とす。ふわっとさせない。

**キーワード**: 透明感 / 規律 / 余白 / 写真主役 / 締め
**この見た目が向く場面**: スキンケア・コスメD2C、美容クリニックのオウンドEC、
オーガニック/ウェルネス系の定期購入モデル

## 2. タイポグラフィ

- 欧文・数字: Jost / ウェイト 300〜400 / 字間 +0.08em（製品名・成分名・数値・
  英字ラベルに使う。声を張らない幾何サンセリフ。太らせて主張させない）
- 和文見出し: Zen Kaku Gothic New / ウェイト 500
- 和文本文: Zen Kaku Gothic New / ウェイト 400 / サイズ 15〜16px / 行間 1.8
- 混植ルール: `font-family: "Jost", "Zen Kaku Gothic New", sans-serif;` を
  本文に指定し、英数字は自動的に Jost、和文は Zen Kaku Gothic New に
  フォールバックさせる（個別に `<span>` で切り替える必要はない）
- 見出しスケール: h1 38px / h2 27px / h3 18px（大見出しでも38pxを超えない。
  声を張らない。強さは余白と写真の質量で出す）
- 特記: 全角約物混じりの日本語見出しに欧文の字間ルールを適用しない
  （字間+0.08emは Jost 使用箇所限定。和文見出し全体に掛けると間延びする）

## 3. カラー

無彩色に近い低彩度パレット＋締めのための濃墨。マルチパステルにしない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #f7f5f2（ごく淡い温白） | 55% |
| 背景（節替え） | #f0ece5 | — |
| 背景（締めセクション） | #23201c（濃墨。ページ内1箇所のみ） | 10%程度 |
| テキスト（主・見出し） | #23201c | 25% |
| テキスト（弱） | #6b6259 | — |
| アクセント1（くすみモーヴ・面/線専用） | #b7a4a8 | 5%以下 |
| アクセント1文字用（モーヴを文字にする時だけ） | #785f64 | — |
| アクセント2（セージ・面/線専用） | #9aa89a | 5%以下 |
| アクセント2文字用（セージを文字にする時だけ） | #566655 | — |
| 罫線 | #e5e1da | — |

- 配色ルール: `--color-mauve` と `--color-sage` は**面（塗り）と細線にのみ使う**。
  文字として使う場合は必ず `-text` の濃色版を使う（実測値は§8直前を参照）。
  この2色を「地の色を薄く変えたパステル塗り」として多用しない
  （アクセント2色までの排他ルール。3色目を足さない）
- パステルの多色使い（水色・ピンク・ラベンダーの同時使用等）を禁止。
  低彩度に抑えつつも、ページ中に必ず1箇所、濃墨 #23201c の締めセクション
  （定期便・トライアルのCV導線）を置き、「軽さだけ」で終わらせない

## 4. レイアウト・余白

- コンテンツ最大幅: 1320px / 左右パディング 40px（1080px以下は28px、880px以下は22px）
- グリッドの性格: split-screen を基本とする。ヒーローは 40%（テキスト）/60%（写真）
  の非対称2カラム。成分セクションは 44%/56%。3ステップは 42%/58%
  （偶数ステップで反転し 58%/42%）
- セクション間の余白: 上下 128px 基準（モバイルは84px）。要素間は8pxの倍数
- ヒーローの構成: 中央寄せにしない。左カラムに「静かな一文の見出し＋
  製品哲学2文＋CTAボタン1つ」を配置し、右カラムは写真を裁ち落とし
  （画面端まで、余白なし）で敷く。ボタンを2つ並べない
- 3ステップは3カラム角丸カードにしない。**縦の流れ**で、各ステップを
  「番号＋写真＋説明」の横並び行（行ごとに写真の左右を反転）として積む

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 背景は地色に近い半透明（`rgba(247,245,242,0.97)`）で
  sticky。ナビリンクは下線なし・ホバーで文字色がモーヴ文字色に変わり、
  下線が1pxで出る。本文中の通常リンクとは分けず、同じ考え方で統一する
- 角丸: 2px（ボタン・入力欄のみ、最小限）。**写真は角丸0で固定**（排他。
  写真にだけ`--radius-photo:0`を必ず使い、ボタンの`--radius`を流用しない）
- 影: 使わない（box-shadowを一切使わない。奥行きは写真そのものと余白で出す）
- ボタン: 角2px・塗り。主ボタンは濃墨地×オフホワイト文字（締めセクション上では
  オフホワイト地×濃墨文字に反転）。ホバーで背景がわずかに明転するのみ
  （0.25s）。ピル型にしない。矢印は自作インラインSVGを添える
- カード的要素: 作らない。区切りは1px罫線（#e5e1da）と余白のみ
- フォーム要素: 本DEMOでは扱わないが、使う場合は背景=地色、罫線1px、
  角丸2px、フォーカス時に罫線がセージ文字色に変わる
- 画像の扱い: 角丸なし・枠なし・影なし。`object-fit: cover`で敷き、
  全写真に共通の`filter: saturate(0.9) brightness(1.02)`を適用してトーンを統一
  （個別の写真ごとにフィルタ値を変えない）
- アクセント色の適用範囲: モーヴ＝ステップ番号・ラベル文字（-text版）・
  ホバー時の文字色。セージ＝section-label・成分値の数字・声のクレジット行
  （-text版）。この用法以外（ボタン背景、罫線の強調、大面積の塗り）には使わない

## 6. モーション

- 量: rich。ただし「動き＝賑やかしい」にしない。役割ごとに速度と遅延を変える
  （階段ディレイ）。全要素が同じ0.6sで均一にフェードする実装を禁止
- 使う動き:
  - 主役（写真, `data-role="lead"`）: scale(1.07)→1 と opacity 0→1 を
    1.4〜1.6s の `cubic-bezier(0.16,1,0.3,1)` でゆっくり
  - 見出し（`data-role="heading"`）: translateY(20px)→0, 0.7s, 遅延0s
  - 本文（`data-role="body"`）: translateY(12px)→0, 0.55s, 遅延0.16s
  - CTA（`data-role="cta"`）: translateY(8px)→0, 0.5s, 遅延0.3s
  - ヒーローのみ控えめなパララックス（写真をscrollに応じて最大26px程度
    translateY。`will-change`を使いすぎない）
- 使わない動き: 数字のカウントアップ、自動カルーセル、マーキー、
  backdrop-filterによるグラスモーフィズム、均一0.6sフェード
- `prefers-reduced-motion: reduce` で上記アニメーションとパララックスを
  すべて無効化し、最終状態（opacity:1, transform:none）を即時表示する
- 実装上の注意: `html { scroll-behavior: smooth; }` は使わない
  （アンカー遷移のスムーススクロールと、スクロール連動のIntersectionObserver /
  rAFベースの演出が競合し、体感の重さや意図しない挙動につながるため。
  画面遷移は一瞬で、要素の出現アニメーションだけで魅せる）

## 7. 写真・イラスト・図版

- Wikimedia Commons の CC0 / Public Domain 写真のみを4〜5枚使用し、
  data URI で1ファイルに埋め込む（出典は本文に表示せず、HTMLコメントと
  meta.json の photo_sourcing に記録する）
- 被写体は「水」「肌のマクロ」「植物（逆光・光と影）」「ボトルに見立てられる
  静物（ガラスの器）」「光と影の抽象」の5系統を目安に選び、商品写真の
  代わりに質感と光で語らせる
- 写真の上に文字を重ねない。隣に置く（不透明な地の帯を挟むのは可。
  半透明スクリムや`backdrop-filter`は使わない）
- 全写真に共通の`filter: saturate(0.9) brightness(1.02)`でトーンを統一する
  （§9のコード参照）。個別に彩度や色相を変えて「作家性」を足さない

---

**色面×文字ペアの実測コントラスト（WCAG相対輝度比）— 両方向で確認済み**
```
ink        #23201c on bg        #f7f5f2  →  14.90 : 1   (本文・見出し)
text-weak  #6b6259 on bg        #f7f5f2  →   5.49 : 1   (弱文字)
ink        #23201c on bg-alt    #f0ece5  →  13.77 : 1
mauve-text #785f64 on bg        #f7f5f2  →   5.33 : 1   (モーヴを文字にする時)
sage-text  #566655 on bg        #f7f5f2  →   5.63 : 1   (セージを文字にする時)
offwhite   #f7f5f2 on bg-ink    #23201c  →  14.90 : 1   (締めセクション見出し)
weak-ink   #c9c2b8 on bg-ink    #23201c  →   9.18 : 1   (締めセクション弱文字)
mauve      #b7a4a8 on bg-ink    #23201c  →   6.87 : 1   (締めセクション上でモーヴを文字にする場合)
sage       #9aa89a on bg-ink    #23201c  →   6.52 : 1
ink        #23201c on mauve-fill #b7a4a8 →   6.87 : 1   (モーヴを面として使い、文字を乗せる場合)
ink        #23201c on sage-fill  #9aa89a →   6.52 : 1
--- 不合格につき「文字色として直接使わない」と確定した組み合わせ ---
mauve(base) #b7a4a8 on bg #f7f5f2 → 2.17 : 1   ✕ 文字には -text 版を使う
sage(base)  #9aa89a on bg #f7f5f2 → 2.29 : 1   ✕ 文字には -text 版を使う
```

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / Noto Sans をデフォルトで使わない（Jost / Zen Kaku
  Gothic New で組む）
- 紫〜青の装飾グラデーションを使わない。グラデーション全般（背景・文字・
  ボタン）を使わない
- box-shadow・backdrop-filter を使わない（影で奥行きを作らない。
  半透明スクリムでグラスモーフィズムを作らない）
- 「白背景＋パステル＋丸ゴシック＋ぷっくりボタン」の量産クリーンビューティー形を
  作らない。角丸は最小2px（ボタン・入力欄のみ）。**写真の角丸は常に0**
  （排他：写真にだけ`--radius-photo:0`を使い、他要素の`--radius`を写真に流用しない）
- アクセントのモーヴ・セージを**文字色として直接使わない**（本節直前の実測値の
  とおり、地に対して2.17:1・2.29:1でAA不合格。文字にする場合は`-text`濃色版を使う）
- パステルの多色使い（3色以上の淡い色を同一画面に併存させる）をしない。
  アクセントはモーヴ・セージの2色まで（排他リスト）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ボタンを2つ並置しない（CTAは「トライアルを試す」1本を軸に統一する）
- 3ステップ等の紹介を角丸カード×3列（アイコン＋見出し＋説明）にしない。
  番号＋写真＋説明の縦の流れで組む
- 顔写真アバター＋星5評価の均質なレビュー羅列を作らない。声の長さ・
  文体・満足度にばらつきを持たせる
- 統計数字のカウントアップ・自動カルーセル・マーキー・全要素均一0.6sフェードを
  使わない（モーション演出は§6の役割別ディレイに従う）
- 絵文字をアイコンとして使わない（矢印などの記号約物は可。アイコンが必要な
  場合は線幅1.4px統一の自作インラインSVG線画のみ）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f7f5f2;
  --color-bg-alt: #f0ece5;
  --color-bg-ink: #23201c;

  --color-ink: #23201c;
  --color-text-weak: #6b6259;
  --color-offwhite: #f7f5f2;
  --color-weak-on-ink: #c9c2b8;

  --color-mauve: #b7a4a8;       /* 面・細線専用 */
  --color-mauve-text: #785f64;  /* 文字にする時だけ（5.33:1） */
  --color-sage: #9aa89a;        /* 面・細線専用 */
  --color-sage-text: #566655;   /* 文字にする時だけ（5.63:1） */

  --color-line: #e5e1da;

  --font-latin: "Jost";
  --font-heading: "Zen Kaku Gothic New";
  --font-body: "Zen Kaku Gothic New";

  --space-unit: 8px;
  --radius: 2px;       /* ボタン・入力欄のみ */
  --radius-photo: 0;   /* 写真は常にこれ。排他で上書きしない */
  --max-width: 1320px;

  /* 写真トーン統一：全写真に一律適用。個別に変えない */
  --photo-filter: saturate(0.9) brightness(1.02);
}

body {
  font-family: var(--font-latin), var(--font-body), sans-serif;
  /* ↑ 英数字は自動でJost、和文は自動でZen Kaku Gothic Newにフォールバックする */
}

.photo {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-photo, 0); /* 常に0 */
  filter: var(--photo-filter);
}
```

```css
/* split-screen ヒーロー：中央寄せにしない。ボタン2つ並べない */
.hero {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: calc(100vh - 76px);
}
.hero-text { display: flex; flex-direction: column; justify-content: center; padding: 60px 56px 60px 40px; }
.hero-photo-frame { position: relative; overflow: hidden; }
.hero-photo-frame img { position: absolute; inset: 0; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo-frame { height: 62vh; }
}
```

```css
/* モーション：役割差＋階段ディレイ（均一0.6sフェード禁止） */
[data-role="lead"] {
  transform: scale(1.07); opacity: 0;
  transition: opacity 1.4s cubic-bezier(.16,1,.3,1), transform 1.6s cubic-bezier(.16,1,.3,1);
}
[data-role="lead"].is-visible { opacity: 1; transform: scale(1); }

[data-role="heading"] { transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
[data-role="body"]    { transform: translateY(12px); transition: opacity .55s ease-out, transform .55s ease-out; transition-delay: .16s; }
[data-role="cta"]     { transform: translateY(8px);  transition: opacity .5s ease-out,  transform .5s ease-out;  transition-delay: .3s; }
[data-role="heading"], [data-role="body"], [data-role="cta"] { opacity: 0; }
[data-role].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-role] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
```

```js
// IntersectionObserver で出現させる要素には必ず data-reveal を付ける。
// data-role="lead" の写真も data-reveal がないと永久に opacity:0 のまま
// （実装時に頻出するミス。ヒーローの写真だけは手動制御なので data-reveal 不要）
document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap`
- 写真は Wikimedia Commons の CC0 のみを採用し、出典を HTMLコメントに列挙する
  （表示ページ上には出典テキストを出さない。§7参照）