DESIGN.md — 木目と生成りのやさしいペット寝具 LP（Warm Wood Grain Pet Bedding LP）

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

Overview

• 業種: ペット ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、かわいい
• キーワード: 木目背景・生成り・肉球アイコン・吹き出しセリフ・極太見出し・職人の手作り
• 地の質感: 淡い木目のフローリング風テクスチャを背景に敷き、その上に白い紙のようなパネルを置く
• 形: 角丸の大きい白パネル、円形番号バッジ、楕円の吹き出し、細い黒枠のスペック表
• 温度感: 暖色寄り。ベージュ・茶・こげ茶で温かく、ところどころ白で清潔感を足す

Colors

• 地は木目ベージュと白パネルの2層で構成する
• 見出しはこげ茶一色で、強調色に頼らない
• オレンジは本文中の重要フレーズのみ文字色で使う
• 吹き出しは茶色の塗り×白文字か、ピンクの塗り×茶文字
• 黒は表の枠線とバッジだけに限定する
• ロゴの赤は小さな点アクセントのみ

Typography

• 見出しは極太ゴシックで、こげ茶の詰めた組み
• 見出しの末尾に肉球アイコンを添える
• 特長の本文は小さめの明朝体で、職人の手仕事らしさを出す
• リード文は太めのゴシックで中央揃えにする
• 締めのコピーは縦書き明朝にしてもよい
• 鉤括弧や引用符で、キーワードを目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は文と写真を左右 2 分割、写真は 2 枚並べもある
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 木目背景の上に、幅 90% ほどの白い角丸パネルを置き、特長をまとめる
• 特長は番号＋見出し＋本文＋写真の順で縦に積む
• テキストと写真の左右の位置は、特長ごとに入れ替える
• 写真の角には吹き出しを重ねる
• スペック表は黒枠のボックスにタイトル帯を付ける
• FVと締めは全幅写真の上に文字を重ねる

Elevation & Depth

• 基本は影なしでフラット
• 白パネルにはごく薄い影か、背景との色差だけで境界を出す
• 写真は軽い白フチと薄い影で、紙を置いたように見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形が基本。小さな補足写真は円形に切り抜く
• セクション境界: 直線で切り替える。写真の下端は白へフェードさせる
• 番号バッジは塗りつぶした円に白数字
• 吹き出しは尻尾付きの楕円
• FVのバッジは黒茶のピル型
• スペック表の枠は角丸 6px 前後の黒線

Components

• FV上部の帯ラベル（fv-label）: 画面上端の中央に置く黒茶の帯。ブランド名を白文字で入れる
• 素材訴求バッジ（badge-pill）: 写真の右下に重ねる、肉球アイコン付きの黒茶ピル
• 番号付き特長見出し（number-heading）: こげ茶の丸に白数字を入れ、極太見出しと肉球を続ける
• ペットのセリフ吹き出し（speech-bubble）: 写真に重ねる茶またはピンクの楕円吹き出し。語尾を伸ばした短いセリフを入れる
• 特長まとめパネル（feature-panel）: 木目背景の上に置く大きな白い角丸パネル。複数の特長を中に収める
• お届け内容ボックス（spec-box）: 黒線の枠にタイトル帯を付け、商品写真と項目：値の表を入れる
• ブランド円形ロゴ紹介（brand-circle）: 円形ロゴの横に、上下を線で挟んだ紹介文を置く
• モデル名キャプション（photo-caption）: 写真の下か右上に入れる小さなモデル名と体重

Do's and Don'ts

Do - 背景には淡い木目テクスチャを使い、温もりを出す - 見出しの末尾に肉球アイコンを付ける - 写真にはペットのセリフ吹き出しを添える - 写真にはモデル名と体重のキャプションを入れる - 作り手の顔写真と想いで締めくくる - 本文中の強調はオレンジの文字色だけにする

Don't - 彩度の高い青や緑を主役にしない - 派手なグラデーションのボタンを多用しない - 見出しを細い書体にしない - 白パネルを角張らせない - 写真に強いフィルターをかけない - 装飾をキャラクターイラストに頼りすぎない

Page Structure

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

1. ファーストビュー（商品名とくつろぐペットで一目で魅力を伝える）: 全幅写真の上部に極太の商品名とブランド帯、右下に素材バッジを置く
2. 作り手の信頼訴求（寝具の専門店が作っていることを示す）: 2行の中央見出しとリード文の下に、吹き出し付きの写真を2枚並べ、円形ロゴの紹介を添える
3. こだわり・特長（素材・洗濯・安全性・構造・国産を順に説明する）: 白い角丸パネルの中に、番号見出し・本文・写真を5つ縦に積む
4. 環境配慮の訴求（リサイクル素材の価値を伝える）: 木目背景に引用符付きの大見出しを置き、羽毛を手に乗せた写真と小さな補足ブロックを続ける
5. 情緒的な締め（家族としてのペットへの想いに訴える）: 極太の大見出しとリード文の後、全幅のペット写真に吹き出しを重ねる
6. お届け内容（商品の仕様を明示する）: 黒枠のボックスに商品写真・商品名・仕様の表を入れる
7. 作り手のメッセージ（人柄と社会貢献を伝える）: 職人の写真に縦書き明朝のコピーを重ね、下にオレンジ強調付きの本文を置く

Imagery

• 室内のフローリングで、自然光のもとペットがくつろぐ姿を撮る
• 寝顔やお腹を見せたポーズなど、安心感の伝わるカットを選ぶ
• 木製の家具と生成りの布を一緒に写し、トーンをそろえる
• 素材の写真は手のひらに乗せたクローズアップにする
• 作り手は白いシャツで、作業中の自然な姿を撮る
• 装飾は肉球アイコンと吹き出しだけに抑える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文の幅を 720px 前後に絞り、中央に置く
• 木目背景は全幅に敷き、白パネルは最大幅 800px にする
• 特長は写真と文の左右 2 カラムを広げて使う
• FVの写真は横長に切り抜き、商品名を左右どちらかに寄せる
• スペック表は写真と表を横並びにする

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