灯火の実直 Tanpin LP

DESIGN.md

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

https://3pt.co.jp/design-library/md/tanpin-lp/DESIGN.md

# DESIGN.md — 灯火の実直 / tanpin-lp

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

## 1. コンセプト

単品通販の縦長ランディングページ——最もAI slopが噴出する領域を、規律で作り直す。
「熱」と「誠実さ」を両立させる。煽らない。誇張しない。だが商品の魅力は
はっきり語る。ざくろの暖色を主役に、和文の太いゴシックと明朝のニュアンスを
混ぜ、数字は静止したまま大きく置く。動きは最小限、装飾は写真と余白で作る。

**キーワード**: 実直 / 温かさ / 静かな熱量 / 具体性 / 縦の物語
**この見た目が向く場面**: D2C単品通販・健康食品・化粧品・サブスクリプション訴求LP

## 2. タイポグラフィ

- 和文見出し: Zen Kaku Gothic New / ウェイト 900（大見出し）・700（節見出し）
- 和文見出しのニュアンス混植: Shippori Mincho / ウェイト 600〜800。**キャッチコピーの
  中で1〜2語だけ**明朝に切り替え、"手作りの手紙"のような温度を作る
  （例: 「一本に、<span class="mincho">巡り</span>をたたむ。」）。全文を明朝にしない。
  多用すると装飾になり効果が薄れるため、1見出しにつき最大1箇所
- 和文本文: Zen Kaku Gothic New / ウェイト 400 / サイズ 16px / 行間 1.9 / 字間 0.02em
  （通販LPは長文になりやすいので行間を広めにとり、詰まって見えても読みやすくする）
- 欧文・数字（成分量・価格・型番）: Archivo / ウェイト 700〜800。**必ずArchivoで組む。
  和文フォントの数字をそのまま使わない**（桁の存在感が出ない）
- 見出しスケール: h1 44px（モバイル 32px）/ h2 30px（モバイル 24px）/ h3 20px /
  価格などの巨大数字 56px（Archivo 800）
- 特記: キャッチコピーは断定・具体語で短く。「〜を、もっと。」「シームレスな体験」等の
  空虚コピーを書かない。数字・固有名詞・分量を必ず入れる

## 3. カラー

温かい生成り地に、ざくろ・芥子・深緑の3色を**役割固定**で使う「信号色トリオ回避」設計。
3色とも暖色〜中間色でまとめ、赤黄緑を装飾として無意味に共存させない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #faf3ea | 55% |
| 背景（節替え・芥子） | #f6e9cf | — |
| 背景（節替え・緑） | #e9efe4 | — |
| テキスト（主・茶墨） | #2e2620 | 30% |
| テキスト（弱） | #6b5c4f | — |
| ざくろ（CTA・情熱） | #b5322f | 8% |
| ざくろ（ホバー・濃） | #9c2b28 | — |
| 芥子（数値強調の装飾のみ） | #d99a2b | 4% |
| 深緑（成分・安心） | #40613f | 3% |
| 罫線（装飾・非機能） | #e3d5bd | — |
| 罫線（機能・input/button境界） | #8a7960 | — |

- **色の役割固定（排他）**: ざくろ＝CTAボタン・見出し中の1語・価格の強調のみ。
  芥子＝成分数値のチップ背景・小さな下線マーカーのみ（**文字色として生成り地に
  直接使わない**——芥子 #d99a2b は生成り #faf3ea 上で実測 2.22:1 しかなくAA未達。
  芥子を文字として使う場合は必ず濃い地（#2e2620 等）の上に置く。詳細は§8直前の
  実測表を参照）。深緑＝成分・安心に関わる語のみ。3色を同一パーツに同時に使わない
- 純白 #ffffff・純黒 #000000 を地色に使わない。紫〜青を一切足さない
- **信号色トリオの装飾利用を避ける**: 赤黄緑がすべて画面内に存在するが、
  それぞれ「CTA」「数値チップ」「成分」という機能に固定されているため、
  無意味な装飾トリオ（バッジの色分け等）としては使わない

### コントラスト実測一覧（WCAG 2.1・両方向）

すべて実装前に計算済み。新しい組み合わせを追加する場合は必ず同様に実測し、
本表を更新すること。4.5:1未満は本文に使用禁止（見出し級の大きい文字でも3:1未満は不可）。

