DESIGN.md — 白地×明朝の上品な大人アクセサリー LP（Editorial White Minimal Jewelry Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、シンプル・ミニマル、清潔・爽やか
• キーワード: エディトリアル・余白・明朝・非対称配置・ルックブック・大人女性
• 地の質感: フラットな白地。光沢や影はつけず、柔らかい自然光の写真で質感を出す
• 形: 角丸なしの四角い写真。CTA だけを黒いピル型にする
• 温度感: やや涼しい中間色。グレー系の写真に、金色の温かみを少し差す

Colors

• 地は白一色に固定する。セクションの区切りに色帯は使わない。
• 文字は黒〜濃いグレーだけにする。強調したいときも色は変えず、サイズと書体で差をつける。
• 金やベージュなどの色は写真の中だけに任せ、UI には使わない。
• CTA は黒い面に白文字の 1 色だけにする。
• 黒い面はページ末尾のフッターだけに使う。

Typography

• 和文はすべて明朝にする。ゴシックは CTA とフッターだけに使う。
• 欧文の大見出しは細いセリフ体を大きく置き、和文コピーはその直下にまとめる。
• 本文は字間を広め、行間を 2 以上にとる。
• 見出しの寄せは、シリーズごとに左寄せと右寄せを交互に切り替える。
• 写真の端には欧文コピーを 2 行で重ね、写真からはみ出させる。
• 写真の横には、シリーズ名を縦書きの欧文で添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の幅は 65〜90% で、左右にずらして置く
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 0px（375px 幅換算）
• シリーズ紹介は「番号ラベル→欧文名→和文コピー→本文→写真 2 枚→価格表→物撮り→商品リスト」の順にする。
• 1 枚目の写真を左に寄せたら、2 枚目は右に寄せる。
• 価格表は写真の幅の約半分にし、2 枚目の写真と反対側に寄せる。
• 物撮り写真は左右に約 6% の余白をとり、縦書きのシリーズ名を右端に重ねる。
• 冒頭の 3 シリーズ目次は、正方形に近い写真を 3 列で並べる。

Elevation & Depth

• 影は一切つけない。
• 立体感は写真同士の重なりや、はみ出させる配置で出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 縦長の長方形で、角丸なし。モデル写真はバストアップで切り抜く
• セクション境界: 線や色帯は使わず、余白だけで区切る
• CTA 以外はすべて角を立てる。
• 罫線は細い 1px のグレーで、価格表と番号ラベルの下だけに引く。

Components

• 番号ラベル（series-label）: シリーズ番号を細いサンセリフで書き、下に 1px の線を引く
• 欧文シリーズ見出し（series-title）: 大きな欧文セリフ体の下に、明朝の和文コピーを置く
• 着用アイテムの価格表（price-table）: アイテム名と価格（小さく税込表記）の各行を、下線で区切る
• 商品名リスト（item-list）: 〈左〉〈右〉などの位置を添えた商品名と、右寄せの価格を罫線で区切って並べる
• 縦書きのシリーズ名（vertical-caption）: 物撮り写真の右端に、欧文のシリーズ名を 90 度回転させて重ねる
• 写真に重ねる欧文コピー（overlay-copy）: 物撮りの左下から 2 行の欧文コピーをはみ出させる
• 3 シリーズ目次（series-index）: 3 枚の写真を 3 列に並べ、下部に白い欧文名を重ねる
• 一覧への CTA（button-primary）: 黒いピル型ボタンに、白文字と右矢印を置く
• 撮影クレジット（credit-block）: スタッフ名を中央揃えで小さく並べる

Do's and Don'ts

Do - 写真は大きく使い、周りに十分な余白をとる。 - シリーズごとに左寄せと右寄せを交互に切り替え、リズムをつくる。 - 価格は「¥」付きの欧文セリフ体で書き、税込表記を小さく添える。 - 欧文と和文の見出しを組み合わせ、雑誌の誌面のような印象にする。

Don't - 色付きの背景帯、グラデーション、影は使わない。 - 太いゴシックの見出しや、派手な強調色は使わない。 - 割引バッジや煽る文言など、訴求型の装飾は入れない。 - 写真に角丸や枠線をつけない。

Page Structure

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

1. ファーストビュー（世界観とブランドラインを伝える）: 全面にモデル写真を敷き、下部に白い欧文タイトルと和文のサブコピーを重ねる
2. コンセプト（ブランドラインの価値を説明する）: 白地に明朝の大きなキャッチを置き、下に字間の広い本文を 5 行ほど続ける
3. シリーズ目次（3 つのテイストを一覧で見せる）: 小見出しの下に、写真 3 列と欧文名を並べる
4. シリーズ 1 紹介（1 つ目のテイストを着用イメージで訴求する）: 左寄せの見出しを置き、写真 2 枚を左右にずらす。続けて価格表、物撮り、商品リストを並べる
5. シリーズ 2 紹介（2 つ目のテイストを訴求する）: 右寄せの見出しにして、同じ構成で左右を反転させる
6. シリーズ 3 紹介（3 つ目のテイストを訴求する）: 左寄せに戻し、同じ構成をくり返す
7. CTA（商品一覧ページへ誘導する）: 中央に黒いピル型ボタンを 1 つだけ置く
8. クレジット・ブランド署名（制作情報とブランドの印象を残す）: 中央揃えのクレジットの下に、手書き風のコピー、ロゴ、SNS アイコンを置く
9. 共通フッター（サイト内リンクと規約を載せる）: 黒地に白い小さな文字とアイコンを並べる

Imagery

• モデル写真は窓辺の柔らかい自然光で撮り、彩度を落としたブルーグレー寄りのトーンにする。
• デコルテと首元を中心にバストアップで切り取り、横顔やうつむき気味のカットも混ぜる。
• 物撮りはコンクリートや石目、ガラス小物の上にアクセサリーを散らして置き、真上からやや斜めに撮る。
• 衣装は白、グレー、ベージュの無地で揃え、アクセサリーの金と銀を主役にする。
• イラストやアイコンなどの装飾は使わない。例外はブランド署名の手書き文字だけ。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 480〜600px 幅の SP レイアウトを置き、両側に背景写真やブランドロゴを配置する構成を推奨する。
• PC に広げる場合は、写真 2 枚の千鳥配置を横並びの 2 カラムに変えてもよい。
• 欧文大見出しは、PC では 64〜80px まで大きくする。
• 余白は SP の 1.5 倍を目安にする。

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