DESIGN.md — 黒×原色の墨しぶきアニメコラボキャンペーン LP（Bold Street Ink Anime Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、クール・先進的
• キーワード: 墨しぶき・原色の色分け・斜体極太・斜めカット・金箔・ストリート
• 地の質感: ざらついたグランジ調の黒地と墨のにじみ。帯は金箔のメタリック質感。
• 形: 平行四辺形の帯やラベル、角丸なしの矩形ボタン。筆で払ったような不定形のしぶき。
• 温度感: 高温。ライブ感と熱量があり、攻撃的なまでに強い。

Colors

• 地は白。施策ブロックは墨の黒と施策ごとのテーマ色のしぶきを背景にする
• 施策ごとに赤・青・黄・灰・橙・紫を 1 色ずつ固定し、目次ボタンと check it out ラベルにも同じ色を使う
• 特別企画（店舗コラボ）は金箔グラデーションで格上げする
• 緊急のお知らせは赤い枠と赤ボタンでまとめる
• アプリへの誘導はマゼンタの面ボタン
• 本文の重要な箇所は黄色の下線マーカーで強調する
• フッターはグランジ調の黒地に白文字
• nav-gold は文字 #FFFFFF × 背景 #DCC073 のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#907324、4.5:1）を使う。
• button-primary は文字 #FFF3F2 × 背景 #E60012 のコントラスト比が 4.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E30012、4.53:1）を使う。
• button-app は文字 #FFF3F2 × 背景 #E3017D のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#DB0179、4.51:1）を使う。

Typography

• 見出しは極太ゴシックを斜体（skew -10°程度）で組む
• 施策タイトルは白い平行四辺形の地に黒文字を乗せ、1 行ずつ帯にする
• 日付は数字を大きく、年は小さく、曜日は黒四角の中に白抜き
• 本文は中央揃えか左揃えで太めに組む
• 注意書きは※付きで小さく、ぶら下げインデントにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。目次ボタンだけ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 施策ブロックはキャラクターイラストを画面幅いっぱいに置き、左右に寄せて交互に配置する
• 目次は 3×2 の色ボタンと、全幅の金色ボタン 1 つ
• 施策ブロックの右下か左下に check it out の斜めラベルを置く
• お知らせは赤枠のカードに入れ、上部に赤いヘッダー帯を付ける
• アコーディオンは灰色地の全幅バーで、右端に＋を付ける

Elevation & Depth

• ボタンには右下へ黒の硬い影（2〜3px、ぼかしなし）
• 大きな見出し文字には黒い縁取りか影
• カードの影は基本なし。枠線で区切る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターの切り抜きを墨しぶきの上に重ね、ブロックの下端は斜めに切る
• セクション境界: 斜めのカット線と筆の払い
• 角丸は使わない
• 帯・ラベルは平行四辺形
• 目次ボタンの右下に二重の小さな ∨ を置く
• CTA の右端に » を置く

Components

• 施策の目次タイル（nav-tile）: 施策のテーマ色で塗った矩形。白の斜体文字に、右下に ∨ と黒い影を付ける
• 金箔の目次バナー（nav-gold）: 全幅の金箔グラデーション。白の斜体文字を乗せる
• お知らせカード（notice-card）: 赤枠に赤いヘッダー帯。本文には黄色マーカーを引く
• 赤 CTA ボタン（button-primary）: 赤の全幅矩形。白文字で右端に »、黒い影を付ける
• check it out ラベル（check-label）: テーマ色の平行四辺形に白の英字。横に » を添える
• 黒帯の斜め見出し（skew-heading）: 斜めに傾けた黒いグランジ帯に白の極太文字。左上に collabo と番号のタグを付ける
• 詳しくみるアコーディオン（accordion）: 灰色のバー。文字は中央、右端に＋
• アプリ誘導ボタン（button-app）: マゼンタの矩形。白文字 2 行で右下に »
• 期間表示（date-badge）: 黒の平行四辺形に白の斜体数字。曜日は白四角に黒文字

Do's and Don'ts

Do - 施策ごとに 1 色を決め、全体で統一して使う - 見出しと日付は必ず斜体の極太にする - 墨しぶきと筆の払いで背景に動きを出す - 帯とボタンは平行四辺形か角ばった矩形にし、硬い影を付ける - 注意書きは※付きで小さくまとめて載せる

Don't - 角丸やピル型のボタンにしない - パステルカラーや淡いグラデーションを使わない - 細い明朝体や手書き風の書体を使わない - ぼかしの大きい柔らかな影を使わない - 施策の色を混ぜて使わない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（コラボの告知と全体の世界観を見せる）: 原色の背景にキャラクターを集合させたビジュアル。下に黒帯で期間を大きく入れ、スライダーのドットを付ける
2. キャンペーン目次（各施策へ案内する）: 斜め下線付きの見出しと、色分けした 3×2 タイル、金色の全幅バナー
3. お知らせ（更新情報と訂正を伝える）: 赤枠のカードに黄色マーカーの本文と赤 CTA
4. 施策紹介（繰り返し）（応募方法や特典を施策ごとに訴求する）: テーマ色の墨しぶき、キャラクター 3 人、白帯の斜体タイトル、期間、check it out ラベル
5. 店舗コラボ（特別企画を詳しく説明する）: 金箔のヘッダー、開始日の筆文字ラベル、注意書き、collabo 番号付きの黒帯見出し、アコーディオン
6. 公式アプリ（アプリ会員の獲得）: 黒帯の見出しと期間、スマホのモックの周りにミニキャラ、マゼンタのボタン
7. シェア・問い合わせフッター（拡散と問い合わせ先の案内）: グランジ調の黒地。ハッシュタグとコピーボタンと SNS アイコンを白カードにまとめ、電話番号は斜体で大きく載せる

Imagery

• アニメ調のキャラクターを全身か半身で切り抜き、3 人一組で重ねる
• 背景は筆で払った墨と原色のしぶき。グランジのかすれも加える
• ミニキャラの集合で親しみも出す
• 金箔は手描き風のかすれを入れたメタリックグラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に 480〜600px 幅のカラムを置く想定
• PC では左右の余白をグレー地か黒のグランジ地にする
• PC で全幅に広げる場合は、施策ブロックを 2 カラム（イラストと文字）にする
• 目次は PC で 6 列の 1 行に並べてもよい

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 行書くと起動時に読み込まれる。