DESIGN.md — 濃紺グラデと傾き写真のコラボイベントLP（Deep Navy Idol Collaboration Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、ポップ・元気、上品・高級
• キーワード: 濃紺グラデーション・傾いた写真フレーム・白箱抜き欧文見出し・4色パステルナビ・ドットライン区切り
• 地の質感: ノイズのないフラットな濃紺グラデーション。写真は白フチなしで少し回転させて重ねる
• 形: 四角い写真を-5〜8度傾ける。カードは角丸16px、詳細ボタンはピル型の枠線
• 温度感: 夜空のような冷たい青に、ナビのパステル色と白で軽さを足す

Colors

• 前半は上から下へ#082578→#020A55の濃紺グラデーションを全幅で敷く
• 濃紺上の文字はすべて白、細い説明文も白で中央揃え
• セクション見出しは白い箱に紺の欧文、白地では紺の箱に白文字と反転させる
• パステル4色はナビゲーションとドット区切りだけに使い本文には使わない
• 施設案内以降は白地に切り替え、境界は斜めにカットする
• ボタンは紺の細枠＋紺文字の白抜きで、塗りボタンは使わない
• nav-color-tabs は文字 #FFFFFF × 背景 #7DB4DA のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#327CB0、4.52:1）を使う。

Typography

• 見出しは欧文の装飾セリフで、和文はゴシックに限定する
• 本文は小さめ12px・行間2.0で中央揃え
• 企画名はゴシック太字を斜体にして勢いを出す
• 期間表記は数字を大きく、曜日を小さく添える
• 手書き風英字は導入コピーに一度だけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。施設カードは SP 1 列、PC 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 全セクション中央揃え
• 動画は傾いた写真コラージュの中央に16:9プレイヤーを重ねる
• 動画ブロックの傾きを左右交互に変える
• 見出しは傾き写真の下端に重ねて置く
• セクション間は大きく空けて余白で区切る

Elevation & Depth

• 影はほぼ使わずフラット
• 写真は回転と重なりで奥行きを出す
• 地図カードは白っぽい面を濃紺地に置くだけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角い写真を-6〜8度回転。施設写真は大1枚＋小2枚の組写真
• セクション境界: 濃紺から白へは斜めカット。他は余白とドットライン
• 見出し箱は角丸なしの長方形
• 情報カードは角丸16px
• 詳細ボタンはピル型の細枠
• ナビは角丸なしの4等分帯

Components

• 4色ナビ帯（nav-color-tabs）: FV直下に全幅4等分、パステル各色で白文字のアンカーリンク
• 箱抜き欧文見出し（heading-box）: 白箱に紺の装飾欧文。白地では紺箱に白文字
• 傾き写真付き動画（tilted-video-collage）: 傾けた写真コラージュに再生ボタン付き動画を重ね、角に白い欧文ラベル
• 期間表示（date-range）: 上下に白細線を引き、数字大・曜日小で開催期間を示す
• 展示場所カード（map-card）: 生成り面に丸数字付き場所名と館内図、ココ！の吹き出し矢印
• 注釈枠（note-box）: 白細線の四角枠に小さな注意書き
• カラードット区切り（dot-divider）: パステル4色と白の小ドットを横一列に並べてプロフィールを挟む
• 詳細ボタン（button-outline）: 白地に紺の細枠ピル、テキストと右矢印
• 施設カード（facility-card）: 組写真、太字の施設名、中央揃え説明、詳細ボタンの縦積み

Do's and Don'ts

Do - 濃紺グラデーションを地にして写真の明るさを際立たせる - 写真は必ず少し傾け、見出し箱を下端に重ねる - 説明文は短い行で中央揃えにする - パステル4色はナビと区切りだけに使う - 後半の情報は白地で読みやすく整理する

Don't - 濃紺地に彩度の高い赤や黄の塗りボタンを置かない - 写真に角丸やドロップシャドウを付けない - 見出しを和文明朝にしない - 本文を左揃えの長文にしない - パステル色を広い面に敷かない

Page Structure

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

1. ファーストビュー（コラボの主役と会場を一目で伝える）: 施設写真のコラージュの上に集合写真を重ね、下部に白の太い欧文タイトルを2行
2. ナビゲーション（各コンテンツへ移動させる）: 4色パステルの4等分帯
3. 導入（企画の概要と期間を伝える）: 手書き風英字コピー、中央揃えの白文字、細線で挟んだ期間
4. 動画（オリジナル動画を見せる）: 箱見出しの下に傾きコラージュ付き動画を3本、左右交互に配置
5. コラボ企画（展示企画を紹介する）: 傾き写真＋箱見出し、番号付き斜体の企画名を並べる
6. 展示場所（設置場所と期間を案内する）: 角丸の生成りカードに館内図を2列＋1段、ココ！吹き出し
7. 放映案内（大型ビジョンでの放映を伝える）: 写真1枚と中央揃え説明、白細線の注釈枠
8. プロフィール（出演者を紹介する）: カラードット区切りで挟んだ短い白文字テキスト
9. 施設案内（周辺施設へ送客する）: 斜めカットで白地に切替、2列の施設カードと枠線ピルボタン
10. アクセス（来場方法を伝える）: 傾き写真＋紺箱見出し、埋め込み地図、詳細ボタン
11. フッター（施設ロゴと注意事項）: 中央ロゴ、太字の最寄駅情報、小さな注記とコピーライト

Imagery

• 人物写真は明るい自然光で、カジュアルな衣装の笑顔・ポーズ
• 施設写真は水族館・夜景・展望台など青みの強いカットを選ぶ
• 写真は複数を傾けてコラージュし、雑誌の切り抜き風にする
• 館内図はフラットな淡色ブロックと紺の丸・矢印で目印を付ける
• 装飾はカラードットと細線のみで控えめにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央の幅約70%に要素を寄せ、両脇は地色のまま
• 施設カードはPC 2列、SPは1列
• 展示場所の館内図はPC 2列、SPは縦積み
• FVタイトルはSPで画面幅いっぱいの2行に縮める
• ナビ4色帯はSPで2×2にしてもよい
• 傾き写真の角度はSPで小さめにしてはみ出しを防ぐ

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