DESIGN.md — 鮮烈ブルー×ホロ装飾の漫画アプリ周年LP（Electric Blue Manga Anniversary LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、クール・先進的、情報量多め・訴求型
• キーワード: ロイヤルブルー一色・極太透かし欧文・ホログラム多面体・斜め帯・縦書き見出し・漫画キャラ
• 地の質感: 青地に細かい網点やノイズを乗せ、ホロ・虹色グラデの多面体を浮かべる
• 形: 角丸なしの四角いカード、斜めに傾いた帯と多角形パネル、トンボ風の細い罫線
• 温度感: 寒色だけど熱量は高い。青のグラデーションに白文字で疾走感を出す

Colors

• 地色は全セクションほぼ青の濃淡グラデーションで通す
• 白は見出し文字と、メッセージやアプリ訴求の白パネルだけに使う
• 透かしの欧文は地色より一段濃い青にして、主張しすぎないようにする
• 虹色・ホロ色は多面体の装飾とカードの縁取り線だけに少量使う
• 賞品カードは明るい青の面＋濃紺の枠で地から浮かせる
• 人数・日付のバッジは濃紺の地に白文字

Typography

• 見出しはすべて極太。細い書体は使わない
• 大きな欧文を地色の近くに置いて透かしにし、その上に白の和文見出しを重ねる
• 和文のセクション名は縦書きにして、小さなリード文を添える
• 本文も太めにし、青地の上は白で小さく詰めて組む
• 白パネル上の本文だけは濃紺黒の通常の太さにする
• 効果音のような手書き文字を斜めに添えて勢いを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物カードだけ左右交互にずらして配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの頭に巨大な透かし欧文を幅いっぱいに置く
• 人物カードはジグザグに左右へずらし、背景に傾いた多角形を敷く
• 賞品はA〜Dの縦積みカード。背景に大きなアルファベットを置く
• 作品カードはトンボ風の罫線で枠取りし、縦に並べる
• 斜め帯を区切りとしてページ途中に2回入れる

Elevation & Depth

• 多面体の装飾にぼかしと発光を付けて、手前に浮いて見せる
• 人物写真の背景に傾いた濃紺の多角形を敷き、影の代わりにする
• 白パネルには影を付けず、不定形の切り欠きで立体感を出す
• グッズ画像には柔らかいドロップシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は正方形の角版で、2辺に色付きの細線フレーム。グッズは切り抜き
• セクション境界: 斜めに傾いた濃紺の帯、または水平の直線で切り替える
• カード・バッジは角丸なし
• 白パネルは多角形にして角を斜めに欠く
• かぎかっこ型のコーナー罫で本文を囲む
• トンボ・目盛り風の細線を装飾に使う

Components

• 透かし欧文見出し（watermark-heading）: 画面幅いっぱいの濃い青の欧文に、白い縦書きの和文を重ねる
• 斜め帯（diagonal-ribbon）: 傾けた濃紺の帯に、白の欧文と星マークを横に流す
• 人物コメントカード（person-card）: 角版写真に虹色の細線フレームを付け、下に名前・肩書き・右矢印を置く
• 賞品カード（prize-card）: 明るい青の面に濃紺の枠を付け、背景に巨大な賞記号、右下に人数バッジを置く
• 人数バッジ（count-badge）: 濃紺の四角に、白い太字の数字と小さな単位を入れる
• 項目ラベル（label-tag）: 応募要項の小見出し。濃紺の地に白の小さな太字
• 作品カード（work-card）: トンボ罫の枠の中にバナー画像、作品名、作者名、日付バッジを置く
• メッセージ白パネル（letter-panel）: 不定形の白い面。かぎかっこ罫で本文を囲み、黒帯の見出しを付ける
• アプリストアボタン（store-button）: 黒地に白のストアロゴを入れたボタンを縦に2つ並べる

Do's and Don'ts

Do - 地色は青で統一し、濃淡のグラデーションで変化をつける - セクションごとに巨大な透かし欧文を入れる - ホロ調の多面体を余白に散らす - 縦書きの極太和文でセクション名を示す - カードは角丸なしにして、細い線の枠で引き締める

Don't - 暖色の面や淡いパステル地を使わない - 細い明朝や丸ゴシックを見出しに使わない - 大きな角丸やピル型のボタンにしない - 透かし文字を白にしない（主見出しと競合する） - 整然とした余白だけのミニマル構成にしない

Page Structure

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

1. ファーストビュー（周年とキャラの集合で世界観を一気に見せる）: 主要キャラの集合イラストを全面に置き、背後に巨大なキャッチを配置。左上にロゴ、右上にメニュー
2. 記念動画（記念映像へ誘導する）: 16:9の動画埋め込みを置き、右側に縦書きの欧文ラベルを添える
3. 感謝メッセージ（周年の感謝を伝える）: 白のメタリック調の極太和文を中央に置き、マスコットと斜め帯を添える
4. お祝いコメント（著名人のコメントで盛り上げる）: 透かし欧文と縦書き見出しの下に、人物カードをジグザグに並べる
5. ブランドスローガン（コンセプトを再提示する）: 青地に白の極太2行コピーを置く
6. 歴史（これまでの歩みを見せる）: 濃紺の帯に、歪ませた巨大な白の欧文ロゴを置く
7. プレゼント（賞品を紹介して購入を促す）: 透かし欧文、白見出し、リード文の後に、A〜D賞のカードを縦に積む
8. 応募方法（応募条件と期間を伝える）: くすんだ青のパネルに、濃紺のラベルと小さな本文を並べる
9. 投票企画（読者参加を促す）: 透かし欧文、縦書き見出し、効果音文字の後に作品カードを縦に並べ、最後に煽りコピーと目盛り線を置く
10. 編集長メッセージ（運営の想いを伝える）: 多角形の白パネルに手紙風の本文を入れ、署名を右下に置く
11. アプリ訴求（ダウンロードに誘導する）: 白パネルにアイコン・DL数バッジ・キャッチを置き、黒のストアボタンを縦に2つ並べる
12. キャラカードとフッター（余韻を残して締める）: 縁取り文字の背景にホロ調のキャラカードを横に並べる。フッターはロゴとリンク枠

Imagery

• 漫画キャラは青系の衣装でそろえ、躍動感のあるポーズで切り抜く
• 装飾はホログラムや虹色グラデの多面体・プリズム片で作る
• 人物写真は白背景のバストアップを正方形に切り抜く
• グッズは白縁の切り抜きに影を付けて散らす
• 効果音のような手書き文字を斜めに配置する
• 背景に網点とノイズのテクスチャを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではグローバルナビを上部に横並びにする
• PCは賞品のA賞を横長にし、B〜D賞は3カラムで並べる
• 作品カードはPCで2カラムの千鳥配置にする
• 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 行書くと起動時に読み込まれる。