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

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

Overview

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

Colors

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

Typography

• 見出しはすべて中央揃えの太ゴシックで、問いかけや感嘆の語調にする
• 本文は中央揃えの短い行、カードの中は左揃え
• テーマ色の見出しはその章の色だけを使う
• 英字の透かしは白か淡い線の細字で、帯の右側にはみ出させる
• 強調は太字にせず、黄色マーカーで行う
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。