DESIGN.md — 青空ブルーと赤レンガの文化施設 LP（Editorial Blue & Brick Museum LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: シンプル・ミニマル、上品・高級、クール・先進的
• キーワード: 編集デザイン・建築写真・余白・細い罫線・下線見出し・水彩イラスト
• 地の質感: フラットな白地と薄グレー地。影なし、細い罫線で区切る
• 形: 角丸ほぼなしの矩形。ボタンも四角で細い枠線
• 温度感: 白とグレー主体のやや冷たい地に、赤レンガ写真とオレンジの CTA で温かみを足す

Colors

• 地は白が基本。案内・アート紹介は薄グレー地で帯として区切る
• ブランド色の青はファーストビューの面にだけ使い、下層では使わない
• オレンジはチケット予約 CTA と開館状況の強調だけに使う
• サブコピーとサブボタンの文字はグレージュで控えめにする
• 色数は抑え、写真の赤レンガと空の青で彩りを出す
• キーワード強調は黒ベタ地に白文字のマーカーにする
• button-primary は文字 #FFFFFF × 背景 #D26D2F のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B65E27、4.55:1）を使う。
• button-secondary は文字 #89928F × 背景 #FFFFFF のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6E7774、4.61:1）を使う。
• status-bar は文字 #D2652A × 背景 #FFFFFF のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BB5A25、4.56:1）を使う。

Typography

• 見出しは中央揃えで、文字幅だけの短い黒下線を付ける
• セクション見出しは英字と和文を混在させ、下にグレージュの和文サブコピー
• 本文は小さめ太めのゴシックで行間広め
• 番号は細線の丸囲み数字を見出しの上に置く
• 明朝はタグライン 1 か所だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。一覧はサムネイル左＋テキスト右の 2 列
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は画面幅いっぱい、または左右 12px 余白で大きく配置
• セクション見出しの下に全幅の細い罫線を引く
• 見どころは番号＋見出し＋全幅写真スライダー＋本文の繰り返し
• 一覧は大カード 1 枚＋小カード横並びで強弱を付ける
• セクション間は広い余白で区切る

Elevation & Depth

• 影は使わない。区切りは罫線と地色の切り替えだけ
• ボタンは細い灰色の 1px 枠線だけ
• 地図の情報カードにだけ軽い影がある

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。横長 3:2 から縦長 3:4 まで
• セクション境界: 直線の細罫線と地色の帯の切り替え
• ボタン・タグ・カードはすべて角なしの矩形
• ボタンの右端に小さな三角か斜め矢印を置く
• タグは細枠の小さな矩形

Components

• チケット予約ボタン（button-primary）: オレンジ塗りの四角ボタン。左寄せの白文字と右端の斜め矢印。SP では画面右下に固定
• View More ボタン（button-secondary）: 白地に細い灰枠、グレージュ文字、右端に三角
• 下線付きセクション見出し（heading-underline）: 中央の見出しに文字幅の黒下線。その下に全幅のグレー罫線
• 丸囲み番号（number-circle）: 細線の丸の中に数字。見どころ見出しの上に置く
• カテゴリタグ（tag）: 細枠の小矩形タグ。カード下に並べる
• 本日の開館状況バー（status-bar）: 左にオレンジの開館表示、右に時間を縦罫線で 2 分割。下に枠付きのお知らせボックス
• お知らせリスト（news-list）: グレージュの日付と太字タイトルを罫線で区切る
• 黒ベタ強調（marker-highlight）: キーワードを黒地白文字で反転させる
• 写真スライダー（slider-arrows）: 全幅写真の左右端に小さな三角、下に小さなドット

Do's and Don'ts

Do - 写真を主役にして大きく見せ、文字は控えめにする - 見出しには必ず短い下線を付けて中央に揃える - 余白をたっぷり取り、罫線でリズムを作る - CTA の色はオレンジ 1 色に限る - 末尾に手描き水彩イラストを置き、余韻を残す

Don't - ボタンを角丸やピル型にしない - 影・グラデーション・立体表現を使わない - 青を下層の背景やボタンに広げない - 派手なバッジや装飾アイコンを増やさない - 本文を大きくしすぎて余白を詰めない

Page Structure

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

1. ファーストビュー（施設の印象を一目で伝える）: 青空の面に白いロゴと大きな英字タイトルを左上に。下部に建築写真を空の青となじませて配置
2. 開館状況・お知らせ（当日の実用情報を伝える）: 明朝のタグライン、開館状況の 2 分割バー、枠付き案内ボックス、日付付きのお知らせリスト
3. コンセプト（体験の価値を言葉で示す）: 全幅の建築写真の下に、中央揃えの太字 2 段落。キーワードを黒ベタで反転
4. 見どころ（魅力を 3 つに分けて伝える）: 丸囲み番号＋見出し＋全幅スライダー＋短い本文を罫線で区切って 3 回繰り返す
5. 監修者紹介（信頼性を示す）: 下線見出しと説明文。肩書きの下に名前を下線付きで並べ、プロフィールリンクを添える
6. アート展示（展示内容を紹介する）: 薄グレー帯の中に写真スライダー、作品名、作家名、枠線ボタン
7. 体験・イベント（ツアーや催しを案内する）: 大きな写真カード 1 枚と、小さなサムネイルカードを横並び。タグ付き
8. カフェ・ショップ（付帯施設を紹介する）: 大きな物撮り写真、見出し、営業時間、View More ボタン
9. 読み物（人物や小話で親しみを出す）: 大カード 1 枚＋サムネイル左・テキスト右のリスト。日付・下線タイトル・タグ
10. 周辺ガイド（旅の計画を広げる）: 縦長写真 1 枚と短い紹介文、下線タイトル
11. 来館案内・アクセス（予約と来館へ導く）: 薄グレー帯に営業時間、オレンジの予約 CTA、アクセス文、地図埋め込み
12. フッター（余韻と回遊を作る）: 水彩イラストと手書き英字。グレーのロゴ、中央揃えのリンク群、言語切替

Imagery

• 建築は晴天の下、正面や真上から撮ったシンメトリー構図
• 廊下や展示室は一点透視で奥行きを強調
• 人物は自然光でレンガ壁を背景にした立ち姿
• 物撮りは暗めの背景にスポット光を当て、質感を出す
• 手描き水彩の建物パーツに手書き英字を添える
• ロゴは鍵を組み合わせたシンプルなシルエット
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左に固定の縦サイドバー（タグライン・開館状況・予約・メニュー）、右にメインを置く
• PC のファーストビューはメイン幅いっぱいの青ビジュアル
• PC のお知らせ・監修者・案内は見出し左・内容右の 2 カラム
• PC の読み物はテキストと写真を左右交互に配置
• PC の来館案内は営業時間とアクセスを縦罫線で 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 行書くと起動時に読み込まれる。