DESIGN.md — くすみローズ×ピンクの甘いアパレル特集 LP（Dusty Rose Romantic Fashion Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい
• キーワード: くすみピンク・モーヴブラウン・筆記体・ルックブック・リボン・非対称レイアウト
• 地の質感: フラットな単色面。写真は白〜淡いグレーの背景で柔らかく撮る。
• 形: 角丸なしの四角い写真を基本にする。アクセントとして円形の切り抜き、フリル付きハートの線画、少し傾けた写真を使う。
• 温度感: 暖かく甘い。ただし彩度を抑えて大人っぽくする。

Colors

• 地の色は白、くすみピンク、モーヴブラウンの 3 色を、セクションごとに切り替える。
• モーヴブラウンの面は写真の背面に、ずらした四角としても敷く。
• 見出しと価格の文字は赤ワイン色に統一する。黒は使わない。
• 濃い地の上の文字は白にし、補足は淡いローズグレーにする。
• 強い原色や派手なグラデーションは使わない。
• credit-list は文字 #C7A9AB × 背景 #7B5457 のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 和文はすべて明朝で細く組み、行間を広くとる。
• 欧文の見出しは、筆記体と太いセリフ体を使い分ける。
• 価格は『商品名 ─ ¥価格 ↗』の形で 1 行にまとめる。
• カラー展開は大文字の欧文にし、価格の下に小さく置く。
• 見出しは右寄せや左右にずらした配置にして、動きを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2 枚並びや左右にずらした配置を混ぜる。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右非対称に置き、余白を大きくとる。
• 商品の切り抜き写真の下に、価格リストを中央または右寄せで置く。
• 着用写真のカルーセルは画面の端まで広げ、左右に円形の矢印を置く。
• セクションの境界は色面の切り替えだけで表す。
• 写真をまたいで色面を重ね、奥行きを出す。

Elevation & Depth

• 影は基本的に使わず、フラットにする。
• カルーセルの白い円形矢印だけ、ごく薄い影を付ける。
• 色面と写真をずらして重ね、レイヤー感を出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形が基本。部分的に円形の切り抜きや、傾けた写真を使う。
• セクション境界: 直線の色面で切り替える。色面は写真の途中で切り替えてもよい。
• ボタンは塗りの箱にせず、テキストリンクと線の装飾で表す。
• フリル付きハートの線画を装飾枠に使う。
• 四隅だけの L 字の細いコーナー線で、領域を囲む。

Components

• ハート枠の一覧リンク（heart-frame-cta）: 濃い地の上に、フリル付きハートの線画と L 字のコーナー線を置く。中に欧文の見出し、短い線、字間を広げた大文字のリンクを入れる。
• 商品価格リスト（price-list）: 細い明朝で『商品名 ─ ¥価格 ↗』を縦に並べる。罫線でリーダーをつなぐ。
• 筆記体の見出し（script-heading）: 赤ワイン色の筆記体を 2 行に分け、段差をつけてずらす。
• 太いセリフの見出し（serif-heading）: 右寄せで 2〜3 行にし、上に小さなロゴ入りのハート装飾を添える。
• 着用写真カルーセル（photo-carousel）: 縦長の写真を、画面端で途切れるように並べる。左右に白い円形の矢印ボタンを置く。
• ずらし色面（offset-color-block）: モーヴブラウンの四角を、写真の背後に一部だけ重ねて敷く。
• クレジット表（credit-list）: 中央の軸の左に役職を右寄せ、右に名前を左寄せで並べる 2 列の表。
• SNS シェア（share-icons）: 字間を広げた見出しの下に、白い SNS アイコンを 3 つ横に並べる。

Do's and Don'ts

Do - 和文は明朝で細く、行間を広く組む。 - 写真は余白を広めにとり、左右にずらして配置する。 - 地色の 3 色を交互に使い、リズムを作る。 - 装飾はリボンやハートの細い線画に限定する。 - 価格は 1 行のリンクにまとめ、控えめに見せる。

Don't - 塗りの大きなボタンや角丸のピル型ボタンを使わない。 - 黒い文字や原色の赤を使わない。 - ゴシック体の太字で見出しを作らない。 - 写真に影や枠を付けすぎない。 - 情報を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（企画の世界観を伝える）: 全面にモデル写真を敷き、左側に筆記体のロゴ見出し、二重線、中央揃えの明朝のリード文を重ねる。
2. ルック 1（主力アイテムを着用写真で見せる）: くすみピンクの地に、大小の写真を非対称に配置する。右上に太いセリフの見出しと価格リストを置く。
3. 商品の切り抜き（単品を見せる）: 切り抜き写真の下に、価格とカラー展開を中央揃えで置く。
4. 着用カルーセル（コーディネートを複数見せる）: 白地に、画面の端まで広がるスライダーを置く。右下に価格リストを置く。
5. ディテール（素材やシルエットを強調する）: 円形に切り抜いた写真に、集中線の装飾を添える。単品写真を 2 つ並べる。
6. コラボ紹介（コラボアイテムを訴求する）: 筆記体の 2 行見出しの後に、写真とモーヴの色面をずらして重ねる。リボンのイラストを散らす。
7. メッセージと小物（小物を紹介する）: 白地の右上に、筆記体と太いセリフの英文メッセージを置く。小物は左右にずらして配置する。
8. 一覧への誘導（全商品ページへ送る）: 濃い地に、ハート枠のリンクと注釈を置く。
9. ノベルティ告知（購入特典を伝える）: 線の枠の中に、傾けた写真を置く。白い筆記体の大見出し、大きな日付、条件文を続ける。
10. パートナー紹介（コラボ先を紹介する）: 左に線の枠で囲んだロゴ、右に見出しと明朝の本文、外部リンクを置く。
11. シェア・クレジット（拡散を促し、制作者を記載する）: 短い区切り線の後に SNS アイコン、2 列のクレジット、コピーライトを続ける。

Imagery

• 淡いグレーの白壁と、ふわふわのラグの上で撮った柔らかい自然光の人物写真。
• ピンク、ベージュ、白の服とリボン小物でまとめ、ゆるいポーズで撮る。
• 商品は白背景の切り抜き写真にする。
• リボンの小さなイラストを、薄い紫で散らす。
• フリル付きハートの線画と、手描き風の集中線を装飾にする。
• 俯瞰で撮った写真を少し傾けて、遊びを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅のコンテンツで、写真を左右にずらした非対称配置にしている。
• SP では写真を 90% 幅前後で縦に積み、ずらし幅は小さくする。
• 2 枚並びの写真は SP でも 2 列のまま維持する。
• カルーセルは SP では 1.3 枚見せにし、スワイプで操作する。
• パートナー紹介の 2 列は、SP では縦に積む。
• クレジット表は 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 行書くと起動時に読み込まれる。