DESIGN.md — 黒地×キャラ別ビビッド色のアニメコラボ眼鏡 LP（Anime Collab Character Color-Coded Eyewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 力強い・インパクト、クール・先進的、ポップ・元気
• キーワード: キャラ別テーマ色・レンズ越しの構図・墨はね切り抜き・巨大欧文タイポ・黒と白の交互
• 地の質感: フラットな単色面にアニメ絵を重ねる。グラデーションや影はほぼ使わない
• 形: ボタンは角丸なしの長方形。画像の境界は墨が飛び散ったような不規則な形
• 温度感: クールな黒と白を土台にして、ビビッドな原色で熱を足す

Colors

• 土台は黒と白の2色だけ。導入と締めは黒地、商品ブロックは白地にする
• キャラ1体につきテーマ色を1色決め、欧文名・型番・説明文・ボタン・インジケーターまで同じ色で統一する
• ブロック間でテーマ色を重複させない（赤→紫→明るい紫→青→マゼンタのように変える）
• 付属品セクションだけは暖色のオレンジ単色の面にして、トーンを切り替える
• 黒地の上の情報は、白い矩形ラベルに黒文字を載せて強調する
• 縦書きの巨大欧文名には補色のアクセントを1文字分だけ入れてもよい

Typography

• 本文とキャッチは明朝で静かに、見出し・名前は太い欧文で強く。この対比をつける
• SPのキャラ名は90度回転させて画像の左端に縦に置く
• 型番・カラー名は「｜」で区切って1行に並べる
• 価格や日付は数字を大きく、単位や（税込）は小さくする
• 説明文は1〜3文の短い文にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は画像と商品情報の左右 2 カラムを交互に入れ替える
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• キービジュアルは全幅で配置し、下端を墨はね形で白地に溶け込ませる
• 商品情報は左揃えで、型番→名前→スライダー→説明→ボタン2つの順に並べる
• ボタン2つは横並びで1:1.6程度の幅比
• 導入部の発売情報は右揃えの白ラベルで積む
• 作品紹介とフッターは中央揃えにする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは、レンズ越しのボケや光の反射を含むイラストで出す
• 商品写真は白地に置き、接地影だけ薄く入れる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形。下端は墨・液体が飛び散ったような不規則なシルエットで切り抜く
• セクション境界: 墨はね形の切り抜き、または単色面の直線的な切り替え
• ボタン・ラベル・枠はすべて直角にする
• スライダーのインジケーターは細い横棒にし、アクティブな棒だけテーマ色で塗る
• 左右の矢印は細い線の「く」形にする

Components

• 詳細ボタン（button-detail）: テーマ色ベタ塗りの直角ボタン。右端に小さな▶を付ける
• 3D試着ボタン（button-tryon）: 詳細ボタンより横幅の広い同色ボタン。左に顔認識風のアイコンを付ける
• 縦書きキャラ名（vertical-name）: 画像の左端に回転させて置く巨大欧文。キャラのテーマ色で塗る
• 白ラベル（info-label）: 黒地の上で発売日・型数・価格を示す白い矩形
• 商品スライダー（product-slider）: 白地にフレーム写真、左右に細い矢印、下に横棒インジケーターを置く
• 型番＋モデル名（model-meta）: 型番とカラーを小さく1行、モデル名を太字で下に置く。どちらもテーマ色
• 外部サイト枠ボタン（button-outline-dark）: 黒地の上の白い細枠ボタン。文字は中央揃えで▶付き
• トップへ戻る（back-to-top）: 欧文の小さなテキストの下に、Y字形の線アイコンを置く

Do's and Don'ts

Do - キャラ・商品ごとに色を1つ決めて、そのブロック内の文字とボタンを全部その色にする - キービジュアルは「レンズ越しにのぞく」構図に統一する - 画像の下端は墨はね形の切り抜きで白地へつなぐ - 説明文は明朝、名前は太い欧文にして対比をつける - ボタンは直角のベタ塗りで、2つを横並びにする

Don't - 角丸ボタンや影付きのカードを使わない - 1つのブロックに複数のテーマ色を混ぜない - グラデーションの背景にしない - 本文を長くしない（1ブロック1〜3文まで） - 白地ブロックに黒い太ゴシックの見出しを置かない（欧文はテーマ色で置く）

Page Structure

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

1. ファーストビュー（コラボの世界観を一瞬で伝える）: レンズ越しのキャラ絵を全幅で見せ、下端にコラボのロゴを横断させる
2. コンセプト・発売情報（キャッチ・発売日・価格を伝える）: 黒地。左に明朝のキャッチとリード文、右揃えの白ラベルで日付・型数・価格・注釈を並べる
3. 商品紹介（1体目）（1モデル目を訴求する）: 縦書きの巨大名を重ねたビジュアル→型番→スライダー→説明→ボタン2つ。テーマ色は赤
4. 商品紹介（2〜5体目）（残りのモデルを同じ型で並べる）: 同じ構成を繰り返し、テーマ色だけ紫・明るい紫・青・マゼンタに変える
5. 付属品（特典のケースや小物を紹介する）: オレンジ単色の地に白い太字の欧文見出し。白ラベル付きの説明と、切り抜いたマスコットや商品写真を置く
6. 作品紹介（原作・映画へ誘導する）: 黒地の中央にポスター、タイトルロゴ、あらすじ、白枠ボタンを置く
7. フッター（権利表記とトップへ戻る導線）: 灰色の小さなコピーライトと、Y字アイコン付きの戻るリンク

Imagery

• キャラが眼鏡のレンズ越しにこちらを見る構図。手前のフレームは大きくぼかす
• 背景はキャラ色に寄せた単色系の空間にする
• 画像の下端は墨・液体のはね形のマスクで切る
• 商品写真は白背景で正面または斜めから撮り、薄い接地影を付ける
• マスコットは白フチ付きのステッカー風に切り抜いて、セクションの端に飛び出させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは商品ブロックを画像と情報の2カラムにし、左右を交互に入れ替える
• PCのキャラ名は縦書きをやめ、ブロック上部に横書きの巨大欧文で置き、画像に一部かぶせる
• 導入部はPCでもキャッチ左・発売情報右の配置を保つ
• 付属品と作品紹介はPCでは画像左・テキスト右の横並びにする
• ボタンはPCでは小さめにして情報カラム内に収める

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