DESIGN.md — 朱赤×墨黒の和風コラボ雑貨LP（Crimson Ink Japanese Collab Fashion LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 和風、力強い・インパクト、上品・高級、ラグジュアリー・ダーク
• キーワード: 朱赤・墨黒・雲形の境界・縦書きの札・明朝のキャッチ・ECのグリッド
• 地の質感: 赤はマットな単色の面。墨のにじみや和紙のような白い雲で質感を出す
• 形: 物語部分は直角の写真と札で組み、EC部分は角丸カードとピル型ボタンにする
• 温度感: 暖色の赤で熱く妖しい。白い余白で上品さも保つ

Colors

• 世界観を見せる部分は朱赤の地にし、白い雲形で白地と行き来させる
• 商品写真の背景は深い赤でそろえ、黒い商品とモデルの衣装を際立たせる
• 黒は縦書きの札見出しとロゴだけに使う
• ミント色は予約ボタンとサブボタンの矢印だけに使う
• 商品説明・価格・予約情報は白地か薄いグレー地に置き、読みやすさを優先する
• ページ全体を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

• 世界観を語る部分は明朝体、商品を買う部分はゴシック体で分ける
• 商品カテゴリ名は縦書きの明朝体にし、黒い札に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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。