--- version: alpha name: Sakura Pink Mincho Story Event LP description: 淡い桜色の地に明朝体の縦書き見出しと薄い欧文透かしを重ねた、物語を読ませる体験型イベントの LP。キャラクターイラストと長文ストーリーで世界観を伝え、ピンク系の帯とブラウンからピンクへのグラデーションボタンでチケット購入に導く。 colors: background: '#FEF5F3' surface: '#FFFFFF' primary: '#C0605A' tint-1: '#F6DADC' tint-2: '#FAC2C3' cta: '#9C5E34' on-cta: '#FFFFFF' text: '#2A2220' dark-section: '#231816' accent-1: '#EED2CC' accent-2: '#E38473' marker: '#FEEDED' line: '#2A2220' text-muted: '#726E6E' accent-2-accessible: '#D3442A' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Playfair Display fontSize: 36px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.2em headline-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.1em label-button: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em rounded: sm: 0px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 52px section-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 130px vertical-quote: backgroundColor: '{colors.dark-section}' typography: '{typography.accent}' height: 200px accordion-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 64px number-point: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 230px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 420px read-more: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 34px --- # DESIGN.md — 桜色×明朝の物語型イベント LP（Sakura Pink Mincho Story Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: やさしい・柔らかい、上品・高級、かわいい、情報量多め・訴求型 - **キーワード**: 桜色・明朝縦書き・欧文透かし見出し・物語の没入感・キャラクター・細い罫線 - **地の質感**: ごく淡いピンクの地に薄い紙のような斑模様。写真やイラストはソフトな光と桜の花びらを重ねる - **形**: 角が四角いカードに、四隅だけ細い L 字のコーナー罫線。ボタンはピル型か角が四角い黒枠 - **温度感**: 暖かく、少し切ない。春の卒業シーズンらしいノスタルジック ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEF5F3` | ページ全体の淡い桜色の地 | 40% | 画素の実測 | | `surface` | `#FFFFFF` | ストーリー・カードの白い面 | 20% | 画素の実測 | | `primary` | `#C0605A` | 小見出しや強調文字のくすんだローズ | 2% | 推定 | | `tint-1` | `#F6DADC` | 会場アコーディオン帯・当日券タブのピンク | 4% | 画素の実測 | | `tint-2` | `#FAC2C3` | 下部アコーディオンの濃いめピンク | 2% | 画素の実測 | | `cta` | `#9C5E34` | チケット購入ボタンの茶色（ピンクへのグラデ始点） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#2A2220` | 本文・見出しの黒に近い焦げ茶 | 5% | 推定 | | `dark-section` | `#231816` | 前売券タブや縦書きコピーの黒地 | 0% | 画素の実測 | | `accent-1` | `#EED2CC` | 欧文透かし見出し・コーナー罫線の薄ピンク | 0% | 画素の主要色に補正 | | `accent-2` | `#E38473` | 番号バッジのコーラルグラデ | 0% | 画素の実測 | | `marker` | `#FEEDED` | 強調テキスト下の淡ピンクマーカー | 0% | 画素の実測 | | `line` | `#2A2220` | 表・枠ボタンの黒い細線 | 0% | 推定 | | `text-muted` | `#726E6E` | 注釈・クレジットの灰褐色 | 0% | 画素の実測 | | `accent-2-accessible` | `#D3442A` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ白に近い桜色。白いカードを重ねて読ませる面を作る - 見出しの強調や価格以外の訴求文字はくすんだローズで、鮮やかな赤は使わない - 主 CTA だけ茶色からピンクへの横グラデのピル型にする - サブボタン・表は黒の細線と白地で引き締める - アコーディオン帯は淡ピンクの塗りで階層を作る - 黒地は縦書きの台詞帯とタブに限定する - `number-point` は文字 `#FFFFFF` × 背景 `#E38473` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D3442A`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書き大タイトル | 明朝 | Shippori Mincho | 500 | 64px | 1.2 | 0.1em | | `headline-lg` | セクションの欧文透かし見出し | 欧文セリフ | Playfair Display | 400 | 36px | 1.0 | 0.2em | | `headline-md` | 透かしに重ねる縦書きの和文見出し | 明朝 | Noto Serif JP | 700 | 14px | 1.3 | 0.1em | | `headline-sm` | キャラ名・商品名・小見出し | 明朝 | Noto Serif JP | 600 | 19px | 1.5 | 0.08em | | `body-md` | ストーリーや説明の本文 | 明朝 | Noto Serif JP | 400 | 15px | 2.0 | 0.08em | | `note` | ※注釈・サイズ表記 | 明朝 | Noto Serif JP | 400 | 12px | 1.7 | 0.03em | | `accent` | 縦書きの台詞帯（黒地白文字） | 明朝 | Shippori Mincho | 600 | 20px | 1.3 | 0.1em | | `label-button` | ボタン・アコーディオンのラベル | 明朝 | Noto Serif JP | 500 | 15px | 1.5 | 0.08em | - ほぼ全文を明朝体で統一する。ゴシックはチケット詳細など事務的な情報だけにする - セクション見出しは大きな薄ピンクの欧文と、その中央に重ねた小さな縦書き和文の 2 層で作る - 本文は行間を 2.0 前後と広めにとり、小説のように読ませる - キャッチコピーは縦書きで、黒地の白文字帯か白地の短冊に置く - 強調したい一語だけローズ色にする（名前の頭文字など） - 価格は太めの明朝で、税込表記を小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコン説明だけ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - コンテンツ幅は約 90%。白カードは左右 20px 前後の余白を残して配置する - 各セクションの先頭にコーナー罫線付きの見出しブロックを置く - ストーリー本文は段落ごとに 24px 前後の間隔をあける - グッズは写真面、商品名、価格、説明、仕様の順に縦に並べる - 全幅のイラストや写真を挟んで場面転換する ## Elevation & Depth - 影はほぼ使わない。白カードと桜色の地の明度差だけで面を分ける - カードの境界は極薄のピンクの線か、地との差だけにする - 写真の上には白く柔らかい光のグラデーションを重ねる ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は角丸の正方形。グッズ写真は斑模様の地に置いた長方形パネル - **セクション境界**: 直線で切り替える。見出しは四隅の細い L 字コーナー罫線で囲う - 主 CTA はピル型。サブボタンは角が四角い黒枠 - 番号バッジは花びらのような楕円 - アコーディオン帯とテーブルは角丸なし - 続きを読むボタンは小さな白いピル型にし、左右に点線を伸ばす ## Components - **グラデーションのチケット CTA**（`button-primary`）: 茶色からピンクへの横グラデのピル型。白文字 2 行で、右端に外部リンクアイコンを置く - **黒枠サブボタン**（`button-outline`）: 白地に黒の 2px 枠を引いた四角いボタン。右に矢印を付ける - **透かし欧文＋縦書き見出し**（`section-heading`）: 薄ピンクの大きな欧文の中央に縦書き和文を重ね、四隅に L 字罫線を添える - **縦書き台詞帯**（`vertical-quote`）: 黒地に白の明朝で書いた縦長の短冊。イラストの上に段違いで並べる - **ピンク帯アコーディオン**（`accordion-band`）: 淡ピンクの全幅帯。中央に見出しを置き、右下に細い下向き山形を付ける - **番号付き安心ポイント**（`number-point`）: コーラル色の楕円バッジに番号を入れ、右にマーカーで強調した一文を置く - **タブ付き料金表**（`price-table`）: 黒と淡ピンクの 2 タブの下に、黒い細線の表を置く - **グッズカード**（`product-card`）: 白い斑模様のパネルに商品画像を置き、下に中央揃えの商品名と価格、左揃えの説明を並べる - **続きを読むピル**（`read-more`）: 白地に細枠の小さなピル型ボタン。左右に点線を伸ばす ## Do's and Don'ts **Do** - 見出しは必ず欧文透かしと縦書き和文の 2 層構成にする - 本文は明朝体で行間を広くとり、読み物として見せる - 桜の花びらや柔らかな逆光でノスタルジックな空気を出す - 強調は一語単位でローズ色にするか、淡ピンクのマーカーを引く - CTA はチケット情報の前後に繰り返し置く **Don't** - 原色の赤や青を CTA や見出しに使わない - 太いゴシックや丸ゴシックで見出しを組まない - カードに強いドロップシャドウを付けない - 背景を真っ白一色にせず、桜色の地を保つ - 装飾アイコンをカラフルにしない（黒い線画で統一する） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（タイトルとキービジュアルで世界観を一瞬で伝える）: 全面イラストの左右に大きな明朝の縦書きタイトルを置き、縦書きの台詞帯とロゴを添える。下に Scroll Down と縦線 2. **お知らせバナー**（最新のコラボ情報を告知する）: 日付を小さなローズ色で置き、その下にバナーをスライダーとドットで見せる 3. **導入コピー・動画**（物語の導入と PV で興味を引く）: 全幅の背景イラストに白い短冊の縦書きコピーを並べ、続けて再生ボタン付きの動画サムネを置く 4. **ストーリー**（あらすじを読ませて没入させる）: 白地の長文を明朝で行間 2.0 にし、台詞を「」で段落分けする。最後に台詞帯付きのイラスト 5. **キャラクター**（登場人物を紹介する）: 並んだ立ち絵の下に、名前の頭文字をローズ色にしたプロフィールカードを縦に積む 6. **コンセプト**（体験の価値を一文で伝える）: 桜の写真を背景に、縦書きの明朝コピーを置く 7. **制作者メッセージ**（作り手の思いで信頼を高める）: 角丸の顔写真と肩書き・名前を並べ、本文を 3 行で切って続きを読むピルを置く 8. **特別企画**（コラボ特典で参加を後押しする）: 白カード内にローズ色の見出し、画像、特典ボックス、注釈を置き、最後に CTA 9. **遊び方**（参加の条件と安心感を伝える）: 黒い線画アイコンを 2×2 で並べ、持ち物の説明、注釈、番号付きの安心ポイント 3 つ、黒枠ボタンの順に置く 10. **チケット情報**（価格と販売日程を示す）: タブ付きの料金表、CTA、注意事項アコーディオン、会員割の枠、販売スケジュール、会場ごとのピンク帯を並べる 11. **グッズ紹介**（物販で体験の価値を広げる）: 商品ごとの白パネル写真に、商品名、価格、説明、仕様を縦に並べる 12. **注意事項・FAQ**（不安を解消する）: 濃いめピンクのアコーディオン帯を 3 本並べ、下線付きのテキストリンクを添える 13. **フッター**（主催とクレジットを示す）: 白地の中央にロゴと主催表記、コピーライトを小さく置く ## Imagery - アニメ調の繊細なキャラクターイラスト。逆光と暖色の光が差す場面にする - 画面に桜の花びらやボケを散らし、白く霞ませる - 実写は学校の体育館や桜など、舞台を想起させるものを淡いトーンで使う - アイコンは黒の細い線画で、ストップウォッチ・人・カチンコ・扉など - グッズは真上か正面から撮り、白い斑模様のパネルに置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に SP 幅に近い約 520px のカラムを置き、左右は桜色と水色の横縞に花びらを散らした固定背景にする - PC の FV はタイトルの縦書きを大きく左右に広げ、バナーを 2 枚横並びにする - PC の左右の背景には、タイトルの縦書きを薄く透かして表示する - PC では制作者の肩書きを 1 行にまとめる ## 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-1dcbc84d`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/sotsugyou/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。