DESIGN.md — 生成り×ボルドーのバレンタイン部屋着特集 LP（Valentine Burgundy Editorial Roomwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい
• キーワード: 雑誌風コラージュ・バレンタイン・ボルドー・生成り・ハートモチーフ・セリフ英字
• 地の質感: マットな紙のような無地の面。グラデーションや影は使わず、写真の柔らかな自然光で質感を出す
• 形: 角丸の長方形写真、円・楕円・ハートの切り抜き、曲線に沿って流れる英文
• 温度感: 暖かく甘い。くすんだ赤と生成りで落ち着いた雰囲気

Colors

• 生成りとボルドーの全幅帯を交互に置き、章の切り替えを示す
• ボルドー地にはクリーム色の文字やハート形の面だけを置く
• 生成り地の見出しはこげ茶、メイン見出しはボルドーにする
• 強調色はボルドー 1 色だけ。ほかの鮮やかな色は足さない
• 散らすハートは黒〜こげ茶の小粒と、ボルドーの大粒を混ぜる

Typography

• 見出しはすべて英字のセリフ体にし、和文は明朝体で控えめに添える
• 太字は使わず、細め〜中くらいの太さで上品にする
• 英字見出しは大文字で左寄せ、2〜4 行に分けて組む
• 本文は 2〜4 行の短い説明に絞る
• 装飾用の英文は曲線パスに沿わせたり、斜めにして写真の間を流す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムに大小の写真を互い違いに置く。PC は自由配置のコラージュ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真はグリッドに揃えず、左右にずらして重ねる
• 大きな写真 1 枚に小さな円形写真や商品の切り抜きを組み合わせる
• 英字見出しは写真の横か上の余白に置く
• セクションは全幅の色帯で区切り、上下に十分な余白を取る
• 余白には小さなハートを 3〜8 個まとめて散らす

Elevation & Depth

• 影は使わず、平面的に重ねる
• 前後関係は写真の重なりと切り抜き商品で出す
• ポラロイド風の写真だけは白フチで浮いて見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形・正円・楕円・ハート形を混ぜる。商品は背景を抜いて置く
• セクション境界: 直線で切り替わる全幅の色帯
• 長方形の写真は角丸 6〜10px
• 1 セクションに円か楕円を 1〜2 個入れる
• ハート形の面をバッジやコピーの台座に使う
• ボタンの形は使わず、テキストリンクで誘導する

Components

• ハート形バッジ（heart-badge）: ボルドーのハート形の中に、クリーム色の英字で出演者などを示す
• ハート形コピー台座（heart-copy-plate）: ボルドー地の上にクリーム色の大きなハートを置き、英字コピーを中央に入れる
• 英字セリフ見出し（serif-section-title）: 大文字のセリフ体を複数行で左寄せにし、下に小さな和文説明を添える
• 円形・楕円の写真（circle-photo）: 顔のアップを正円か楕円で切り抜き、大きな写真に一部重ねる
• 曲線英文（curved-text）: 写真の間を弧を描いて流れる細いセリフ体の英文
• ハートの散らし（heart-scatter）: 6〜10px の小さなハートを不規則に散らす
• ハート区切りの帯（ticker-band）: 英字・ハート・ペットの切り抜きを横に繰り返し並べる装飾帯
• 一覧リンク（view-all-link）: 小さな写真とハートの下に置く、ボルドーのセリフ体テキストリンク

Do's and Don'ts

Do - 生成りとボルドーの帯を交互に置く - 写真の切り抜き形をいろいろ混ぜて、コラージュにする - 見出しは英字のセリフ体、和文は明朝体の短い文にする - 小さなハートを余白に散らして季節感を出す - 商品は背景を抜いて写真の脇に添える

Don't - ゴシック体の太字や大きな価格表示を使わない - 影・グラデーション・光沢のあるボタンを入れない - 写真を等間隔のグリッドで整然と並べない - ボルドー以外の鮮やかな色を足さない - 長い本文の段落を入れない

Page Structure

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

1. ファーストビュー（ブランドと特集の世界観を示す）: 生成り地の上端に細いセリフのロゴを置き、手描き風のハートを添える。その下にカップル写真を 3 枚横に並べる
2. 特集タイトル・リード（テーマと出演者を伝える）: ハートバッジとボルドーの大きな英字タイトルを中央に置き、明朝体のリードを 3 行、短い説明を続ける。端に人物と犬の切り抜きを置く
3. スタイル紹介 1（おそろいのルームウェアを見せる）: ボルドーの帯の上に、角丸写真をずらして重ねる。ハート形の写真と曲線英文を入れる
4. スタイル紹介 2（ニット小物でくつろぐ様子を見せる）: 生成り地に大きな写真、円形写真、商品の切り抜きを置き、ハートを散らす。英字見出しを右上に入れる
5. 装飾帯（章の区切り）: 英字・ハート・犬の切り抜きを横に繰り返す帯
6. スタイル紹介 3（カップルコーデと関連商品を見せる）: ボルドーの帯に大きな写真、円形写真、円形の英字装飾、小物の切り抜きを置き、クリーム色のハートにコピーを入れる
7. スタイル紹介 4（ナイトウェアと雑貨を見せる）: 生成り地に楕円の写真を大きく使い、スリッパやポーチを縦に並べて切り抜きで置く
8. スタイル紹介 5（ハート柄のニットを見せる）: 英字見出しのあと、角丸写真と円形写真を互い違いに置き、小さな説明文を添える
9. 一覧誘導・クレジット（商品一覧へ送り、制作スタッフを示す）: モノクロの小さな写真とハートの下に一覧リンクを置き、その下に小さな中央揃えのクレジットを並べる

Imagery

• 白〜グレーの室内で、自然光のやわらかい写真を撮る
• カップルが寄り添ってくつろぐ、自然なポーズにする
• 服の色はクリーム、ピンクベージュ、こげ茶、ボルドーにそろえる
• くま柄やハート柄など、ふわふわした素材感を寄りで見せる
• 小物・ぬいぐるみ・犬は背景を抜いて添える
• ポラロイド風の白フチ写真をアクセントに入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像だけをもとにした推奨。SP では写真幅を 50〜85% にして、左右交互に寄せる
• SP では重なりを浅くし、円形写真は 140〜180px にする
• 英字見出しは SP で 20px 前後にし、写真の上に置く
• 装飾帯は SP で横に流れるマーキーにしてよい
• PC は中央 960px の範囲で自由に配置し、左右の余白にもハートを散らす

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