DESIGN.md — 水色×クリームの軽やか衣料カタログ LP（Airy Pastel Blue and Cream Apparel Catalog LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、ナチュラル、親しみ・手作り感
• キーワード: パステル水色・クリーム・波形の区切り・カプセル型の写真・手書き文字・吹き出し
• 地の質感: フラットな淡色の面に、シャボン玉・花・羽根のような軽い装飾を散らす
• 形: ピル型ボタン、縦長カプセル型の写真枠、ずらした影の付いた四角いポイント枠
• 温度感: 明るくて涼しげ。クリーム色の帯で少し温かみを足す

Colors

• 地は白・水色・クリームの 3 色にし、アイテムごとに水色とクリームを交互に使う
• 水色の帯ではアクセントを青、クリームの帯ではオレンジにして、ボタン・ラベル・見出しを同じ色でそろえる
• ピンクはお試し価格と吹き出し内の強調語だけに使う
• 商品写真の背景は白にして、帯の色から浮かせる
• 本文は黒寄りのグレーにする。純黒の太字は商品名だけにする

Typography

• 見出しの上に、アクセント色で英字の小ラベルを置く
• アイテム名の下に短い横線を一本引く
• 価格の数字だけ大きく太くし、税込表記は小さくする
• 手書き文字は写真の脇に斜めに置き、1 ブロックに 1 か所だけにする
• 見出しは太くしすぎず、軽さを保つ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは写真と情報の横 2 分割を縦積みにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各アイテムの帯は、見出し→カプセル型のモデル写真→キャッチ→ポイント図解→商品カードの順に組む
• ポイント図解は商品写真から引き出し線で番号ラベルにつなぐ
• ポイント枠は 2 つ並べる。SP では縦に積む
• 商品カードの間は細い区切り線で分ける
• 余白は広めにとり、詰め込まない

Elevation & Depth

• ポイント枠は、黒い線の枠を右下に 4px ずらして重ねた影にする
• 影はぼかさない。ふわっとした影は使わない
• FAQ と商品カードは影なしのフラットな面にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: モデル写真は縦長カプセル型の白地に、全身を切り抜いて重ねる。商品写真は白い四角に収める
• セクション境界: 水色とクリームの帯は、ゆるい波形の曲線でつなぐ
• ボタンは完全なピル型にし、右端に小さな矢印を付ける
• ポイント番号のラベルは小さなピル型にする
• 吹き出しは丸みのある雲形にし、線は細くする
• 特長ブロックの枠は角丸の線枠にし、見出しをタブ状に上へ乗せる

Components

• 詳細ボタン（button-primary）: ピル型で、右端に矢印を付ける。帯の色に合わせて青かオレンジにする
• ポイント番号ラベル（point-label）: 商品写真から引き出し線でつなぐ、小さなピル型ラベル
• ずらし影のポイント枠（point-box）: 白地に黒線の枠。左にセリフ体の番号、右に説明文を置く
• 雲形の吹き出し（speech-bubble）: モデルの頭の横に置く。中の強調語はピンクにする
• 商品カード（product-card）: 白い写真枠、商品名（太字）、通常価格、お試し価格（ピンク）、ボタンの順に並べる
• ラインナップのタブ（lineup-tab）: 淡い青の枠に、商品サムネイル・カテゴリ名・下向き矢印を入れる
• FAQ アコーディオン（faq-item）: 淡いグレーの面。左に青い Q、右に＋を置く
• 特長写真のラベル（feature-tag）: 写真の左上に載せる青い四角ラベル。写真は青い線で囲む

Do's and Don'ts

Do - 水色とクリームの帯を交互にし、波形でつなぐ - モデル写真はカプセル型の白地に切り抜き、吹き出しと手書き文字を添える - 帯ごとにアクセント色（青/オレンジ）を統一する - 商品写真から番号ラベルへ引き出し線を引いて、ポイントを説明する - 価格は通常価格とお試し価格の 2 段で見せる

Don't - 濃い色の地や黒い帯を使わない - 強い影やグラデーションのボタンにしない - ピンクを価格・強調語以外に広げない - 見出しを極太にして重い印象にしない - 1 つの帯の中で青とオレンジを混ぜない

Page Structure

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

1. ファーストビュー（シリーズの世界観と着心地のよさを一目で伝える）: 空色地を白い線で囲み、モデル 3 人を並べる。白帯のコピーと赤い円形の実績バッジを置く
2. 商品ラインナップ（カテゴリへの近道を作る）: サムネイル付きのタブを 2 段に並べ、ページ内の各帯へ移動させる
3. 特長（素材の 3 つの利点を伝える）: 写真と文を左右交互に置き、写真にラベルを付ける。最後に図解入りの線枠ブロックを置く
4. アイテム紹介（水色）（1 つめのアイテムを訴求する）: 波形の上端から入り、英字ラベル付きの見出し、カプセル型のモデル写真、ポイント図解、商品カードを並べる
5. アイテム紹介（クリーム）（2 つめのアイテムを訴求する）: 同じ構成で、アクセントをオレンジにして花の装飾を添える
6. アイテム紹介（交互）（残りのアイテムを訴求する）: 水色とクリームを交互に続け、羽根やシャボン玉の装飾を変える
7. シリーズバナー（シリーズ一覧へ送る）: 空色の横長バナーに、ロゴ・モデル写真・ピル型ボタンを入れる
8. よくある質問（注文の不安を解消する）: 淡いグレーのアコーディオンに Q と＋を置く
9. ブランド紹介・SNS（ストアと SNS へ送る）: 水色の角丸パネルに写真を 4 枚並べ、ボタンを置く。下に斜線で囲んだ SNS 誘導を置く

Imagery

• 笑顔の 30〜40 代女性が全身で立つ、自然なポーズの写真を白背景で撮って切り抜く
• 商品は白背景で平置きか、トルソーなしの正面カット
• 素材は、布をねじったアップで質感を見せる
• 装飾は透明なシャボン玉・黄色い花・白い羽根など、軽さを連想させるものを散らす
• 手書き風の短いつぶやきを、写真の脇に色を合わせて添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 440px 相当の幅で組み、左右は帯の色を全幅に伸ばす
• SP では特長の左右交互を、写真→文の縦積みにする
• 商品カードは SP でも写真と文の横並びを保つ。狭ければ縦積みにする
• ポイント枠の 2 列は、SP では 1 列にする
• ラインナップのタブは、SP では 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 行書くと起動時に読み込まれる。