---
version: alpha
name: Pastel Color-Coded Safety Awareness LP
description: 生成り地に、テーマごとに色を変えたパステル帯（水色・ミント・ベージュ・ピンク）を並べた啓発 LP。白いカード、Point 番号の丸、黄色マーカー、アニメ調の動画サムネで、やさしく親しみやすいまま注意を促す。
colors:
  background: '#F8F7F5'
  surface: '#FEFFFE'
  primary: '#3B7BD3'
  tint-1: '#D7EDFA'
  secondary: '#3BB3AC'
  tint-2: '#C3E6E2'
  accent-1: '#F5AC12'
  background-alt: '#F8E7CB'
  accent-2: '#FC7D9B'
  accent-3: '#FCEBF1'
  marker: '#FCE85A'
  text: '#1D1D1C'
  line: '#DFF0F9'
  dark-section: '#1E1E1E'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.02em
  label-button:
    fontFamily: Montserrat
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.04em
rounded:
  sm: 6px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-icon:
    backgroundColor: '{colors.marker}'
    rounded: '{rounded.full}'
    height: 44px
  video-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 340px
  duration-tab:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 30px
  point-badge:
    backgroundColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  tips-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 600px
  outline-note-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 200px
  marker-text:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 18px
  speech-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 80px
  summary-frame:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 220px
---

# DESIGN.md — パステル色分けの注意喚起啓発 LP（Pastel Color-Coded Safety Awareness LP）

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

## Overview

- **業種**: 自治体・公共・団体 ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: テーマ別パステル色分け・黄色マーカー強調・白カード・Point番号丸・アウトライン英字透かし・黄黒の警告ストライプ
- **地の質感**: ベタ塗りの平面。斜線ストライプのヘッダー帯と、アウトライン英字の透かしが少し入る
- **形**: 角丸カード、正円の番号バッジ、半円の黄色い装飾、波線のセクション境界
- **温度感**: 暖かめで明るい。警告の話題でも怖がらせすぎない

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F8F7F5` | ページ地（生成り） | 20% | 画素の実測 |
| `surface` | `#FEFFFE` | カード・コンテンツ面 | 45% | 画素の実測 |
| `primary` | `#3B7BD3` | 見出しアクセント（青・第1テーマ） | 2% | 画素の実測 |
| `tint-1` | `#D7EDFA` | 第1テーマ帯（水色） | 5% | 画素の実測 |
| `secondary` | `#3BB3AC` | 第2テーマ色（ティール） | 2% | 画素の実測 |
| `tint-2` | `#C3E6E2` | 第2テーマ帯（ミント） | 6% | 画素の実測 |
| `accent-1` | `#F5AC12` | 第3テーマ色（オレンジ） | 2% | 画素の実測 |
| `background-alt` | `#F8E7CB` | 第3テーマ帯（ベージュ） | 5% | 画素の実測 |
| `accent-2` | `#FC7D9B` | 第4テーマ色（ピンク） | 1% | 画素の実測 |
| `accent-3` | `#FCEBF1` | 第4テーマ帯（淡ピンク） | 4% | 画素の実測 |
| `marker` | `#FCE85A` | 重要文の黄色マーカー・装飾円 | 2% | 推定 |
| `text` | `#1D1D1C` | 見出し・本文 | 3% | 画素の実測 |
| `line` | `#DFF0F9` | カードの淡い枠線 | 1% | 画素の主要色に補正 |
| `dark-section` | `#1E1E1E` | 警告ストライプの黒 | 0% | 推定 |

- 地は生成りと白の 2 色で、各テーマ章の冒頭だけ横幅いっぱいのパステル帯を敷く
- 章ごとに 1 色のテーマ色（青・ティール・オレンジ・ピンク）を決め、見出し・番号丸・枠線・タブボタンをその色でそろえる
- 1 つの章に別のテーマ色を混ぜない
- 最重要の一文には黄色マーカーを引く。濃い色の地は使わない
- 黄黒の斜線ストライプは注意喚起のアクセントとしてファーストビューだけで使う
- 黄色の円や菱形の装飾を散らして明るさを足す

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのメインコピー | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.35 | 0.04em |
| `headline-lg` | 章見出し（問いかけ型） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.04em |
| `headline-md` | 動画カードのタイトル（テーマ色） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em |
| `headline-sm` | Point 見出し・カード帯見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.03em |
| `body-md` | 本文・箇条書き | ゴシック | Noto Sans JP | 400 | 13px | 1.85 | 0.03em |
| `note` | 補足・著作権表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 背景の英字透かし（アウトライン） | 欧文サンセリフ | Montserrat | 300 | 56px | 1.0 | 0.02em |
| `label-button` | 秒数タブ・Point ラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.0 | 0.04em |

- 見出しはすべて中央揃えの太ゴシックで、問いかけや感嘆の語調にする
- 本文は中央揃えの短い行、カードの中は左揃え
- テーマ色の見出しはその章の色だけを使う
- 英字の透かしは白か淡い線の細字で、帯の右側にはみ出させる
- 強調は太字にせず、黄色マーカーで行う
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（PC は中央約 56% 幅の 1 カラム）
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 章は「アイコン丸→見出し→導入文→白い動画カード→対策カード」の順で繰り返す
- 白い動画カードはパステル帯にかかるよう上に重ね、帯から浮かせる
- Point カードは左に番号丸、右に見出しと本文を置く
- 対策カードの上端に、斜線ストライプのタイトル帯を付ける
- 図版は角丸枠に入れ、右下に拡大アイコンを付ける

