--- version: alpha name: Deep Navy Fantasy Game Collab LP description: 深い紺色の地に、雲空の写真背景と水色に光る見出しを重ねたゲームコラボ告知 LP。キャラクターイラストを斜めカットのタイルやカードで大きく見せる。明朝系の見出しに細い装飾罫を組み合わせ、青いグラデーションのピル型ボタンでリンク先へ誘導する。 colors: primary: '#0A293D' background: '#234456' background-alt: '#87ABBF' dark-section: '#000000' accent-1: '#5FE0F0' cta: '#3A86D8' on-cta: '#E1E3DB' text: '#DBE3E7' accent-2: '#A7E7F4' line: '#C9D3DA' surface: '#1C3245' accent-3: '#D6C29A' text-muted: '#9A9A9A' cta-accessible: '#2366B0' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Cinzel fontSize: 16px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.03em label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 8px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px store-badges: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px heading-ornament: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px character-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 150px reward-step: textColor: '{colors.accent-2}' typography: '{typography.body-md}' height: 130px filter-icons: textColor: '{colors.text}' typography: '{typography.body-md}' height: 60px campaign-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 180px video-thumb: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' height: 90px --- # DESIGN.md — 深紺×水色発光のファンタジーゲームコラボLP（Deep Navy Fantasy Game Collab LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 深紺・発光する水色・雲空・ファンタジー・斜めカット・装飾罫 - **地の質感**: 暗い紺の地に半透明のイラストや雲の写真を薄く重ねる。文字やフレームには水色の外光をにじませる - **形**: 斜めに切ったキャラタイル、角丸が小さいカード、ピル型ボタン、両端に飾りのついた細い罫線 - **温度感**: 寒色中心。キャラ絵の暖色がアクセントになる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0A293D` | メインの深紺の背景面 | 35% | 画素の実測 | | `background` | `#234456` | ファーストビューの青灰色の地 | 15% | 画素の実測 | | `background-alt` | `#87ABBF` | 関連サイトセクションの淡い灰青の地 | 3% | 画素の主要色に補正 | | `dark-section` | `#000000` | フッターの黒 | 9% | 画素の実測 | | `accent-1` | `#5FE0F0` | 光る水色の見出し文字 | 1% | 推定 | | `cta` | `#3A86D8` | ボタンの青いグラデーション面 | 1% | 推定 | | `on-cta` | `#E1E3DB` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#DBE3E7` | 暗い地の上の見出し・本文 | 3% | 画素の実測 | | `accent-2` | `#A7E7F4` | 特典ステップのセット番号ラベル | 0% | 画素の実測 | | `line` | `#C9D3DA` | 見出し下の飾り罫・カードの枠線 | 0% | 推定 | | `surface` | `#1C3245` | キャンペーンカードのフレーム内側 | 4% | 画素の主要色に補正 | | `accent-3` | `#D6C29A` | フッターのプレイ誘導文の金色 | 0% | 推定 | | `text-muted` | `#9A9A9A` | フッターの商標注記 | 1% | 推定 | | `cta-accessible` | `#2366B0` | AA を満たす補正値（計算） | | 計算 | - 地は深紺のグラデーションを基本にして、セクションごとに濃さを少しずつ変える - ギャラリーとムービーのセクションは雲空の写真を地にし、暗いセクションとの間にリズムをつける - 強調はシアン系の水色の発光文字に絞る - ボタンは青のグラデーション＋白文字で統一する - フッターは純黒にし、金色の文字はプレイ誘導の一行だけに使う - 色の華やかさはキャラ絵に任せ、UI 側はほぼ無彩色と寒色で抑える - `button-primary` は文字 `#E1E3DB` × 背景 `#3A86D8` のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2366B0`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの開催告知の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.2 | 0.04em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 22px | 1.4 | 0.04em | | `headline-md` | 限定セットなどの発光する小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.02em | | `body-lg` | リード文・説明文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.6 | 0.0em | | `body-md` | キャプションや特典名 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.05em | | `accent` | 欧文のタイトルや作品名 | 欧文セリフ | Cinzel | 600 | 16px | 1.3 | 0.03em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.0 | 0.02em | | `note` | フッターの注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.0em | - 文字はすべて中央揃えにし、2〜3 行で改行位置をそろえる - セクション見出しは明朝体＋下の飾り罫のセットにする - 強調見出しには水色の外光（text-shadow）を付ける - 本文も太めのゴシックにし、写真の上でも読めるよう薄い影を付ける - 鉤括弧で固有名を囲む見出しを多用する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラは 3 枚と 2 枚の斜めタイル、ギャラリー・ムービー・キャンペーンは 2 カラムのグリッド。特典は 3 列ステップ - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 70px、基本単位 8px、カード内 8px（375px 幅換算） - セクションの上下に 60〜80px の余白を取る - グリッドの間隔は 12〜16px - 見出し→リード→コンテンツ→ボタンの順に縦に積む - 特典ステップは「＞」の矢印でつなぐ 3 列にする - ストアボタンは 2×2 で並べる ## Elevation & Depth - カード画像には下方向に濃い影（0 6px 16px rgba(0,0,0,.5)）を付ける - 注目カードは水色の外光のグローで枠を浮かせる - ボタンには弱い影と内側のハイライトを付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: キャラは平行四辺形や台形の斜めカットで敷き詰める。ギャラリーは縦長の角丸カード、ムービーは 16:9 の角なし - **セクション境界**: 直線で背景を切り替える。斜めや波は使わない - キャンペーンカードは細い金属調の二重枠で囲む - ストアバッジは黒い角丸の四角に白い枠線 - 見出しの罫線は両端を細くし、中央に飾りを入れる ## Components - **青グラデーションのピル型ボタン**（`button-primary`）: 外部ストアや公式サイトへの誘導ボタン。幅は約 65% - **アプリストアバッジ群**（`store-badges`）: 黒地に白枠の 4 種のストアボタンを 2×2 で並べる - **飾り罫付き見出し**（`heading-ornament`）: 明朝体の見出しの下に、両端が細くなる装飾ラインを引く - **斜めカットのキャラタイル**（`character-tile`）: 斜めに切ったキャラ絵の下部に、アイコン＋名前＋矢印のラベルを置く - **特典ステップ**（`reward-step`）: アイテム画像・水色の番号・特典名の 3 段で 1 つ。矢印でつなぐ - **属性アイコンタブ**（`filter-icons`）: 色付きアイコンと名前の 4×2 タブ。選択中のタブは水色に光らせる - **装飾枠のキャンペーンカード**（`campaign-card`）: イラストの上に二重枠を重ね、下部に《》で挟んだタイトルを置く - **動画サムネイル**（`video-thumb`）: 16:9 の画像の中央に細線の再生三角を置く ## Do's and Don'ts **Do** - 暗い紺の地にキャラ絵を大きく敷き詰める - 強調見出しは水色の発光で目立たせる - セクション見出しは明朝＋飾り罫で統一する - 雲空の写真セクションを挟んで重さを和らげる - ボタンは青グラデーションのピル型 1 種に統一する **Don't** - 白地の明るいセクションを多用しない - 暖色のベタ塗りボタンを使わない - 見出しを左揃えにしない - 角丸の大きいポップなカードにしない - イラストを小さいサムネイルだけで済ませない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの開催を告知する）: 2 つのロゴを「×」でつなぎ、下に発光する大見出しと 2 行のリードを置く 2. **ダウンロード導線**（アプリのインストールへ誘導する）: 暗い帯の上に一行のコピーと、ストアバッジを 2×2 で並べる 3. **参戦キャラ紹介**（コラボキャラの登場を伝える）: 明朝の見出しの下に、斜めカットのキャラタイルを 3・3・2 枚で敷き詰める 4. **限定セット販売**（外部ストアでの販売へ誘導する）: ストアのロゴと発光見出し、キャラのコラージュ、説明文、ピル型ボタンの順に置く 5. **購入特典**（購入数に応じた特典を示す）: 飾り罫の見出しの下に、10 段階の特典を矢印でつないだ 3 列のステップで並べる 6. **ギャラリー**（描き下ろしカードを見せる）: 雲空の地に属性アイコンのタブと 2 列の縦長カードを並べ、最後にボタンを置く 7. **キャンペーン一覧**（記念施策を一覧で見せる）: 大きいカード 2 枚と 2 列の装飾枠カードを並べる 8. **新ステージ紹介**（限定コンテンツを説明する）: 発光枠の大きい画像に UI の画面を重ね、下に説明文を置く 9. **ムービー**（動画を一覧で見せる）: 雲空の地に 16:9 のサムネイルを 2 列で並べる 10. **関連サイト**（公式サイトへ送客する）: 淡い灰青の地に、水色の見出しと青枠の横長バナーを置く 11. **フッター**（言語切替・SNS・規約を置く）: 黒地に言語セレクト、SNS アイコン、ストアバッジ、下線付きリンク、注記を中央に積む ## Imagery - 厚塗りのファンタジー調キャラクターイラストを、光や魔法のエフェクトとともに大きく使う - 背景には青空と流れる雲の写真をぼかして敷く - 暗いセクションには紋章やイラストを低い不透明度で重ねる - 特典アイテムは光る宝石・オーブ・カードの 3D レンダー風で描く - 属性は単色シルエットのアイコンで表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにアンカーナビを置き、ロゴは横並びにする - PC のキャラタイルは画面全幅で 3・3・2 枚に広げ、中央に見出しを重ねる - PC のギャラリーは 5 列、ムービーは 3 列、キャンペーンは 2 列 - PC の特典ステップは 5 列 × 2 段 - PC の新ステージ紹介は画像と説明文を左右 2 カラムにする - PC のストアバッジは 4 つを横一列に並べる ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-13a110b1`（元 LP の URL から採番） - **元 LP**: https://collaboration.shadowverse-wb.com/granbluefantasy/ja/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（5/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。