--- version: alpha name: Retro Meiji Manga Promotion LP description: 漫画連載とドラマCDを宣伝する LP。セクションごとに地の色が大きく変わり、紺のネオン調ロゴ、クリーム地のドット柄、黒地のストーリー、真っ黄色のキャラクター紹介が順に並ぶ。見出しは欧文セリフの大きな英字。洋館の飾り枠と藤色の帯で、明治レトロな華やかさを出している。 colors: primary: '#2C4D5E' secondary: '#805A74' background: '#F8F8F8' background-alt: '#E8E28E' accent-1: '#FDE401' dark-section: '#000000' on-dark: '#FFFEFF' tint-1: '#36283D' cta: '#FEFEFE' on-cta: '#E0559A' text: '#2B2A47' accent-2: '#843C2A' marker: '#FFF425' text-muted: '#1E6FB0' on-cta-accessible: '#D82A80' typography: display: fontFamily: Playfair Display fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 0px md: 4px lg: 60px full: 999px spacing: unit: 8px card: 12px section: 0px 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}' height: 64px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 90px credit-ribbon: backgroundColor: '{colors.accent-2}' textColor: '{colors.marker}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 34px badge-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px bonus-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 260px trial-capsule: backgroundColor: '{colors.secondary}' textColor: '{colors.marker}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px carousel-arrow: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 28px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 紺×黄×藤色の明治レトロ漫画プロモLP（Retro Meiji Manga Promotion LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: レトロ、力強い・インパクト、上品・高級、情報量多め・訴求型 - **キーワード**: 明治レトロ・セクションごとの色の切り替え・欧文セリフ見出し・飾り枠・キャラクター主役 - **地の質感**: クリーム地に薄い水玉、黄色地に薄い市松柄、藤色地にダマスク柄を敷いた紙もの風の質感 - **形**: 四角いバナーが基本。飾り罫の枠、カプセル型の試し読みバナー、円形の星形バッジ - **温度感**: 暖色の黄・クリームと、寒色の紺・黒を交互に置いた高コントラスト ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2C4D5E` | ロゴ帯・見出し英字の紺 | 8% | 画素の実測 | | `secondary` | `#805A74` | 特典帯・試し読みバナーの藤色 | 6% | 画素の主要色に補正 | | `background` | `#F8F8F8` | ページ地・お知らせエリアの薄グレー | 14% | 画素の実測 | | `background-alt` | `#E8E28E` | ドラマCD セクションのクリーム地 | 6% | 画素の実測 | | `accent-1` | `#FDE401` | キャラクター紹介の鮮黄 | 14% | 画素の実測 | | `dark-section` | `#000000` | ストーリーとフッターの黒地 | 14% | 画素の実測 | | `on-dark` | `#FFFEFF` | 黒地の上の白い本文 | 1% | 画素の主要色に補正 | | `tint-1` | `#36283D` | 動画セクションの紺紫グラデーション地 | 8% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | 予約ボタンの白い面 | 2% | 画素の実測 | | `on-cta` | `#E0559A` | 予約ボタンのピンク文字と枠 | 0% | 推定 | | `text` | `#2B2A47` | 見出し英字・本文の濃紺 | 2% | 画素の実測 | | `accent-2` | `#843C2A` | 名前帯の赤茶 | 1% | 画素の実測 | | `marker` | `#FFF425` | 名前帯の文字と、帯の上の小さなリードの黄色 | 0% | 画素の実測 | | `text-muted` | `#1E6FB0` | お知らせリンクの青 | 0% | 推定 | | `on-cta-accessible` | `#D82A80` | AA を満たす補正値（計算） | | 計算 | - 地の色はセクションごとに切り替える。順番はクリーム、紺紫、黒、鮮黄、白、グレー、黒。 - 見出しの英字は、明るい地では濃紺のセリフ体にする。黒地ではパステルのグラデーション文字にする。 - 藤色は特典や試し読みなど、ここだけの価値を見せる帯にだけ使う。 - CTA は白い面にピンクの枠と文字を使い、周りの色から浮かせる。 - 名前や肩書きは、赤茶の帯の上に黄色の文字で載せる。 - 黄色地にはごく薄い同系色の柄を敷き、ベタ塗りの平坦さを和らげる。 - `button-primary` は文字 `#E0559A` × 背景 `#FEFEFE` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#D82A80`、4.56:1）を使う。 - `carousel-arrow` は文字 `#E0559A` × 背景 `#FEFEFE` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#D82A80`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの大きな英字 | 欧文セリフ | Playfair Display | 500 | 48px | 1.1 | 0.02em | | `headline-lg` | 作品ロゴ風のタイトル | 明朝 | Shippori Mincho | 700 | 56px | 1.1 | 0.1em | | `headline-md` | FV 上部のリードや帯見出し | 明朝 | Shippori Mincho | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | 英字の下に添える日本語のサブ見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `body-md` | ストーリー本文（中央揃え） | ゴシック | Noto Sans JP | 700 | 11px | 2.0 | 0.03em | | `note` | 注意書きやお知らせの日付 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | 予約ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 500 | 20px | 1.2 | 0.05em | | `accent` | キャラクター名の縦書き | 明朝 | Noto Serif JP | 500 | 30px | 1.2 | 0.1em | - セクションの頭は、大きな欧文セリフの英字に、小さな日本語のサブ見出しを添えた 2 段にする。 - 作品の世界観を出す文字は明朝体を使い、本文は太めのゴシック体を使う。 - 黒地のストーリー本文は中央揃えにし、短い行を積み重ねる。 - キャラクター名は縦書きの明朝体にし、細い飾り罫を添える。 - CTA の文字は丸みのある書体にし、やわらかく親しみやすくする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムで、画像を中心に縦に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算） - セクションの間に余白は入れず、地の色の切り替えで区切る。 - セクションの中は上下 40〜60px の余白を取る。 - 告知画像はほぼ画面幅で中央に置く。 - キャラクターは 1 人ずつのカルーセルにし、左右に丸い矢印を付ける。 - お知らせ一覧は全幅のリストにし、項目を細い線で区切る。 ## Elevation & Depth - 影はほとんど使わず、フラットに仕上げる。 - 告知画像には細い枠や飾り枠を付けて額装のように見せる。 - 動画の埋め込みは、グラデーション地の上にそのまま置く。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 60px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラクターは切り抜きにする。告知は四角いバナー画像にする。 - **セクション境界**: 直線で色を切り替える - CTA ボタンは角丸なしの四角に、ピンクの細い枠と丸矢印アイコンを付ける。 - 試し読みバナーは両端が丸いカプセル型にする。 - 告知バッジは黄色の円形にする。 - 見出しの上に洋館のシルエット紋章を置く。 ## Components - **予約 CTA**（`button-primary`）: 白い四角の面にピンクの枠と文字、右端に丸矢印アイコン - **英字セリフ見出し**（`section-heading`）: 大きな欧文セリフの英字と、日本語のサブ見出し。上に紋章イラストを置くことがある - **作者名リボン帯**（`credit-ribbon`）: 赤茶の帯に、肩書きは白字、名前は黄色の明朝体で載せる - **告知円バッジ**（`badge-circle`）: 黄色の円に、決定などの告知を濃紺の太字で入れる。曲線の添え文字を付ける - **特典紹介パネル**（`bonus-banner`）: 藤色の帯見出しの下に、ダマスク柄の地を敷き、特典の画像を並べる - **試し読みカプセルバナー**（`trial-capsule`）: 左半分は藤色に黄字と白いピル型ラベル、右半分は漫画の 1 コマ - **カルーセル矢印**（`carousel-arrow`）: 白い丸にピンクの三角を入れた、左右の送りボタン - **お知らせリスト**（`news-list`）: 見出しの左右に罫線を引き、青いリンクと日付を線で区切って並べる ## Do's and Don'ts **Do** - セクションごとに地の色をはっきり変え、ページに章立てのリズムを作る。 - 見出しは欧文セリフの英字と日本語のサブ見出しの 2 段で統一する。 - 飾り罫、紋章、ダマスク柄で明治の洋館らしいレトロ感を足す。 - キャラクターのイラストを大きく見せ、主役として扱う。 - CTA の直前に、在庫限りなどの短い注意書きを 1 行置く。 **Don't** - セクションの間に白い余白を挟まない。 - 見出しを丸ゴシックやポップ体にしない。 - 藤色や黄色を本文の文字色に使わない。 - 影や光沢の強いボタンを使わない。 - 黒地の本文を左揃えの長文にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と、新しい告知を一度に伝える）: 上に明朝のリードを飾り括弧で囲んで置く。中央に全員集合のキービジュアル、下の紺地に光るロゴと作者名リボンを置き、右端に黄色の円バッジを添える 2. **商品紹介（ドラマCD）**（ジャケットと特典の絵柄を見せる）: クリームの水玉地に英字セリフ見出しを置く。ジャケット画像と藤色の特典パネルを縦に並べる 3. **CTA**（予約へ誘導する）: 注意書きを 1 行置き、その下に白い四角のボタンをピンクの枠で置く 4. **試聴動画**（音源を試聴してもらう）: 紺紫のグラデーション地に、黄色の小見出しと動画の埋め込みを置く 5. **ストーリー**（あらすじで興味を引く）: 背景イラストの下の黒地に、グラデーションの英字見出しと中央揃えの白文字を置き、主人公を下から覗かせる 6. **キャラクター紹介**（登場人物を 1 人ずつ見せる）: 鮮黄の柄地に紋章と英字見出しを置く。全身イラストをカルーセルにし、名前を縦書きで添える 7. **試し読み・関連バナー**（本編の閲覧と連載ページへ送る）: 白地に、カプセル型のバナーと四角い告知バナーを余白を広めに取って縦に並べる 8. **お知らせ**（関連ニュースを載せる）: 薄グレーの地に、罫線付きの見出しとリンクのリストを置く 9. **フッター**（サイトナビと権利表記を置く）: 黒地に白文字のメニューを並べ、項目を線で区切る ## Imagery - キャラクターは厚塗りのアニメ調にし、全身の切り抜きで大きく見せる。 - 背景は夕焼けや朝焼けの空と、洋風の石造り建築を見上げる構図にする。 - 花びらを散らし、ほのかな光の粒で華やかさを出す。 - 洋館シルエットの白い線画の紋章を、見出しの飾りに使う。 - 地の柄は水玉、ダマスク、市松を、地の色に近い同系色でごく薄く敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではキービジュアルを全幅にし、ロゴとバッジを重ねて 1 画面に収める。 - PC のストーリーは左右 2 分割にし、左に背景イラスト、右の黒地に本文を置く。 - PC のキャラクター紹介は 3 人を横に並べる。 - PC のお知らせは 2 カラムにする。 - コンテンツの幅は、PC では中央の 900px 前後に収める。 ## 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-bf34bba9`（元 LP の URL から採番） - **元 LP**: https://jumpsq.shueisha.co.jp/contents/sp_primeministerclub/ - **解析に使った画像**: 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/）からご連絡ください。