--- version: alpha name: Playful Bold Serif Fashion Brand Site description: 白とグレージュの地に、マゼンタの太いディスプレイセリフ英字見出しを大きく置いたアパレルブランドのトップページ型 LP。角丸の白い商品カードを横スクロールで並べ、線だけのピル型ボタンに矢印をはみ出させる。ファッション写真を大きく見せ、文字装飾は控えめに抑える。 colors: primary: '#D7256E' background: '#FFFFFF' background-alt: '#E5DFDF' surface: '#ECECEC' tint-1: '#DFDFDF' text: '#000000' text-body: '#363636' accent-1: '#D0103A' text-muted: '#C47A82' line: '#272727' accent-2: '#77A0B4' cta: '#C44979' on-cta: '#E3267A' on-cta-accessible: '#E21D74' typography: display: fontFamily: Abril Fatface fontSize: 50px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Abril Fatface fontSize: 40px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Jost fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.15em rounded: sm: 8px md: 20px lg: 32px full: 999px spacing: unit: 8px card: 0px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-pink: backgroundColor: '{colors.background}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-on-photo: typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px section-title: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 220px category-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 46px rank-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px new-badge: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px news-list: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — マゼンタ×太セリフの遊び心アパレル LP（Playful Bold Serif Fashion Brand Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: ポップ・元気、シンプル・ミニマル、上品・高級 - **キーワード**: マゼンタ見出し・太いディスプレイセリフ・横スクロール商品カード・線のピル型ボタン・グレージュ地・大判ファッション写真 - **地の質感**: フラットな塗り。影はなく、写真の質感と余白で見せる - **形**: 大きめの角丸カード、ピル型ボタン、ギザギザの丸い順位バッジ、上辺が弧を描くセクション境界 - **温度感**: 白とグレーでニュートラル。マゼンタでやや温かく華やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D7256E` | 英字見出し・ブランドの強調色 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 32% | 画素の実測 | | `background-alt` | `#E5DFDF` | セレクト・人気アイテム帯のグレージュ地 | 14% | 画素の実測 | | `surface` | `#ECECEC` | 新着ブロックの薄グレーパネル | 6% | 画素の実測 | | `tint-1` | `#DFDFDF` | お知らせ帯のグレー | 4% | 画素の実測 | | `text` | `#000000` | 見出し黒・商品名 | 3% | 画素の実測 | | `text-body` | `#363636` | 商品名・本文 | 2% | 画素の実測 | | `accent-1` | `#D0103A` | セール価格 | 0% | 推定 | | `text-muted` | `#C47A82` | 取り消し線の元価格 | 0% | 推定 | | `line` | `#272727` | ボタン枠・スクロールバー | 0% | 画素の実測 | | `accent-2` | `#77A0B4` | New バッジのくすみ青 | 0% | 画素の実測 | | `cta` | `#C44979` | ピンク枠ボタン・カテゴリ枠線 | 0% | 画素の実測 | | `on-cta` | `#E3267A` | ピンク枠ボタンの文字 | 0% | 推定 | | `on-cta-accessible` | `#E21D74` | AA を満たす補正値（計算） | | 計算 | - 地は白とグレージュを交互に使い、セクションを切り替える - 英字見出しは主にマゼンタ。新着とセレクトの見出しだけ黒にして変化をつける - ボタンは塗らず、白地に 1px の黒またはマゼンタの線で作る - 赤系はセール価格だけに使い、元価格は薄い赤の取り消し線にする - 写真の上の文字とボタンは白で、ボタンには半透明の白い面を敷く - マゼンタ以外の色は写真に任せ、UI 色を増やさない - `button-pink` は文字 `#E3267A` × 背景 `#FFFFFF` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#E21D74`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真上の英字ラベル | 欧文セリフ | Abril Fatface | 400 | 50px | 1.1 | 0.0em | | `headline-lg` | セクションの英字見出し | 欧文セリフ | Abril Fatface | 400 | 40px | 1.1 | 0.0em | | `headline-sm` | 英字見出しの下に置く和文サブ見出し | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.08em | | `body-md` | 商品名・お知らせ | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.03em | | `accent` | 価格・日付 | 欧文サンセリフ | Jost | 500 | 13px | 1.4 | 0.02em | | `label-button` | ボタン・カテゴリの文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.2 | 0.08em | | `body-lg` | ブランドの詩的なコピー | ゴシック | Zen Kaku Gothic New | 400 | 18px | 1.7 | 0.15em | - 英字見出しは太い高コントラストのセリフ体で大きく組み、すぐ下に小さな和文ゴシックを添える - 和文は太めのゴシックで、字間をやや広げる - 本文は 13px 前後にとどめ、写真を主役にする - 価格は欧文の数字にし、セール価格は赤で太くする - 装飾的な英字は見出しにだけ使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は横スクロールのカルーセルで 2.5 枚見せ、カテゴリは 2 列グリッド、特集は 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算） - 商品カルーセルは右端の次のカードを少し見せて、横に送れることを伝える - カルーセルの下に細いスクロールバーを置き、その下にボタンを中央揃えで置く - 見出しブロックは中央揃えにする - 全幅写真のセクションは余白なしで縦に並べる - 新着ブロックは背景写真の上に角丸パネルを浮かべる ## Elevation & Depth - 影は使わずフラットにする - 奥行きは写真の背景の上にグレーパネルを重ねて出す - カードは地色との明度差だけで区切る ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 商品は白地の切り抜きを角丸の正方形カードに入れる。特集とインスタは角丸なしの矩形 - **セクション境界**: 基本は直線。ブランド紹介の前だけ上辺を大きな弧にする - 商品カードは左上と右上を大きく丸め、下側は小さめの角丸にする - ボタンは 1px 線のピル型にし、右端から長い矢印線をはみ出させる - カテゴリは角丸 20px の外枠と細い罫線で 2 列の表にする - 順位バッジはマゼンタのギザギザの丸に、白のセリフ数字を入れる - 人気アイテムは角丸のブラケット線で囲む ## Components - **線のピル型ボタン**（`button-outline`）: 白地に黒の 1px 線。右側に長い矢印線がはみ出す - **ピンク線のボタン**（`button-pink`）: マゼンタの線と文字で作る、人気アイテムなどへの誘導ボタン - **写真上のボタン**（`button-on-photo`）: 半透明の白い面に白の線と白文字 - **英字セリフ見出し**（`section-title`）: マゼンタの大きな英字に、和文の小見出しを重ねて組む - **商品カード**（`product-card`）: 角丸の白い正方形に商品の切り抜き。下に商品名と価格 - **カテゴリ表**（`category-grid`）: マゼンタの線で 2 列に区切り、各マスに矢印を置く - **順位バッジ**（`rank-badge`）: マゼンタのギザギザの丸に白数字 - **New バッジ**（`new-badge`）: くすみ青の円に白のセリフ英字 - **お知らせリスト**（`news-list`）: グレー帯に日付と下線付きのリンクを並べる ## Do's and Don'ts **Do** - 英字見出しは太いセリフ体で、大きくマゼンタにする - ボタンは塗らず、線と矢印で軽く見せる - 商品は白地に切り抜き、角丸カードに入れる - 白とグレージュの地を交互に使ってリズムを作る - 写真は大きく見せ、色は写真に任せる **Don't** - ボタンをべた塗りにしない - ドロップシャドウやグラデーションを使わない - マゼンタ以外の強い UI 色を増やさない - 本文の文字を大きくしすぎない - 見出しを和文だけにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボや季節特集を見せる）: 全幅写真のスライダーに白いロゴを重ね、ドットと矢印で切り替える 2. **お知らせ**（更新情報を伝える）: グレー帯に日付と下線付きのリンクを 2 行並べる 3. **新着アイテム**（新商品へ誘導する）: 花の写真の背景に角丸グレーパネルを置き、黒のセリフ見出しと商品カルーセルを入れる 4. **カテゴリ**（カテゴリから探してもらう）: マゼンタ線の 2 列の表に矢印付きのリンクを並べる 5. **特集**（おすすめ企画を見せる）: 正方形のバナーを 2 列で並べる 6. **全アイテム／キャンペーン**（一覧へ大きく誘導する）: 全幅のモデル写真に白の英字とボタンを重ねる 7. **セレクト商品**（Web 限定の品を見せる）: グレージュ地に黒見出し、商品カルーセル、線のボタンを置く 8. **ランキング**（人気商品を見せる）: ブラケット線で囲み、順位バッジ付きの大きなカードを中央寄せのカルーセルで並べる 9. **ブランド紹介**（世界観を伝える）: 上辺が弧の白地に、縦組みのロゴと 2 行の詩的なコピー、開閉ボタンを置く 10. **カタログ**（デジタルカタログへ誘導する）: 表紙画像を中央に置き、右上に New バッジを付ける 11. **SNS**（Instagram のフォローを促す）: アイコン付きの見出し、写真の横スクロール、Follow ボタンを並べる ## Imagery - モデル写真は白い壁の前で自然光で撮り、年齢の違う女性を並べる - 柄物やビビッドな服で、写真に色を担わせる - 商品は白背景の切り抜きで、平置きかハンガー掛けにする - 背景には淡い花のアップをぼかして敷く - 特集バナーは写真に縦組みの英字や白抜き文字を重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のファーストビューは中央の写真の左右に隣のスライドを見せる - PC のカテゴリは 4 列 2 段にする - PC の特集は 3 列、全アイテムとキャンペーンは 2 列で並べる - PC のカルーセルは 4〜6 枚見せ、左右にマゼンタの矢印を置く - 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-cc1b6d5b`（元 LP の URL から採番） - **元 LP**: https://www.felissimo.co.jp/mensha?tid=dbn_ms_RENEWAL - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。