DESIGN.md — パステル三色のコラージュ風アパレル特集 LP（Pastel Scrapbook Picnic Fashion Editorial LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: コラージュ・切り抜き写真・パステル章分け・細い欧文セリフ・手描きキャラ・雑誌エディトリアル
• 地の質感: 基本はフラットな淡色の面。方眼紙の柄、紙のような微細ノイズ、白フチのステッカー風切り抜きで手作り感を足す。
• 形: 写真は不定形に切り抜き、白フチを付けて傾ける。BUYボタンは小さなピル型。キャンペーン枠は四角い点線。人物の顔写真は円形に切り抜く。
• 温度感: 春らしい明るさと甘さ。ミントの温かみ、ピンクの柔らかさ、水色の涼しさを章ごとに切り替える。

Colors

• 章ごとに地色と見出しの強調色を一組にする（ミント×緑、ピンク×サーモン、水色×青紫）。
• BUYボタンの塗りは、その章の強調色を淡くしたものに揃える。
• 本文はどの章でもほぼ黒の一色で書く。
• セール価格は、元値に打ち消し線を引き、赤で並べて書く。
• キャンペーン情報はくすんだモーヴの地に、黒い点線の枠で区切る。
• ページの最後だけ鮮やかなオレンジを全面に敷き、締めのアクセントにする。
• index-nav は文字 #FEFFFD × 背景 #EA5206 のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF4805、4.57:1）を使う。

Typography

• 見出しは細い欧文セリフを主役にし、日本語の見出しは最小限にする。
• 章タイトルは、小さい前置詞と大きい名詞の2段構成でサイズ差を付ける。
• 本文は中央揃えにして、行間を広めに取る。
• 飾りの欧文は写真の輪郭に沿って曲げて配置する。
• 商品情報は小さな文字で、ブランド名・商品名・価格の3行に並べる。
• 目次だけは太い欧文サンセリフの大文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面の幅いっぱいまで、または端からはみ出させて自由に配置する。
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 章の最初に左寄せの大きな欧文タイトルを置き、その下にメインの写真を置く。
• 商品リストは、左にサムネイル・中央に商品情報・右にBUYボタンの横並びを6〜8行重ねる。
• おすすめ商品は、横にスクロールするカードを4枚並べる。
• コラージュ部分では写真を互い違いに置き、重ねたり上下反転させたりする。
• キャンペーン情報は点線で囲んだ箱に縦積みし、内側に約24pxの余白を取る。

Elevation & Depth

• 影はほとんど使わない。
• 切り抜き写真には白フチと淡いドロップシャドウを付け、ステッカー風にする。
• カードは影を付けず、枠線か地色の差だけで区切る。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は輪郭に沿った不定形に切り抜き、白フチを付ける。写真は長方形か角丸の長方形にする。プロフィール写真や景品写真は円形にする。
• セクション境界: 境界は地色を直線で切り替えるだけにする。目次の上には白い雲形のラベルを置き、区切りには細い波線を使う。
• BUYボタンは高さ約18pxの小さなピル型にし、黒の細い枠を付ける。
• キャンペーンの箱は角丸なしで、1pxの黒い点線で囲む。
• STEPの番号は細い線の円で囲む。

Components

• BUYボタン（button-buy）: 商品行の右端に置く小さなピル型ボタン。章の色を淡くした塗りに黒い細枠を付ける。
• 商品リストの行（product-row）: 約48pxの正方形サムネイル、ブランド名・商品名・価格の3行、BUYボタンを横に並べる。
• 章タイトル（chapter-title）: 黒の短い欧文の下に、章の色で前置詞（小）と名詞（大）を2段で組む。
• コラボ名のマーカーラベル（marker-label）: 蛍光グリーンの帯の上に、手書き風の大文字で書く。
• 点線のキャンペーン枠（dotted-box）: モーヴ地の上に黒い点線の箱を置き、欧文見出し・説明・円形写真・注釈を中に入れる。
• 手順の番号（step-circle）: 細い線の円の中に小文字の欧文で手順番号を書き、手順の間を▼でつなぐ。
• 価格付きの下線リンク（item-link-list）: アイテム名と価格を太字にして下線を引き、文章のように続けて並べる。
• おすすめ商品のカルーセル（recommend-carousel）: 縦長の写真カードを横にスクロールさせる。右下に「すべて見る」の下線リンクを置く。
• 白いボックスボタン（button-secondary）: 白い長方形のボタンに黒文字で書き、文末に「＞」を付ける。
• オレンジの目次（index-nav）: オレンジ地に白い太字の欧文を2列で並べる。項目の頭に丸い矢印を付け、グループの間は細い白線で区切る。

