DESIGN.md — パステル雑誌風の季節ルームウェアカタログLP（Pastel Seasonal Lookbook Roomwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 雑誌カタログ・パステル・シリーズ別配色・欧文見出し・ふわふわ素材感・余白多め
• 地の質感: フラットな単色面に、柔らかい自然光の写真を重ねる。雲や花の背景は淡くぼかして敷く
• 形: 角丸の写真、細線のアーチ・円弧、雑誌の表紙風モックアップ、オレンジの日よけ(オーニング)型の区切り
• 温度感: 全体は暖かく甘い。空色とグレーのセクションで少し涼しさを差し込む

Colors

• シリーズごとに地色を1色決めて、セクション全体を同じ色の面で塗り切る
• 見出し・リード・価格キャプションは、そのシリーズのアクセント色1色でまとめる
• 同じシリーズの中でアクセント色を混ぜない
• 鮮やかな色は文字だけに使い、面は必ず淡いパステルにする
• 黒(#000)は使わず、文字はブラウン・グレー・各アクセント色で組む
• 細線は地色より一段濃い同系色にして、さりげなく引く
• arch-frame は文字 #86736F × 背景 #E1DAD2 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6D5D5A、4.51:1）を使う。
• grid-lined-block は文字 #666779 × 背景 #E4E6E3 のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#646576、4.56:1）を使う。

Typography

• 大見出しは英語だけで組み、日本語の見出しは使わない
• シリーズの性格に合わせて見出しの書体を変える(甘い系は太いセリフ、上品系は細いセリフ)
• 日本語のリードは小さめにし、行間を約2.0とってゆったり組む
• 価格は「英大文字の商品名＋数字yen」の形式で、小さく中央に添える
• 縦書きの英字や、円弧に沿わせた英字を飾りとして使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真を左右にずらして段違いに置く
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• シリーズの境目では地色を全幅で切り替える
• シリーズの導入は、見出し・リード・メイン写真の順に並べる
• アイテム写真は幅75〜90%で、左右どちらかに寄せることがある
• 写真のすぐ下に価格キャプションを中央揃えで置く
• グレー系のセクションでは細い罫線のグリッドで写真と文字を区切る

Elevation & Depth

• 基本は影なしのフラットな面で組む
• 雑誌表紙風のモックアップにだけ、下方向に濃いめのドロップシャドウを付ける
• 立体感は影ではなく写真の素材感で出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸16pxの長方形が基本。上品系は上辺が半円のアーチ型、ガーゼ系は角丸なしの四角でずらして重ねる
• セクション境界: 地色を水平に切り替えるだけ。スイーツ系の冒頭にストライプの日よけを置く
• 細線の大きな円弧やアーチを背景に敷き、写真をその上に重ねる
• 角丸の写真の上辺に見出しをかぶせて置く
• 雑誌の表紙風モックアップでシリーズの扉にする

Components

• 雑誌表紙風の扉（magazine-cover）: 表紙を模した縦長の枠に、シリーズ名・英語の小見出し・商品写真を組む。影を付ける
• 日よけ風ストライプの区切り（awning-divider）: ベリー色と白のストライプに波形の裾を付け、お店の入口のように見せる
• 見出しを重ねた角丸写真（overlap-title-photo）: 角丸写真の上辺に、2行の太い英字見出しをはみ出させて重ねる
• 価格キャプション（price-caption）: 英大文字の商品名と価格を1〜4行、中央揃えで小さく置く
• 細線アーチの枠（arch-frame）: グレージュ地に細い線のアーチを引き、写真とコピーをその中に収める
• 円形に沿わせた英字（circular-text）: アイテム名を円弧に沿って配置し、写真の横に添える飾り
• 罫線グリッドの誌面（grid-lined-block）: 細い罫線で区切ったマスに、斜体の英語見出しと写真を交互に配置する
• 縦書きの英字ラベル（vertical-label）: 写真の横に、細いセリフの英字を縦向きに大きく置く

Do's and Don'ts

Do - シリーズごとに地色とアクセント色を決め、ブロックとして完結させる - 見出しは英語で大きく、日本語は短いリードだけにする - 写真の下には必ず商品名と価格を小さく添える - 背景には細線の円弧・雲・花のぼかしなど軽い装飾を使う - 余白を多めにとり、雑誌をめくるようなリズムをつくる

Don't - 強い色のベタ塗りボタンや「今すぐ購入」型の訴求を置かない - 黒文字や原色の面を使わない - 1つのシリーズの中で複数のアクセント色を混ぜない - ドロップシャドウを多用しない - 日本語の太い大見出しを使わない - 写真を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（季節コレクションの世界観を一枚で伝える）: 空と雲の幻想的な写真を全面に敷き、細い青のセリフ体で季節とコレクション名を置く
2. シリーズ導入(甘い系)（スイーツ柄シリーズの紹介）: 日よけ風の区切りの下を生成り地にし、ベリー色の太いセリフ見出しと中央揃えのリードを置く
3. 商品紹介(雑誌表紙風)（シリーズの代表アイテムを見せる）: 表紙風のモックアップに価格キャプションを添え、続けて見出しを重ねた角丸写真を並べる
4. サブシリーズ紹介（柄違いのシリーズを順に見せる）: 同じ型を繰り返し、アクセント色だけをコバルトや朱赤に変える
5. 上品系シリーズ（大人向けの上質なアイテムを訴求する）: グレージュ地に細いモーブ色のセリフ見出しを置き、細線アーチの中にアーチ型の写真と短いコピー、価格を収める
6. 雲シリーズ（ふわふわ素材の寝具を紹介する）: 空色の地に雲の写真を合わせ、青の細いセリフ見出しを置く。縦書きの英字ラベルを添えた写真を並べる
7. 定番カラー追加（定番シリーズの新色を告知する）: ライトグレー地に罫線グリッドの誌面を組み、グレーパープルの斜体で英語見出しを入れる。カラーバリエーションの写真も載せる
8. ガーゼシリーズ（季節を問わない人気シリーズで締める）: 淡黄の地に花のぼかしを敷き、マリーゴールド色の見出しを置く。角丸なしの写真を段違いに重ね、筆記体の英語の一言で終える

Imagery

• 自然光で柔らかく撮った寝室の写真。白・パステル・木の家具でまとめる
• モデルは寝具にくるまる、寝転ぶなど、リラックスした自然な表情で撮る
• ニット・ガーゼ・シルクなど素材の質感が伝わる寄りのカットを入れる
• 子猫や小型犬を添えて、かわいさと温かみを出す
• 空と雲の合成や花のぼかしなど、夢のような背景を使う
• スイーツ柄のアイテムは、イラストのような正面のフラットな構図で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 1 カラムを最大幅約 750px で保ち、左右には各シリーズの地色を全幅で敷く
• PC ではアイテム写真を 2 カラムに並べ、価格キャプションを各写真の下に置く
• ファーストビューと雲の写真は PC で全幅に広げ、見出しを大きくする
• PC では見出しを SP の約 1.5 倍にし、本文は 15px 程度にする
• 罫線グリッドのブロックは PC で 3〜4 マスに展開する

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