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

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

Overview

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

Colors

• 地は白が基本。各シーンに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

• 見出しは太ゴシック、強調する語だけシーン色にする
• シーン番号は縦長の欧文の太字。上に小さな手書き風の英字と二重線を添える
• 本文は小さめでも行間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

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

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