--- version: alpha name: Greige Watercolor Body Type Diagnosis Lingerie LP description: 生成りとグレージュの地色に、ココアブラウンの文字とボタンを合わせた落ち着いた配色。細い欧文セリフと手書きスクリプトを重ねて大人っぽさを出す。自己診断の設問カード、骨格タイプごとの水彩イラスト解説、白い角丸の商品カードを順に並べるファッションインナー向けの診断型 LP。 colors: background: '#F1EDEA' background-alt: '#E4DDD7' surface: '#FFFFFF' primary: '#5D4243' cta: '#5D4243' on-cta: '#FFFFFF' text: '#4C413F' text-body: '#6B5D5D' line: '#938585' tint-1: '#E4DCD5' accent-1: '#E58BB8' accent-2: '#ADD2E4' accent-3: '#B6D08A' typography: display: fontFamily: Cormorant Garamond fontSize: 34px fontWeight: 400 lineHeight: 1.2 accent: fontFamily: Allura fontSize: 30px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Cormorant Garamond fontSize: 22px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em label-button: fontFamily: Montserrat fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 34px button-small: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 24px question-card: textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 250px pill-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 28px type-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px point-badge: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 290px speech-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 34px supervisor-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 240px --- # DESIGN.md — グレージュ×水彩イラストの骨格診断インナー LP（Greige Watercolor Body Type Diagnosis Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル - **キーワード**: グレージュ・水彩イラスト・細い欧文セリフ・手書きスクリプト・診断コンテンツ・余白多め - **地の質感**: マットで平滑な面。写真はハイキーで白っぽく、ファッションアイテムは水彩のにじみで描く - **形**: 細線の角丸枠、楕円のラベル、円形の商品背景、白い大きめ角丸カード - **温度感**: やや暖かいニュートラル。ピンクを少し含んだベージュ寄り ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F1EDEA` | 基本の地色（生成りグレージュ） | 40% | 画素の実測 | | `background-alt` | `#E4DDD7` | タイプ解説セクションの地色 | 25% | 画素の実測 | | `surface` | `#FFFFFF` | 商品カード・吹き出しラベル | 12% | 画素の実測 | | `primary` | `#5D4243` | ブランド色のココアブラウン（ボタン・POINTラベル） | 2% | 画素の実測 | | `cta` | `#5D4243` | CHECKボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#4C413F` | 見出し・欧文タイトル | 1% | 画素の実測 | | `text-body` | `#6B5D5D` | 本文・設問文 | 2% | 推定 | | `line` | `#938585` | 設問カードの細枠・見出し横線 | 0% | 画素の主要色に補正 | | `tint-1` | `#E4DCD5` | 楕円ラベル・円形の商品背景 | 2% | 画素の実測 | | `accent-1` | `#E58BB8` | ウェーブタイプのピンク（イラスト・点線） | 0% | 推定 | | `accent-2` | `#ADD2E4` | ストレートタイプの水色 | 0% | 画素の実測 | | `accent-3` | `#B6D08A` | ナチュラルタイプの若草色 | 0% | 推定 | - 地色は生成り（background）とグレージュ（background-alt）を交互に使い、セクションを分ける - 文字は純黒にしない。ココアブラウン系の濃淡だけで階層をつける - 濃い面に使うのはボタンと POINT ラベルの primary だけ - ピンク・水色・若草色は 3 タイプの識別色にする。イラストと点線の中だけで使う - 白は商品カードと吹き出しラベルに限る。地色から浮かせて見せる - 写真はハイキーなグレージュ調にし、彩度を上げない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大きな欧文タイトル | 欧文セリフ | Cormorant Garamond | 400 | 34px | 1.2 | 0.0em | | `accent` | 見出しに斜めに重ねる手書きの英語 | 欧文スクリプト | Allura | 400 | 30px | 1.0 | 0.0em | | `headline-lg` | タイプ名や設問番号の欧文見出し | 欧文セリフ | Cormorant Garamond | 500 | 22px | 1.3 | 0.03em | | `headline-md` | キーワード・商品カードのキャッチ | ゴシック | Zen Kaku Gothic New | 400 | 16px | 1.7 | 0.08em | | `body-md` | 本文・設問の選択肢 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 2.0 | 0.08em | | `note` | 商品コード・価格・サイズ | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.04em | | `label-button` | ボタンと POINT ラベル | 欧文サンセリフ | Montserrat | 500 | 12px | 1.0 | 0.08em | - 欧文セリフの見出しの右下に、手書きスクリプトを斜めに重ねる - 和文は細めのゴシックを使い、字間を広く、行間を 2.0 前後とる - 本文は中央揃えを基本にする。タイプ解説の本文だけ左揃え - 太字はほぼ使わず、サイズと色の濃さで階層をつける - 英語の小見出し（KEYWORD・DRESS など）は大文字のセリフ体で小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。タイプ解説はイラストと文章の 2 列、アイテム紹介は 2〜3 列の自由配置 - **本文ブロックの幅**: 画面幅の約 78% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上下に大きな余白をとり、ゆったり見せる - 設問カードは同じ形で縦に 6 つ連ね、間を 36px ほどあける - タイプ解説は「見出し → 人物イラスト＋本文 → アイテムイラスト＋POINT」の順で毎回そろえる - 商品カードは画面幅の約 82% にし、中では左に円形画像、右に情報を置く - 各タイプの後ろに、おすすめ商品のセクションを必ず続ける ## Elevation & Depth - 商品カードと監修者カードに、広くぼかした薄い影をつける（0 6px 16px rgba(0,0,0,0.08)） - 設問カードは影をつけず、細線の枠だけで区切る - ボタンはフラットにする ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は薄いグレーの正円の上に切り抜いて置く。監修者も円形。FV は細枠で囲んだ長方形写真 - **セクション境界**: 直線で地色を切り替える - 設問カードは角丸 16px の細線枠。上辺の中央を空けて、そこに見出しを載せる - カテゴリラベルは淡い色の楕円にする - タイプ見出しは両側の横線と斜線で挟む - ボタンは角丸ほぼ 0 の長方形にし、右矢印をつける - 吹き出しラベル（「〇〇のあなたは」）は白のピル形にする ## Components - **一覧ボタン**（`button-primary`）: ココアブラウンの長方形。大文字英語と長い右矢印を入れ、中央に置く - **商品カード内のボタン**（`button-small`）: カード右側の情報欄の幅いっぱいに置く細いボタン - **設問カード**（`question-card`）: 細線の角丸枠。上辺に設問番号をセリフ体で載せる。楕円ラベルの横に手書きの英語を添え、◎記号つきの選択肢を 3 つ並べる - **楕円カテゴリラベル**（`pill-label`）: 淡いグレージュの楕円に、短い和文を入れる - **タイプ見出し**（`type-heading`）: 大文字セリフ体の英語を横線と斜線で挟み、右下に手書きの英語を重ねる - **POINT ラベル**（`point-badge`）: 濃色の角丸ラベルに番号つきの英語を入れ、下に短い説明を 2〜3 行置く - **商品カード**（`product-card`）: 白い大きめの角丸カード。上にキャッチ 2 行、左に円形の商品画像、右にコード・価格・サイズ・カラーチップ・ボタンを置く - **結果の吹き出しラベル**（`speech-label`）: 白いピル形に「〇〇のあなたは」型の短文を入れる - **監修者カード**（`supervisor-card`）: 白い角丸カード。左に円形写真と SNS 表記、右に肩書・名前・枠つきの小バッジ・プロフィールを置く ## Do's and Don'ts **Do** - 地色は生成りとグレージュの 2 色に絞り、交互に切り替える - 欧文の見出しには必ず手書きスクリプトを添える - 服とボディのイラストは淡い水彩で描き、白地に輪郭線を残す - 文字はブラウン系の灰色にし、字間を広く、行間を大きくとる - 3 タイプは識別色と構成をそろえて繰り返す **Don't** - 純黒の文字や、彩度の高い CTA 色は使わない - 太いゴシックの見出しや、大きな価格訴求の装飾は入れない - グラデーションやドロップシャドウの強いボタンは使わない - 写真の上に派手な帯やバッジを重ねない - 余白を詰めて情報を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（診断コンテンツであることと世界観を伝える）: ハイキーな人物写真を細枠で囲む。右上に円形のバッジ、下部に楕円ラベル・欧文タイトル・手書きスクリプト・サブコピーを重ねる 2. **診断の説明**（骨格診断の概要と 3 タイプを示す）: 欧文タイトルの下に中央揃えの説明を 5 行置く。3 体のボディイラストを横に並べ、タイプ名と下向きの三角を添える 3. **セルフチェック**（設問に答えて自分のタイプを知ってもらう）: 手書きの見出しの下に、細線枠の設問カードを 6 つ縦に並べる 4. **タイプ解説（1 つ目）**（結果タイプの特徴を説明する）: グレージュの地色にする。線つきのタイプ見出し、人物イラストと吹き出し、キーワード、本文を置き、アイテムイラストと POINT を 2 つ並べる。左端に縦書きの小さな欧文を添える 5. **おすすめ商品**（タイプに合う商品へ誘導する）: 生成りの地色にする。弧状に並べた欧文見出しの下に商品カードを 2 枚置き、一覧ボタンで締める 6. **タイプ解説（2 つ目）＋おすすめ商品**（別タイプにも同じ構成で対応する）: 1 つ目と同じレイアウトにし、識別色だけを変える 7. **タイプ解説（3 つ目）＋おすすめ商品**（最後のタイプを紹介する）: 同じ構成を繰り返す 8. **監修者**（専門家の監修で信頼性を補う）: 白っぽい背景の上に、白い角丸の監修者カードを置く 9. **クロージング**（余韻を残して締める）: 中央揃えのコピーを 2 行置き、手書きの英語の一言を添える。最下部にくつろいだ人物の横長写真を置く ## Imagery - 人物写真は白とグレージュを基調にした室内で撮る。自然光のハイキーで、柔らかいニット素材を合わせる - ボディ図は細い線画の女性に、下着を淡い水彩で塗る。体型の形はピンクの点線で示す - 服と靴は水彩のにじみで描いたイラストにし、白背景に切り抜いて英語のラベルを添える - 商品写真は白背景で切り抜き、淡いグレーの正円の上に置く - 装飾は手書きスクリプトと細線だけにし、模様は使わない - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を 960px ほどで中央に固定し、左右を地色で埋める - 設問カードは PC で 2〜3 列のグリッドにできる - タイプ解説はイラストと文章の比率を 4:6 にし、アイテムイラストは 4 列に広げる - 商品カードは PC で 2 枚を横に並べる - FV 写真は横長に再トリミングし、テキストを左右どちらかに寄せる ## 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-8007626d`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/f/feature/2501_kokkaku/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。