--- version: alpha name: Pastel Neon Pop Illustration Hotel Mystery Event LP description: オーロラ風の淡い虹色の背景に、幅を絞った中央カラムを置いた構成。紫・ピンク・青のグラデーション面と、黒い線で描いたフラットなイラストで体験型イベントを見せる。セクションごとに片側の角だけ大きく丸めた色面を重ね、英字のピクセル風ラベルと字間の広い見出しを組み合わせてゲーム感を出している。 colors: primary: '#9866FA' secondary: '#C382EA' accent-1: '#E794D8' cta: '#CF66FE' on-cta: '#FCFDFE' accent-2: '#E0267A' accent-3: '#3E8AEE' background: '#E2EBFA' background-alt: '#EAF4FC' tint-1: '#F4F2F9' surface: '#FFFFFF' text: '#222222' line: '#1A1A1A' dark-section: '#7C3B67' cta-accessible: '#B617FD' accent-2-accessible: '#DC1F75' primary-accessible: '#8950F9' accent-1-accessible: '#CB2EAF' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.2em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em accent: fontFamily: DotGothic16 fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 60px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px label-pixel: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 18px info-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 20px illust-card: backgroundColor: '{colors.secondary}' rounded: '{rounded.md}' height: 180px plan-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 56px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.body-md}' height: 52px badge-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px floating-cta: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 80px --- # DESIGN.md — 紫ピンクのネオンポップな謎解き宿泊 LP（Pastel Neon Pop Illustration Hotel Mystery Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、かわいい、クール・先進的 - **キーワード**: オーロラ背景・紫ピンクグラデーション・黒線イラスト・ピクセル英字ラベル・片角R・ゲーム感 - **地の質感**: ホログラム調の淡い背景に、細かいノイズが乗ったグラデーション面を重ねる - **形**: 片側の上角だけ大きく丸めた色面、黒枠の角丸カード、黒い影を落とすピル型ボタン - **温度感**: やや涼しめで夢っぽい。ピンクの差し色で温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9866FA` | ブランド紫の帯・フッター | 9% | 画素の実測 | | `secondary` | `#C382EA` | ピンク紫のストーリー面 | 8% | 画素の実測 | | `accent-1` | `#E794D8` | イベント詳細のピンク面 | 9% | 画素の実測 | | `cta` | `#CF66FE` | 詳細ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#FCFDFE` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#E0267A` | ラベル帯・小見出しのマゼンタ | 1% | 推定 | | `accent-3` | `#3E8AEE` | 予約セクションの青 | 5% | 推定 | | `background` | `#E2EBFA` | オーロラ調の淡い地 | 30% | 画素の実測 | | `background-alt` | `#EAF4FC` | 水色の淡い地 | 10% | 画素の実測 | | `tint-1` | `#F4F2F9` | メッセージ部の淡ピンク | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード・リスト | 4% | 画素の実測 | | `text` | `#222222` | 本文・見出しの黒 | 2% | 推定 | | `line` | `#1A1A1A` | カードの黒枠線 | 0% | 推定 | | `dark-section` | `#7C3B67` | 紹介エリアの深いプラム色 | 2% | 画素の主要色に補正 | | `cta-accessible` | `#B617FD` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DC1F75` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#8950F9` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CB2EAF` | AA を満たす補正値（計算） | | 計算 | - 外側の地は淡いオーロラ調にし、中央カラムだけに色面を置く - セクションごとに紫・ピンク・青のグラデーション面を切り替えてリズムを出す - 英字ラベルと小見出しはマゼンタで統一する - 主ボタンは紫の塗りに白文字、黒いオフセット影を付ける - 色面の上の文字は白、淡い地の上の文字は黒にする - 価格と注釈の強調はマゼンタや紫の文字で示す - `button-primary` は文字 `#FCFDFE` × 背景 `#CF66FE` のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B617FD`、4.55:1）を使う。 - `label-pixel` は文字 `#FCFDFE` × 背景 `#E0267A` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC1F75`、4.59:1）を使う。 - `info-label` は文字 `#FCFDFE` × 背景 `#E0267A` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC1F75`、4.59:1）を使う。 - `accordion` は文字 `#E0267A` × 背景 `#FFFFFF` のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC1F75`、4.53:1）を使う。 - `badge-ribbon` は文字 `#FCFDFE` × 背景 `#9866FA` のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8950F9`、4.5:1）を使う。 - `floating-cta` は文字 `#FCFDFE` × 背景 `#E794D8` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CB2EAF`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し（字間を広く） | ゴシック | Zen Kaku Gothic New | 400 | 28px | 1.3 | 0.2em | | `headline-md` | 縦書きの小見出し | ゴシック | Zen Kaku Gothic New | 400 | 16px | 1.4 | 0.15em | | `accent` | 英字のピクセル風ラベル | 装飾・ディスプレイ | DotGothic16 | 400 | 12px | 1.2 | 0.1em | | `headline-sm` | 斜体の強調コピー帯 | ゴシック | Dela Gothic One | 400 | 22px | 1.3 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 500 | 15px | 1.2 | 0.05em | - 大見出しは細めのウェイトで字間を 0.2em ほど広げる - 見出しの上にピクセル風の英字ラベルを小さく置く - サブ見出しはマゼンタで縦書きにし、図版の左に添える - 本文は 13px 前後の中太ゴシックにする - 色面の上のリード文は白で、字間をやや広げる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。中央カラムは端末幅の約 75% で、左右に背景を見せる - **本文ブロックの幅**: 画面幅の約 75% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 中央カラムの外側にはオーロラ背景だけを見せる - セクションの色面は中央カラム幅いっぱいに敷く - 図版の左に縦書き見出しを置く 2 列構成を繰り返す - 図版の下に本文を 2〜4 行で添える - セクションの間に小さな星などの飾りを置く ## Elevation & Depth - ボタンには右下へ黒いオフセット影を付ける（ぼかしなし） - カードは影を付けず、黒い枠線で区切る - 装飾イラストはセクションの端からはみ出させる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 60px。ボタンはピル型。 - **写真の切り抜き**: 黒枠の角丸長方形（角丸 8px） - **セクション境界**: 上側の片方の角だけを大きく丸めた色面で切り替える - セクションの色面は片側の上角だけ半径 60px ほど丸める - 写真とイラストは 1.5px の黒枠と角丸 8px で囲む - ラベルは角丸なしの長方形にする ## Components - **詳細ボタン**（`button-primary`）: 紫のピル型ボタン。右端に矢印を置き、黒い枠線とオフセット影を付ける - **英字ラベル**（`label-pixel`）: マゼンタの長方形に白いピクセル風英字。見出しの右上に置く - **項目ラベル**（`info-label`）: イベント詳細の各項目名。マゼンタの帯を中央に置き、下に値を太字で書く - **図版カード**（`illust-card`）: 黒枠・角丸のグラデーションイラスト。左に縦書きの見出しかステップ番号を添える - **プランカード**（`plan-card`）: 白い横長カード。左にサムネイル、中央にプラン名と価格、右に丸い矢印を置く - **アコーディオン**（`accordion`）: 上下を黒線で区切った白い行。左にマゼンタの項目名、右に紫の＋を置く - **斜体の強調帯**（`badge-ribbon`）: 紫やピンクの立体的な帯に白い太字を斜体で置く。背景には虹色のにじみを敷く - **追従予約ボタン**（`floating-cta`）: 画面の右下に固定する、ホログラム調の円形ボタン ## Do's and Don'ts **Do** - 中央カラムの外側にオーロラ背景を見せる - イラストは黒線とグラデーションの塗りで統一する - セクションごとにピクセル風の英字ラベルを付ける - 色面は片側の角だけを大きく丸める - ボタンには黒いオフセット影を付ける **Don't** - 写真に黒枠を付けずに配置しない - 濃い原色を背景いっぱいに使わない - ぼかしの強いソフトな影を使わない - 明朝体を使わない - すべての角を均等に丸めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を一目で伝える）: 全面イラストに大きな手書き風ロゴを重ねる。左に縦書きのコラボ表記、上にハンバーガーメニューを置く 2. **リード**（イベントの概要を伝える）: 紫のグラデーション帯に白い中央揃えの文。右下に人物の写真を丸く切り抜いて添える 3. **ストーリー**（物語への没入を誘う）: ピンク紫の片角R面にエンブレムと語りかけの文。左に縦書きの見出しを置く 4. **特長**（体験の魅力を 3 点で示す）: 縦書きの見出しとイラストカード、説明文の組を 3 つ繰り返す 5. **参加方法**（手順を示す）: 水色の地に STEP1〜3 を縦書き。イラストカードと短い説明を並べ、最後に注意事項を置く 6. **イベント詳細**（日時・人数・場所を伝える）: ピンクの面にマゼンタのラベルと中央揃えの値を積む。白い枠の住所欄、ボタン、写真を続ける 7. **食事**（付帯価値を訴求する）: 斜体の強調帯、黒枠の写真、マゼンタの店名、ボタンの順に並べる 8. **受賞実績**（信頼を補強する）: リボン型のバッジの下に写真と説明を置く 9. **宿泊予約**（プランを選んで申し込ませる）: 青から紫へのグラデーション面に検索条件と白いプランカードを並べ、下に注釈を置く 10. **ブランドメッセージ**（情緒で後押しする）: 淡いピンクの地に中央揃えの詩的な文と大きなピル型ボタン 11. **注意事項・よくある質問**（不安を解消する）: アコーディオン形式の行と、制作会社の紹介を並べる 12. **フッター**（主催者とシェア導線を示す）: 紫の面にロゴ、シェアボタン、クレジットを置く ## Imagery - 人物は顔を省略したフラットなイラストにし、黒い輪郭線で描く - 塗りはピンク・紫・青のグラデーションに粒子状のノイズを乗せる - ケーキ・薔薇・鍵・星など記念日らしい小物を端からはみ出させる - 写真は明るく鮮やかに撮り、黒枠の角丸で囲む - 背景はホログラムのような虹色のにじみにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも中央カラムは 480px 前後に固定し、左右にオーロラ背景を広げる - PC の左右の余白にロゴや予約ボタンを固定して置いてもよい - 追従ボタンは SP では右下に固定する ## 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-e5b183e1`（元 LP の URL から採番） - **元 LP**: https://st.riddler.co.jp/brightonhotel2/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。