DESIGN.md — 墨緑×灰青の和風舞台公演 LP（Ink-Smoke Teal Theater Stage LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 和風、上品・高級、レトロ、情報量多め・訴求型
• キーワード: 墨緑・灰青・明朝・朱赤の縦書き・墨流しの境界・古典芸能
• 地の質感: マットな単色面。墨がにじむような不定形のシルエットと、筆で書いた朱文字を重ねる
• 形: 角丸なしの矩形が基本。人物は墨雲形に切り抜き、セクション境界は波打つ墨の形
• 温度感: 低め。静かで妖しく、冷たい和の空気

Colors

• 地は灰青、墨緑、黒の3色を交互に置き、セクションのリズムをつくる
• 朱赤は縦書きの手書きコピーにだけ使い、ボタンには使わない
• チケット購入ボタンは黒地に白文字にし、灰青の地の上で強く見せる
• 日程表は生成りに近い薄灰のカードにし、墨緑の雫型マークで公演回を示す
• 注意事項のボックスは墨緑の地に白文字にする
• 彩度の高い色は朱赤と追加公演の橙だけにとどめる
• page は文字 #324E52 × 背景 #7D8F91 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#AFBABB、4.5:1）を使う。

Typography

• 和文はすべて明朝体で組み、ゴシック体は使わない
• セクション見出しは太い欧文セリフにし、その下に小さな和訳を添えて中央に置く
• 朱赤の筆文字は縦書きにして画面の左右端にかけ、本文に少し重ねる
• リード文の強調部分には下線を引き、色を変える
• 人名は縦書きの筆書体で、短冊のように写真に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画のサムネイルは 2 列にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央、本文は左揃えにする
• テキストは枠のないボックスで囲み、背景色を少し変えて区切る
• チケットボタンは同じ幅のものを縦に積み、間隔は 8px にする
• ナビゲーションは英字の下に和訳を添えた 2 段組みのメニューにする
• 朱赤の縦書きは本文の外に絶対配置する

Elevation & Depth

• 影はほぼ使わず、色面の切り替えで奥行きを出す
• 人物の墨雲シルエットは灰青の地に平面的に置く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は不定形の墨雲シルエットで切り抜く。動画は16:9の矩形にする
• セクション境界: 墨が流れるような波打つ不定形の境界
• ボタンとカードは角丸なしの矩形にする
• ボタンの右端には細い「>」を置く
• 日程は横線と雫型のマークで時刻表のように見せる

Components

• チケット販売ボタン（button-ticket）: 黒の矩形に白い明朝文字を中央揃えで置き、右端に「>」を付ける
• 発売日告知ボックス（release-box）: 黒地に発売日時と価格を2段で載せた大きめの箱
• 英字＋和訳見出し（section-heading）: 太い欧文セリフの下に小さな和訳を置き、中央に揃える
• 小見出しタグ（label-tag）: 墨緑の小さな矩形に白文字を載せ、日程や会場の見出しにする
• 公演日程表（schedule-table）: 薄灰のカードに日付と曜日、時刻ごとの横線、雫型のマークを並べる
• ニュース一覧（news-list）: 日付と題名を細い横線で区切り、右端に矢印を置く
• 朱赤の縦書きコピー（vertical-copy）: 筆書体の大きな縦書きを画面端に斜めに揺らして置く
• 注意事項ボックス（notice-box）: 墨緑の地に白い箇条書きを載せる
• キャストの墨雲カード（cast-cloud）: 墨緑の雲形に人物写真を切り抜き、縦書きの名前の短冊を添える

Do's and Don'ts

Do - 和文はすべて明朝体で統一する - 地の色は灰青と墨緑と黒の3色で回す - セクションの境界を墨流しの形にして和の情緒を出す - 朱赤の縦書きを画面端に大胆に置く - チケット情報は黒いボタンで同じ幅に揃えて並べる

Don't - ピル型のボタンや角丸を使わない - ポップな原色やグラデーションを使わない - 朱赤をボタンの色や面の塗りに使わない - ゴシック体で本文を組まない - ボタンや写真にドロップシャドウを付けない

Page Structure

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

1. ファーストビュー（作品の世界観と主演を示す）: 墨緑の地の左右に主演2人の顔を大きく置き、中央に筆文字のタイトルと人物の群像、縦書きの名前を配置する
2. ナビゲーション（各情報への導線）: 灰青の地に、英字と和訳の2段メニューを2行で並べ、SNSアイコンを添える
3. ニュース（最新のお知らせ）: 細い線で区切ったリストにし、両脇に朱赤の縦書きコピーを置く
4. 動画（PVとコメント動画を見せる）: 黒の地に大きな動画1本と、小さなサムネイルを格子状に並べ、下に名前を添える
5. イントロダクション（企画の背景と制作陣の紹介）: 墨流しの境界から墨緑の地に切り替え、灰青のボックスに下線付きのリードと長い本文を入れる
6. キャスト・スタッフ（出演者を紹介する）: 灰青の地に墨雲形の人物を千鳥配置し、下にスタッフのクレジットを小さな文字で詰めて並べる
7. あらすじ（物語の導入）: 墨緑の地に白い明朝で、短い行を詩のように積み、決め台詞だけを大きくする
8. チケット・日程（公演日程と会場、購入方法を示す）: 公演地ごとに線付きの見出しを置き、日程表、地図、発売日の箱、販売ボタンの順に並べる
9. 問い合わせ・主催（連絡先とクレジットを示す）: 中央揃えの明朝で、電話番号はやや大きくする
10. 注意事項・フッター（購入時の注意と著作権表記）: 墨緑のボックスに箇条書きを入れ、黒い細帯のフッターを置く

Imagery

• 人物は和装の舞台写真を正面からの真顔で撮り、背景を抜いて使う
• 人物は墨がにじむ雲形のシルエットの中に収める
• 朱赤の筆文字は、かすれと揺らぎのある手書きの縦書きにする
• 墨流しや波のような有機的な形をセクションの境界に使う
• 地図は標準の埋め込みを矩形のまま使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央寄せの細い 1 カラムで、本文の幅は約 600px にする
• SP ではナビゲーションをハンバーガーメニューに格納する
• SP では朱赤の縦書きを小さくし、本文に重ならない位置に置く
• 動画のサムネイルは PC で 5 列、SP では 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 行書くと起動時に読み込まれる。