DESIGN.md — くすみピンク×細身セリフの雑誌風エプロン LP（Dusty Pink Editorial Apron LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、シンプル・ミニマル
• キーワード: くすみピンク・雑誌エディトリアル・円形フレーム・極細セリフ・余白・大人の甘さ
• 地の質感: 布地を接写したぼかし写真や柔らかい自然光の写真を背景に敷き、マットで粉っぽい質感を出す
• 形: 大きな正円と円弧で写真をくり抜く。直線は極細の縦線・横線のみ
• 温度感: 暖色寄りでやわらかい。彩度は低めに抑える

Colors

• 地はベージュ・生成り・くすみピンクの 3 段階を交互に使う
• 原色や高彩度の色は使わない
• ピンク地には白文字、明るい地にはグレージュ文字
• 線はすべて地より少し明るいか暗い同系色の極細線
• 商品の色と地の色を揃えて全体を同じトーンにする
• circle-line-badge は文字 #F8EEDF × 背景 #CAB09F のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#89644C、4.58:1）を使う。

Typography

• 欧文の大見出しは極細で大きく、セクションの主役にする
• 和文は明朝で中央揃え、字間を広めに取る
• 英文の訳を和文の下に小さく添える
• 縦書きで画面端に沿う欧文の装飾タイトルを置く
• 太字は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム・中央揃え
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面幅いっぱいか、円形に大きく切り抜く
• テキストは中央揃えの短いブロックにする
• 和文と英文の間に短い縦線を入れる
• セクションは見出し→写真→キャッチの順で繰り返す
• 写真と装飾文字を重ねてレイヤー感を出す

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真と半透明の地を重ねて出す
• 布地のぼかし写真を薄く背景に敷く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 大きな正円か、上が円弧のアーチ型にくり抜く
• セクション境界: 円弧の境界と極細の円ラインで区切る
• 円は画面からはみ出すくらい大きく使う
• 見出しの周りに極細の円ラインを添える
• カードや角丸の箱は使わない

Components

• 欧文大見出し（serif-display-title）: 極細セリフの短い欧文を大きく中央に置き、その下に大文字の小見出しを添える
• 縦書き装飾タイトル（vertical-deco-text）: 画面の端に沿って欧文を 90 度回転させ、写真に重ねる
• 円形写真フレーム（circle-photo-frame）: 商品写真を大きな正円にくり抜き、ピンク地の上に置く
• 極細円ラインの見出し（circle-line-badge）: 細い線の円の中に白い欧文の見出しを置く
• 縦線付きキャッチ（copy-with-rule）: 明朝のキャッチ、短い縦線、英文の訳を中央に縦に並べる
• 罫線付きタグライン（tagline-rule）: 写真の下部に極細の横線と小さな英文タグラインを重ねる

Do's and Don'ts

Do - くすみピンクとベージュの濃淡だけで構成する - 欧文は極細セリフで大きく使い、余白を広く取る - 写真は円やアーチの形に切り抜く - コピーは短い言葉を 2〜3 行に切って中央に置く - 線の装飾は 1px 前後の細さにする

Don't - 太いゴシックや原色のボタンを目立たせない - 影・グラデーションボタン・角丸カードを使わない - 文章を長く詰め込まない - 濃い黒の文字を使わない - 派手なアイコンやイラストを入れない

Page Structure

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

1. ファーストビュー（世界観と商品の第一印象を伝える）: 全面のモデル写真に縦書きの欧文ロゴタイプとタグラインを重ねる
2. シルエット紹介（形の美しさを見せる）: ピンク地に極細円ラインの欧文見出しを置き、下に円形くり抜きの後ろ姿写真を並べる
3. コンセプトコピー（トーンや甘さの方向性を言葉で伝える）: 布地のぼかし写真の上に白い明朝 3 行、縦線、英文訳を置く
4. ディテール（フリルや生地感を伝える）: 欧文大見出しと小見出しの下に円形の接写写真を置き、明朝 2 行のキャッチを添える
5. 着用イメージ（日常で使う姿を想像させる）: 円形の写真と、縦書き欧文を重ねた全幅のモデル写真を続ける
6. ギフト提案（贈り物としての使い方を伝える）: モーブ地に円弧の欧文見出しを置き、円形の中にラッピング写真を入れる

Imagery

• 自然光の窓辺で撮る、明るく白飛び気味の柔らかい写真
• モデルは白いリブニット＋生成りスカートで、商品の色を引き立てる
• フリルやリボンを手で持ったり接写したりしてディテールを見せる
• ドライフラワー・かご・本・チューリップなどの淡色小物を添える
• 布地の縫い目を大きくぼかした写真を背景テクスチャに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 480px）のコラムを置き、左右はベージュで埋める
• PC で広げる場合は写真と欧文見出しを左右 2 カラムに分けてもよい
• 円形写真は PC でも正円を保ち、最大幅 600px 程度にする
• 欧文の大見出しは PC で 140px 前後まで大きくする

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