DESIGN.md — 生成り×明朝のフィルム写真ライブ告知 LP（Film Photo Editorial Concert LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: シンプル・ミニマル、上品・高級、レトロ、情報量多め・訴求型
• キーワード: フィルム写真・縦組み明朝・生成り・路面テクスチャ・手描き落書き・告知情報
• 地の質感: 粒子感のあるフィルム写真と路面・壁の実写を背景に敷き、紙のような生成り地で静かに見せる
• 形: 角のない矩形が基本。ボタンは直角の帯かピル、カードは小さな角丸
• 温度感: やや冷たいニュートラル。くすんだ青緑と赤橙のコントラスト

Colors

• 地は生成りを基本にし、セクションの切替は写真背景・グラデ・グレー帯で行う
• 主ボタンと詳細リンクは赤橙ベタ＋白文字に統一する
• 青は日付タブ・リリース見出しなど情報ラベルに限定する
• 写真背景の上の文字は白にして暗めの写真を選ぶ
• 限定・特典の強調だけにローズ赤文字を使う
• 本文は墨色、注釈は灰色で 2 段階に分ける
• button-primary は文字 #FCEDE4 × 背景 #FC4C2B のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D52403、4.5:1）を使う。
• button-pill は文字 #FCEDE4 × 背景 #FC4C2B のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D52403、4.5:1）を使う。
• button-outline は文字 #FEFEFE × 背景 #777F81 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#707779、4.52:1）を使う。

Typography

• セクション見出しは英字大文字の細いセリフ体を中央に置く
• 情緒的なコピーと本文は明朝、手続き・ボタンはゴシックと役割で分ける
• FV コピーは縦組みにし写真の左右にはみ出させる
• 日付とタイトルを並べるリストは左揃えで一行ずつ
• 装飾ロゴ見出しだけに手書き体を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、グッズ一覧のみ画像で多列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し・リードは中央揃え、リストと注意書きは左揃え
• ボタンは左右 12px 余白の全幅帯にする
• セクションごとに背景を全幅で切り替え余白で区切る
• 大事な告知カードは白面にして背景から浮かせる

Elevation & Depth

• 影はほぼ使わずフラット
• 白カードは背景色との差で浮かせる
• 線枠ボタンは 1px の白線で表現

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形のままトリミング。FV 写真は縦長で余白を残して配置
• セクション境界: 直線で背景を切り替え。装飾波線なし
• 主ボタンは直角の帯
• 小さな状態表示とリンクはピル型
• 日付タブは上部が丸いタブ型で白カードに接続

Components

• 赤橙の帯ボタン（button-primary）: 全幅の直角帯に白太字と＋記号
• ピル型リンク（button-pill）: 中央配置の短いピルに白文字と▶
• 白線アコーディオン（button-outline）: グレー帯上の白線枠に 2 行の白文字と＋
• 状態ラベル（status-pill）: 黒いピルに白文字で受付状況を示す
• 日付タブ付きカード（date-tab-card）: 青いタブに日付、下の白カードに販売案内
• ニュースリスト（news-list）: 日付と更新内容を明朝で 1 行ずつ並べる
• 欧文セクション見出し（section-title-en）: 大文字のセリフ体を中央に単独配置
• 黒帯見出し（black-band-heading）: 全幅の黒帯に白ゴシックで企画名

Do's and Don'ts

Do - FV は縦長写真と縦組み明朝コピーを重ねる - 日付・公演名は大きな明朝で写真の下に置く - セクション背景に実写テクスチャを敷き変化をつける - 行動を促すリンクはすべて赤橙で統一する - 告知は白カードにまとめ周囲に余白を取る

Don't - ドロップシャドウや立体的なボタンを使わない - 派手なグラデーションボタンにしない - 本文に丸ゴシックを使わない - 赤橙を見出しや装飾に乱用しない - 写真に強いフィルターや枠飾りを足さない

Page Structure

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

1. ファーストビュー（公演の世界観と日程を伝える）: 生成り地に縦長写真、左右に縦組み明朝コピー、手描き落書き、下に日付と公演名
2. お知らせ（更新履歴を示す）: 欧文見出しと日付付き明朝リスト
3. 注意事項案内（来場者への注意喚起）: グレー帯に白線枠ボタンと短い説明
4. チケット（販売情報と料金）: 暗い路面写真背景に白文字、状態ピル、料金、注釈
5. 新リリース（記念作品の告知）: くすみ青緑グラデ地に青の欧文見出し、明朝の作品情報、ジャケ画像、日付タブカード
6. グッズ（物販ラインナップ）: 白地に一覧画像、決済方法と購入制限リスト、赤橙帯ボタン
7. 特典告知（購入者特典の訴求）: 路面写真の上に白カード、ローズ赤の見出し、青枠の対象商品見出し
8. ファンクラブ（会員企画の案内）: 手描きロゴ、ピルボタン、黒帯見出しと企画バナー
9. 会場マップ（会場内導線）: 濃紺と黄色ラベルのイラスト地図を全幅で
10. 協賛（スポンサー紹介）: ロゴ横並びと赤橙の帯ボタン 2 本
11. フッター（SNS 導線）: 路地の写真背景に白い SNS アイコンを横並び

Imagery

• 35mm フィルム風の粒子と淡い色の街角ポートレート
• 路面・鉄板・ブロック塀など都会の素材を暗めに撮った背景写真
• ペンの落書き風の小さな線画を余白に散らす
• 商品画像には斜めの透かし文字を入れる
• くすんだ青緑とライムが滲む抽象グラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央約 90% 幅の 1 カラムで SP と同じ構成
• FV は PC でも縦長写真を中央に置き左右に余白
• PC では改行が減り、注意事項ボタンは 1 行になる
• PC では背景写真の範囲が広がり、カード幅は約 80% に収める

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