DESIGN.md — 生成り紙×くすみローズのイラスト解説型機器LP（Warm Kraft Paper Illustrated Office Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい
• キーワード: 生成り紙・クラフト感・くすみカラー・線画イラスト・悩み→解決・マルチカラー帯
• 地の質感: 細かな紙繊維のような生成り地。セクションごとに濃淡の違う紙色を敷き、境界をギザギザの破り紙風にする。
• 形: 角丸小さめの白カード、片側が尖った旗型吹き出し、切り込み付きリボン型ラベル。
• 温度感: 暖色寄り。茶とベージュ主体に、くすみローズ・ティール・グリーンを差し色にする。

Colors

• 地は生成りを基本に、手順や仕様のセクションだけ一段濃いクラフト色に切り替える。
• 本文・見出しは黒でなくこげ茶系で統一する。
• 行動を促すボタンとSTEP・小ラベルはくすみローズに限定する。
• 悩みの吹き出しはティールと緑を交互に使う。
• 強調語は黄色の蛍光マーカー下線で示す。
• 見出し下の帯はローズ・ティール・緑・黄土・茶の多色ブロックを並べる。
• button-primary は文字 #FFF4F4 × 背景 #CB6F7A のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD4A57、4.55:1）を使う。
• button-outline は文字 #CB6F7A × 背景 #FFFFFF のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD4A57、4.59:1）を使う。
• solution-label は文字 #FFF4F4 × 背景 #CB6F7A のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD4A57、4.55:1）を使う。
• step-ribbon は文字 #FFF4F4 × 背景 #CB6F7A のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD4A57、4.55:1）を使う。
• color-swatch は文字 #FFF4F4 × 背景 #C9A64F のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#886D2A、4.57:1）を使う。

Typography

• 見出しは丸ゴシック太字で柔らかく。
• 本文は中央揃え・3行前後で改行を調整する。
• リード見出しは左右を「\ /」の斜線で挟む。
• 強調語は太字＋黄色マーカー。
• 欧文は丸みのあるサンセリフで色ごとに文字色を変えてもよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アンカーナビと作品例は 2 カラム
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 悩みカードは白面を縦に連ね、上端に吹き出しをはみ出させる。
• セクション頭は見出し＋多色帯を中央に置く。
• STEPは写真の左上にラベルを重ね、間に多色の下向き矢印。
• アンカーナビは白い小カードを2列で並べる。
• バナー群は横長画像を縦に3枚積む。

Elevation & Depth

• 白カードはごく薄い影か影なし。
• ナビボタンは淡い影で浮かせる。
• 写真は角丸小で軽い影。
• フラットな紙の重なり感を優先する。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸4〜8pxの長方形。作品例は横長4:3弱
• セクション境界: 破り紙風のギザギザ境界で地色を切り替える
• 吹き出しは片側が尖り下に尾がある旗型。
• STEPラベルは右端に切り込みのあるリボン型。
• ボタンは角丸8pxの横長、右端に＞。
• アイコンは角丸大の淡黄正方形に載せる。

Components

• 主CTAボタン（button-primary）: ローズ塗りの横長ボタン、中央白文字、右端に＞
• サブボタン（button-outline）: 白地にローズ枠・ローズ文字
• アンカーナビ（anchor-nav）: 白小カードに茶文字と下向きのローズ山形矢印
• 悩み吹き出し（worry-balloon）: ティール/緑の旗型吹き出しに白文字、右端に線画人物
• 解決ラベル（solution-label）: ローズの小さな角帯に白文字で「〜なら！」型
• 多色帯見出し（heading-stripe）: 丸ゴシック見出しの下に多色ブロックの細帯
• STEPリボン（step-ribbon）: 写真左上に重なるローズのリボン型STEP番号
• 仕様カード（spec-table）: クリーム色ヘッダー帯付き白カードに太字項目と寸法
• カラー見本（color-swatch）: 少し傾けた色面に見本紙、上に色名ピル。4列2段

Do's and Don'ts

Do - 地は紙の質感がある生成りにする。 - 悩み→解決を1カード1テーマで繰り返す。 - イラストは茶の線画にくすみ色を塗る。 - 見出しごとに多色帯を入れて統一感を出す。 - CTAはローズのみで目立たせる。

Don't - 純黒の本文や鮮やかな原色を使わない。 - ピル型の丸いボタンにしない。 - グラデーションや光沢の強い装飾を入れない。 - 写真に強い影をつけない。 - ローズを装飾に使いすぎてCTAを埋もれさせない。

Page Structure

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

1. ファーストビュー（製品の世界観と名称を示す）: 製品と小物を並べた温かい室内写真に、白の細い欧文大文字と2行コピー
2. アンカーナビ（各セクションへ誘導）: 白小カード2列＋最後は中央1つ
3. 製品概要（何ができるかを一言で）: 多色帯見出し、斜線で挟むリード、動画埋め込み、点線枠キャプション
4. 悩みと解決（導入障壁を解消）: 白カード4〜5枚、吹き出しで悩み、ローズラベル、マーカー付き本文、線画イラスト
5. 使い方（手順の簡単さを示す）: 濃いクラフト地に白っぽいパネル、STEPリボン付き写真3段と多色矢印
6. 消耗品（色展開と仕様を示す）: 傾けた色見本4×2、多色欧文、仕様カード、ローズCTA
7. 作品例（活用シーンを見せる）: 2列写真グリッドにキャプション、強調語はローズ帯
8. 導入事例（信頼性）: ギザギザ縁の白帯に線画人物とローズの大文字
9. 関連バナー（体験・資料へ誘導）: 横長バナー3枚を縦積み
10. CTA（購入と詳細ページへ）: ローズ塗りボタン＋注釈＋アウトラインボタン
11. フッター（シェア・サイト導線）: グレー地シェア、黒帯、白地リンク群

Imagery

• 人物は太めの茶線で描くシンプルな線画、肌は塗らず服などにくすみ色。
• 製品はこげ茶ベタの簡略イラストと実写を併用。
• 実写は木目や暖色の机上で自然光、小物と一緒に撮る。
• キラキラの十字や放射線を小さく散らす。
• PCは余白に紙片の三角・ひし形を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央幅約800pxに収め、外側に紙片装飾を散らす。
• 悩みカードはPCで3列＋2列のグリッドに。
• STEPは写真と文章を左右交互に配置。
• 消耗品は仕様表と色見本を左右に並べる。
• 作品例はPCで3列、CTA2つは横並び。
• アンカーナビはPCで1行の横長バーに。

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 行書くと起動時に読み込まれる。