DESIGN.md — 生成りと若葉緑のオーガニック衣料 LP（Soft Green Organic Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ナチュラル、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
• キーワード: 生成り・若葉グリーン・ぼかし光・線画イラスト・余白多め・工程ステップ
• 地の質感: 背景は緑と白の光が玉ボケのように広がる柔らかいグラデーション。中央は無地のクリーム色と白カード。
• 形: 角丸の白カード、ピル型ラベル、下向き三角の矢印、点線の区切り線、斜めにカットした写真バナー。
• 温度感: 暖かめ。クリームと茶でぬくもりを出し、緑で清潔さを足す。

Colors

• 中央の説明エリアは生成りクリーム地に白カードを重ねる。
• ファーストビューとラインナップは緑と白のぼかし光の背景で挟む。
• 見出しラベルだけブラウンの面にし、強い色はほぼ使わない。
• 本文は黒ではなく焦げ茶で、全体をやわらかく保つ。
• 強調は太字にせず、文字下の淡い緑マーカーで行う。
• イラストは緑・茶・黒の 3 色に絞る。
• pill-label は文字 #F5FFF3 × 背景 #A38B5C のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#86724B、4.53:1）を使う。
• category-banner は文字 #F5FFF3 × 背景 #99BE94 のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#537E4D、4.59:1）を使う。

Typography

• 英字見出しの下に小さい和文の訳を必ず添える。
• 本文は小さめの太字ゴシックで、行間を 2.0 前後と広くとる。
• 本文は中央揃えにし、短い行で改行する。
• 英字は字間を広くとり、静かに見せる。
• 文字サイズの差は控えめにし、大きく叫ばない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。工程はカード内で縦に積む。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約 6% ずつ余白を空けて置く。
• 見出しラベルはカード上端の中央に半分かかるように置く。
• 1 工程を『本文、円背景のイラスト、工程名』の順に並べる。
• 工程の間は点線と下向き三角でつなぐ。
• ラインナップのバナーは幅をそろえて縦に並べ、間隔は約 28px。

Elevation & Depth

• 白カードとバナーにはごく薄い影（0 2px 8px rgba(0,0,0,0.06)）を付ける。
• ファーストビューの写真枠は、白っぽい半透明の縁取りで浮かせる。
• 影はそれ以上強くせず、浮いて見える程度にとどめる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は四角い枠で使う。バナーでは緑面と写真の境目を右上がりの斜めにカットする。
• セクション境界: 直線で背景色を切り替える。工程の間は点線と三角の矢印で区切る。
• カードの角は 16px で丸める。
• ラベルは完全なピル型にする。
• イラストの背後は輪郭をぼかしたクリーム色の円にする。
• バナーの角丸は 4px 程度の小さめにする。

Components

• 英字＋和文の見出し（section-heading）: グレージュの英字の大見出しの下に、小さな和文の訳を中央揃えで置く。
• ピル型見出しラベル（pill-label）: ブラウン地に白文字。カード上端の中央に重ねて置く。
• 工程カード（process-card）: 白い角丸カード。工程を縦に並べる。
• 円背景イラスト（illust-circle）: ぼかしたクリーム色の円の上に、緑と茶の線画イラストを置き、下に工程名を添える。
• 点線と三角の矢印（step-arrow）: 左右に点線を引き、中央に下向きのくすみベージュの三角を置く。
• 淡い緑のマーカー（text-marker）: 強調したい語の下半分に淡い緑の帯を引く。
• カテゴリバナー（category-banner）: 左は緑のグラデーション面に白い英字、右は写真。境目は斜めにカットする。

Do's and Don'ts

Do - 生成り・白・淡い緑の 3 つの地色で全体を組む。 - 本文は焦げ茶の小さな太字にし、行間を広くとる。 - 工程は図解の縦ステップで見せる。 - 背景に緑の玉ボケのグラデーションを使い、光を感じさせる。 - イラストはシンプルな線画にし、色数を抑える。

Don't - 赤や原色の強い CTA や、セール風の装飾を入れない。 - 真っ黒の文字や太い枠線を使わない。 - 濃い影や光沢のある立体表現を使わない。 - 情報を詰め込まず、余白を削らない。 - 写真の彩度を上げすぎない。

Page Structure

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

1. ファーストビュー（素材のテーマと、着る人の幅広さを一目で伝える。）: ぼかした緑の背景に半透明の枠を置き、大人と子どもの写真を並べる。中央に欧文セリフのタイトルと和文の訳を重ねる。
2. 素材の説明（素材の定義と価値を短く伝える。）: クリーム地に英字＋和文の見出しを置き、中央揃えの本文を 4 行ほど続ける。右上に綿花の写真を小さく添える。
3. できるまでの工程（栽培の工程を追い、素材への安心感を作る。）: 白カードの上端にピル型ラベルを重ねる。本文・円背景イラスト・工程名を 1 セットとして、矢印でつなぎ 3 段に並べる。
4. ラインナップ（対象別のカテゴリ一覧へ誘導する。）: 緑の玉ボケ背景に英字見出しを置く。緑面と写真を斜めに組み合わせたバナーを 4 本、縦に並べる。

Imagery

• 人物は白〜淡色の無地の服で、明るい窓辺や白背景で自然光の中で撮る。
• 子ども服は淡い緑の背景に平置きで撮る。
• 背景は緑・白・クリームの大きな玉ボケが重なるグラデーションにする。
• イラストは芽・葉・綿花を太めの均一な線と平塗りで描き、緑と茶の 2〜3 色にする。
• 綿花の実物写真を、装飾として白く小さく添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツの幅を約 65% に絞り、中央に寄せる。
• PC の工程カードは、左に本文、右に円背景イラストの 2 カラムにする。
• PC の素材説明の本文は横に長い 2 行にまとめる。
• PC のカテゴリバナーは幅約 40% に縮め、中央で縦に並べる。
• ファーストビューは 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 行書くと起動時に読み込まれる。