--- version: alpha name: Warm Cream Mincho Poetry Campaign LP description: 生成りクリームの地に朱色の帯見出しを置き、明朝体の縦書き作品カードを並べた、和のやわらかさがあるお菓子ブランドの投稿キャンペーン LP。季節ごとにピーチ・ピンクへ地色を切り替えて作品群を区切る。 colors: primary: '#F35741' background: '#FFF8E6' background-alt: '#FFE2C2' tint-1: '#F7DCEB' surface: '#FFF8E6' line: '#DFC196' accent-1: '#D98A4A' accent-2: '#6C7C83' dark-section: '#6C8087' on-dark: '#DFEAF0' text: '#2A2320' secondary: '#E36D83' accent-3: '#E87060' text-muted: '#8A8A8A' primary-accessible: '#CB240D' accent-1-accessible: '#9A5720' accent-2-accessible: '#5D6B71' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.15em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-tab-button: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px theme-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 44px poem-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 260px comment-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 16px comment-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.note}' height: 80px ribbon-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px outline-link: backgroundColor: '{colors.on-dark}' textColor: '{colors.accent-2}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 28px --- # DESIGN.md — 生成り×朱色の明朝体 短歌投稿キャンペーン LP（Warm Cream Mincho Poetry Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 和風、やさしい・柔らかい、上品・高級、親しみ・手作り感 - **キーワード**: 生成り・朱色の帯・明朝体・縦書き・短冊カード・季節の地色 - **地の質感**: 無地のクリーム面に、薄い和紙のような色紙カードを重ねる。影はほぼ付けない - **形**: 四角い色紙カードと細い枠線が基本。外枠だけ大きめの角丸 - **温度感**: 暖色寄り。乳白・杏・桃のあたたかい淡色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F35741` | 帯見出し・タブボタンの朱色 | 3% | 画素の実測 | | `background` | `#FFF8E6` | メインの生成りの地 | 31% | 画素の実測 | | `background-alt` | `#FFE2C2` | 秋作品セクションの杏色の地 | 13% | 画素の実測 | | `tint-1` | `#F7DCEB` | 春作品セクションの桃色の地 | 9% | 画素の実測 | | `surface` | `#FFF8E6` | 作品の色紙カード・テーマ枠 | 12% | 画素の実測 | | `line` | `#DFC196` | 作品カードの金茶の細枠 | 1% | 画素の実測 | | `accent-1` | `#D98A4A` | 入選者コメントのラベル・本文 | 1% | 推定 | | `accent-2` | `#6C7C83` | 監修者コメントのラベル（灰青） | 1% | 画素の実測 | | `dark-section` | `#6C8087` | 外部記事紹介の灰青セクション | 5% | 画素の実測 | | `on-dark` | `#DFEAF0` | 暗地上の白文字 | 0% | 画素の実測 | | `text` | `#2A2320` | 見出し・本文の墨色 | 3% | 推定 | | `secondary` | `#E36D83` | 春セクションの帯・タブのローズ | 1% | 画素の実測 | | `accent-3` | `#E87060` | 作品群の外枠の朱線 | 0% | 推定 | | `text-muted` | `#8A8A8A` | 監修者コメント本文の灰色 | 1% | 推定 | | `primary-accessible` | `#CB240D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#9A5720` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#5D6B71` | AA を満たす補正値（計算） | | 計算 | - 地はクリームを基本に、作品セクションは杏色、別シーズンは桃色に切り替える - 見出し帯とナビボタンは朱色、別シーズンだけローズに置き換える - 作品カードは地より明るいクリームに金茶の細枠 - コメントは投稿者=橙系、監修者=灰青系でラベル色を分ける - 外部紹介の1セクションだけ灰青の暗地で区切る - 強い色は朱色1色に絞り、他は淡色でまとめる - `nav-tab-button` は文字 `#DFEAF0` × 背景 `#F35741` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CB240D`、4.52:1）を使う。 - `band-heading` は文字 `#DFEAF0` × 背景 `#F35741` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CB240D`、4.52:1）を使う。 - `comment-label` は文字 `#DFEAF0` × 背景 `#D98A4A` のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9A5720`、4.57:1）を使う。 - `comment-box` は文字 `#D98A4A` × 背景 `#FFF8E6` のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9A5720`、4.56:1）を使う。 - `outline-link` は文字 `#6C7C83` × 背景 `#DFEAF0` のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#5D6B71`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きタイトル | 明朝 | Shippori Mincho | 800 | 40px | 1.1 | 0.05em | | `headline-lg` | 縦書きの作品本文 | 明朝 | Shippori Mincho | 800 | 26px | 1.4 | 0.1em | | `headline-md` | 朱色帯の白抜き見出し | 明朝 | Noto Serif JP | 500 | 20px | 1.3 | 0.15em | | `headline-sm` | 賞名・小見出し | 明朝 | Noto Serif JP | 700 | 18px | 1.4 | 0.05em | | `body-md` | 説明文（中央揃え） | 明朝 | Noto Serif JP | 500 | 13px | 1.9 | 0.02em | | `note` | コメント本文・注記 | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.7 | 0.02em | | `accent` | コメントラベル | ゴシック | Zen Kaku Gothic New | 700 | 10px | 1.3 | 0.05em | | `label-button` | ナビボタン文字 | 明朝 | Noto Serif JP | 600 | 11px | 1.3 | 0.03em | - 見出し・作品は明朝体で統一し和の品を出す - 作品は縦書き（writing-mode: vertical-rl）、右上起点 - 作者名は作品の左下に小さく縦書き - 帯見出しは字間を広めに取る - 説明文は中央揃えで短く改行 - コメント本文のみゴシックで読みやすさ優先 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、入選作品は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 大きな賞は1列で幅広カード、入選は2列 - 作品カードの下にコメント2枚を縦に積む - 作品群全体を朱線の角丸外枠で囲む - 帯見出しはほぼ全幅 - セクション末に締めの一言を中央に置く ## Elevation & Depth - 影はほぼ使わず、枠線と地色差で層を作る - FV のメインビジュアルだけ角丸写真に軽い影 - テーマ枠は白面に薄い影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 8〜16px の長方形、人物は四角 - **セクション境界**: 直線で地色を切り替える - 作品カードは角丸なしの四角 - ナビボタンは角丸 4px の長方形にV字丸アイコン - 外枠は角丸 16px の朱色細線 - 見出しリボンは端がちぎれた紙風の朱帯 ## Components - **セクション移動ボタン**（`nav-tab-button`）: 3つ横並び、右に白丸の下向き矢印 - **帯見出し**（`band-heading`）: 全幅の朱帯に白の明朝見出し - **テーマ表示枠**（`theme-box`）: 白い枠内に大きめ明朝、下に朱の下線 - **縦書き作品カード**（`poem-card`）: クリーム色紙に金茶枠、縦書き作品と作者名 - **コメントラベル**（`comment-label`）: 小さな色ベタのタグ。投稿者は橙、監修者は灰青 - **コメント枠**（`comment-box`）: 淡いクリーム面にラベルと本文 - **紙リボンラベル**（`ribbon-label`）: 和紙風の朱縁リボンに明朝の小見出し - **外部リンクボタン**（`outline-link`）: 暗地上の白い長方形、右に矢印 ## Do's and Don'ts **Do** - 見出しと作品は明朝体で統一する - 作品は縦書きの色紙カードで見せる - シーズンごとに地色と帯色をセットで変える - 朱色は帯とボタンに限定する - 余白を広く取り静かな雰囲気を保つ **Don't** - ポップな丸ゴシックや原色を使わない - 作品カードに強い影や大きな角丸を付けない - 朱色を本文や広い面に多用しない - 作品を横書きにしない - 装飾アイコンを詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と現状を伝える）: 空と砂色の背景、右上に縦書き短冊タイトル、左に角丸写真、商品パッケージ 2. **終了告知とナビ**（受付終了と各セクションへの誘導）: 中央の2行告知、下に朱・ローズのボタン3つ 3. **企画概要**（テーマと参加方法を説明）: 紙リボン見出し、テーマ枠、中央揃え本文、写真 4. **解説**（ジャンルの基礎を説明）: 朱帯見出し、朱細枠のボックス、本文 5. **作例ビジュアル**（雰囲気を見せる）: 写真の上に縦書き明朝を白帯で重ねる 6. **監修者紹介**（信頼性を示す）: 左右に線が伸びる見出し、人物写真、小さなプロフィール 7. **外部記事紹介**（関連記事へ誘導）: 灰青の暗地に白文字、写真、白いリンクボタン 8. **入選作品（季節1）**（結果発表）: 杏色の地、朱帯、朱線の外枠内に大賞1列＋入選2列 9. **入選作品（季節2）**（別期の結果発表）: 桃色の地、ローズ帯、同じカード構成 10. **締めの言葉**（感謝と余韻）: 中央揃えの明朝2行 ## Imagery - 手元や横顔を写した、くすんだ自然光の落ち着いた写真 - ノート・ペン・原稿用紙など書く行為の小物 - 金色の個包装菓子を散らして画面端に配置 - 淡い空と砂丘のような背景でやわらかい FV - 人物写真は明るい淡色背景で親しみを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約70%幅のコンテナに SP と同じ構成を収める - PC の FV は商品・タイトル・メイン写真を横3分割 - 地色の切り替えは PC でも全幅 - 監修者紹介は PC で写真とプロフィールを横並び - 作品グリッドは PC でも2列のまま ## 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-0f07888f`（元 LP の URL から採番） - **元 LP**: https://kanro.jp/blogs/campaign/kinmilk_tanka - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。