```
ink       #2e2620 on bg        #faf3ea  → 13.49:1  OK（本文）
ink-weak  #6b5c4f on bg        #faf3ea  →  5.83:1  OK（弱文字）
ink-weak  #6b5c4f on bg-karashi #f6e9cf →  5.35:1  OK
ink-weak  #6b5c4f on bg-midori  #e9efe4 →  5.49:1  OK
zakuro    #b5322f on bg        #faf3ea  →  5.51:1  OK（本文中の強調語として可）
zakuro    #b5322f on bg-karashi #f6e9cf →  5.05:1  OK
zakuro    #b5322f on bg-midori  #e9efe4 →  5.18:1  OK
fukamidori #40613f on bg       #faf3ea  →  6.36:1  OK
fukamidori #40613f on bg-karashi #f6e9cf → 5.83:1  OK
fukamidori #40613f on bg-midori  #e9efe4 → 5.98:1  OK
cream     #faf3ea on zakuro    #b5322f  →  5.51:1  OK（CTAボタン文字）
cream     #faf3ea on zakuro-deep #9c2b28 → 6.84:1  OK（ボタンhover文字）
cream     #faf3ea on ink       #2e2620  → 13.49:1  OK（申込セクション・フッター文字）
ink       #2e2620 on karashi   #d99a2b  →  6.09:1  OK（芥子チップの上の文字はこの向きのみ許可）
karashi   #d99a2b on ink       #2e2620  →  6.09:1  OK（濃地の上でのみ芥子を文字色にできる）
cream     #faf3ea on zakuro-field(全面) #b5322f → 5.51:1 OK（申込セクションの本文文字。
                                                    このセクションでは弱文字色を使わず、
                                                    階層は級数のみで作る。理由は下記NGの通り）
--- 不可（使用しない組み合わせ）---
karashi   #d99a2b on bg        #faf3ea  →  2.22:1  NG（生成り地に芥子文字は禁止）
zakuro    #b5322f on fukamidori #40613f → 1.15:1  NG（ざくろ×深緑を隣接同時使用しない）
ink-weak  #6b5c4f on zakuro-field #b5322f → 1.06:1 NG（ざくろ全面の上に弱文字色を
                                                    使わない。ざくろ地の上は必ず
                                                    cream #faf3ea を使う）
```

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

- コンテンツ最大幅（テキスト計測）: 680px / **一本道の縦積み（single-column）**。
  ヒーロー・写真ブロックのみフルブリード（画面幅いっぱい）にしてよい
- セクション間余白: 上下 88px 基準（モバイル 56px）/ 要素間は 8px の倍数。
  「dense」を狙うため段落・数値行の行間は詰めるが、**節と節の切れ目だけは
  はっきり空ける**（地色の切り替えで区切りを作るため、余白よりも色替えで
  リズムを出す）
- 節ごとに地色を替える: 生成り → 淡芥子 → 淡緑 → 生成り …の順で反復し、
  「今どの話をしているか」を色で示す（悩み＝淡芥子、成分＝淡緑、等の対応は
  §5参照）
- **最終の申込セクションのみ、ざくろ #b5322f を全面（フルブリード）の地色に使う。**
  これは§3で許可した「ビビッド色を面のベタで使う」用法の唯一の適用箇所（他の節では
  ざくろを点・CTAにしか使わない）。文字はすべて cream #faf3ea を使い、弱文字色
  （#6b5c4f）はざくろ地の上では使わない（実測1.06:1でNG。§3実測表参照）。
  階層は文字サイズのみで作る
- ヒーローの構成: **中央特大見出し＋ボタン2つの定型を作らない。**
  非対称2カラム（モバイルは縦積み）: 左＝商品ビジュアル（SVGボトル線画）、
  右＝見出し・一番の便益一文・価格要点・CTA1つ。ボタンは常に1つだけ
- 「3つの選ばれる理由」角丸カード横並びは**使わない**（§8参照）。代替として
  ①番号付き縦の物語（悩みへの共感・成分セクションで使用）②左右交互の図解
  （飲用シーンセクションで使用）の2型を使い分ける

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

