DESIGN.md — マゼンタ×金の祝祭ランタンイベントLP（Festive Magenta Lantern Event LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、和風、力強い・インパクト
• キーワード: 祝祭・マゼンタ・金色・夜景ランタン・縦書き・花火装飾
• 地の質感: フラットな単色面に高彩度の夜景写真を重ねる。生成り地に花火柄の線画をあしらう
• 形: 角丸写真・丸型切り抜き・ピル型ボタン・白い角丸カード
• 温度感: 暖かく賑やか。赤系と金で縁起の良さを出す

Colors

• 地はマゼンタと白を大きな帯で交互に切り替える
• マゼンタ地の上はロゴを金色、補助文字を白にする
• 強調見出しはマゼンタ文字を生成り地に置く
• ボタンは白地ならマゼンタ塗り、マゼンタ地なら白塗り＋マゼンタ文字
• 黒は写真を敷いたFVや問い合わせ帯だけに使う
• 色数は抑え、写真の極彩色で賑やかさを出す
• hero-vertical-logo は文字 #D3C678 × 背景 #D4217C のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9B185A、4.54:1）を使う。

Typography

• ロゴ・キャッチは縦書きにして和の祝祭感を出す
• セクション見出しは英字＋縦線＋小さな和文ラベル
• 本文は小さめで行間を広く取る
• 日付は細身の欧文数字で大きく置く
• 見出しは字間を広げてゆったり見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と本文の2カラム交互配置
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• マゼンタと白の全幅帯を交互に重ねる
• 写真ブロックは帯の境界をまたいで配置する
• お知らせは白い角丸カード内に日付・タイトル・矢印丸ボタンを1行で並べる
• 各ブロックの下にMoreボタンを中央配置
• インスタグラムは正方形サムネイルを格子状に並べる

Elevation & Depth

• 影はほぼ使わずフラット
• カードは白面とマゼンタ地のコントラストで浮かせる
• 写真には影を付けず角丸だけで区切る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 紹介写真は角丸の縦長長方形、地図上の写真は円形切り抜き
• セクション境界: 直線の全幅色帯切り替え
• ボタンは常にピル型
• 矢印ボタンは小さい正円
• カードは角丸10px前後
• 地図は白い道路形状の抽象図にピンを散らす

Components

• Moreピルボタン（button-more）: 白地の上ではマゼンタ塗り白文字の横長ピル
• 反転Moreボタン（button-more-inverse）: マゼンタ地の上で白塗りマゼンタ文字
• 縦書きロゴパネル（hero-vertical-logo）: マゼンタ面に金の縦書き名称と白の縦書きコピー、会期日付を添える
• お知らせカード（news-card）: 白角丸カード内に日付・下線付きタイトル・マゼンタ丸矢印を区切り線で並べる
• 英字＋和文見出し（section-label）: 英字大文字の横に縦線と小さな和文を並べる
• 円形写真の地図（map-pins）: 抽象地図に円形写真とマゼンタのピンを散らし規模感を見せる
• 問い合わせ帯（contact-band）: 暗い写真背景に白文字で連絡先を中央揃え
• SNS格子（insta-grid）: マゼンタ地に正方形サムネを3列（PC6列）で並べる

Do's and Don'ts

Do - マゼンタ・白・金の3色を軸にする - 夜のランタンなど彩度の高い写真を大きく使う - 見出しは英字と和文の2段構成にする - 写真とテキストを左右交互に配置しリズムを作る - 花火のような放射線の装飾を淡い地に散らす

Don't - 青や緑を地色に使わない - ボタンを四角くしない - 写真に強い影や枠を付けない - 本文を太く大きくしすぎない - 金色を本文に使わない

Page Structure

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

1. ファーストビュー（イベントの世界観を一目で伝える）: 夜景のランタン写真全面に白いロゴと雲紋を中央配置
2. タイトル・会期（名称と開催期間を示す）: 左マゼンタ面に金の縦書きロゴと日付、右に写真の2分割
3. 規模の訴求（展示数の多さを伝える）: 生成り地に花火装飾と大見出し、下に円形写真とピンの地図
4. お知らせ（最新情報の告知）: マゼンタ地に白角丸カードのリストとMoreボタン
5. ブログ（記事への誘導）: 白枠の写真カードにカテゴリタグ、日付、タイトル
6. コンテンツ紹介（会場・イベント・ギャラリーへ誘導）: 角丸の縦長写真と見出し・短文・ボタンを左右交互に3段
7. お問い合わせ（連絡先の提示）: 暗い写真背景に白文字を中央揃え
8. SNS（投稿の紹介）: マゼンタ地に正方形サムネ格子とMoreボタン
9. 協賛・フッター（関連団体とサイトマップ）: 白帯に協賛バナー、マゼンタ地に白文字のリンク列とSNSアイコン

Imagery

• 夜のライトアップされた巨大ランタンを低い位置からあおって撮る
• 獅子舞など伝統芸能を人だかりとともに臨場感ある構図で
• 地図上の写真は円形に切り抜き白い縁で並べる
• 花火のような細い放射線の線画をマゼンタで淡く散らす
• 雲紋などの和中折衷の小さなモチーフをロゴに添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは写真と本文を縦積みにし、写真を上に置く
• タイトル部はSPで縦書きロゴパネルを全幅、写真をその下へ
• お知らせカードはSPで日付とタイトルを2行に分ける
• SNS格子はPC6列、SPは3列
• フッターのリンク列はPC5列、SPは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 行書くと起動時に読み込まれる。