DESIGN.md — 金屏風×額縁のお祭り系レジャー施設 LP（Gold Frame Festive Collaboration Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 力強い・インパクト、ポップ・元気、和風、ラグジュアリー・ダーク
• キーワード: 金屏風・額縁・お祭り・和柄の波・コラボイベント・ユーモア
• 地の質感: 金属っぽい金のグラデーションと立体的な金の装飾。地は白か金のグラデーションで、ノイズや紙の質感はない
• 形: 四角い金の額縁、角丸小さめの白いボタン、丸い場所バッジ、左右に斜め線をつけた見出し
• 温度感: 暖かい。金色と茶色が中心で、にぎやかで明るい

Colors

• 地は白と金グラデーション帯（上が明るい #E9CF79、中央が濃い #A88047、下がまた明るい）を交互に使う
• 白地では見出しを金茶、本文を黒にする。金帯では見出しも本文も白にする
• ボタンは白い面＋金の枠線＋淡い金の文字にし、塗りつぶしのボタンは作らない
• 注意書きの中でも特に大事なものだけ赤にする
• 写真はかならず金の額縁で囲み、金のトーンでまとめる
• 青や緑などの寒色は写真の中にだけ出す
• button-outline は文字 #B5A786 × 背景 #FFFFFE のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#847551、4.52:1）を使う。
• gold-frame-photo は文字 #FEFDF9 × 背景 #D7B470 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#926E29、4.6:1）を使う。
• badge-period は文字 #FEFDF9 × 背景 #99772A のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F6F27、4.61:1）を使う。
• badge-place は文字 #FEFDF9 × 背景 #99772A のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F6F27、4.61:1）を使う。
• date-medal は文字 #99772A × 背景 #F4DE93 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F6F27、4.57:1）を使う。

Typography

• 見出しは太い丸ゴシックで中央揃えにする
• イベント名ロゴは極太のディスプレイ書体で、写真の上に白抜きで重ねる
• 本文と注釈はすべて中央揃えにする
• 吹き出しのセリフは手書き風の太い書体で少し傾ける
• 日付は数字を大きく、曜日はカッコごと小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はイベントカードを 2 カラムで並べる
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• イベント 1 件の並びは「額縁写真 → 見出し → 場所バッジ → ボタン」の縦積みにする
• 額縁写真どうしの間は 50px 前後あける
• セクションの区切りは、帯の色を変えるか金の横線 1 本で示す
• 見出しの下に金の波模様をほぼ全幅で置く
• 吹き出しと顔の切り抜きを右寄せにして、間に箸休めとして入れる

Elevation & Depth

• 影はほとんど使わない
• 額縁は金のグラデーションとベベルで立体的に見せる
• 吹き出しにだけ柔らかい影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 4:3 の長方形を金の額縁で囲む。人物は顔だけを輪郭に沿って切り抜く
• セクション境界: 白と金グラデーション帯の境目は直線。白地どうしの間は金の細線
• ボタンは角丸 8px で、1.5px の金の枠線をつける
• 場所バッジは金茶か白の小さな円にする
• 見出しの左右に「＼ ／」のような斜め線をつける
• 日付は円形のメダルにして額縁の角に重ねる

Components

• 枠線ボタン（button-outline）: 白い面に金の枠線をつけた横長のボタン。スケジュールやチケットへの導線に使う
• 金の額縁写真（gold-frame-photo）: イベント写真を立体的な金の額縁で囲み、下側にイベント名ロゴを白抜きで重ねる
• 期間ラベル（badge-period）: 金茶の地に白文字を入れた角丸の小さなラベル。開催期間の見出しの上に置く
• 場所バッジ（badge-place）: 金茶の円に「場所」と書き、右側に場所の名前を並べる
• 斜め線つき見出し（heading-slash）: 見出しの左右に斜めの線を置き、下に金の波模様をつける
• 顔の切り抜き＋吹き出し（speech-face）: 白いギザギザの手書き風吹き出しを傾けて置き、顔の切り抜きと組み合わせる
• 日付メダル（date-medal）: 金の円に日付を入れ、額縁の右上に重ねる
• 金リボン見出し（ribbon-heading）: 金の帯リボンの中に白抜きで商品名を入れ、左端に日付メダルを重ねる

Do's and Don'ts

Do - 写真はかならず金の額縁で囲む - 白帯と金グラデーション帯を交互に置いてリズムを作る - 金帯の上の文字は白い太字にする - イベントごとに場所バッジとボタンをつけ、どのイベントも同じ並びにする - 吹き出しと顔の切り抜きでユーモアを足す

Don't - 塗りつぶしの派手な色のボタンは置かない - 寒色や原色をグラフィック部分に使わない - 額縁なしで写真を置かない - 細い明朝体で見出しを組まない - 注意書き以外に赤を使わない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 濃い茶金の背景に、人物と金の円形装飾を合わせたキービジュアルを全幅で置く。下端は白い雲の模様で切り替える
2. 開催期間（いつ開催するかを伝える）: 期間ラベル＋大きな金茶の日付＋短いキャッチを置き、下に金の横線を引く
3. メインタイトル（企画の名前と概要を伝える）: 立体的な金のロゴ、黒い太字の一言、中央揃えの説明文、金茶の太字のリード文を順に並べる
4. アトラクション紹介（体験の内容を見せる）: 金の額縁写真を縦に並べ、必要なものだけ注釈を添える
5. 参加型の企画（来場者の参加を促す）: 斜め線つき見出し＋額縁写真＋場所バッジ＋注釈で組む
6. 箸休めの吹き出し（ユーモアで次のセクションへつなぐ）: 傾けた吹き出しと顔の切り抜きを置く
7. ショーの紹介（パフォーマンスとのコラボを伝える）: 金グラデーション帯に白い見出しと波模様を置き、額縁写真・イベント名・場所・枠線ボタンを並べる
8. フォトスポット（撮影スポットを紹介する）: 白地に斜め線つき見出し＋波模様を置き、額縁写真・金茶の見出し・説明・ボタンを並べる
9. 限定メニュー（物販・飲食へ誘導する）: 金リボン見出しの下に、商品写真・特典画像・価格・吹き出しを並べ、枠線ボタンを置く
10. 特別イベント（1 日限りの来場イベントを告知する）: 金帯に写真を全幅で置き、白文字の詳細と時間・場所のバッジを並べる
11. 締めのメッセージ（没入感をもう一度訴える）: 白地に金茶の太字を斜め線ではさみ、下に波模様を置く
12. チケット CTA（チケット購入へ誘導する）: 黒い本文と赤い注意書きを並べ、全幅の枠線ボタンを置く

Imagery

• 写真は晴れた屋外の施設風景を明るくビビッドに撮る
• 人物は顔だけを切り抜いた画像を多用し、施設の中に合成してコミカルに見せる
• 金の着物や金屏風のような光沢のある金素材を使う
• 見出しの下には和柄の金の波模様（立体レリーフ風）を置く
• 吹き出しは白いギザギザの紙風にし、影をつける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅をおよそ 900px にし、イベントカードを 2 カラムで並べる
• PC では開催期間を 1 行にまとめ、横に並べる
• PC では吹き出しと顔を写真グリッドの空いた位置に置く
• PC でもパネル写真や特別イベントの写真は全幅の 1 カラムで大きく見せる
• 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 行書くと起動時に読み込まれる。