DESIGN.md — 生成り×モーヴのアールヌーボー調ランジェリー LP（Ivory Lily Art Nouveau Lingerie LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 生成り・百合のレース・アールヌーボー・欧文スクリプト・アーチ窓・くすみパステル
• 地の質感: 淡い水彩風の百合イラストと、紙のようなアイボリー地。光沢のあるサテンやレースの質感を写真で見せる
• 形: アーチ型と角を内側に丸くえぐった写真枠、細い罫線、白い円形バッジ、縦長の半透明帯
• 温度感: 暖かめのニュートラル。ベージュ寄りの白にくすんだピンクと藤色を差す

Colors

• 地は生成りと白を交互に使い、純白の面を大きく続けない
• 見出しはブラウン系で黒は使わない
• 強い色はBefore/Afterラベルなど小面積だけにする
• 装飾は淡いグレージュや薄緑で描き、背景になじませる
• 写真の背景はピンクベージュやアイボリーで統一する
• 商品色はくすんだパステルにとどめ、彩度の高い色は入れない
• outline-tag は文字 #8A8580 × 背景 #FFFFFF のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#797470、4.62:1）を使う。
• vertical-band は文字 #FFF8F7 × 背景 #9A9384 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#797263、4.55:1）を使う。

Typography

• 大見出しは欧文スクリプトに小さな欧文サブ見出しを添える
• 和文は明朝で、字間を広めに取る
• 本文は中央揃えで行間2.0
• 大文字だけの欧文は字間0.2em前後で薄く見せる
• 番号は大きな欧文セリフにし、縦罫線を挟んで見出しを並べる
• 太字は使わず、強調は文字の大きさと下線で付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較やカラー一覧は 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅か左右に約20pxの余白を取って配置
• 見出しの前後に細い縦線や横罫線を入れて間を取る
• Before/Afterは2枚並べ、下に全幅のラベル帯を付ける
• 見出しと写真の間は約24px、写真と本文の間は約24px
• フルブリードの人物写真とアイボリー地の説明を交互に並べる

Elevation & Depth

• 影はほとんど使わずフラットにする
• 円形バッジは白の半透明と、ぼかした縁取りで浮かせる
• 写真上の帯は白の半透明（60〜80%）で重ねる

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 上が半円のアーチ型、角を内側にえぐった額縁型、角丸の組み写真
• セクション境界: 直線で切り替え、上下にアールヌーボーの百合装飾フレームを置く
• ラベルは角丸なしの細枠ボックスにする
• 特長写真は上部アーチ、下部コーナーを内側に丸くえぐる
• 縦書きのコピー帯は角丸の縦長カプセル

Components

• スクリプト大見出し（script-heading）: 欧文スクリプトの大文字に小さな欧文サブと横罫線を添える
• 悩みのチェックリスト（check-list）: 四角いチェックボックスと明朝の短文を3行並べる
• 細枠タグ（outline-tag）: 細い線の長方形に小さな欧文を入れる。斜線の飾りを付ける
• Before/After比較（before-after）: 写真2枚を並べ、下にベージュ地とボルドー/トープ地のラベル帯を付ける
• 番号つき特長（number-feature）: 大きな欧文数字、縦罫線、2行の明朝見出しを横に並べ、下にアーチ型写真を置く
• 円形キーワードバッジ（circle-badge）: 白い半透明の円に短い明朝の語を入れ、縦に3つ並べる
• 縦書きコピー帯（vertical-band）: グレージュの縦長帯に白い明朝の縦書きコピーを入れ、写真に重ねる
• 色名キャプション帯（color-caption-bar）: 全幅の人物写真の下に、白い半透明の帯と欧文の色名を置く

Do's and Don'ts

Do - 見出しは欧文スクリプトと明朝の組み合わせにする - 百合やアーチの装飾を淡い色で背景に入れる - 写真はアーチ型や額縁型で上品に切り抜く - 説明文は短い行で中央揃えにし、余白を広く取る - 強い色は小さなラベルにだけ使う

Don't - ゴシックの太字や原色を使わない - 影や光沢の強いボタンで装飾しない - 純黒の文字や背景を使わない - 情報を詰め込んだ表や派手なバッジを置かない - 装飾を濃い線で描かない

Page Structure

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

1. ファーストビュー（商品の世界観と主役の訴求を見せる）: 人物のアップを全幅で使い、アーチ装飾の上に白いロゴ風コピーを重ね、左下にサイズとカラーチップを置く
2. コンセプト（シリーズの価値を情緒的に伝える）: 百合の水彩背景にスクリプトとセリフの欧文を組み、明朝の短文を6行中央に並べる
3. 主訴求ビジュアル（一番の機能を印象づける）: 人物写真の右側に縦書きのグレージュ帯を重ねる
4. 悩みの提起（対象の悩みを確認させる）: セリフ欧文の見出しの下にチェックリストを3項目置く
5. 着用比較（効果を視覚で証明する）: 細枠タグ、下向き矢印、Before/Afterの2枚並び
6. 構造説明（素材と構造を説明する）: 断面写真に引き出し線のラベルを付け、下に中央揃えの説明文
7. ビジュアル訴求（機能を感情的に訴える）: 全幅の人物写真に円形バッジを3つ並べ、かぎ括弧付きの大きなコピーを置く
8. カラーバリエーション（色の選択肢を見せる）: 白地に字間の広い欧文見出し、商品の切り抜き写真を2×2で並べ欧文の色名を付ける
9. タイプ選択（派生タイプを比較させる）: アーチ装飾の枠内に、写真2枚と大きな欧文アルファベット、細枠のタイプタグと名称を罫線で区切って並べる
10. フィッティング比較（正面・横の変化を示す）: スクリプト見出しと明朝コピーの後に、before/after比較を2組。補助の点線や水平線を付ける
11. 特長ポイント（機能の詳細を順に説明する）: 斜めに配置したコピーの写真の後、01〜03の番号見出しとアーチ型写真、短い説明文を繰り返す
12. カラー別ルック（各色の着用イメージで購買意欲を高める）: 全幅の人物写真を縦に並べ、それぞれの下に白い半透明の色名帯を置く

Imagery

• 人物はやわらかい自然光で、背景はアイボリーやピンクベージュのドレープ布にする
• ヘアアクセサリーや百合の花で、繊細なモチーフを足す
• 商品の切り抜きは白地で、影を付けずに並べる
• 装飾はアールヌーボー風の百合とアーチを、淡いグレージュの水彩調で描く
• 素材の質感は指先や断面のマクロ写真で見せる
• 比較写真は首から下を同じ構図で撮り、背景を統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 480〜600px の SP レイアウトを置き、左右を生成り地や装飾で埋める
• カラーバリエーションは PC で4列に広げてよい
• フルブリードの人物写真は PC で最大幅を決め、トリミングで縦長を保つ
• スクリプト見出しは PC で 1.3 倍程度まで拡大する

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