DESIGN.md — 夜の紺×ガス灯の黄の美術展 LP（Night Blue and Gaslight Yellow Art Exhibition LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 上品・高級、クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 夜の紺・ガス灯の黄・細い欧文見出し・名画の全面使い・白カード・グラデーション地
• 地の質感: フラットな単色の紺の面。見どころだけ青・水色・黄の柔らかいグラデーション地
• 形: ほぼ直角の矩形。ボタンもカードも角丸は2〜4px程度
• 温度感: 寒色の紺が主で、黄が温かいアクセントになる夜景の色温度

Colors

• 地は紺2〜3段階で切り替え、セクションの区切りを明度差で表す
• 黄は見出し文字と主CTAだけに使い、本文には使わない
• 見どころだけ青→水色→黄の斜めグラデーション地にし、白カードを重ねる
• 見どころの見出し帯は水色・ミント・淡黄を順番に使い分ける
• 白カード内の本文は真っ黒にせずグレーがかった青にする
• サブボタンは紺地に白文字。主CTAは黄地に紺文字
• page は文字 #4E697A × 背景 #67A2DA のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#D6E6F5、4.55:1）を使う。

Typography

• 英字見出しはごく細いウェイトで大きく置き、下に小さな和訳を添える
• Point番号は英字細字＋数字を大きくして並べる
• 日本語は字間を0.08〜0.15em広めにとる
• 本文の行間は2倍前後にして読みやすくする
• 作品写真には必ず小さな注釈クレジットを付ける
• メイン見出しは黄の太字ゴシックで2〜3行に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。見どころは全幅の白カードを縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 紺の情報ボックスは左右に約8px残して全幅近くに置く
• 英字見出しは左寄せで、セクション上部に大きな余白をとる
• 見どころの見出し帯はカードの左右端からはみ出して画面端まで伸ばす
• ボタンは中央揃え・幅約60%で縦に並べる
• 作品写真の横や下に小さなクレジットとロゴを置く
• フッターはナビを英字＋和訳の2カラムで並べる

Elevation & Depth

• 影はほぼ使わず、色面の明度差で階層を作る
• 白カードはグラデーション地の上に影なしで置く
• ボタンにもごく弱い影か影なし

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 作品は角丸なしの矩形でそのまま見せる。FVは名画を全面トリミング
• セクション境界: 装飾なしの直線。背景色の切り替えだけで区切る
• ボタンは角丸2〜4pxの矩形
• ラベルは細い枠線の矩形
• アイコンボタンだけ円形

Components

• 黄の主CTAボタン（button-primary）: 黄地に紺の太字と右向き矢印。中央に置く
• 紺のサブボタン（button-secondary）: 紺地に白文字と矢印。縦に2つ並べる
• 案内情報ボックス（info-box）: 明るめの紺の面に黄の見出しと白の注釈を密に並べる
• リンクチップ（link-chip）: 暗い紺の矩形にアイコンと白太字、外部リンク矢印
• 細字英字見出し（heading-en-large）: 極細の大きな英字と小さな和訳を左寄せで組む
• 見どころカード（highlight-card）: 白カードに作品写真と色帯の見出し、青灰の本文、クレジット
• 色帯見出し（heading-band）: 水色・ミント・淡黄の帯に濃紺の太字。画面端まで伸ばす
• ニュース一覧（news-list）: 白の英字日付と下線付きの見出し、細い区切り線。縦スクロール
• 注意事項リスト（caution-list）: 最も暗い紺の箱に、禁止アイコン付きの短文を並べる
• 枠線ラベル（label-outline）: 会場・期間などを示す白い細枠の小ラベル

Do's and Don'ts

Do - 紺の面を主にし、黄は要所だけで光らせる - 英字見出しは極細ウェイトで大きく使う - 作品写真は加工せず矩形で見せ、クレジットを添える - 見どころは白カードと色帯見出しで区切る - 日本語の字間を広めにとり、行間はゆったり組む

Don't - 大きな角丸やピル型ボタンにしない - 黄を広い面や本文に使わない - ドロップシャドウや光沢を加えない - 太い英字やポップな書体を混ぜない - 紺以外の暗い色（黒・グレー）を地に使わない

Page Structure

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

1. ファーストビュー（展覧会の印象と会期・会場を伝える）: 名画を全面に敷き、細字英字を重ねる。黄と白の大きなロゴ見出しを置き、下の水色グラデーション帯に会期と会場を書く
2. チケット案内（購入方法と問い合わせ先を伝える）: 紺のボックスに黄の見出し、リンクチップ、日英の注意書きを並べる
3. 来場時の注意（暑さ対策などのお願い）: 黄の隅付き括弧見出しと、白の箇条書き
4. ニュース（最新情報を伝える）: 細字英字見出しと、日付・下線リンクの縦スクロール一覧
5. 展覧会紹介（開催の意義と概要を伝える）: 肖像画とクレジット、黄の見出し、行間の広い白い本文、黄のCTA
6. 撮影OK案内（撮影できる作品とルールを伝える）: 紺のボックスに作品写真とバッジ、暗い紺の注意事項リスト
7. 作品ギャラリー帯（雰囲気を見せる余白の多い演出）: 紺地に極細英字を大きく分散配置し、小さなクレジットを添える
8. 見どころ（3つの見どころを訴求）: 青〜黄グラデーション地にPoint番号と白カード、色帯見出しを3つ積む
9. 誘導ボタン（詳細ページへ送る）: 紺のサブボタンを2つ縦に並べる
10. フッター（ナビと開催情報・SNS）: 紺地に英字＋和訳のナビ2列、ロゴ、枠線ラベル付きの開催情報、SNSアイコン

Imagery

• 名画の高解像度画像を主役にし、FVでは大きくトリミングする
• 夜の青とガス灯の黄のように、補色が対比する作品を選ぶ
• 作品は額縁なしの矩形でカード内に置く
• 写真には小さな所蔵館ロゴとクレジット文を添える
• 装飾は細い英字のタイポグラフィとグラデーション地に限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左に名画、右に紺地の英字とロゴ・会期を置く2分割
• PCのチケット案内は2カラムで、中央に縦の区切り線を引く
• PCのニュースは左に見出し、右に日付とタイトルを横一行で並べる
• PCの見どころカードは写真とテキストを左右交互に配置する
• PCのフッターは左に開催情報、右にナビの2カラム

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