--- version: alpha name: Pastel Pink Gold Ribbon Miniature Craft Collection LP description: 淡いピーチ地とくすみピンクの面を交互に重ね、金のリボン見出しと焼き菓子のような茶色を差した、かわいく上品な手芸パートワーク（分冊百科）の LP。白皿にのったミニチュア作品の切り抜き写真を大量に並べ、カタログのように見せる。 colors: primary: '#E098A6' background: '#FCEADE' surface: '#FEFEFE' secondary: '#D46A80' cta: '#A57C53' on-cta: '#FEFCF2' text: '#7A4438' text-body: '#1F1814' accent-1: '#C9A13B' background-alt: '#FFFCF9' tint-1: '#FBEDC0' accent-2: '#FEDC00' marker: '#E0282E' text-muted: '#E198A6' cta-accessible: '#916D49' accent-1-accessible: '#DDC483' text-muted-accessible: '#C13853' secondary-accessible: '#C94460' typography: display: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Kiwi Maru fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em body-lg: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 500 lineHeight: 2.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.4 accent: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px tag-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px ribbon-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px cloud-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 160px issue-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 24px benefit-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-muted}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 360px pink-ribbon-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 64px cta-box: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 110px frame-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px --- # DESIGN.md — 桜ピンク×金リボンのミニチュア手芸定期購読 LP（Pastel Pink Gold Ribbon Miniature Craft Collection LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: ピーチ地・くすみピンク・金リボン・リボン格子柄・切り抜き作品写真・雲形吹き出し - **地の質感**: リボンを結んだ菱形格子の淡い地模様と、金箔風グラデーションの装飾フレーム。ほかの面はフラットに塗る - **形**: 波形のセクション境界、有機的な不定形ブロブ、雲形吹き出し、端に穴のあいたタグ型ボタン、金の飾り枠 - **温度感**: 暖色寄り。ピーチとピンクに金と焦げ茶を合わせ、甘いお菓子の温かさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E098A6` | くすみピンクの面（作品紹介・SNS帯） | 17% | 画素の実測 | | `background` | `#FCEADE` | ピーチのベース地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | カード・タグボタンの白 | 12% | 画素の実測 | | `secondary` | `#D46A80` | 濃いローズのブロブ・特典リボン帯 | 6% | 推定 | | `cta` | `#A57C53` | 定期購読ボタン（茶） | 1% | 画素の実測 | | `on-cta` | `#FEFCF2` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#7A4438` | 焦げ茶の見出し・シルエット | 3% | 画素の主要色に補正 | | `text-body` | `#1F1814` | 本文の黒 | 2% | 画素の実測 | | `accent-1` | `#C9A13B` | 金のリボン・飾り枠 | 3% | 推定 | | `background-alt` | `#FFFCF9` | 格子柄エリアの白っぽい地 | 20% | 画素の実測 | | `tint-1` | `#FBEDC0` | 特典カードのクリーム | 4% | 画素の実測 | | `accent-2` | `#FEDC00` | 申込ボックスの黄色 | 1% | 画素の実測 | | `marker` | `#E0282E` | 送料無料ラベルの赤 | 0% | 推定 | | `text-muted` | `#E198A6` | 特典タイトルのピンク文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#916D49` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#DDC483` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#C13853` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#C94460` | AA を満たす補正値（計算） | | 計算 | - ベースはピーチ（#FCEADF）にする。商品ラインナップは白地＋リボン格子柄、作品紹介はくすみピンクの面にして、セクションごとに地の色を切り替える - 見出しの装飾は金のリボン帯と金の飾り枠に限定する - 文字とシルエットは焦げ茶を基本にし、真っ黒は本文だけに使う - 申込ボックスは黄色地に赤の『送料無料』を載せ、ページ内で一番目立たせる - ピンク面の上の文字は白にし、白い雲形の吹き出しには金茶の文字を使う - `button-primary` は文字 `#FEFCF2` × 背景 `#A57C53` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#916D49`、4.55:1）を使う。 - `ribbon-heading` は文字 `#7A4438` × 背景 `#C9A13B` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DDC483`、4.54:1）を使う。 - `cloud-bubble` は文字 `#C9A13B` × 背景 `#FEFEFE` のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DDC483`、4.58:1）を使う。 - `issue-badge` は文字 `#7A4438` × 背景 `#C9A13B` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DDC483`、4.54:1）を使う。 - `benefit-card` は文字 `#E198A6` × 背景 `#FBEDC0` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#C13853`、4.54:1）を使う。 - `pink-ribbon-label` は文字 `#FEFCF2` × 背景 `#D46A80` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#C94460`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の日付・価格 | ゴシック | Noto Sans JP | 500 | 32px | 1.3 | 0.05em | | `headline-lg` | 特典のメイン見出し | 丸ゴシック | Kiwi Maru | 500 | 28px | 1.4 | 0.05em | | `headline-md` | 金リボン上のシリーズ名 | 明朝 | Shippori Mincho | 600 | 24px | 1.3 | 0.02em | | `headline-sm` | ピンク面の小見出し・額縁見出し | 丸ゴシック | Zen Maru Gothic | 500 | 18px | 1.6 | 0.15em | | `body-lg` | 中央揃えのリード文 | 丸ゴシック | Zen Maru Gothic | 500 | 17px | 2.4 | 0.1em | | `body-md` | 監修者プロフィールなどの本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.0em | | `note` | 作品名のキャプション | ゴシック | Noto Sans JP | 400 | 10px | 1.4 | 0.0em | | `accent` | LEARN MORE などの欧文 | 欧文セリフ | Cormorant Garamond | 600 | 11px | 1.2 | 0.2em | | `label-button` | ボタン文字 | 丸ゴシック | Zen Maru Gothic | 500 | 16px | 1.3 | 0.1em | - リード文は短い行で改行し、中央揃え・広い行間（2.4前後）で詩のように見せる - 見出しは字間を広め（0.1〜0.15em）にとり、柔らかく見せる - 金リボン上のシリーズ名は手書き風の明朝で、焦げ茶にする - 作品名のキャプションは小さなゴシックで、写真の直下に置く - 日付・価格は数字を大きく、曜日は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。作品一覧は 3〜4 列のグリッドで、主役の号だけ大きく置く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 作品写真は白皿ごと切り抜き、大小をつけて千鳥に並べる - シリーズごとに『金リボン見出し→額縁付きジオラマ写真→作品グリッド』の順で繰り返す - ピンク面では不定形ブロブの上に写真と吹き出しを重ねる - 特典カードは角丸のクリーム地にし、左上に茶色の円形番号を置く - 申込ボックスは画面幅いっぱい近くまで広げ、メリットを 4 つ横に並べる ## Elevation & Depth - 基本はフラットで、影はほとんど使わない - タグ型ボタンは、ピンクの線をずらして重ね、影のように見せる - 写真には白フチや金の飾り枠をつけ、立体感の代わりにする - 切り抜き作品には、うっすら接地影をつける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 作品は切り抜き。ジオラマ写真は、四隅を内側に丸めた金の額縁で囲む - **セクション境界**: 大きな波形カーブ、またはなだらかなアーチで地の色を切り替える - ボタンは角丸を小さくした長方形、または両端に穴のあいたタグ型にする - 吹き出しは雲形にする - ピンク面の背景には有機的なブロブを置く - 見出しは、端を燕尾に切った金リボン帯にする ## Components - **定期購読ボタン**（`button-primary`）: 茶色の角丸長方形に白文字。右に白い小さな送料無料ラベルを添える - **タグ型動画ボタン**（`tag-button`）: 白地にピンクの枠線、両端に穴の装飾。金の唐草を左右に置き、下に小さな英字を添える - **金リボン見出し**（`ribbon-heading`）: 金のグラデーション帯の左に焦げ茶のキャラクターシルエットを重ね、シリーズ名を置く - **雲形吹き出し**（`cloud-bubble`）: 白地に金茶の線で描いた雲形。中に短い付属品の訴求を入れる - **号数リボンバッジ**（`issue-badge`）: 作品の下に置く金の小リボン。号数を入れる - **特典カード**（`benefit-card`）: クリーム地の角丸カード。左上に茶の円形番号、ピンクの見出し、右下に拡大アイコン - **期限付き特典ラベル**（`pink-ribbon-label`）: 右端を燕尾に切ったローズ色の帯に、白文字で期限を書く - **黄色申込ボックス**（`cta-box`）: 黄色地に赤の送料無料ラベルと見出しを置き、白地に黒枠のメリットボタンを 4 つ並べる - **額縁見出し**（`frame-heading`）: 薄ピーチ地を金の飾り枠で囲み、焦げ茶の丸ゴシックを広い字間で置く ## Do's and Don'ts **Do** - 作品写真は白皿ごと切り抜き、大小をつけて並べる - 金のリボンや飾り枠でシリーズの区切りを示す - セクションの境は波形にし、ピーチとピンクの地を交互にする - 焦げ茶のキャラクターシルエットを装飾として配置する - リード文は短い行に分け、中央揃えにする **Don't** - 寒色や彩度の高い原色を広い面に使わない（黄色は申込ボックスだけ） - 角ばった硬いゴシックで見出しを組まない - 写真を四角いまま無装飾で並べない - 影の強いカードや立体ボタンを使わない - 真っ黒の太い罫線を多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と発売日・創刊号価格を伝える）: ジオラマ写真を全面に敷き、商品パッケージと金の円形価格バッジを重ねる。下にピンクの波帯を置き、白抜きで日付を載せる 2. **CTA・ログイン導線**（すぐに申し込めるようにする）: 作品写真を 2 枚並べ、茶色の申込ボタン、ログインリンク、キャンペーンバナーを続ける 3. **SNSシェア**（拡散を促す）: ピンクの帯の上に SNS アイコンとシェアボタンを置く 4. **コンセプト**（作れるものと楽しみ方を伝える）: ピーチ地に、きらめき付きの切り抜き作品、雲形吹き出し、中央揃えのリード文を並べる 5. **動画導線**（CMやつくり方動画へ誘導する）: タグ型ボタンを縦に 3 つ並べる 6. **ラインナップ**（シリーズごとの作品を一覧で見せる）: リボン格子柄の地に、金リボン見出し、額縁写真、作品グリッドの順で 4 シリーズを繰り返す 7. **申込特典**（期限付きプレゼントで申込を促す）: ローズ色の燕尾ラベルと大きな見出しを置き、番号付きのクリーム色カードを 2 枚並べる 8. **上位プラン案内**（上位プランの付属品を見せる）: ベージュ地を金の飾り枠で囲み、上部に金リボン見出し。中は写真のグリッド 9. **申込ボックス**（最終的な申込に誘導する）: 黄色のボックスにメリットを 4 つ並べ、下に FAQ リンクを置く 10. **セット内容**（材料と付属品を説明する）: ピンク地にシルエット、額縁見出し、ブロブ上の写真と吹き出し、LEARN MORE を置く 11. **監修者紹介**（信頼感を出す）: 細い焦げ茶の枠の中に、人物写真・肩書・名前・経歴文を並べる 12. **マガジン内容**（冊子の中身を紹介する）: ブロブを左右交互に置き、誌面写真と雲形吹き出しを重ねる。最後に収納ボックスを白カードで見せる 13. **特典・CTA再掲**（もう一度申込を促す）: 特典、上位プラン、申込ボックスを同じ構成でもう一度置く ## Imagery - ミニチュア菓子やパンは白い小皿やレースペーパーにのせ、真上〜斜め上から明るく撮影して切り抜く - ジオラマは木製の台に作品を並べ、浅い被写界深度で撮る。背景はシリーズごとの世界観の色にする - 作品の周りに金色の十字型きらめきを散らす - キャラクターは焦げ茶一色のシルエットにして装飾に使う - 道具や付属品は白背景で切り抜き、線付きのラベルで名前を示す - 地模様はリボンで結んだ菱形格子を淡いピンクで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央のコンテンツ幅を約 900px にし、作品グリッドを 7〜8 列に広げる - PC の FV は横長の写真にし、左にサムネイルの縦列を加える - PC のコンセプトはリード文を中央に置き、作品写真を左右に振り分ける - PC の特典カードは 2 枚を横に並べる - 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-2f469b58`（元 LP の URL から採番） - **元 LP**: https://hcj.jp/dmf/home.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。