DESIGN.md — 空色×グレージュのやさしい家具 LP（Airy Sky Blue Compressed Furniture LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、ナチュラル、シンプル・ミニマル
• キーワード: 空色・グレージュ・ファブリック質感・余白・字間広め・生活シーン
• 地の質感: 布の織り目が見える写真と、雲が浮かぶ空のグラデーション。面はフラットで、影はごく弱い。
• 形: 角丸の吹き出し、円形バッジ、斜めのセクション境界、アーチ型の窓で写真を切り抜く。
• 温度感: やや涼しい青に、暖かいベージュの写真を合わせた中間の温度。

Colors

• 地はオフホワイトと淡いブルーグレーを交互に使う。
• 強調は青 1 色だけ。見出しの一部の語、ラベル帯、円形バッジに使う。
• 写真の上に置く文字は白にする。細い字で、影はごく弱くする。
• FV は空色から白へのグラデーションに雲を入れる。
• 本文はグレー系にし、真っ黒は使わない。
• 数値図だけは、オレンジと緑のサブカラーで区別してよい。
• badge-circle は文字 #FFFEFB × 背景 #3B9CD3 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#277CAD、4.55:1）を使う。
• label-band は文字 #FFFEFB × 背景 #3B9CD3 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#277CAD、4.55:1）を使う。
• worry-bubble は文字 #FFFEFB × 背景 #AEBCC3 のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#627985、4.53:1）を使う。
• heading-highlight は文字 #3796CB × 背景 #FBFBFA のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2B7AA6、4.57:1）を使う。

Typography

• 和文は字間を 0.1em 以上あけ、ゆったり見せる。
• 見出しは中太にして重くしない。キーワードだけ青にするか、サイズを上げる。
• 英字の見出しは細い幾何学的サンセリフで、字間を広くとる。
• 数値は大きく太くし、単位は小さく添える。
• 本文は中央揃えの短い行にし、行間は 2.0 前後にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅にし、写真の上にテキストカードを重ねる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面端まで広げ、テキストは中央に寄せる。
• 白カードは片側の端に寄せ、写真に重ねる。
• 2 枚の写真を左右に並べ、比較や利用シーンを見せる。
• 吹き出しは左右交互にずらして置く。
• 見出しの上下に十分な余白（48〜64px）をとる。

Elevation & Depth

• 基本はフラットにする。
• 白カードには、ほぼ見えないくらいの薄い影を付けてよい。
• 写真の上の文字には、ごく弱いドロップシャドウを付けて読みやすくする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形を基本にする。アーチ窓、円形の比較写真、斜め切りの重なりも使う。
• セクション境界: 斜めのラインやゆるい波形で写真を切り替える。地色の切り替えは直線にする。
• 吹き出しは片側だけ完全な角丸にしたピル型にする。
• 円形バッジは青で塗り、白文字を 2〜3 行入れる。
• ラベル帯は角丸を小さくした青い長方形にする。
• 寸法図は細い線と点で描く。

Components

• 円形バッジ（badge-circle）: 写真の角に重ねる青い円。中に短い訴求や重量を白で入れる。
• 青ラベル帯（label-band）: 見出しの上に付ける小見出しの帯。下向きの三角を付けることもある。
• お悩み吹き出し（worry-bubble）: グレー青のピル型帯に白文字を入れ、左右交互に 3 つ並べる。
• 特長カード（feature-card）: 写真に重ねる白カード。青い見出し、細い区切り線、本文の順に置く。
• マーカー見出し（heading-highlight）: 白い帯を背負わせた青文字の大見出し。
• 数値パネル（spec-panel）: 重量や寸法を大きな数字で示す白いパネル。グレーのピルラベルを付ける。
• 白線吹き出し（outline-bubble）: 写真上に白い細線のピル型枠と引き出し線を置き、白文字で添える。
• 英字セクション見出し（section-en-title）: 青の細い英字を大きく、字間を広くして置く。

Do's and Don'ts

Do - 生活シーンの写真を大きく使い、くつろぐ人物を見せる。 - 青は強調する箇所だけに絞る。 - 字間と行間を広くとり、軽い印象を保つ。 - 数値は大きな太字で見せ、単位は小さくする。 - 地色は淡い色を交互に切り替えて、リズムを作る。

Don't - 赤や黄色など強い色を CTA に使わない。 - 太い極太ゴシックを多用しない。 - 濃い影や立体的なボタンを付けない。 - 背景を真っ黒の帯にしない。 - 文字を詰めた長い段落を置かない。

Page Structure

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

1. ファーストビュー（使い始めの手軽さを一目で伝える）: 空色と雲の背景に、商品を浮かせて配置する。巨大な数字と白い英字ロゴ風の見出しを置き、下部に人物写真と円形バッジを入れる。
2. 悩みの提起（欲しいのに買えない理由に共感する）: 淡い地に、ピル型の吹き出しを 3 つ交互に置く。続く問いかけでは、数字だけを青で大きく見せる。カラー違いを横に並べる。
3. 使い方の流れ（開封するだけで完成することを示す）: 青ラベル帯、梱包状態の写真、青い大きな手書き風コピー、くつろぐ人物写真の順に重ねる。
4. 運びやすさ（梱包の小ささと軽さを訴求する）: マーカー見出しを置き、人物写真に数値パネルを重ねる。続けて寸法の図を見せる。
5. 座り心地（内部構造の快適さを伝える）: グレージュ写真に白文字のキャッチを載せ、円形バッジで切り替える。断面図には数値ラベルを付ける。
6. ポイント紹介（素材や形状の特長を個別に説明する）: 大きな英字を背景に敷く。斜めに切った写真の上に、青ラベルと白文字の説明を置く。
7. 特長カード（細部の機能を整理する）: 写真に白カードを左右交互に重ね、点線の矢印で該当箇所を指す。
8. 設計・利用シーン（使う人数やサイズ感をイメージさせる）: 暗めの写真に白線の吹き出しを置く。写真は 2 分割で並べる。
9. お手入れ（掃除や移動の楽さを伝える）: 青の見出しを置き、写真と白い吹き出しを交互に並べる。
10. カラー紹介（色の選択肢を見せる）: 英字見出しを置き、アーチ窓の空、生活写真、生地のアップをコラージュする。
11. サイズ（寸法と重量を明示する）: 白地に商品の切り抜きを置き、細線で寸法を入れる。重量は青い円形バッジで示す。

Imagery

• 自然光が入る明るい室内で、白・木目・ベージュを基調にした生活写真にする。
• ゆったりした服装の人物がくつろぐ姿を撮る。
• 布の織り目がわかる、生地のマクロ写真を入れる。
• 空と雲の写真をアーチ窓や FV の背景に使い、抜け感を出す。
• 商品は影の薄い切り抜きにし、寸法図にも使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として書く。PC では SP のデザインを幅 750px 前後の中央カラムに置く。
• カラムの外側は空色や淡いグレーの地で埋める。
• 写真は全幅のまま使い、特長カードは 2 カラムにしてもよい。
• 見出しは 1.3 倍程度まで拡大し、字間は維持する。

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