--- version: alpha name: Gold Frame Festive Collaboration Event LP description: 金色のグラデーション帯と金の額縁写真、金の波模様の装飾で「派手・めでたい」空気をつくるレジャー施設のコラボイベント LP。白地と金地の帯を交互に置き、イベントを 1 つずつ額縁写真＋見出し＋場所バッジ＋白い枠線ボタンで紹介する。人物の顔の切り抜きと手書き風の吹き出しでユーモアを足している。 colors: primary: '#99772A' background: '#FFFFFF' secondary: '#F4DE93' dark-section: '#B6915A' on-dark: '#FEFDF9' cta: '#FFFFFE' on-cta: '#B5A786' line: '#B98E3F' accent-1: '#D7B470' text: '#31363C' accent-2: '#D0102A' tint-1: '#FEF9B6' accent-3: '#4C2A0D' on-cta-accessible: '#847551' accent-1-accessible: '#926E29' primary-accessible: '#8F6F27' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 21px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.06em accent: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px gold-frame-photo: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 290px badge-period: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 34px badge-place: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px heading-slash: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 60px speech-face: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 200px date-medal: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px --- # DESIGN.md — 金屏風×額縁のお祭り系レジャー施設 LP（Gold Frame Festive Collaboration Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 力強い・インパクト、ポップ・元気、和風、ラグジュアリー・ダーク - **キーワード**: 金屏風・額縁・お祭り・和柄の波・コラボイベント・ユーモア - **地の質感**: 金属っぽい金のグラデーションと立体的な金の装飾。地は白か金のグラデーションで、ノイズや紙の質感はない - **形**: 四角い金の額縁、角丸小さめの白いボタン、丸い場所バッジ、左右に斜め線をつけた見出し - **温度感**: 暖かい。金色と茶色が中心で、にぎやかで明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#99772A` | 見出し文字・バッジ・ボタン枠に使うブランドの金茶 | | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | | 画素の実測 | | `secondary` | `#F4DE93` | 金グラデーション帯の明るい側 | | 画素の実測 | | `dark-section` | `#B6915A` | 金グラデーション帯の濃い側 | | 画素の主要色に補正 | | `on-dark` | `#FEFDF9` | 金帯の上の白い見出し・本文 | | 画素の実測 | | `cta` | `#FFFFFE` | 白い枠線ボタンの面 | | 画素の実測 | | `on-cta` | `#B5A786` | ボタンの文字色（淡い金） | | 画素の実測 | | `line` | `#B98E3F` | ボタン枠・セクション区切りの金線 | | 画素の主要色に補正 | | `accent-1` | `#D7B470` | 額縁の金 | | 画素の主要色に補正 | | `text` | `#31363C` | 本文の黒 | | 画素の主要色に補正 | | `accent-2` | `#D0102A` | 注意書きの赤 | | 推定 | | `tint-1` | `#FEF9B6` | パネル写真の背景になる淡い黄色 | | 画素の主要色に補正 | | `accent-3` | `#4C2A0D` | メインビジュアルの濃い茶金 | | 画素の実測 | | `on-cta-accessible` | `#847551` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#926E29` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#8F6F27` | AA を満たす補正値（計算） | | 計算 | - 地は白と金グラデーション帯（上が明るい #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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 立体的な金のロゴタイトル（画像で作る） | 装飾・ディスプレイ | Dela Gothic One | 400 | 52px | 1.1 | 0.0em | | `headline-lg` | 開催期間・イベント名の大見出し | ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.04em | | `headline-md` | リード文・金帯の導入見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 21px | 1.5 | 0.05em | | `headline-sm` | 斜め線つきの小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.06em | | `accent` | 写真の上に重ねるイベント名ロゴ | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.2 | 0.02em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※の注釈・場所の説明 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `label-button` | 枠線ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - 見出しは太い丸ゴシックで中央揃えにする - イベント名ロゴは極太のディスプレイ書体で、写真の上に白抜きで重ねる - 本文と注釈はすべて中央揃えにする - 吹き出しのセリフは手書き風の太い書体で少し傾ける - 日付は数字を大きく、曜日はカッコごと小さくする - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-8a939a6e`（元 LP の URL から採番） - **元 LP**: https://www.seaparadise.co.jp/matsuken/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。