## Elevation & Depth

- 基本はフラットで影なし
- カードはテーマ色の 1〜2px 枠線、または淡い枠線で区切る
- 動画カードは白い面を帯に重ねて奥行きを出す

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物写真は円形に切り抜くか、大きな円弧で切る。図版は角丸の四角
- **セクション境界**: ファーストビューの下は波線。章の帯は直線の横帯
- Point 番号は正円で塗りつぶす
- 秒数タブは角丸の小さなボタン
- ファーストビューの見出しを黄黒の斜線ストライプで上下から挟む
- 黄色の大きな半円を背景の装飾に使う

## Components

- **章アイコン丸**（`section-icon`）: 黄色い円の中に人物イラスト。章見出しの上に中央配置
- **動画カード**（`video-card`）: 白い面にアイコン付きの小見出し、テーマ色の見出し、秒数タブ、16:9 の動画を置く
- **秒数タブ**（`duration-tab`）: テーマ色で塗った小さな角丸ボタンを 3 つ横に並べる
- **Point 番号丸**（`point-badge`）: テーマ色の正円の中に「Point」と 2 桁の番号を白抜きで入れる
- **対策まとめカード**（`tips-card`）: 斜線ストライプのタイトル帯が付いた、淡い枠線の角丸カード
- **テーマ色枠の解説カード**（`outline-note-card`）: テーマ色の 2px 枠で囲んだ角丸カード。テーマ色の見出しと箇条書きを入れる
- **黄色マーカー**（`marker-text`）: 重要な一文の下半分に黄色の帯を敷く
- **吹き出し**（`speech-bubble`）: 円形の人物写真の横に置く、黄色い枠の楕円の吹き出し
- **まとめ枠**（`summary-frame`）: 黄色の太枠で囲んだ白い四角。背景に大きな淡黄の円を置く

## Do's and Don'ts

**Do**
- 章ごとにテーマ色を 1 色決め、帯・見出し・番号・枠を統一する
- 重要な一文は黄色マーカーで示す
- 説明は Point 番号付きで分解し、短い箇条書きにする
- アニメ調のイラストや動画で親しみやすくする
- 帯の右側にアウトライン英字の透かしを入れる

**Don't**
- 原色の赤や黒い面で恐怖をあおらない
- 1 つの章に複数のテーマ色を混ぜない
- カードに濃い影を付けない
- 本文を太字で埋めない
- ボタンをピル型や大きな CTA にしない（啓発目的のため）

## Page Structure

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

1. **ファーストビュー**（テーマの提示と注意喚起）: 左に黄黒ストライプで挟んだ太字コピー、右に円弧で切った人物写真。黄色の半円とイラストを添える
2. **悩みの提起**（自分事化させる）: 黄枠の白カードに、円形の人物写真と油断を表す吹き出し。下にぶら下がるアイコンと逆説の見出し
3. **テーマ1 解説**（手口を知らせる）: 水色の帯、アイコン丸、マーカー付きの導入文、動画カードの順
4. **テーマ1 対策**（具体的な防ぎ方）: ストライプのタイトル帯付きカードに、青の Point 01〜03 と図版
5. **テーマ2 解説と確認ポイント**（確認の習慣づけ）: ミントの帯、動画カード、ティール枠の解説、番号付きのチェック項目
6. **テーマ3 解説と管理方法**（安全な管理を教える）: ベージュの帯、オレンジのタブと枠、イラスト入りの例示ボックス
7. **テーマ4 解説と注意**（見落としやすい点の補足）: 淡ピンクの帯、ピンク枠のカード、Point 1 つ
8. **まとめ**（全体を振り返り行動を促す）: 淡黄の大円の上に黄色太枠のまとめ、マーカー付きの結びの文
9. **フッター**（運営者情報）: 白地に左ロゴ、中央に小さな連絡先、ページトップへのリンク

## Imagery

- 若い人物の写真は明るい室内で、スマホを持ち考え込むポーズ
- アニメ調の男女キャラクターを使った動画サムネ
- カード・メール・錠前などのフラットアイコンを糸で吊るす演出
- 黄色い丸に入れた線画の人物アイコンを章の目印にする
- 黄色の円・菱形を背景に散らす
- 画面の図版は角丸枠に入れ、ピンクの吹き出しで注記する
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツを中央約 56% 幅に置き、左右に帯色を全幅で敷く
- SP は幅 90% の 1 カラムにし、動画カードを全幅近くまで広げる
- SP のファーストビューは写真を上、コピーを下に縦積みする
- Point カードは SP でも番号丸を左に置き、本文は折り返す
- 英字の透かしは SP では 40px 程度に縮小する

## 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-43fe1ee1`（元 LP の URL から採番）
- **元 LP**: https://www.j-credit.or.jp/customer/security-movie/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。