DESIGN.md — 深緑×生成りのアウトドア雑貨 LP（Muted Olive Outdoor Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、シンプル・ミニマル、上品・高級
• キーワード: オリーブ緑・生成り・余白多め・写真主体・番号付きポイント・アウトドア
• 地の質感: フラットな単色面。自然光の生活写真で質感を出す
• 形: 角丸なしの四角い写真と帯。数値は正円バッジで見せる
• 温度感: やや暖かいニュートラル。くすんだ緑とベージュの低彩度

Colors

• 地は白をベースにして、セクションの約1/3でセージグレーの帯を全幅に敷き、リズムを付ける
• 強調は深オリーブ緑の単色だけにする。キャプション帯、ラベル、円形バッジに限って使う
• 写真のトーンはくすんだ緑、ベージュ、生成りでそろえて、配色と調和させる
• ファーストビューだけは濃緑の面に白文字を乗せ、締まった印象にする
• 赤や黄などの鮮やかな色は使わない

Typography

• 見出しは字間を広め（0.1em以上）にして、静かな印象を出す
• POINT番号は小さな英字の上に、細めのコンデンス数字を中央にそろえて置く
• 本文は小さめにして行間を広く取り、写真を主役にする
• 太字は小見出しと数値だけに使う
• 数値は大きく、単位は小さく組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。詳細は左に写真、右に文字の 2 分割。活用シーンは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• メイン写真は全幅（左右の余白なし）で入れる
• 本文は左右に約4%の余白を取り、左揃えにする
• ポイントの補足は、左に正方形に近い写真、右に小見出しと本文を並べる
• セクション見出しの上下に約48pxの余白を取る
• 活用シーンのカードは2列で、最後の1枚は全幅にする

Elevation & Depth

• 影は使わずフラットに作る
• 面の切り替えは背景色の帯で表す
• 円形バッジを写真の角に重ねて、奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。メインは横長、補足は4:3程度
• セクション境界: 直線で背景色を切り替える
• 数値バッジだけ正円にする
• ラベルは角丸なしの小さな長方形にする
• 詳細写真では、注目箇所を白の破線の円で囲む

Components

• POINT番号見出し（point-heading）: 小さな英字ラベル、細い数字、字間の広い見出しを中央に縦に積む
• 数値丸バッジ（badge-circle）: 写真の角に重ねる正円。小さなラベルと大きな数値を入れる。色は緑と生成りの2種類
• 太線挟み小見出し（bracket-subheading）: 左右を縦の太線で挟んだ太字の小見出し
• 写真キャプション帯（caption-bar）: 写真の直下に付く緑の帯。白文字を中央に置く
• 小ラベル（label-tag）: MOREや使用時などを示す緑の長方形ラベル
• 特長4分割（feature-icons）: 太字の短い語と小さな補足を、縦線で区切って4つ横に並べる
• スペック表（spec-table）: 灰色の見出しセルと白・淡灰の値セルを横に並べた表

Do's and Don'ts

Do - 生活シーンの写真を大きく使い、文字は控えめにする - 強調色は深オリーブ緑の一色に絞る - 数値は丸バッジで、写真に重ねて見せる - 白とセージグレーの帯を交互に使い、リズムを作る

Don't - 彩度の高い色やグラデーションを入れない - ボタンやカードに角丸や影を付けない - 見出しを太すぎる書体や詰めた字間にしない - 本文を長くしない（1段落を2〜3行までにする）

Page Structure

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

1. ファーストビュー（ブランドの世界観を伝える）: キャンプの写真から濃緑の面へつなぎ、ロゴ、白文字のキャッチコピー2行、小さな補足を中央に置く
2. 商品紹介（商品名とサイズを示す）: 全幅の商品写真の左上に英字の商品名を入れ、右下にサイズの帯を付ける
3. カラー展開と特長（色の種類と主な利点を一目で見せる）: 3色の商品を並べ、その下に縦線で区切った特長を4つ置く
4. 利用イメージ写真（生活になじむ様子を見せる）: 2枚を並べた写真と、全幅の写真を組み合わせる
5. ポイント1〜2（丈夫さと安全性を伝える）: 番号見出し、全幅写真と丸バッジ、本文、左写真と右テキストの補足の順に並べる
6. ポイント3（収納のしやすさを伝える）: 番号付きの手順写真2枚と、灰色帯のMOREブロックで軽さを補足する
7. ポイント4（サイズ感を伝える）: 寸法の線を入れた写真と丸バッジを使う
8. 活用シーン（使える場面を広げて見せる）: 灰色帯の上に、写真と緑キャプション帯のカードを2列で並べる
9. ディテール（細部の工夫を見せる）: 英字見出しの下に、左写真（破線円付き）と右テキストを3段並べる
10. 仕様（寸法と素材を示す）: 線画風の寸法図2つと、灰色見出しのスペック表を置く

Imagery

• 自然光で撮った、くすみトーンの生活写真。脚や手元だけを写し、顔は写さない
• 背景はフローリング、ソファ、木漏れ日の地面など、ナチュラルな素材感のあるもの
• 人物の服はパステルピンクや白で、柔らかさを足す
• 仕様欄は白抜きの商品写真に寸法の線を重ねる
• 寄りの写真で細部を見せ、白の破線の円で注目させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため、PCでは本文幅を最大960px程度で中央に寄せることを推奨する
• 活用シーンはPCで3列にする
• 左写真と右テキストの組は余白を広げて維持する
• 全幅写真はPCでも横幅いっぱいにし、高さを抑えてトリミングする

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