DESIGN.md — 金菱柄×濃紫の劇画調アニメゲーム LP（Gold Diamond Pattern Dramatic Anime Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 金の菱形パターン・濃紫の斜め帯・劇画調イラスト・欧文セリフ見出し・ネオンマゼンタ矢印・擬音の装飾文字
• 地の質感: 菱形を並べた金のパターンに、紙のような汚しと縦の帯状の明暗を重ねる。ベタ塗りの平面は使わない。
• 形: 斜めの帯、菱形のサムネイル、刃物のような白い筆の払い、アンティーク調の飾り罫で囲んだ額縁。
• 温度感: 暖色の金に冷たい濃紫を合わせ、コントラストを強くした熱い印象。

Colors

• 地は明るい金と金茶の菱形柄を交互に使い、セクションの区切りを色で示す。
• 濃紫は斜めの帯、ボタン、見出しの文字、フッターに使い、全体を引き締める。
• マゼンタは矢印と見出しの下線帯だけに使う。
• ストアボタンは公式の黒×白のままにする。
• 情報パネルは半透明の暗い茶色の面にし、文字は金と白にする。

Typography

• 欧文見出しは頭文字を 2 倍ほどにし、残りの字に和文の小見出しを重ねる。
• キャッチは筆文字か太い明朝にし、斜めに傾けて劇画らしさを出す。
• 本文は太めのゴシックにし、暗い面の上では白で書く。
• ボタンの欧文は字間を広く取り、金色で書く。
• 擬音の装飾文字は大きく半透明にして背景に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ギャラリーのサムネイルは 3 列）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの境は斜めの帯か背景の切り替えで区切る。
• 欧文見出しは左右に寄せ、刃のような白い筆の払いと重ねる。
• ボタンは中央に置き、幅は 75% ほどにする。
• キャラクター紹介は大きな立ち絵に縦書きの名前と説明文を重ねる。

Elevation & Depth

• ボタンは濃紫の面の右下に金色の影をずらして重ねる（ぼかさない）。
• 動画や埋め込みの枠はアンティーク調の飾り罫で額縁にする。
• ソフトな影は使わず、平面を重ねて奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターのサムネイルは菱形に、ギャラリーは枠付きの長方形に切り抜く。立ち絵は切り抜いて重ねる。
• セクション境界: 斜めの直線で切り替える。濃紫の帯を斜めに通す。
• 角丸はほぼ使わず、角を立てる。
• 選択中のサムネイルはマゼンタの枠で示す。
• SNS 共有ボタンだけ円形にする。

Components

• 欧文ラベルのボタン（button-primary）: 濃紫の長方形に金色の欧文を置き、右にマゼンタの矢印を付ける。金色の影をずらして重ねる。
• ストアのダウンロードボタン（store-badge）: 黒の角丸ボタンにストアのロゴを入れ、2 つを横に並べる。
• 欧文セリフの見出し（section-title）: 頭文字を特大にし、和文の小見出しを添えて、白い筆の払いを重ねる。
• ニュースの行（news-row）: 日付を上に置き、クリーム色の帯に 1 行の見出しを入れる。下の縁はギザギザにする。
• 飾り罫の額縁（ornament-frame）: 動画や埋め込みを、金の細線とアンティーク調の角飾りで囲む。
• 菱形のキャラクター選択（diamond-thumb）: 顔のアップを菱形に切り抜き、濃紫の斜めの帯に沿って並べる。
• 斜めの帯のバナー（banner-stripe）: 傾けた濃紫の帯の上に、告知バナーを横スクロールで並べる。
• アプリ情報のパネル（info-panel）: 半透明の暗い茶色の面に、金色の項目名と白い値を縦に並べる。
• 下部に固定する CTA（fixed-footer-cta）: 筆文字の配信告知とストアボタンを、画面下に固定して並べる。

Do's and Don'ts

Do - 金の菱形柄と濃紫の 2 色を軸に、強いコントラストを保つ。 - セクションの境は斜めにして、動きを出す。 - 見出しは欧文セリフと和文の小見出しを組み合わせる。 - 擬音の装飾文字や筆の払いを背景に散らす。 - CTA はファーストビューの直後とページ下部の固定バーに置く。

Don't - 淡いパステル色や柔らかい丸ゴシックを使わない。 - ピル型のボタンやぼかした影を使わない。 - 背景を単色のベタ塗りにしない。 - マゼンタを広い面に使わない。 - 整然とした水平のグリッドだけで組まない。

Page Structure

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

1. ファーストビュー（作品の世界観と主要キャラを一目で伝える）: 集合のキービジュアルの下にタイトルロゴを重ねる。左上に告知バッジ、右上にメニューを置く。
2. キャッチと動画（感情に訴え、PV へ誘導する）: 濃紫の地に斜めの筆文字キャッチを置き、額縁付きの動画サムネイルを続ける。
3. 配信告知とダウンロード（インストールを促す）: 金の地に太い明朝の告知とマゼンタの下線帯を置き、ストアボタンを 2 つ並べる。
4. 告知バナー（キャンペーンや実績を見せる）: 斜めの濃紫の帯の上に、バナーを横スクロールで並べる。
5. ニュース（最新情報を伝える）: 欧文見出しの下にクリーム色の帯を 3 行並べ、MORE ボタンを置く。
6. 公式 SNS（フォローを促す）: 額縁で囲んだ埋め込み、大きなロゴと明朝の見出し、FOLLOW ボタンを並べる。
7. キャラクター紹介（キャラクターの魅力を伝える）: 立ち絵に縦書きの名前と暗い面の説明文を重ね、菱形のサムネイルで切り替える。
8. ギャラリー（ゲーム画面を見せる）: 額縁付きの大きな画面の下に、3 列 2 段のサムネイルと注釈を置く。
9. アプリ情報（基本情報をまとめる）: 飾り罫で挟み、アイコンと半透明のパネルに項目を縦に並べる。
10. フッター（規約やリンク、権利表記を載せる）: 斜めの境から濃紫の地にし、円形の共有ボタン、矢印付きのリンク、コピーライトを置く。下部に CTA を固定する。

Imagery

• キャラクターは劇画調で太い主線と強い陰影で描き、ポーズは迫力を出す。
• 金の菱形パターンに紙の汚しと縦の帯状の明暗を重ねる。
• 白い刃や筆の払いのような曲線を、見出しの後ろに置く。
• カタカナの擬音を立体的な半透明の文字で斜めに配置する。
• 背景に集中線や星のシルエットを使って、熱量を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せの横長のレイアウトにし、キービジュアルを全幅で見せる。
• PC は動画と配信告知を横に並べる。
• PC はニュースと SNS の埋め込みを左右に振り分ける。
• 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 行書くと起動時に読み込まれる。