---
version: alpha
name: Soft Pastel Scene-Based Stationery Usecase LP
description: 白地を基本に、場面ごとにくすみパステル（セージ・ピンク・水色・クリーム・ラベンダー）を割り当てた活用事例型LP。波形の帯見出し、細い斜線の下線、角丸の枠囲み吹き出しで現場の声を添え、後半は白カードで製品を並べる。
colors:
  primary: '#8DA58F'
  background: '#FDFDFD'
  tint-1: '#E7F1E9'
  tint-2: '#FBF2F5'
  secondary: '#D48C9E'
  accent-1: '#8FB7C8'
  accent-2: '#CDB46E'
  accent-3: '#EB964B'
  background-alt: '#FAF4E4'
  surface: '#EEF2F5'
  cta: '#848586'
  on-cta: '#F9FAFB'
  marker: '#5382BC'
  text: '#2B2523'
  marker-accessible: '#4575B1'
  cta-accessible: '#727374'
  secondary-accessible: '#BC4D69'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Oswald
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.1
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.85
    letterSpacing: 0.02em
  accent:
    fontFamily: Caveat
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 10px
  lg: 14px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  scene-band:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 80px
  teacher-comment:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.md}'
    height: 120px
  heading-stripe:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  tag-badge:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    height: 16px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 28px
  ranking-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 200px
  product-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 560px
  slash-heading:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 30px
  speech-pill:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 32px
---

# DESIGN.md — くすみパステルで場面を色分けする文具活用LP（Soft Pastel Scene-Based Stationery Usecase LP）

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

## Overview

- **業種**: 家電・ガジェット ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型
- **キーワード**: くすみパステル・場面別の色分け・波形の帯・斜線の下線・現場の声・白カード
- **地の質感**: フラットな単色面。紙のような生成り地と細い斜線・ドット柄を少量添える
- **形**: 角丸の枠線ボックスとピル型ボタン、セクション帯の下端は波形
- **温度感**: ややあたたかい中間色。白地が多く明るい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#8DA58F` | シーン1の帯・先生コメント枠の色（セージグリーン） | 2% | 推定 |
| `background` | `#FDFDFD` | ページの地 | 44% | 画素の実測 |
| `tint-1` | `#E7F1E9` | シーン1の帯・絵文字見本の面 | 4% | 画素の実測 |
| `tint-2` | `#FBF2F5` | シーン2の帯・ピンク地のセクション | 5% | 画素の実測 |
| `secondary` | `#D48C9E` | シーン2の見出し強調・コメント枠（くすみピンク） | 2% | 推定 |
| `accent-1` | `#8FB7C8` | シーン3の強調色（くすみ水色） | 1% | 推定 |
| `accent-2` | `#CDB46E` | シーン4の強調色（マスタード） | 1% | 推定 |
| `accent-3` | `#EB964B` | 活用術・製品見出しのオレンジ | 2% | 画素の実測 |
| `background-alt` | `#FAF4E4` | 活用術の生成り地・帯 | 6% | 画素の実測 |
| `surface` | `#EEF2F5` | 悩み提起ボックスの淡いグレー | 2% | 画素の実測 |
| `cta` | `#848586` | 詳細ボタンのグレー | 2% | 画素の実測 |
| `on-cta` | `#F9FAFB` | ボタン上の白文字 | 0% | 画素の実測 |
| `marker` | `#5382BC` | 掲載タグの青 | 0% | 画素の実測 |
| `text` | `#2B2523` | 見出し・本文の墨色 | 4% | 推定 |
| `marker-accessible` | `#4575B1` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#727374` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#BC4D69` | AA を満たす補正値（計算） |  | 計算 |

- 地は白が基本。各シーンに1色のくすみパステルを割り当てる
- シーン色は帯の面・見出しの強調語・コメント枠線とラベルの3か所に統一して使う
- 帯の面はシーン色の10%前後の淡色、枠線は彩度を落とした中間色
- オレンジは活用術と製品紹介の見出しにだけ使う
- ボタンはグレーで控えめにし、写真の色を邪魔しない
- 掲載タグなど小さな記号だけ青で目立たせる
- `tag-badge` は文字 `#F9FAFB` × 背景 `#5382BC` のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#4575B1`、4.53:1）を使う。
- `button-primary` は文字 `#F9FAFB` × 背景 `#848586` のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#727374`、4.55:1）を使う。
- `speech-pill` は文字 `#F9FAFB` × 背景 `#D48C9E` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#BC4D69`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.45 | 0.04em |
| `headline-lg` | シーン番号 | 欧文サンセリフ | Oswald | 600 | 26px | 1.1 | 0.0em |
| `headline-md` | シーン名・セクション見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.04em |
| `headline-sm` | 事例の小見出し（2行・強調語に色） | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em |
| `body-lg` | 先生コメント本文（太字） | ゴシック | Noto Sans JP | 700 | 12px | 1.85 | 0.02em |
| `accent` | シーン番号上の筆記体ラベル | 欧文スクリプト | Caveat | 400 | 14px | 1.2 | 0.02em |
| `note` | 使用素材の注記・キャプション | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em |

