--- version: alpha name: Soft Mauve Ballet Comfort Shoes LP description: 白とライトグレーを地に、くすんだモーヴを差し色にした上品な婦人靴の LP。明朝体の縦書きコピー、欧文セリフの見出し、余白を広く取った写真構成で、バレエのような静かで柔らかい印象をつくる。機能説明は図解と細い線で整理する。 colors: primary: '#7E7271' on-primary: '#FCF6F9' background: '#FFFFFF' background-alt: '#F5F5F3' surface: '#DCDCDC' text: '#423A37' text-body: '#5A5452' accent-1: '#A9799F' dark-section: '#4C4C4C' line: '#C3C4C5' tint-1: '#F5ECED' accent-2: '#B59C13' primary-accessible: '#7A6E6D' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.15em headline-lg: fontFamily: Playfair Display fontSize: 26px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 21px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Great Vibes fontSize: 14px fontWeight: 400 lineHeight: 1.2 rounded: sm: 2px md: 8px lg: 120px 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}' badge-ranking: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px badge-recommend: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px heading-vertical-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 200px label-feature: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 40px heading-grid: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px point-banner: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 150px card-staff-review: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 460px callout-circle: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.full}' height: 90px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 170px --- # DESIGN.md — モーヴ×グレージュの上品な婦人靴 LP（Soft Mauve Ballet Comfort Shoes LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル - **キーワード**: くすみモーヴ・明朝体・縦書きコピー・バレエ・余白・細線 - **地の質感**: マットで柔らかい。紗がかかったような淡いグレーの写真と、白地にのせた細い線の組み合わせ。 - **形**: 四角い写真と角の大きいピル型の切り抜き、円形の切り抜きを混ぜる。境界線は 1px の細線。 - **温度感**: やや暖かめのニュートラル。グレージュとモーヴで甘さを抑えた大人の女性らしさ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7E7271` | ブランドのくすみモーヴ。問題提起の面やスタッフ名の帯に使う | 7% | 画素の主要色に補正 | | `on-primary` | `#FCF6F9` | モーヴ地の上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#F5F5F3` | 特長セクションに使う淡いグレーの地 | 12% | 画素の実測 | | `surface` | `#DCDCDC` | スタッフレビュー背景のライトグレー | 8% | 画素の実測 | | `text` | `#423A37` | 見出しの濃いグレー文字 | 3% | 画素の主要色に補正 | | `text-body` | `#5A5452` | 本文のグレー文字 | 3% | 推定 | | `accent-1` | `#A9799F` | 明るいモーヴ。見出しの強調と本文中のキーワードに使う | 1% | 推定 | | `dark-section` | `#4C4C4C` | 特長番号ラベルの濃いチャコール | 1% | 画素の実測 | | `line` | `#C3C4C5` | 区切り線と方眼の細線 | 1% | 画素の主要色に補正 | | `tint-1` | `#F5ECED` | スペック表ラベルの淡いピンク | 0% | 画素の実測 | | `accent-2` | `#B59C13` | ランキングバッジの金色 | 0% | 画素の実測 | | `primary-accessible` | `#7A6E6D` | AA を満たす補正値（計算） | | 計算 | - 地は白とごく淡いグレーを交互に敷き、セクションを区切る - モーヴは問題提起の大きな面とラベル帯にだけ使い、面積は 1 割以下に抑える - 本文中の強調語は明るいモーヴの太字にする。赤や黄色は使わない - 見出しは黒ではなく、暖かみのある濃いグレーにする - 金色はランキングなどの実績表示だけに使う - `badge-recommend` は文字 `#FCF6F9` × 背景 `#7E7271` のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7A6E6D`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ | 明朝 | Shippori Mincho | 600 | 30px | 1.5 | 0.15em | | `headline-lg` | 欧文のセクション見出し | 欧文セリフ | Playfair Display | 400 | 26px | 1.3 | 0.05em | | `headline-md` | 和文の機能見出し（2 行） | 明朝 | Noto Serif JP | 500 | 21px | 1.7 | 0.12em | | `headline-sm` | 小見出しや番号ラベル | 明朝 | Noto Serif JP | 500 | 17px | 1.6 | 0.1em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `note` | 注釈や図の説明文 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 英字の筆記体の添え書き | 欧文スクリプト | Great Vibes | 400 | 14px | 1.2 | 0.0em | - 見出しは明朝体と欧文セリフ体を使い、字間は広めの 0.1em 前後にする - FV と情緒的なコピーは縦書きにし、写真の余白に置く - 見出しの上には筆記体の小さな英字を添える - 本文はゴシック体の細めのウェイトで、行間を 1.9 前後と広く取る - 強調は太字とモーヴの色だけで行い、マーカーは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とテキストを左右に分けた 2 分割も使う - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は画面端まで広げるか、片側に寄せて余白を作る - 見出しの下には全幅の細線を引く - 特長番号のラベルは左右交互に画面端から出す - 見出しの背景に方眼の細線を敷き、仕立ての図面のように見せる - 見出しの前後には 64〜96px の余白を取る ## Elevation & Depth - 影はほぼ使わず、平らな面と細線で構成する - カード同士の重なりは、背景色の差だけで表現する ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 120px。ボタンはピル型。 - **写真の切り抜き**: 四角を基本に、ピル型・円形・上だけ丸いアーチ型の切り抜きを混ぜる - **セクション境界**: 直線で区切る。二重の細線や地色の切り替えを使う - 写真は角丸をつけず、端までそのまま見せる - 部分の拡大写真は円形に切り抜く - ラベル帯は右端を斜めに切り落とした形にする - 枠線は 1px のグレーかチャコールにする ## Components - **実績バッジ**（`badge-ranking`）: 白い円の中に順位を大きく表示し、FV の写真に重ねる - **推薦バッジ**（`badge-recommend`）: くすんだ青緑の円に白い明朝体で推薦の一言を入れる - **縦書き枠付き見出し**（`heading-vertical-box`）: 1 文字ずつ細い線で囲んだ縦書きの明朝見出しを、写真の横に置く - **特長番号ラベル**（`label-feature`）: チャコールの帯に白の欧文で番号を入れる。画面端から出し、下に細線を引く - **方眼背景の見出し**（`heading-grid`）: グレーの方眼の細線の上に、明朝の 2 行見出しを中央揃えで置く - **ポイント帯写真**（`point-banner`）: 淡い全幅写真の中央に、小さな欧文と大きな番号を白抜きで置く - **スタッフレビューカード**（`card-staff-review`）: 白いカードの左上にモーヴの斜め切りのラベルを置く。中に枠線付きのサイズ情報と感想を入れる - **円形の図解注釈**（`callout-circle`）: 細線の円の中に短い説明を入れ、引き出し線で図とつなぐ - **サイズ表**（`spec-table`）: 細いグレーの罫線で区切ったシンプルな表 ## Do's and Don'ts **Do** - 余白を広く取り、1 画面に入れる情報を少なくする - 情緒的なコピーは縦書きの明朝体にする - 欧文セリフの見出しの下に、和文の小さな補足を添える - 機能説明は線画のイラストと細い引き出し線で図解する - 強調はモーヴ 1 色に統一する **Don't** - 原色の赤や黄色の CTA ボタンを置かない - 太いゴシックの大見出しやマーカー強調を使わない - 強いドロップシャドウや光沢の装飾を入れない - 彩度の高い背景色を広い面積に使わない - 装飾アイコンを詰め込み、にぎやかにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みに寄り添う商品であることと実績を伝える）: 明るい室内の人物写真の右側に縦書きの明朝コピーを置き、左下に円形バッジを重ねる 2. **商品紹介**（商品の形と名前を印象づける）: 白地に商品の切り抜き写真を置き、下に欧文セリフの商品名と和文の補足を入れる 3. **設計の訴求**（独自の設計をひと言で示す）: 制作工程の写真と、縦書きの枠付き見出しを左右交互に並べる 4. **ブランドストーリー**（誕生の背景と世界観を伝える）: 淡い写真を下に敷き、中央揃えの明朝本文を行間広めに置く 5. **アンバサダー**（専門家の推薦で信頼を高める）: 人物写真と名前・肩書きを左右に並べ、縦書きの大きな英字を薄く敷く 6. **悩みの提起**（足の悩みの原因を示し、共感を得る）: モーヴの面にピル型の写真と線画を入れ、下に重ねた白カードで問いかける 7. **解決の提示**（悩みのための商品だと伝える）: 全幅の人物写真に縦書きコピーを重ねる 8. **機能の全体図**（中敷きの構造を一覧で見せる）: 分解図に引き出し線と短い注釈を付け、見出しはモーヴの明朝にする 9. **ポイント詳細**（機能を 1 つずつ説明する）: 番号入りの帯写真、明朝の 2 行見出し、細線、図解、本文の順に繰り返す 10. **特長**（素材や細部へのこだわりを伝える）: 淡いグレーの地に番号ラベル、方眼の見出し、円形写真と本文を左右交互に並べる 11. **品質**（環境への配慮・国産・機能性で安心感を与える）: 暗めの写真を縦に積んだ 3 ブロックに、アイコン・白い見出し・本文を入れる 12. **ラインナップ**（他のタイプを紹介する）: アーチ型に切り抜いた人物写真と商品写真を重ね、欧文の商品名を添える 13. **スタッフレビュー**（サイズ選びの参考を示す）: ライトグレーの地に白カードを縦に並べ、足の形の線画とサイズ情報を入れる 14. **カラーとスペック**（色・サイズ・素材の情報を伝える）: 色違いの商品写真を 2 列に並べ、サイズ表と仕様一覧を細い罫線で示す ## Imagery - 自然光の白い室内で、淡い色の服を着た女性を全身で撮る - 商品は白か淡いグレーの背景で、真上か斜め上から影を柔らかく撮る - バレエや素足、花びら、ドライフラワーなど、繊細な小物を添える - 写真は彩度を落とし、明るめでわずかに紗がかかった調子にする - 機能の説明は、細いグレーの線画とモーヴの点で描く - 見出しには筆記体の欧文を小さく添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はない。PC ではコンテンツ幅を 960px 程度に収め、両側を淡いグレーの地にする - 写真とテキストの左右分割は、PC では 50:50 の 2 カラムに広げる - 縦書きコピーは PC でも縦書きのまま、写真の余白に置く - スタッフレビューやカラーのカードは、PC では 3 列に並べる - 見出しの文字サイズは 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-4024dbac`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/ibiki-kenkyujyo/az-787/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。