- ヘッダー・ナビゲーション: 地色と同じ生成り・下部1px罫線（#e3d5bd）のみで区切る。
  ナビリンクは本文と同じ茶墨色、ホバーでざくろ色に変化＋下線（下線は常時ではなく
  ホバー時のみ）。ロゴ「灯」は Shippori Mincho 800・22px
- 角丸: ボタンのみ 4px（角丸カードは作らない）/ 影: 使わない
  （box-shadow は一切使用しない。立体感は罫線と地色替えのみで作る）/
  境界線: 機能的境界（input・button・アコーディオン）は 1px solid #8a7960、
  装飾的な区切り線は 1px solid #e3d5bd
- ボタン（主CTA）: ざくろ地 #b5322f・生成り文字・角丸4px・太字。
  ホバーで #9c2b28 に沈む（0.15s ease、拡大や影は付けない）。**グラデーションを
  絶対に使わない**。1画面に主CTAは常に1個（フォーム直前を除く）
- 成分の数値表示: **カウントアップさせない。** 静止した大きな級数（Archivo 800・
  40〜56px）＋単位＋根拠一文、を1行として縦に積む（詳細コードは§9）
- 「実際の声」: 顔写真アバター＋星5の均質な羅列を**使わない**。3人それぞれ
  文字量・インデント・引用符の大きさを変え、属性（年代・職業カテゴリのみの
  概略表記）を明朝の小さな添え書きで示す。星評価コンポーネントを作らない
- 飲用シーン（左右交互パネル）: 写真/イラストと文章を交互に配置。カード化せず、
  1px罫線で節を区切るのみ（角丸・影なし）
- FAQ: `<details><summary>` のネイティブ・アコーディオンで実装（JS不要）。
  開閉インジケータは自作の「＋/－」ではなく、回転する短い罫線（線画）で表現
- フォーム/申込ボタン: 入力欄は使わず、外部フォームへの遷移CTAのみを置く
  （デモではリンク先を `#` とする）。ボタン仕様はCTAと同一
- 画像の扱い: 角丸なし・枠なし・影なし。フルブリード（100vw）または
  テキストカラム幅ぴったりのどちらか。フィルタは彩度を落とさない
  （商品の「素材そのままの誠実さ」を守るため補正しすぎない）
- アクセント色の適用範囲: §3の役割固定表に限定。ざくろをナビ通常リンクや
  本文の地に使わない。芥子を地の背景（面）に使わない（チップの小面積のみ）

## 6. モーション

- 量: subtle。**役割差フェードのみ**（主役の見出しは 0.5s・遅延あり、
  脇役の本文/写真は 0.3s・遅延なし、という具合に「間」で差をつける）
- 実装: `IntersectionObserver` でクラス付与→CSS `opacity`/`translateY(12px)` の
  フェードのみ。`requestAnimationFrame` や `setInterval` を使った数値の
  書き換えは一切行わない
- CTAボタンはホバーで背景色が沈む（0.15s）のみ。拡大・浮き上がり・影の出現は
  させない
- 下部固定の申込バー（スティッキーCTA）は、ヒーローを過ぎたら**フェードで
  現れる**（0.25s、位置は動かさない。スライドインさせない）
- `prefers-reduced-motion: reduce` で全フェードを無効化し、要素は初期状態から
  即座に final 状態で表示する
- **禁止**: カウントアップ、自動カルーセル、点滅する限定バッジ/タイマー、
  マーキー、パララックス、バウンス、拡大縮小するホバー

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

**本文中に実写の原料写真を最低1点、必ず含めること。** 全ページを自作SVG線画のみで
構成することを許可しない（許可されるのは「商品写真」＝ボトル/パッケージのみ実写禁止、
という限定的な禁止である。原料・素材の写真までSVGに置き換えてはならない）。

- 商品写真: 実写を使わず、**自作インラインSVGのボトル線画**で表現する
  （罫線幅を統一、ざくろ色の液面のみ着色、他は線画）。ラベルに「灯 TOMOSHI」
  の文字を配置してよい
- 原料写真: （**必須要素**。商品カテゴリに応じた主要原料の写真を最低1点配置する）
  Wikimedia CommonsのCC0/Public Domain写真のみを使用し、
  data URIでHTMLに埋め込む。出典はHTMLコメントと`meta.json`の
  `photo_sourcing`に記録する。写真には「※写真はイメージです」の注記を添える
  （実在商品ではなく架空デモのため、誠実な通販表示の作法として明記する）
