--- version: alpha name: Pastel Floral Editorial Loungewear LP description: 白地に、ローズ・ブルーグレー・クリームの淡い色面を章ごとに敷き、写真を雑誌のように少しずつずらして重ねたルームウェアのギフト特集です。細い欧文セリフ見出しと小さな明朝の本文、全幅に通した細い横線で、上品で静かな雰囲気を作っています。 colors: background: '#FEFEFE' primary: '#D89A8E' tint-1: '#F6EBE9' tint-2: '#E9EAEE' background-alt: '#F9F4E1' secondary: '#8F9298' accent-1: '#C9B27A' accent-2: '#6F93B3' surface: '#F6EBE9' accent-3: '#F9E8E9' text-body: '#6B6560' line: '#E3C3BC' text-muted: '#AFAA9E' primary-accessible: '#AD4E3C' typography: display: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.06em headline-lg: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-sm: fontFamily: Cormorant Garamond fontSize: 18px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em body-md: fontFamily: Shippori Mincho fontSize: 12px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.08em note: fontFamily: Cormorant Garamond fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 24px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' chapter-heading: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 140px full-rule: textColor: '{colors.line}' height: 1px photo-collage: backgroundColor: '{colors.tint-2}' height: 520px price-caption: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 30px marquee-text: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 30px gift-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 420px button-outline: rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 淡色パステルと花柄のルームウェア特集 LP（Pastel Floral Editorial Loungewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル - **キーワード**: エディトリアル・パステル色面・非対称コラージュ・細身セリフ・余白多め・ギフト - **地の質感**: フラットな淡色面と自然光の写真。影や質感の加工はしない - **形**: 角のない長方形の写真と色面を、ずらして重ねる。カードだけ小さな角丸 - **温度感**: やや暖かく、柔らかい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | ページ地 | 43% | 画素の実測 | | `primary` | `#D89A8E` | ローズ章の見出し・アクセント | 1% | 推定 | | `tint-1` | `#F6EBE9` | ローズ章の色面 | 8% | 画素の実測 | | `tint-2` | `#E9EAEE` | ブルーグレー章の色面 | 6% | 画素の実測 | | `background-alt` | `#F9F4E1` | イエロー章のクリーム帯 | 4% | 画素の実測 | | `secondary` | `#8F9298` | ブルーグレー章の見出し | 1% | 画素の実測 | | `accent-1` | `#C9B27A` | イエロー章の金色見出し・装飾文字 | 1% | 推定 | | `accent-2` | `#6F93B3` | ブルー章の見出し | 1% | 推定 | | `surface` | `#F6EBE9` | ギフトカード枠の淡ピンク | 3% | 画素の実測 | | `accent-3` | `#F9E8E9` | ピンク章の色面 | 4% | 画素の実測 | | `text-body` | `#6B6560` | 本文の明朝 | 1% | 推定 | | `line` | `#E3C3BC` | 全幅の細い横線 | 0% | 推定 | | `text-muted` | `#AFAA9E` | 価格・品番の小さな注記 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#AD4E3C` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にする。章ごとに 1 色の淡いパステル面を敷く（ローズ／グレー／クリーム／ブルー／ピンク）。 - 見出しの色は、その章の色面と同じ系統で濃くした色にする。 - パステル面は彩度を低く、明度 92% 以上に保つ。 - 本文はグレーブラウンにして、真っ黒は使わない。 - 強い色はアクセントにも使わない。写真の花柄が一番の色になるようにする。 - `chapter-heading` は文字 `#D89A8E` × 背景 `#F6EBE9` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AD4E3C`、4.57:1）を使う。 - `gift-card` は文字 `#D89A8E` × 背景 `#F6EBE9` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AD4E3C`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの欧文タイトル | 欧文セリフ | Cormorant Garamond | 400 | 40px | 1.1 | 0.06em | | `headline-lg` | 章タイトル（大文字の欧文） | 欧文セリフ | Cormorant Garamond | 400 | 26px | 1.2 | 0.08em | | `headline-sm` | 章のサブタイトル（欧文） | 欧文セリフ | Cormorant Garamond | 400 | 18px | 1.3 | 0.04em | | `accent` | 章番号の斜体ラベル | 欧文スクリプト | Cormorant Garamond | 400 | 12px | 1.2 | 0.04em | | `body-md` | 本文・リード | 明朝 | Shippori Mincho | 400 | 12px | 2.1 | 0.08em | | `note` | 品番・価格のキャプション | 欧文セリフ | Cormorant Garamond | 400 | 9px | 1.6 | 0.08em | - 見出しはすべて細い欧文セリフで、太字にしない。 - 和文は小さめの明朝で、行間を 2 倍以上とる。 - 章番号は斜体の小さなラベルにして、タイトルの上に置く。 - リードは 2〜3 行の短文にし、中央揃えか左揃えにする。 - 装飾の欧文を縦書きで写真の横に添える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右に少しずらして重ねる - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - 章ごとに、色面・写真・テキストを非対称に配置する。 - 章タイトルの位置に全幅の細い横線を通す。 - 写真同士は 16〜32px ずらして重ねる。 - 余白を多くとり、1 画面の情報量を少なくする。 - 価格のキャプションは写真の右下に小さく置く。 ## Elevation & Depth - 影は使わない。 - 奥行きは、写真と色面を重ねて出す。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 縦長・正方形の長方形トリミング。角丸なし - **セクション境界**: 直線。色面のブロックが切り替わる位置と細い横線で区切る - 写真は角丸にしない。 - ボタンは細い線で囲んだ楕円のピル型にする。 - カードだけ角丸を 8px にする。 ## Components - **章見出しブロック**（`chapter-heading`）: 斜体の章番号の下に、大文字の欧文タイトルとサブタイトルを置き、短いリードを添える。 - **全幅の細い横線**（`full-rule`）: 章タイトルの高さに、1px の淡い線を画面幅いっぱいに通す。 - **ずらし写真コラージュ**（`photo-collage`）: 大小 2〜3 枚の写真を色面の上に、互い違いに重ねて置く。 - **品番・価格キャプション**（`price-caption`）: 写真の右下に、小さな欧文で右揃えにして置く。 - **欧文の横流しライン**（`marquee-text`）: 大小の欧文を繰り返して並べた、金色の帯。 - **特典カード**（`gift-card`）: 淡ピンクの角丸カード。楕円のラベル、見出し、商品画像、説明を中央揃えで並べる。 - **楕円線のボタン**（`button-outline`）: 写真の上に、白い細線の楕円枠と斜体欧文の文字で置く。 ## Do's and Don'ts **Do** - 章ごとに異なる淡いパステル色面を使う。 - 見出しは細い欧文セリフにし、和文は小さな明朝にする。 - 写真を非対称に重ねて、雑誌のような余白をとる。 - 自然光が入る室内の写真を使う。 **Don't** - 濃い色や原色のボタンを置かない。 - 太いゴシック体を使わない。 - 写真に角丸や影をつけない。 - 情報を詰め込まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（特集テーマと季節感を伝える）: 花の写真に人物写真を重ね、金色の欧文タイトルを大きく置く 2. **リード文**（ギフト特集の趣旨を伝える）: 白地に中央揃えの明朝を短い行で組み、行間を広くとる 3. **商品章1（ローズ）**（商品を提案する）: ローズ色面、章見出し、写真 3 枚のコラージュ、価格キャプションで組む 4. **商品章2（グレー）**（商品を提案する）: グレー色面を右側に置き、左右を反転させたレイアウトにする 5. **商品章3（イエロー）**（商品と小物を提案する）: クリーム帯の上に写真を重ね、小物の写真を 3 枚横に並べる。欧文の横流しラインを入れる 6. **商品章4（ブルー）**（商品を提案する）: 淡ブルーの色面に、アーチのある室内写真を重ねる 7. **商品章5（ピンク）**（商品を提案する）: ピンク色面に写真を重ね、縦書きの欧文を添える 8. **特典カード**（購入特典を伝える）: 淡ピンクの角丸カードに要素を中央揃えで並べる 9. **フッター CTA・クレジット**（一覧ページへ誘導する）: 全幅の花束写真の上に、楕円線のボタンとクレジットを置く ## Imagery - 自然光が入る白い室内で、柔らかく笑う女性モデルを撮る。 - パステルの花柄の衣服が写真の主役になるようにする。 - 花のクローズアップをぼかしで撮り、章の区切りに使う。 - 小物は白い台の上で、静物として撮る。 - 全体に明るく、低コントラストの暖色寄りに仕上げる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は写真を左右に大きく散らして配置し、色面を画面端まで伸ばす。 - SP では写真を縦に積む。左右に 16〜24px 互い違いにずらし、重なりは残す。 - SP では章見出しのサイズを 26px 前後にする。 - SP では小物の写真 3 枚を、横スクロールか 2 列にする。 ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-12f45451`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/250409_mothersday/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。