- 見出しは太ゴシック、強調する語だけシーン色にする
- シーン番号は縦長の欧文の太字。上に小さな手書き風の英字と二重線を添える
- 本文は小さめでも行間1.8を保つ
- コメントは本文より少し大きい太字にして読ませる
- キャプションは右寄せの小さな文字にし、末尾に丸い矢印アイコンを付ける
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、写真は2枚並びもある
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- シーンは番号・帯・事例の繰り返しで作る
- 1つの事例は小見出し・斜線・本文・タグ・コメント・写真の順に並べる
- 写真の背面にはシーン色の淡い四角を少しずらして敷く
- 製品カードは白地に細いグレー枠で縦に並べる
- 1位から3位のランキングは罫線で区切った行にする

## Elevation & Depth

- 影はほぼ使わず、線と色面で階層を作る
- 写真の後ろにずらした淡色の面を敷いて浮いているように見せる
- おすすめ製品カードだけ二重のオレンジ枠で強調する

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
- **写真の切り抜き**: 角のない長方形。部分拡大は円形に切り抜いて写真に重ねる
- **セクション境界**: シーン帯の下端を細かい波形にする
- コメント枠は角丸10pxで2px線。左上にピル型のラベルを重ねる
- 見出しの下線は細い斜線ストライプにする
- 活用術は二重の細線で額縁のように囲む
- ボタンはピル型で横幅いっぱいに広げる

## Components

- **シーン帯**（`scene-band`）: 筆記体の英字、二重線、大きな番号、淡色帯のシーン名、波形の下端
- **先生コメント枠**（`teacher-comment`）: シーン色の線で囲んだ角丸枠。左上にピル型ラベルと小さな飾り線を付ける
- **斜線下線つき小見出し**（`heading-stripe`）: 2行の太字見出しの下に細い斜線の帯を引く
- **掲載タグ**（`tag-badge`）: 青い四角に白い小さな文字
- **詳細ボタン**（`button-primary`）: グレーのピル型ボタン。中央に白い太字
- **悩みランキング**（`ranking-list`）: 淡いグレーの角丸ボックス。番号と短い項目を罫線で区切って3行並べる
- **製品カード**（`product-card`）: 白地に細い枠。製品写真、オレンジのキャッチ、品名、スペック、ボタンの順
- **斜線で挟んだ見出し**（`slash-heading`）: 見出しを左右の斜線で挟む。見本のボックスに使う
- **吹き出しピル**（`speech-pill`）: ピンクのピル型で下に三角を付け、セクションの導入に使う

## Do's and Don'ts

**Do**
- シーンごとに1色を決め、帯・強調語・コメント枠をその色でそろえる
- 事例は必ず写真と現場の声をセットで見せる
- 写真の下に使用素材を右寄せの小さな注記で添える
- 比較はBefore/Afterのラベルを付けて2枚を並べる
- 余白を広めにとり、白地を主役にする

**Don't**
- 原色や濃いグラデーションの面を使わない
- ボタンを派手な色にしない
- コメント枠に影や立体効果を付けない
- シーン色を1つの事例の中で混ぜない
- 太い明朝や装飾の強いフォントを見出しに使わない

## Page Structure

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

1. **ファーストビュー**（テーマと実用性を伝える）: 生成り地に黒い細枠。ドット装飾と旗形のリボン見出し、太字2行タイトル、使用写真3枚を散らして配置
2. **悩みの提起**（現場の課題をランキングで示す）: 淡いグレーの角丸ボックスに、導入文と1〜3位の罫線リストを入れる
3. **導入**（製品と活用術への橋渡し）: 製品の切り抜き写真と中央寄せの見出し。マーカーを引いた強調語と下向きの矢印
4. **シーン01〜03**（場所ごとの使い方を見せる）: シーン帯の後に、写真・小見出し・本文・コメント枠の事例を繰り返す。シーンごとに色を変える
5. **シーン04〜05**（職員室と連絡の使い方）: マスタードやラベンダーの色で同じ構成。Before/Afterの比較とおすすめデザインのボックス
6. **特別な活用術**（イベントでの使い方を提案）: 生成り地に二重線の額縁を置き、オレンジの見出しとリボン例を並べる
7. **製品ラインナップ**（機種を比べて選んでもらう）: 白カードを縦に並べ、おすすめの1台はオレンジの二重枠とバナーで強調
8. **消耗品の紹介**（用途別の素材を紹介）: 青いキャッチ、品名、パッケージ写真、おすすめの使い道の箇条書き、ボタン
9. **ダウンロード誘導**（外部サイトへ送る）: 淡いピンク地に吹き出しピルとサイトの画面キャプチャ、大きなグレーのボタン
10. **フッター**（企業ロゴと著作権の表示）: 白地の中央にロゴと小さな文字。右下にページ上部へ戻る丸ボタン

## Imagery

- 自然光で明るく撮った実写の使用シーン。手元のアップと貼った後の状態を見せる
- 背景は白い棚や木の床など生活感のある明るい場所
- 拡大したい部分は円形に切り抜き、シーン色の枠で重ねる
- モノクロの線画アイコンやイラスト見本をタイル状に並べる
- 製品は白背景の切り抜き写真
- 飾りはドット、斜線の円、小さな線の放射を控えめに置く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは本文の幅を約70%に絞って中央に寄せる
- PCでは事例を写真とテキストの左右2カラムにし、左右を交互に入れ替える
- PCのヘッダーにはシーン番号のナビとオレンジの購入ボタンを並べる
- PCのFVは横長の枠にし、写真を左右に散らす
- 製品カードは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-c9f85afc`（元 LP の URL から採番）
- **元 LP**: https://www.kingjim.co.jp/sp/tepra_kindergarten/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。