DESIGN.md — グレー×モーブピンクの旅行小物 LP（Soft Gray Mauve Travel Gadget LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
• キーワード: ライトグレー・モーブピンク・明朝見出し・白抜き商品写真・旅行シーン・使い方ステップ
• 地の質感: うすいグレーのグラデーションやぼかした空港写真の背景に、白いカードを浮かせた柔らかな質感。
• 形: 角の小さい四角カード、ピンクの丸バッジ、両矢印、ドット付き見出し。
• 温度感: やや涼しげなグレーに、ピンクで温かみを足した中間の温度感。

Colors

• 地は白と薄グレーを交互に使い、無彩色を主にする。
• 見出しのキーワードだけワインレッドにして、ほかは黒にする。
• モーブピンクはラベル帯・丸バッジ・矢印など小さい面だけに使う。
• ピンクの面は白からピンクへのグラデーションにして柔らかくする。
• 写真上の説明帯は半透明のグレーに白文字。
• label-ribbon は文字 #F0F0F0 × 背景 #D98AA6 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD3D6B、4.56:1）を使う。
• check-tag は文字 #F0F0F0 × 背景 #E3B3C5 のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#B7436F、4.55:1）を使う。
• circle-badge は文字 #F0F0F0 × 背景 #D98AA6 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD3D6B、4.56:1）を使う。
• step-card は文字 #F0F0F0 × 背景 #8B8B8B のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#6C6C6C、4.61:1）を使う。
• size-arrow は文字 #F0F0F0 × 背景 #D98AA6 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD3D6B、4.56:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで分ける。
• 見出し内の強調語はひと回り大きくしてワインレッドにする。
• 強調語の上に小さな点を打つ傍点を使う。
• 英字見出しは大きめのセリフ体で字間を広げ、下に小さな和文ラベルを置く。
• 本文は短く改行し、左寄せかセンター寄せにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。使い方だけ 2 列×2 段、悩みは 3 列カード。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
• 文章ブロックと商品写真を左右にずらして重ねる。
• 見出しの下に細線を引いて本文と分ける。
• 写真は画面幅いっぱいに置くこともある。
• セクションの間は余白を大きくとって区切る。

Elevation & Depth

• 白カードに薄い影をつけて背景から浮かせる。
• 丸バッジにはごく弱い影。
• そのほかの要素は影なしでフラットにする。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 白抜きの商品写真、または四角に切ったシーン写真。
• セクション境界: 直線で切り替えるか、グラデーションでつなぐ。小さな三角の吹き出しで次のセクションへつなぐ。
• カードは角がほぼ直角の四角。
• 強調バッジは正円にする。
• サイズ訴求には太い両矢印の帯を使う。

Components

• 見出しラベル帯（label-ribbon）: 見出しの上に置くピンクの四角い帯。白文字。
• チェック付きタグ（check-tag）: チェック印と特長語を書いた薄ピンクのタグを並べる。
• 丸バッジ（circle-badge）: ピンクのグラデーションの正円に白文字で、セット数や大きさの目安を書く。
• 悩みカード（worry-card）: 白いカードに明朝の見出し・短い説明・写真を縦に並べて 3 列にする。
• 特長説明カード（feature-card）: 影つきの白カードに、2 行の見出し・細線・説明を中央揃えで入れる。点線で写真とつなぐ。
• 使い方ステップ（step-card）: 写真の左上に STEP 番号の黒丸。下に半透明グレーの説明帯。
• サイズ両矢印（size-arrow）: ピンクの太い両矢印の中に、数値を白で大きく入れる。
• 手書き添え文字（handwrite-note）: 斜めに置いた手書き風の一言を曲線で囲む。強調の前置きにも使う。

Do's and Don'ts

Do - 見出しは明朝にし、強調語だけワインレッドで大きくする。 - 商品は白抜き写真にして、シーン写真と交互に見せる。 - ピンクは帯・バッジ・矢印に絞る。 - 特長は 1 セクション 1 テーマにまとめる。 - 英字見出しは字間の広いセリフ体にする。

Don't - 原色の赤や青を使わない。 - 丸ゴシックやポップ体の見出しにしない。 - ボタンや帯をピル型・大きな角丸にしない。 - 濃い影や太い枠線を使わない。 - 本文を長いまま詰めて置かない。

Page Structure

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

1. ファーストビュー（商品と使っている場面を一目で見せる）: ぼかした空港写真の上に、スーツケースと商品を合成する。左上に明朝のコピー、右上にピンクの丸バッジ。
2. 悩みの提起（移動中の不便さに共感してもらう）: 傍点つきの明朝見出しの下に、白カードを 3 列並べる。カードは見出し・短文・写真。
3. 解決提示（悩みを解決する商品として示す）: ラベンダー系のグラデーション地。ラベル帯・大見出し・英字の小見出し・チェック付きタグを置く。
4. 特長1（一番の利点を伝える）: 手書きの吹き出しと大見出し、本文を置き、使用写真を右に重ねる。
5. 素材の特長（部位ごとの機能を説明する）: 商品の拡大写真から点線を伸ばし、ピンクのカードと白カードをつなぐ。
6. 対応範囲（いろいろなバッグに使えることを伝える）: 見出しと本文を左上に置き、大きなシーン写真を下に並べる。
7. 軽さ・コンパクトさ（持ち運びやすさを伝える）: 右寄せの見出し。比較物の写真と商品を並べ、丸バッジで大きさの目安を書く。
8. 長さ調整（調整できる幅を伝える）: 中央揃えの見出しの下に、長短 2 本の商品写真とピンクの両矢印で数値を出す。
9. 使い方（手順を説明する）: 英字見出しとピンクのラベル。2 列×2 段のステップ写真カード。
10. 付属品紹介（おまけの機能を伝える）: 画面幅いっぱいの拡大写真の上に、手書きの前置きと白カードを重ねる。
11. サイズ情報（寸法を示す）: 英字見出しの下に、商品の線画風写真と寸法線・数値を置き、最後に注釈を中央揃えで書く。

Imagery

• 商品は白背景の切り抜き写真にし、影は自然に薄くつける。
• 使っている場面は、明るい空港やホテルを高めの露出で撮り、背景をぼかす。
• 人物は手元のみか、母子などやさしい雰囲気で撮る。
• 使い方の写真は同じ角度・同じ小物で揃える。
• 手書きの曲線や点線を補助の装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の 1 カラムで置き、両側は薄グレーにする。
• 悩みカードは PC でも 3 列のまま余白を広げる。
• 使い方は PC で 4 列にしてもよい。
• 文章と写真を重ねる配置は 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 行書くと起動時に読み込まれる。