Do's and Don'ts

Do - 章ごとに地色と強調色を一組で切り替える。 - 人物写真は白フチ付きの不定形に切り抜き、少し傾けて重ねる。 - お菓子やグミなどの切り抜き素材を、画面の端からはみ出させて散らす。 - 手描きの白いキャラクターを余白にちりばめる。 - どの章も、最後は商品リストとBUYボタンで締める。 - 見出しは細い欧文セリフで、軽く上品にまとめる。

Don't - 太いゴシックの大見出しや、濃い色の帯は使わない。 - BUYボタンを大きく派手にしない。 - 写真をすべて同じ大きさの四角で整列させない。 - 影の強いカードUIにしない。 - 1つの章の中で複数の強調色を混ぜない。

Page Structure

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

1. ファーストビュー（特集の世界観とテーマを提示する）: 淡い黄緑のグラデーションの地にメイン写真を置き、お菓子の切り抜きを重ねる。下に斜体の欧文キャッチと日本語タイトルを置く。
2. リード文（企画の概要を伝える）: 中央揃えの本文を8行ほど、行間を広く組む。
3. キャンペーン概要（特典を早めに知らせる）: 白地に黒い細枠の箱を置き、マーカーラベル・欧文見出し・vol別の条件・下線リンクを入れる。
4. 章の目次（3つの章へ誘導する）: 方眼紙の地に、白フチの切り抜き写真3枚とそれぞれの曲線欧文を互い違いに置く。
5. 章1（緑）（1つ目のコーディネートを紹介して販売する）: ミントの地に章タイトル・写真・商品リストを置き、続けてコラージュ、アイテムの平置き写真と下線リンク、おすすめカルーセルを並べる。
6. 章2（ピンク）（2つ目のコーディネートを紹介して販売する）: ピンクの地に同じ構成で並べる。雲や花の切り抜き、文字の弧、アイス柄の繰り返しを加える。
7. 章3（海）（3つ目のコーディネートを紹介して販売する）: 水色の地に同じ構成で並べる。水面の不定形の切り抜き、反転させた写真、ヤシの木などの夏の素材を使う。
8. 雑貨への導線（ページ内に登場した雑貨へ誘導する）: 中央に白いボックスボタンを置く。
9. キャンペーン詳細（特典・応募方法・期間を伝える）: モーヴの地に点線の箱を置き、円形の景品写真、手順番号、【】で囲んだ見出しで期間を示す。
10. イベント情報（関連イベントを告知する）: 点線の箱の中に、説明文・円形写真・会場情報の表を入れる。
11. プロフィール（関係する人物やキャラクターを紹介する）: 波線で区切り、欧文見出し・円形の顔写真・左揃えの経歴文を置く。
12. 目次（関連する企画へ回遊させる）: オレンジの全面地に雲形のラベルを置き、白い太字の欧文で2列の目次とバナー2枚を並べる。

Imagery

• 人物は自然光で明るく撮った全身やバストアップを使い、背景はセットや空、水面にする。
• 人物は輪郭に沿って切り抜き、白フチと淡い影を付けたステッカー風にする。
• お菓子・グミ・フルーツ・花の切り抜きを画面の端に散らす。
• 線画の白いゆるキャラを、ハートなどと一緒に添える。
• アイテムは、地色に合う背景の上に平置きのコラージュでまとめる。
• 景品や人物の写真は白い円の中に収める。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はない。PCでは本文の幅を約600〜720pxにし、中央に寄せて置くことを推奨する。
• コラージュは左右の余白にも切り抜き素材を広げ、はみ出し感を保つ。
• 商品リストは、PCでは2カラムのグリッドにしてもよい。
• おすすめのカルーセルは、PCでは4〜5枚を一度に見せる。
• 地色の切り替えは、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 行書くと起動時に読み込まれる。