--- version: alpha name: Crimson Ink Japanese Collab Fashion LP description: アニメとのコラボで作ったファッション雑貨の予約販売LP。朱赤の地に墨のような筆文字ロゴと白い雲形の境界を合わせ、和の妖しさを出している。商品ごとに縦書きの黒い札見出しと赤背景のモデル写真を置き、その下はECらしいミント色の予約ボタンと白地の商品グリッドで締める。 colors: primary: '#E0474C' secondary: '#AB2D35' background: '#FFFFFF' dark-section: '#010101' on-dark: '#FDFDFD' text: '#1D1D23' text-body: '#333333' cta: '#47DAC0' on-cta: '#FFFFFF' line: '#EEECEB' background-alt: '#F9F9F9' surface: '#EDEDED' text-muted: '#8C857F' cta-accessible: '#1B8472' text-muted-accessible: '#7B746F' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 1.8 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em accent: fontFamily: Yuji Syuku fontSize: 56px fontWeight: 400 lineHeight: 1.0 rounded: sm: 4px md: 6px lg: 24px full: 999px spacing: unit: 8px card: 16px 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: 30px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px tag-vertical-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 145px divider-cloud: backgroundColor: '{colors.primary}' height: 80px box-notice: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 165px card-product: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 210px button-more: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 35px callout-zoom: backgroundColor: '{colors.background}' height: 80px --- # DESIGN.md — 朱赤×墨黒の和風コラボ雑貨LP（Crimson Ink Japanese Collab Fashion LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 和風、力強い・インパクト、上品・高級、ラグジュアリー・ダーク - **キーワード**: 朱赤・墨黒・雲形の境界・縦書きの札・明朝のキャッチ・ECのグリッド - **地の質感**: 赤はマットな単色の面。墨のにじみや和紙のような白い雲で質感を出す - **形**: 物語部分は直角の写真と札で組み、EC部分は角丸カードとピル型ボタンにする - **温度感**: 暖色の赤で熱く妖しい。白い余白で上品さも保つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E0474C` | メインの朱赤の地 | 16% | 画素の実測 | | `secondary` | `#AB2D35` | 写真背景の深い赤 | 5% | 画素の実測 | | `background` | `#FFFFFF` | ページの白地 | 40% | 画素の実測 | | `dark-section` | `#010101` | 縦書きの札見出しの黒 | 2% | 画素の実測 | | `on-dark` | `#FDFDFD` | 札の上の白文字と細い枠線 | 1% | 画素の実測 | | `text` | `#1D1D23` | キャッチや見出しの文字 | 2% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文と価格の文字 | 2% | 推定 | | `cta` | `#47DAC0` | 予約ボタンのミント色 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 予約ボタン上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#EEECEB` | サブボタンの枠と区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#F9F9F9` | 予約情報ボックスの薄いグレー | 3% | 画素の実測 | | `surface` | `#EDEDED` | フッターのグレー地 | 6% | 画素の実測 | | `text-muted` | `#8C857F` | 注釈やフッターの補助文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#1B8472` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#7B746F` | AA を満たす補正値（計算） | | 計算 | - 世界観を見せる部分は朱赤の地にし、白い雲形で白地と行き来させる - 商品写真の背景は深い赤でそろえ、黒い商品とモデルの衣装を際立たせる - 黒は縦書きの札見出しとロゴだけに使う - ミント色は予約ボタンとサブボタンの矢印だけに使う - 商品説明・価格・予約情報は白地か薄いグレー地に置き、読みやすさを優先する - ページ全体を3色（赤・黒・白）に抑える - `button-primary` は文字 `#FFFFFF` × 背景 `#47DAC0` のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1B8472`、4.58:1）を使う。 - `button-secondary` は文字 `#8C857F` × 背景 `#FFFFFF` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7B746F`、4.6:1）を使う。 - `button-more` は文字 `#8C857F` × 背景 `#FFFFFF` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7B746F`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 札に縦書きする商品カテゴリ名 | 明朝 | Shippori Mincho | 600 | 34px | 1.2 | 0.05em | | `headline-lg` | 古風な語り口のキャッチ（ダッシュ付き） | 明朝 | Noto Serif JP | 600 | 15px | 1.8 | 0.05em | | `headline-md` | ページ冒頭の告知見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.03em | | `headline-sm` | 下部グリッドの作品別見出し | ゴシック | Noto Sans JP | 400 | 17px | 1.4 | 0.02em | | `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.03em | | `body-lg` | 価格表記 | ゴシック | Noto Sans JP | 500 | 12px | 1.5 | 0.0em | | `note` | 商品名ラベル、注釈、著作権表記 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.02em | | `label-button` | 予約ボタンとサブボタンの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.0 | 0.05em | | `accent` | タイトルロゴ風の墨筆文字 | 手書き・筆 | Yuji Syuku | 400 | 56px | 1.0 | 0.0em | - 世界観を語る部分は明朝体、商品を買う部分はゴシック体で分ける - 商品カテゴリ名は縦書きの明朝体にし、黒い札に1〜4文字で入れる - キャッチは2行に分け、2行目を字下げして階段状にずらす - キャッチの文末には全角ダッシュや三点リーダーを付け、余韻を残す - 本文は10px前後と小さめにし、行間を広く取る - 価格は円記号付きで少し大きく書き、横に「税込」を小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品詳細の写真は 2 列、下部の商品一覧は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - メイン写真は左右に約8pxの余白を残し、ほぼ全幅で置く - 黒い札は写真の左上に重ね、上半分を写真の上にはみ出させる - 価格とボタンのまとまりは中央寄せにし、幅は約60%にする - 1商品は札見出し→写真→キャッチ→詳細写真→説明→価格→ボタンの順で組み、商品ごとに繰り返す - 商品と商品の間は約80pxの白い余白で区切る - 下部の一覧は区切り線と作品見出しで区切る ## Elevation & Depth - 影はほぼ使わず、平面的に組む - サブボタンとLINE案内のカードは薄い枠線だけで区別する - 奥行きは、雲形が写真や赤地に重なる重ね方で出す ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 物語部分の写真は角丸なしの長方形。商品一覧の写真は角丸4pxの正方形 - **セクション境界**: 墨流しのような不定形の白い雲で、赤地と白地を切り替える - 予約ボタンは角丸4pxの長方形にする - 「もっと見る」ボタンだけピル型にする - 札は黒い長方形の内側に白い細線の二重枠を入れる - 部分を拡大した写真は四角い枠で囲み、細い線で本体写真とつなぐ ## Components - **予約ボタン**（`button-primary`）: ミント色の面に、カートアイコンと白い太字の文字を入れる - **商品ページへ進むボタン**（`button-secondary`）: 白地に薄い枠線。中央にグレーの文字、右端にミント色の矢印を置く - **縦書きの札見出し**（`tag-vertical-label`）: 黒い長方形に白い二重枠を入れ、明朝体で縦書きする。写真の左上に重ねる - **雲形の境界**（`divider-cloud`）: 白と赤が不定形の雲の形でかみ合う境界。冒頭と終盤で使う - **予約情報ボックス**（`box-notice`）: 薄いグレー地に、隅付き括弧の太字見出しで予約期間とお届け時期を並べる - **商品カード**（`card-product`）: 角丸の正方形写真の下に、小さな商品名と価格を置く。売り切れの商品は写真右下に表示を重ねる - **もっと見るボタン**（`button-more`）: ピル型の白いボタンに薄い枠線と、ミント色の矢印を付ける - **部分拡大の吹き出し**（`callout-zoom`）: 四角い枠の拡大写真を、黒い細線と点で本体写真の該当部分につなぐ ## Do's and Don'ts **Do** - 赤背景のモデル写真と黒い札をセットにして、商品ごとに繰り返す - キャッチは古風な言い回しを明朝体にし、短く2行で書く - 赤地の区間の出入りには必ず雲形の境界を使う - 購入まわりは白地にまとめ、ボタンの形と大きさをそろえる - 白い余白を大きく取り、高級感を保つ **Don't** - 赤地の上にミント色のボタンを置かない - グラデーションや強い影を入れない - 物語部分の写真に角丸を付けない - 明朝体とゴシック体を同じブロックに混ぜない - 赤以外の色を背景の面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（サイト内の移動とカートへの導線）: 白地の中央にロゴ、左にメニューのピル型ボタン、右にカートを置く 2. **告知見出し**（何のコラボ商品かを伝える）: 白地の中央に太字ゴシックで2行 3. **ファーストビュー**（作品の世界観と商品を同時に見せる）: 赤地にキャラクターのイラストとモデル写真を並べ、下に白い雲と墨筆のタイトルロゴを置く 4. **導入文**（コラボの内容と商品点数を伝える）: 赤地に明朝体のキャッチと中央寄せの短い本文。続けて商品を並べた平置き写真を置く 5. **商品紹介（繰り返し）**（各商品の魅力を伝え、予約へつなげる）: 縦書きの札→赤背景のモデル写真→階段状のキャッチ→2列の詳細写真→説明文→価格とボタン2つ 6. **予約情報**（予約期間とお届け時期を知らせる）: 薄いグレーのボックスに、隅付き括弧の太字見出しで項目を並べる 7. **ルックブック**（コーディネートを見せて余韻を残す）: 雲形の境界で赤地に入り、縦長写真を3列に並べる。下にロゴの掛け合わせを置き、雲で白地に戻す 8. **注釈とLINE案内**（免責と再販のお知らせ）: 小さな注釈文の下に、枠線付きカードでLINEへの導線を置く 9. **関連商品の一覧**（ほかの作品の商品へ回遊させる）: 絵文字付きの作品見出し、2列の商品カード、ピル型の「もっと見る」ボタンを作品ごとに繰り返す 10. **フッター**（ガイドとSNSへの導線）: グレー地にパンくず、2列のリンク、アイコン付きのSNSリストを並べる ## Imagery - モデル写真は単色の赤背景で撮り、黒いレース服と赤いアイメイクで妖艶にする - 商品の物撮りは白背景か赤背景にし、柔らかい光で質感を見せる - キャラクターイラストは平塗りで鮮やかな和柄の絵を、写真と並べて置く - 装飾は墨流しのような不定形の雲と、にじんだ筆文字のロゴ - 裏地や柄の部分は寄りで撮った写真を入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文の幅を約800pxに制限して中央に置く - PC ではモデル写真と詳細写真を横に並べる2カラムにしてもよい - 商品一覧は PC で4列グリッドに広げる - 雲形の境界と赤い地は全幅のまま保つ - 縦書きの札は PC で少し大きくし、写真への重なり方は SP と同じにする ## 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-5325271c`（元 LP の URL から採番） - **元 LP**: https://www.super-groupies.com/feature/mononoke_03_watch?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。