--- version: alpha name: Festive Geometric Gift Market LP description: 生成りの地に、赤・深緑・紫・ピンクの幾何学イラストを積み上げたホリデー向けのギフト特集LP。カテゴリごとに欧文セリフの見出しと赤枠の4列商品グリッドを繰り返し、赤いボタンで一覧ページへ送る。 colors: background: '#FFF1E4' primary: '#E53532' cta: '#DC3D3B' on-cta: '#FBF4EA' secondary: '#1DA284' dark-section: '#055D4B' accent-1: '#A983F2' accent-2: '#FCBDBE' tint-1: '#D9C8F5' tint-2: '#FFE7D1' text: '#14120F' surface: '#FBF4EA' text-muted: '#4A4A4A' cta-accessible: '#D72926' typography: display: fontFamily: Fraunces fontSize: 34px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Fraunces fontSize: 24px fontWeight: 600 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Fraunces fontSize: 12px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em accent: fontFamily: Fraunces fontSize: 14px fontWeight: 700 lineHeight: 1.2 rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 6px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-view-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 28px category-chip: backgroundColor: '{colors.text}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 22px product-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 260px price-circle: textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 72px vertical-label: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 120px gift-ticket-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px article-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.note}' height: 80px --- # DESIGN.md — 生成り地×赤緑紫の幾何学ギフトマーケットLP（Festive Geometric Gift Market LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、上品・高級、親しみ・手作り感 - **キーワード**: ホリデーギフト・幾何学イラスト・生成り地・商品グリッド・欧文セリフ・カタログ型 - **地の質感**: フラットなベタ塗り。グラデーションや影は使わない。背景の一部に淡いピーチ色の斜めストライプを敷く。 - **形**: 四角を基本にする。商品は細い赤線で区切ったグリッドで、ボタンは小さな角丸。装飾はベクターの幾何学モチーフ（箱・リボン・木・カップ・丸）を積み上げて作る。 - **温度感**: 暖かい。生成りの地に、クリスマスらしい赤と緑を差す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFF1E4` | ページ地の生成り | 55% | 画素の実測 | | `primary` | `#E53532` | ブランド赤（商品枠・ボタン・装飾） | 5% | 画素の実測 | | `cta` | `#DC3D3B` | View Moreボタン | 1% | 画素の実測 | | `on-cta` | `#FBF4EA` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#1DA284` | 装飾の深緑 | 4% | 画素の実測 | | `dark-section` | `#055D4B` | 装飾の濃緑の帯 | 3% | 画素の実測 | | `accent-1` | `#A983F2` | 装飾の紫・ギフト券の枠 | 3% | 画素の実測 | | `accent-2` | `#FCBDBE` | 装飾のピンク | 3% | 画素の実測 | | `tint-1` | `#D9C8F5` | ギフト券エリアの淡い紫 | 2% | 推定 | | `tint-2` | `#FFE7D1` | 斜めストライプの淡いピーチ | 4% | 画素の実測 | | `text` | `#14120F` | 見出しの黒 | 2% | 画素の実測 | | `surface` | `#FBF4EA` | 商品カードの白 | 6% | 画素の主要色に補正 | | `text-muted` | `#4A4A4A` | 商品名・価格の小文字 | 1% | 推定 | | `cta-accessible` | `#D72926` | AA を満たす補正値（計算） | | 計算 | - 地は生成りを全面に敷き、白は商品カードの中だけに使う。 - 赤は商品枠線・View Moreボタン・タグの縁取りに限って使う。 - 緑・紫・ピンク・赤は装飾イラスト用。本文エリアには持ち込まない。 - カテゴリタグは黒地に白文字。選択中のタグだけ白地に赤い縁取りにする。 - ギフト券エリアは淡い紫の地を紫の枠で囲み、ページの中で特別な一画にする。 - `button-view-more` は文字 `#FBF4EA` × 背景 `#DC3D3B` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D72926`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | タイトルロゴ風の大見出し | 欧文セリフ | Fraunces | 700 | 34px | 1.1 | 0.0em | | `headline-lg` | カテゴリ見出し | 欧文セリフ | Fraunces | 600 | 24px | 1.2 | 0.0em | | `headline-sm` | 縦書きのサブコピー・ナビ見出し | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.15em | | `body-md` | ギフト券の説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.03em | | `note` | 商品名・価格 | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.02em | | `label-button` | View More・カテゴリタグ | 欧文セリフ | Fraunces | 600 | 12px | 1.0 | 0.02em | | `accent` | 締めのメッセージ | 欧文セリフ | Fraunces | 700 | 14px | 1.2 | 0.0em | - 見出しは欧文セリフの英語で入れ、日本語は補足に回す。 - 日本語のサブコピーやナビ見出しは縦書きにし、細い縦線を添える。 - 商品名は1行で切り、末尾を三点リーダーにする。価格は太字で添える。 - 本文は小さめの文字で密度を高め、カタログらしさを出す。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: PC は左寄せのメインカラムと右端の装飾帯の2列構成。SP は1カラムで商品グリッドを2列にする。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 6px（375px 幅換算） - カテゴリごとに「見出し → 商品8点のグリッド → View More」の順で繰り返す。 - 商品グリッドは赤い細線で区切り、セル間の余白は入れない。 - View Moreボタンはグリッドの左下に左揃えで置く。 - 価格帯別の導線は丸い写真を4つ横に並べる。 - テーマ別の導線は2×2の写真カードで組む。 ## Elevation & Depth - 影は一切使わない。 - 奥行きは色面の重なりと線だけで表現する。 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品写真は正方形に切り抜く。価格帯の導線だけ正円にする。 - **セクション境界**: 境界線は引かず、余白で区切る。一部の背景に斜めストライプを敷く。 - カテゴリタグは小さな角丸の黒いチップにする。 - 装飾イラストは直線と円で構成した幾何学のベクター図形にする。 ## Components - **View Moreボタン**（`button-view-more`）: 赤地に白い欧文と右向きの細い矢印を入れた小さな横長ボタン。 - **カテゴリタグ**（`category-chip`）: 黒地に白文字のチップ。複数行に折り返して並べ、ページ内の各カテゴリへ飛ばす。 - **商品グリッド**（`product-grid`）: 4列×2段の赤線グリッド。各セルは正方形の写真の下に商品名と価格を置く。 - **価格帯の丸ボタン**（`price-circle`）: 正円の写真に白い太字で金額を重ねる。 - **縦書きラベル**（`vertical-label`）: 日本語の縦書き見出しに赤い縦線を添え、ブロックの左に置く。 - **ギフト券エリア**（`gift-ticket-card`）: 淡い紫の地を紫の枠で囲む。中に英字の見出し、説明文、画像、赤白2つのボタンを置く。 - **特集記事バナー**（`article-banner`）: 写真と淡い色の文字面を横に並べた読み物への導線。2本を並べる。 ## Do's and Don'ts **Do** - 商品写真は正方形で揃え、赤線のグリッドに収める。 - 装飾イラストは赤・緑・紫・ピンクのベタ塗りで、積み木のように積み上げる。 - 見出しは英語の欧文セリフにする。 - どのカテゴリも同じ構成で繰り返し、カタログらしい統一感を出す。 **Don't** - グラデーションや影は使わない。 - 商品カードに大きな角丸や余白を付けない。 - 装飾イラストを本文エリアに重ねない。 - 地を真っ白にしない。必ず生成りにする。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と季節感を伝える）: 縦書きのサブコピーと欧文セリフの大タイトルを並べ、右端に幾何学イラストの帯を置く。 2. **カテゴリナビ**（各カテゴリへジャンプさせる）: 黒いチップを2〜3行に並べる。 3. **カテゴリ別の商品紹介（繰り返し）**（商品を一覧で見せる）: 見出しの下に赤線グリッドで8点を並べ、最後に赤いView Moreボタンを置く。 4. **特集記事バナー**（読み物へ誘導する）: 写真と淡い色の文字面を組み合わせたバナーを2本並べ、背景に斜めストライプを敷く。 5. **価格帯・テーマ別の導線**（別の切り口から探させる）: 縦書きラベルを添え、価格帯は丸写真4つ、テーマは2×2の写真カードで見せる。 6. **ギフト券のCTA**（ギフト券の購入を促す）: 淡い紫の枠エリアに説明文と画像を置き、赤と白のボタンを2つ並べる。 7. **締め**（季節の挨拶で終える）: 欧文の短いメッセージを小さく右下に置く。 ## Imagery - 商品写真は白や暗い単色の背景で、物を中央に正方形で撮る。 - 写真のトーンはややクラシックで暖かい雰囲気にする。 - 装飾はクリスマス小物（箱・リボン・ツリー・カップ・オーナメント）をフラットな幾何学で描き、縦に積み上げる。 - 背景の一部に淡いピーチ色の太い斜めストライプを敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は右端に幾何学イラストの縦帯を固定し、メインは左寄せで幅約60%にする。 - SP では装飾帯を上部や見出し脇の横帯にする。 - SP の商品グリッドは2列×4段にする。 - SP の価格帯の丸写真は2×2または横スクロールにする。 - SP の文字サイズは見出し24px・商品名11pxを目安にする。 ## 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-518355c1`（元 LP の URL から採番） - **元 LP**: https://minne.com/lp/xmas - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。