DESIGN.md — 漆黒×金装飾のゲーム周年記念 LP（Dark Gold Fantasy Anniversary Portal LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
• キーワード: 漆黒・金の細枠・三角モザイク・紋章・古文書風セリフ・ファンタジー
• 地の質感: 黒地に古い羊皮紙や金属のような質感の背景画像をうっすら敷く。金はマットなベージュゴールド。
• 形: 正三角形のグリッド、盾形の紋章、角に装飾の入った細い金枠の長方形、菱形のアイコン枠。
• 温度感: 暗く落ち着いた中に、金と深緑で温かみを差す。

Colors

• 地は常に黒か黒に近い茶・深緑。明るい背景色は使わない。
• 強調は金一色。見出し・枠線・日付・矢印アイコンに使う。
• 深緑は紋章やバナーなどのブランド要素だけに使う。
• 本文は白、序文や詩的な文章はくすんだベージュにして格調を出す。
• 色鮮やかさは写真やゲーム画面に任せ、UI 自体は無彩色＋金に留める。

Typography

• 見出しは英字セリフ＋小さな日本語訳を下に添える 2 段構成。
• 英字見出しは頭文字を大きくするスモールキャップス調にする。
• 序文は明朝で行間を広く取りセンター揃え。
• 本文やリンクはゴシックで読みやすく。
• 金文字は太めのセリフにし、細い文字を金にしない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。囲みカード内の小画像は 2 列。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• バナーは左右 16px 程度の余白で横幅いっぱいに並べる。
• 新着情報は横スクロールのカルーセルで、隣のカードを端に少し見せる。
• セクション見出しの下に金の装飾線を引く。
• 囲みカードは金の細枠で、中は中央揃えのロゴ＋見出し＋左揃え本文。
• リンクはカード下部に区切り線を引いた上で中央に置く。

Elevation & Depth

• 影はほぼ使わず、金の細枠と背景の明暗で階層をつける。
• ヒーローや見出しの背景には暗い画像を敷き、下を黒へフェードさせる。
• ロゴ・紋章には金属的なハイライトを入れて立体的に見せる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真やバナーは角丸なしの長方形。帯の装飾はゲーム画面を正三角形に切り抜いて交互に並べる。
• セクション境界: 金の細い横線（両端に小さな菱形の飾り付き）、または三角モザイクの帯。
• 角は直角にする。角丸は使わない。
• 枠の四隅に小さな三角の金飾りを入れる。
• ページトップボタンは金の細線の菱形にする。
• カルーセルのインジケーターは小さな菱形にする。

Components

• 新着情報カード（news-card）: 金の細枠の黒カード。左上にサムネイル、右上に年と大きな日付、下に白文字の説明。右上に NEW バッジ。
• 英字セクション見出し（section-heading）: 金のセリフ体の大きな英字と小さな作品名を重ね、下に菱形付きの金線を引く。
• コンテンツバナー（banner-item）: 横幅いっぱいのキービジュアル画像。下に三角アイコン付きの白い太字タイトル。
• 金枠の囲みカード（framed-card）: 四隅に飾りの入った金枠。中央にロゴ、金の英字見出し、小さな日本語訳、本文、2 列の画像とキャプション。
• 三角アイコンリンク（text-link）: 金の区切り線の下に、白い太字と左側の小さな三角を中央揃えで置く。
• NEW バッジ（badge-new）: 金の地に黒いセリフ英字の小さな長方形タグ。
• 映像カルーセル（video-carousel）: 金枠のサムネイルの中央に再生ボタン。下に白いキャプション、菱形のページ送り。
• 英字フッターナビ（footer-nav）: 淡い金の英字セリフを 2 列に並べ、下に小さな日本語訳を添える。

Do's and Don'ts

Do - 地は黒に統一し、金を強調色として控えめに使う。 - 英字セリフ見出しには必ず日本語訳を添える。 - 枠線は 1〜2px の金の細線で、四隅に飾りを入れる。 - 鮮やかな色は作品のビジュアル画像だけで見せる。 - セクションの境目に三角モザイクや金線を入れてリズムをつくる。

Don't - 白や明るい背景のセクションを入れない。 - 角丸ボタンやピル型の派手な CTA を置かない。 - 金以外のビビッドな色を UI に使わない。 - ポップな丸ゴシックや手書き書体を使わない。 - ドロップシャドウを強くかけない。

Page Structure

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

1. ファーストビュー（周年の世界観とブランドを示す）: 作品画像を三角モザイクで敷き詰め、中央に深緑と金の盾形紋章ロゴを置く。
2. 新着情報（最新ニュースへ誘導する）: 金枠カードを横スクロールで並べ、下に公式 SNS への小さなリンクと金線を置く。
3. 序文（歴史と周年の意義を伝える）: 暗い紋章の背景画像の上に、明朝のセンター揃えで短い文を 4 行並べる。
4. 三角モザイク帯（区切りと歴代作品の紹介）: 歴代のゲーム画面を正三角形で交互に並べた横長の帯。
5. 映像（記念映像を見てもらう）: 盾の装飾がある暗い背景に、金枠のカルーセルと再生ボタンを置く。
6. 注目コンテンツ（記念商品・イベントを並べて紹介する）: 金の英字見出しの下に、全幅バナーとタイトルを縦に 4 つ並べる。
7. 関連施設・サービス紹介（コラボ施策を詳しく案内する）: 金枠の囲みカードを縦に並べ、ロゴ、見出し、本文、画像、公式リンクを入れる。
8. レトロ演出（原点を思い出させる）: 青いドット絵のダンジョン画面を全幅で入れる。
9. フッター（サイト内回遊と規約への導線）: 紋章ロゴ、金の英字コピー、2 列の英字ナビ、菱形のページトップ、金線、小さなリンクとコピーライト。

Imagery

• ゲームのキービジュアルは暗めでドラマチックな、光が差す構図にする。
• 背景は紋章や剣、盾などのモチーフを暗くぼかし、金茶の光を当てる。
• 正三角形のグリッドで画像を切り抜き、深緑とベージュのモザイクにする。
• レトロなドット絵を差し込み、懐かしさを出す。
• 商品写真は黒い背景に金の柄が映えるライティングで撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヒーローを横長にし、右上に英字のグローバルナビを置く。
• PC の新着カードは横に 3 枚以上並べ、矢印で送る。
• PC の注目コンテンツは左に大きな見出しと剣の画像、右にバナーを縦に並べる 2 カラム。
• PC の囲みカードは左にロゴ、右に見出しと本文を置く横組みで、画像は横 3 列にする。
• PC のフッターナビは 4 項目を横 1 列に並べる。

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