--- version: alpha name: Ivory Lily Art Nouveau Lingerie LP description: 生成りとアイボリーの地に、グレージュやモーヴの淡い色を重ねた女性向け下着の LP。百合のアールヌーボー装飾、欧文スクリプトの大見出し、明朝の本文、アーチ型の写真でエレガントでやわらかい印象にまとめている。 colors: primary: '#6E5A4E' background: '#FBF6F0' background-alt: '#FFFFFF' surface: '#E3E1D4' secondary: '#9A9384' accent-1: '#9A4252' accent-2: '#7D716A' accent-3: '#7E6B4A' text-body: '#5E5650' text-muted: '#8A8580' line: '#D0B7AD' tint-1: '#FBF6F0' on-dark: '#FFF8F7' text-muted-accessible: '#797470' secondary-accessible: '#797263' typography: display: fontFamily: Pinyon Script fontSize: 72px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Cormorant Garamond fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em accent: fontFamily: Cormorant Garamond fontSize: 60px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em label-button: fontFamily: Cormorant Garamond fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 0px md: 16px lg: 200px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' script-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 140px check-list: textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 130px outline-tag: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 28px before-after: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 260px number-feature: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 80px circle-badge: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 72px vertical-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 340px color-caption-bar: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 44px --- # DESIGN.md — 生成り×モーヴのアールヌーボー調ランジェリー LP（Ivory Lily Art Nouveau Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル - **キーワード**: 生成り・百合のレース・アールヌーボー・欧文スクリプト・アーチ窓・くすみパステル - **地の質感**: 淡い水彩風の百合イラストと、紙のようなアイボリー地。光沢のあるサテンやレースの質感を写真で見せる - **形**: アーチ型と角を内側に丸くえぐった写真枠、細い罫線、白い円形バッジ、縦長の半透明帯 - **温度感**: 暖かめのニュートラル。ベージュ寄りの白にくすんだピンクと藤色を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6E5A4E` | 見出し・欧文スクリプトのブラウン | 2% | 推定 | | `background` | `#FBF6F0` | 基本の生成り地 | 35% | 画素の実測 | | `background-alt` | `#FFFFFF` | カラー一覧などの白地 | 12% | 画素の実測 | | `surface` | `#E3E1D4` | 装飾背景のライトグレージュ | 8% | 画素の実測 | | `secondary` | `#9A9384` | 縦書きコピー帯のグレージュ | 2% | 推定 | | `accent-1` | `#9A4252` | After ラベルのボルドー | 0% | 画素の実測 | | `accent-2` | `#7D716A` | after ラベルのダークトープ | 1% | 画素の実測 | | `accent-3` | `#7E6B4A` | 番号・Before文字のオリーブゴールド | 0% | 推定 | | `text-body` | `#5E5650` | 本文の濃いグレー | 2% | 推定 | | `text-muted` | `#8A8580` | 英字キャプション | 0% | 推定 | | `line` | `#D0B7AD` | 細罫線・枠線 | 0% | 画素の主要色に補正 | | `tint-1` | `#FBF6F0` | 写真背景のピンクベージュ | 8% | 画素の実測 | | `on-dark` | `#FFF8F7` | 写真上・ラベル上の白文字 | 0% | 画素の実測 | | `text-muted-accessible` | `#797470` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#797263` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に使い、純白の面を大きく続けない - 見出しはブラウン系で黒は使わない - 強い色は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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文スクリプト大見出し | 欧文スクリプト | Pinyon Script | 400 | 72px | 1.0 | 0.0em | | `headline-lg` | 欧文セリフの英字見出し | 欧文セリフ | Cormorant Garamond | 500 | 34px | 1.2 | 0.04em | | `headline-md` | 和文の小見出し・訴求コピー | 明朝 | Shippori Mincho | 500 | 22px | 1.5 | 0.12em | | `headline-sm` | 番号つき特長の見出し | 明朝 | Shippori Mincho | 500 | 20px | 1.4 | 0.1em | | `body-md` | 本文・説明文 | 明朝 | Noto Serif JP | 400 | 14px | 2.0 | 0.08em | | `accent` | 大きな番号・色名などの欧文 | 欧文セリフ | Cormorant Garamond | 400 | 60px | 1.0 | 0.0em | | `note` | 英字キャプション・注釈 | 欧文セリフ | Cormorant Garamond | 400 | 11px | 1.4 | 0.15em | | `label-button` | Before/After・タイプのラベル | 欧文セリフ | Cormorant Garamond | 500 | 22px | 1.2 | 0.06em | - 大見出しは欧文スクリプトに小さな欧文サブ見出しを添える - 和文は明朝で、字間を広めに取る - 本文は中央揃えで行間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 ```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-872eec0f`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/u383a?utm_source=official_pickup_260317_u383a&utm_medium=official_pickup&utm_campaign=official_pickup/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。