- アイコン: 絵文字・既製アイコンセットを使わない。自作インラインSVG線画
  （線幅 1.5px、角は丸めすぎない）のみ。時計・湯船・洗面台などは簡易な線画で表現

## 8. 禁止事項（must not）— このテイスト最厳格セクション

<!-- tanpin-lpは全パターン中もっともAI slopが噴出する領域。
     各禁止に「代替の型（オリジナリティの一手）」を必ず併記する -->

### 汎用の禁止（全パターン共通）
1. Inter / Roboto / Arial / system-ui をデフォルトで使わない
   （Zen Kaku Gothic New / Shippori Mincho / Archivo で組む）
2. 紫〜青のグラデーションを含む、あらゆるグラデーションを使わない
   （背景・文字・ボタンすべて単色の面で構成する）
3. グラスモーフィズム（`backdrop-filter: blur`＋半透明白）を使わない
4. 絵文字をアイコンとして使わない（自作インラインSVG線画のみ）
5. 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない

### tanpin-lp固有の禁止（通販LPのslop罠。全て名指しで禁止）
6. **統計数字のカウントアップ**（0→数値がカタカタ上がる演出）を使わない。
   → 一手: 成分量は静止の大きな級数（Archivo 800）＋単位＋根拠一文で置く（§5）
7. **before/afterのビジュアル比較**（写真の左右比較スライダー・並置）を使わない。
   → 一手: 体験を言葉で語る（「悩みへの共感」セクションの具体的な情景描写と、
   「実際の声」の一人称の言葉で変化を示す。画像の加工比較は行わない）
8. **「3つの選ばれる理由」角丸カード横並び**を使わない。
   → 一手: 番号付きの縦の物語（悩みへの共感・成分）、または左右交互の図解
   （飲用シーン）に置換する（§4・§9のコード例参照）
9. **顔写真アバター＋星5の均質な「お客様の声」**を使わない。
   → 一手: 3人の声を文字量・インデント・引用符の大きさで意図的に不揃いにし、
   年代・職業カテゴリのみを明朝の小さな添え書きで示す。星コンポーネントを
   一切実装しない
10. **赤い煽りバッジ・蛍光の「限定」「今だけ」バッジ**を使わない。
    → 一手: 価格の条件（初回価格・2回目以降価格・お届け周期・解約条件）を
    表形式の静止テキストで明快に書く。緊急性は言葉でも煽らない
    （「今すぐ」「急いで」等の煽り語を使わない）
11. **点滅・カウントダウンする「限定タイマー」**を一切使わない。
    → 一手: 在庫や期限を煽らない。申込の障壁（回数縛りの有無・解約方法）を
    先回りして明記することで安心を作る、という逆方向の説得力で置換する
12. **「＼今だけ／」的な吹き出し・強調記号の乱発**を使わない。
    → 一手: 強調は級数（文字サイズ）とざくろ色の1語適用のみで行う。
    記号装飾（★☆♪＼／等）を一切使わない
13. **グラデーションのCTAボタン**（発光・虹色・光沢ハイライト）を使わない。
    → 一手: ざくろ単色の塗り＋生成り文字。ホバーで単色のまま暗く沈むのみ（§5・§6）
14. **ダミー統計の無出典表示**（"10,000人が選んだ" 等を根拠なく）を使わない。
    → 一手: 数字を出す場合は必ず条件・出典を隣接する1文で添える
    （§7成分セクションの実装が該当。本デモでは実在の販売実績数値を持たないため、
    購入者数のような検証不能な統計そのものを使用しない）
15. **信号色トリオ（赤黄緑）の無意味な装飾共存**を使わない。
    → 一手: ざくろ・芥子・深緑は各々「CTA」「数値チップ」「成分」に役割固定し
    (§3)、バッジの色分けのような無意味な多色化をしない
