DESIGN.md — 紺×黄×藤色の明治レトロ漫画プロモLP（Retro Meiji Manga Promotion LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、力強い・インパクト、上品・高級、情報量多め・訴求型
• キーワード: 明治レトロ・セクションごとの色の切り替え・欧文セリフ見出し・飾り枠・キャラクター主役
• 地の質感: クリーム地に薄い水玉、黄色地に薄い市松柄、藤色地にダマスク柄を敷いた紙もの風の質感
• 形: 四角いバナーが基本。飾り罫の枠、カプセル型の試し読みバナー、円形の星形バッジ
• 温度感: 暖色の黄・クリームと、寒色の紺・黒を交互に置いた高コントラスト

Colors

• 地の色はセクションごとに切り替える。順番はクリーム、紺紫、黒、鮮黄、白、グレー、黒。
• 見出しの英字は、明るい地では濃紺のセリフ体にする。黒地ではパステルのグラデーション文字にする。
• 藤色は特典や試し読みなど、ここだけの価値を見せる帯にだけ使う。
• CTA は白い面にピンクの枠と文字を使い、周りの色から浮かせる。
• 名前や肩書きは、赤茶の帯の上に黄色の文字で載せる。
• 黄色地にはごく薄い同系色の柄を敷き、ベタ塗りの平坦さを和らげる。
• button-primary は文字 #E0559A × 背景 #FEFEFE のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#D82A80、4.56:1）を使う。
• carousel-arrow は文字 #E0559A × 背景 #FEFEFE のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#D82A80、4.56:1）を使う。

Typography

• セクションの頭は、大きな欧文セリフの英字に、小さな日本語のサブ見出しを添えた 2 段にする。
• 作品の世界観を出す文字は明朝体を使い、本文は太めのゴシック体を使う。
• 黒地のストーリー本文は中央揃えにし、短い行を積み重ねる。
• キャラクター名は縦書きの明朝体にし、細い飾り罫を添える。
• CTA の文字は丸みのある書体にし、やわらかく親しみやすくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで、画像を中心に縦に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションの間に余白は入れず、地の色の切り替えで区切る。
• セクションの中は上下 40〜60px の余白を取る。
• 告知画像はほぼ画面幅で中央に置く。
• キャラクターは 1 人ずつのカルーセルにし、左右に丸い矢印を付ける。
• お知らせ一覧は全幅のリストにし、項目を細い線で区切る。

Elevation & Depth

• 影はほとんど使わず、フラットに仕上げる。
• 告知画像には細い枠や飾り枠を付けて額装のように見せる。
• 動画の埋め込みは、グラデーション地の上にそのまま置く。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 60px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターは切り抜きにする。告知は四角いバナー画像にする。
• セクション境界: 直線で色を切り替える
• CTA ボタンは角丸なしの四角に、ピンクの細い枠と丸矢印アイコンを付ける。
• 試し読みバナーは両端が丸いカプセル型にする。
• 告知バッジは黄色の円形にする。
• 見出しの上に洋館のシルエット紋章を置く。

Components

• 予約 CTA（button-primary）: 白い四角の面にピンクの枠と文字、右端に丸矢印アイコン
• 英字セリフ見出し（section-heading）: 大きな欧文セリフの英字と、日本語のサブ見出し。上に紋章イラストを置くことがある
• 作者名リボン帯（credit-ribbon）: 赤茶の帯に、肩書きは白字、名前は黄色の明朝体で載せる
• 告知円バッジ（badge-circle）: 黄色の円に、決定などの告知を濃紺の太字で入れる。曲線の添え文字を付ける
• 特典紹介パネル（bonus-banner）: 藤色の帯見出しの下に、ダマスク柄の地を敷き、特典の画像を並べる
• 試し読みカプセルバナー（trial-capsule）: 左半分は藤色に黄字と白いピル型ラベル、右半分は漫画の 1 コマ
• カルーセル矢印（carousel-arrow）: 白い丸にピンクの三角を入れた、左右の送りボタン
• お知らせリスト（news-list）: 見出しの左右に罫線を引き、青いリンクと日付を線で区切って並べる

Do's and Don'ts

Do - セクションごとに地の色をはっきり変え、ページに章立てのリズムを作る。 - 見出しは欧文セリフの英字と日本語のサブ見出しの 2 段で統一する。 - 飾り罫、紋章、ダマスク柄で明治の洋館らしいレトロ感を足す。 - キャラクターのイラストを大きく見せ、主役として扱う。 - CTA の直前に、在庫限りなどの短い注意書きを 1 行置く。

Don't - セクションの間に白い余白を挟まない。 - 見出しを丸ゴシックやポップ体にしない。 - 藤色や黄色を本文の文字色に使わない。 - 影や光沢の強いボタンを使わない。 - 黒地の本文を左揃えの長文にしない。

Page Structure

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

1. ファーストビュー（作品の世界観と、新しい告知を一度に伝える）: 上に明朝のリードを飾り括弧で囲んで置く。中央に全員集合のキービジュアル、下の紺地に光るロゴと作者名リボンを置き、右端に黄色の円バッジを添える
2. 商品紹介（ドラマCD）（ジャケットと特典の絵柄を見せる）: クリームの水玉地に英字セリフ見出しを置く。ジャケット画像と藤色の特典パネルを縦に並べる
3. CTA（予約へ誘導する）: 注意書きを 1 行置き、その下に白い四角のボタンをピンクの枠で置く
4. 試聴動画（音源を試聴してもらう）: 紺紫のグラデーション地に、黄色の小見出しと動画の埋め込みを置く
5. ストーリー（あらすじで興味を引く）: 背景イラストの下の黒地に、グラデーションの英字見出しと中央揃えの白文字を置き、主人公を下から覗かせる
6. キャラクター紹介（登場人物を 1 人ずつ見せる）: 鮮黄の柄地に紋章と英字見出しを置く。全身イラストをカルーセルにし、名前を縦書きで添える
7. 試し読み・関連バナー（本編の閲覧と連載ページへ送る）: 白地に、カプセル型のバナーと四角い告知バナーを余白を広めに取って縦に並べる
8. お知らせ（関連ニュースを載せる）: 薄グレーの地に、罫線付きの見出しとリンクのリストを置く
9. フッター（サイトナビと権利表記を置く）: 黒地に白文字のメニューを並べ、項目を線で区切る

Imagery

• キャラクターは厚塗りのアニメ調にし、全身の切り抜きで大きく見せる。
• 背景は夕焼けや朝焼けの空と、洋風の石造り建築を見上げる構図にする。
• 花びらを散らし、ほのかな光の粒で華やかさを出す。
• 洋館シルエットの白い線画の紋章を、見出しの飾りに使う。
• 地の柄は水玉、ダマスク、市松を、地の色に近い同系色でごく薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではキービジュアルを全幅にし、ロゴとバッジを重ねて 1 画面に収める。
• PC のストーリーは左右 2 分割にし、左に背景イラスト、右の黒地に本文を置く。
• PC のキャラクター紹介は 3 人を横に並べる。
• PC のお知らせは 2 カラムにする。
• コンテンツの幅は、PC では中央の 900px 前後に収める。

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