--- version: alpha name: Soft Pastel Gradient Comfort Pumps LP description: 白〜生成りの地に、ピーチとミントの淡いグラデーションを重ねた婦人向けパンプスの LP。濃紺の帯セクションとサーモン色の手書き風強調文字を交互に使い、専門家監修の機能性とおしゃれさを両立して見せる。縦書きのコピー、英字スクリプトの透かし文字、番号付きポイントの円形写真で雑誌のような編集感を出している。 colors: primary: '#323C49' secondary: '#E8835B' accent-1: '#D4696B' background: '#FFFFFF' background-alt: '#F7F0E6' text: '#2B3238' on-primary: '#FCFEFF' accent-2: '#92BCBA' accent-3: '#3AA9AB' tint-1: '#F4D5D2' tint-2: '#ECC7A8' marker: '#F5E04A' line: '#CDD0C5' text-muted: '#8A8C90' text-muted-accessible: '#56585B' accent-1-accessible: '#CB494C' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 52px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em accent: fontFamily: Klee One fontSize: 32px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Playfair Display fontSize: 40px fontWeight: 500 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.25em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.line}' textColor: '{colors.text-muted}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 48px band-heading-dark: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 130px speech-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px point-number: textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 48px badge-award: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 100px size-chip: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' rounded: '{rounded.sm}' height: 44px type-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 150px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 220px price-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px --- # DESIGN.md — 紺×サーモンの淡色グラデ婦人靴 LP（Soft Pastel Gradient Comfort Pumps LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、上品・高級、信頼・誠実、情報量多め・訴求型 - **キーワード**: 淡色グラデーション・濃紺の帯・サーモンの手書き強調・縦書きコピー・英字スクリプト透かし・雑誌風レイアウト - **地の質感**: 白地にごく薄い方眼グリッドとドット柄。ピーチ・ミント・ラベンダーの水彩風ぼかしを背景に置く - **形**: 基本は角丸を抑えた四角。吹き出しはピル型、ポイント写真は円形に切り抜く。斜めの帯や三角形を背景に使う - **温度感**: やや暖かい。ピーチ寄りのパステルに、濃紺で全体を引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#323C49` | 帯セクションや見出し帯の濃紺 | 8% | 画素の実測 | | `secondary` | `#E8835B` | 強調文字・数字のサーモンオレンジ | 2% | 画素の実測 | | `accent-1` | `#D4696B` | コーラルピンクの見出し帯 | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#F7F0E6` | 生成りのベージュ地 | 12% | 画素の実測 | | `text` | `#2B3238` | 見出しと本文の濃いグレー | 4% | 画素の実測 | | `on-primary` | `#FCFEFF` | 濃紺地の上の白文字 | 1% | 画素の実測 | | `accent-2` | `#92BCBA` | ミントの補助色（新登場ラベル・タイプ色） | 4% | 画素の主要色に補正 | | `accent-3` | `#3AA9AB` | 店舗・購入エリアのティール | 3% | 画素の実測 | | `tint-1` | `#F4D5D2` | ピンクの淡い帯・カード地 | 2% | 画素の実測 | | `tint-2` | `#ECC7A8` | ピーチのグラデーション地 | 4% | 画素の主要色に補正 | | `marker` | `#F5E04A` | 強調語の黄色マーカー | 0% | 推定 | | `line` | `#CDD0C5` | 罫線・枠線のグレー | 1% | 画素の主要色に補正 | | `text-muted` | `#8A8C90` | 注釈の薄いグレー | 0% | 推定 | | `text-muted-accessible` | `#56585B` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CB494C` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成りを交互に使い、ピーチ×ミントの淡いグラデを重ねる - セクションの区切りや問題提起は濃紺の全幅帯で引き締める - キーワードや数字はサーモンで色を変え、手書き風の書体にする - タイプ違いはピンク・ミント・イエロー・ラベンダーで色分けする - 購入エリアと店舗案内はティールを使う - 黄色マーカーは購入前の告知など、ごく一部だけに使う - `button-primary` は文字 `#8A8C90` × 背景 `#CDD0C5` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#56585B`、4.56:1）を使う。 - `size-chip` は文字 `#FCFEFF` × 背景 `#D4696B` のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CB494C`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 52px | 1.1 | 0.05em | | `headline-lg` | セクション大見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.08em | | `headline-md` | 帯見出し・ポイント名 | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.06em | | `accent` | 強調語の手書き風文字 | 手書き・筆 | Klee One | 600 | 32px | 1.3 | 0.04em | | `headline-sm` | Point 番号・ヒール高の大きな数字 | 欧文セリフ | Playfair Display | 500 | 40px | 1.0 | 0.0em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em | | `note` | 注釈・集計期間 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | 英字ラベル・装飾英字 | 欧文サンセリフ | Montserrat | 500 | 11px | 1.4 | 0.25em | - キャッチは縦書きを基本に、白い短冊の上に一文字ずつ並べる - 強調語だけ手書き風書体＋サーモン色にして大きくする - 見出しの近くに字間を広げた英字ラベルを小さく添える - 英字スクリプトの装飾文字を背景に薄く大きく敷く - 数字は細めのアウトラインかセリフで大きく見せる - 本文は 14px 前後、行間は 1.8 でゆったり組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長やサイズボタンは 2 カラムのグリッドにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真とテキストを左右交互にずらして配置する - ポイント説明は円形写真とテキストを斜めの線でつなぐ - 濃紺の全幅帯でパートを区切る - 比較画像は 2 列に並べ、下にラベル帯を付ける - スペック表は濃紺の見出しバー＋罫線表にする ## Elevation & Depth - 影はほぼ使わず、面の色と枠線で階層を作る - カードは細い枠線か白地だけで、背景から浮かせる - 製品写真には床に落ちる程度の自然な影を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 製品は切り抜きにする。ポイント写真は円形、人物は角版か全幅にする - **セクション境界**: 直線の帯を基本に、緩い波形や斜めの三角形の面を重ねる - 吹き出しはピル型＋下向きのしっぽにする - ラベルは角丸を小さくした矩形タグにする - グラデーションの円バッジでタイプ名を見せる ## Components - **購入ボタン**（`button-primary`）: 全幅に近いピル型ボタン。未選択の間はグレーで表示する - **濃紺帯見出し**（`band-heading-dark`）: 全幅の濃紺帯に白文字の見出しを置く。強調語はサーモン、下に手書き風の波線を引く - **吹き出しラベル**（`speech-pill`）: 濃紺のピル型にしっぽを付け、導入の一言を入れる - **ポイント番号**（`point-number`）: 縦向きの小さな Point の文字に、サーモンのセリフ数字を組み合わせる。見出しは枠付きのボックスに入れる - **実績バッジ**（`badge-award`）: 白い円に月桂樹を添え、順位や累計数を見せる - **サイズ選択チップ**（`size-chip`）: タイプ別の色で塗ったチップを 2 列に並べ、白抜き文字にする - **タイプカード**（`type-card`）: パステル地に製品写真を置く。英字セリフのタイプ名と、角の円にヒール高を入れる - **お知らせ枠**（`notice-box`）: ティールの見出しタブが付いた枠線ボックス。要点に黄色マーカーを引く - **まとめ買い割引カード**（`price-card`）: 淡いピンク地の角丸カード。赤字の割引率と、黄マーカー付きの価格を入れる ## Do's and Don'ts **Do** - 淡いグラデの背景に、濃紺を締め色として必ず入れる - 強調語は手書き風のサーモン文字にする - 英字ラベルと英字スクリプトの装飾を見出しの近くに添える - 製品は白背景で切り抜き、複数の角度から見せる - 専門家の監修はイラストの人物と肩書きで示す - 数値の根拠や期間は注釈に小さく書く **Don't** - 原色の赤や青を広い面に使わない - ゴシックの太字を全見出しに多用しない - 影の濃いカードや立体的なボタンにしない - グラデーションを濃くしすぎない - 英字装飾を本文より目立たせない - 写真を詰め込みすぎて余白を失わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **キャンペーン帯**（割引を即告知する）: 赤い帯と白地の上に、大きな黄色の割引数字を置く 2. **ファーストビュー**（商品名・監修・実績を伝える）: 淡色地に人物の全身写真を置く。縦書きの大見出しと円形の実績バッジを添える 3. **メディア掲載・実績**（信頼を補強する）: 枠線カードに雑誌の写真を載せる。金色のランキング帯と累計数の枠を続ける 4. **ラインナップ紹介**（選べるタイプ数を示す）: コーラルの帯に続けて大きなサーモン数字を置く。製品の切り抜きに引き出し線でラベルを付ける 5. **悩みの提起と監修者**（悩みへの共感と、権威による解決を示す）: 濃紺帯の問いかけに続けて、監修者の線画イラストと吹き出しを置く 6. **機能の解説**（インソールの仕組みを説明する）: 製品の図解に記号付きの注釈を 6 つ配置する。比較画像を 2 列で並べる 7. **こだわりポイント**（細部の品質を伝える）: 生成り地に番号付きの円形写真を左右交互に並べ、斜線でつなぐ 8. **製造背景**（職人の品質を示す）: 暗いトーンの写真コラージュに、白い明朝の見出しを重ねる 9. **タイプ別詳細**（各タイプの違いを示す）: 濃紺のパネルにヒール高を大きな数字で入れ、製品写真とグラデの円バッジを添える 10. **コーディネート**（着用イメージを見せる）: 人物写真をスライダーで見せ、英字の見出しとスペックを重ねる 11. **スペック・サイズ表**（購入前の確認をしてもらう）: 濃紺の見出しバー付きの罫線表と足の図を並べ、素材を箇条書きにする 12. **スタッフのサイズ参考**（サイズ選びの不安を減らす）: タイプ色で分けた帯とサイズチップを 2 列で並べる 13. **価格・購入フォーム**（購入へ導く）: 大きな価格表示とお知らせ枠に続けて、タイプカード・サイズ選択・ピル型ボタンを置く 14. **店舗案内・フッター**（実店舗での試着に誘導する）: ティールの見出しタブ付きの店舗カードを並べ、送料無料の帯で締める ## Imagery - 30〜40 代の女性が、オフィスカジュアルを自然光の下で着た全身写真 - 黒い製品は白背景で切り抜き、斜め上からなど複数の角度で撮る - 専門家は青い作業着姿の線画イラストで、親しみを出す - キラキラ・音符・矢印などの細い線画装飾を散らす - 背景はピーチ・ミントの水彩風ぼかしと方眼グリッドにする - 工房の写真は暗めのセピア調に落とす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後の幅で SP の構成をそのまま見せる - 左右の余白には淡色のグラデーション背景を敷く - タイプカードやポイントは PC で 2〜4 列に広げてもよい - 縦書きのキャッチは PC でも縦書きを維持する - 全幅の帯は PC でも画面幅いっぱいに伸ばす ## 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-a481bd64`（元 LP の URL から採番） - **元 LP**: https://www.amepla.jp/f/seitai-pumps3_YDA - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。