16. **実写を1点も含めずSVGのみで全ページを構成すること**を使わない
    （「商品写真＝ボトル/パッケージは実写禁止」というルールを拡大解釈して
    原料・素材の写真まで自作SVGに置き換えるのは誤り。実写禁止の対象は
    商品写真のみで、原料写真は§7の通り実写必須である）。
    → 一手: 原料写真は§7の指定どおりCC0/Public Domainの実写をdata URIで
    最低1点埋め込む。商品（ボトル/パッケージ）だけを自作インラインSVG線画にする

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #faf3ea;
  --color-bg-karashi: #f6e9cf;
  --color-bg-midori: #e9efe4;
  --color-ink: #2e2620;
  --color-ink-weak: #6b5c4f;
  --color-cream: #faf3ea;
  --color-zakuro: #b5322f;
  --color-zakuro-deep: #9c2b28;
  --color-karashi: #d99a2b;
  --color-fukamidori: #40613f;
  --color-line: #e3d5bd;       /* 装飾・非機能の罫線 */
  --color-line-strong: #8a7960; /* 機能的境界（input/button/accordion）*/
  /* 変数には総称ファミリ(sans-serif)を含めないこと */
  --font-heading: "Zen Kaku Gothic New";
  --font-mincho: "Shippori Mincho";
  --font-body: "Zen Kaku Gothic New";
  --font-num: "Archivo";
  --space-unit: 8px;
  --radius: 4px;   /* ボタンのみ。カードには使わない */
  --max-width: 680px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&family=Shippori+Mincho:wght@400;600;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap`
- 数値・価格は必ず `font-family: var(--font-num), var(--font-heading), sans-serif;`
  で組む（和文フォントの数字を流用しない）

### 成分の数値表示（カウントアップ禁止の代替パターン）

```html
<div class="spec-row">
  <p class="spec-num"><span class="num">5,000</span><span class="spec-unit">mg</span></p>
  <div class="spec-body">
    <h3 class="spec-name">コラーゲンペプチド（魚由来・国内加工）</h3>
    <p class="spec-note">分子量を低分子化した魚由来ペプチドを使用。1日の摂取目安に関する
    統一的な公的基準はないため、本品は含有量の実測値のみを記載します。</p>
  </div>
</div>
```

```css
.spec-num {
  font-family: var(--font-num), var(--font-heading), sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: var(--color-ink);
  line-height: 1;
}
.spec-unit { font-size: 18px; margin-left: 4px; color: var(--color-ink-weak); }
```

### 番号付き縦の物語（3カード横並びの代替・悩み/成分セクションで使用）

```html
<ol class="story-list">
  <li class="story-item">
    <span class="story-no">01</span>
    <p class="story-text">鏡を見て、肌の乾きが気になる日が増えた。</p>
  </li>
  <!-- 02, 03 も同型で続ける -->
</ol>
```

```css
.story-list { list-style: none; }
.story-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--color-line);
}
.story-no {
  font-family: var(--font-num), sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--color-zakuro);
}
```

### 左右交互パネル（3カード横並びの代替・飲用シーンで使用）

```css
.scene-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.scene-panel:nth-child(even) { direction: rtl; } /* 交互反転 */
.scene-panel:nth-child(even) > * { direction: ltr; }
@media (max-width: 640px) {
  .scene-panel, .scene-panel:nth-child(even) { direction: ltr; grid-template-columns: 1fr; }
}
```

### 見出し中の明朝混植（1語だけ）

```html
<h1 class="hero-title">一本に、<span class="mincho-accent">巡り</span>をたたむ。</h1>
```

```css
.hero-title { font-family: var(--font-heading), sans-serif; font-weight: 900; }
.mincho-accent { font-family: var(--font-mincho), serif; font-weight: 800; }
```

### CTAボタン（グラデーション禁止・単色沈み込みのみ）

```css
.cta-button {
  display: inline-block;
  background: var(--color-zakuro);
  color: var(--color-cream);
  font-weight: 700;
  padding: 16px 32px;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.cta-button:hover { background: var(--color-zakuro-deep); }
@media (prefers-reduced-motion: reduce) {
  .cta-button { transition: none; }
}
```

### 役割差フェード（均一0.6sフェードの代替）

```css
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-hero { transition-duration: 0.5s; transition-delay: 0.1s; } /* 主役は遅く長く */
.reveal-sub  { transition-duration: 0.25s; transition-delay: 0s; }  /* 脇役は短く */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
```