--- version: alpha name: Surreal Misty Cinematic Film LP description: 劇場映画の公式サイト型 LP。黒帯のヘッダーと全面ポスターのファーストビューから始まる。霧がかった青緑の地に、明朝体の本文と紫グラデーションの筆記体見出しを重ねる。写真は全幅や大判で見せ、幻想的でアート寄りの静かな雰囲気にまとめる。 colors: primary: '#8B76AE' background: '#E5E9F4' background-alt: '#FFFFFF' dark-section: '#000000' secondary: '#91A6AB' accent-1: '#0A2B25' accent-2: '#D8607A' text: '#090607' on-dark: '#F5F7FB' line: '#F5F7FB' text-muted: '#262626' typography: display: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 600 lineHeight: 1.5 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' height: 34px script-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px video-thumb: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 200px frame-label: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 24px vertical-catch: textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 300px quote-overlay: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 80px cast-profile: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 900px comment-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 220px --- # DESIGN.md — 霧の青緑と紫筆記体の映画公式 LP（Surreal Misty Cinematic Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 上品・高級、クール・先進的、ラグジュアリー・ダーク - **キーワード**: 映画ポスター・霧のグラデーション・紫の筆記体・明朝の本文・シュール・余白多め - **地の質感**: 霧や雲のような青灰色グラデーションの上に、写真を溶け込ませた映画的な質感 - **形**: 角丸なしの長方形写真と細い白枠のラベル。直線的で装飾は少ない - **温度感**: やや冷たい青緑灰が基調。写真の朱色やピンクが温度差をつくる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8B76AE` | 筆記体見出しの紫 | 1% | 画素の実測 | | `background` | `#E5E9F4` | キャスト欄の淡い青白の地 | 30% | 画素の実測 | | `background-alt` | `#FFFFFF` | 予告編エリアの白地 | 10% | 画素の実測 | | `dark-section` | `#000000` | ヘッダーとポスター下部の黒 | 8% | 画素の実測 | | `secondary` | `#91A6AB` | イントロ・物語の霧の青灰地 | 22% | 画素の実測 | | `accent-1` | `#0A2B25` | ポスター下部の深緑 | 5% | 画素の主要色に補正 | | `accent-2` | `#D8607A` | 縦書きコピーのピンク | 0% | 推定 | | `text` | `#090607` | 見出し・本文の黒 | 4% | 画素の主要色に補正 | | `on-dark` | `#F5F7FB` | 暗い地や写真上の白文字 | 2% | 画素の主要色に補正 | | `line` | `#F5F7FB` | キャスト間の区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#262626` | 動画キャプションの灰 | 0% | 画素の実測 | - 地の色は「黒→白→霧の青灰→淡い青白」の順に切り替え、写真の帯でつなぐ - 英字の見出しは紫からピンクのグラデーションで描いた筆記体だけにする - 強いピンクは縦書きのキャッチコピーに限って使う - 霧の上の本文は白、明るい地の上の本文は黒にする - 彩度の高い朱色は写真やモチーフに任せ、UI には使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字セクション見出し（筆記体） | 欧文スクリプト | Great Vibes | 400 | 40px | 1.2 | 0.0em | | `headline-lg` | 縦書きキャッチ・イントロの導入文 | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.05em | | `headline-md` | 役名・人物名 | 明朝 | Noto Serif JP | 700 | 22px | 1.4 | 0.05em | | `headline-sm` | 俳優名と欧文名 | 明朝 | Noto Serif JP | 700 | 17px | 1.3 | 0.05em | | `body-md` | あらすじ・プロフィール本文 | 明朝 | Noto Serif JP | 600 | 13px | 1.9 | 0.03em | | `accent` | 写真上の引用コピー・レビュー | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.6 | 0.05em | | `note` | 動画キャプション・クレジット | 明朝 | Noto Serif JP | 600 | 9px | 1.5 | 0.0em | - 和文はすべて明朝系にそろえ、太めのウェイトで読みやすくする - 英字見出しは筆記体を 1 語だけ置き、和文の見出しを添えない - 導入文は中央揃えにし、本文は両端揃えで字下げする - 造語にはルビ風の小さな英字を上に添える - 写真上の文字には薄い影をつけて可読性を確保する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅または左右 12px の余白で配置 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - 予告編の動画サムネイルは 16:9 で縦に並べ、間を約 28px あける - イントロと物語は霧の背景上で中央揃えの導入文から始める - 場面写真はずらしながら重ね、ギャラリー風に配置する - キャストは写真→役名→俳優名→略歴の順で繰り返し、間に細線を入れる ## Elevation & Depth - 影はほぼ使わず、平面の写真を重ねて奥行きを出す - セクションの境界は霧のグラデーションで溶かす - 写真上の文字には柔らかいドロップシャドウをかける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。人物は 1:1 に近い比率、動画は 16:9 - **セクション境界**: 直線で切り替えるか、霧のグラデーションでなじませる - 角丸は使わない - ラベルは白い細枠の長方形にする - 再生ボタンは白い細線の円の中に三角を置く ## Components - **黒いヘッダー**（`header-bar`）: 左に SNS アイコンの丸、右にハンバーガーメニューを置いた細い黒帯 - **筆記体の見出し**（`script-heading`）: 紫からピンクのグラデーションで描いた英字筆記体を中央に置く - **予告編サムネイル**（`video-thumb`）: 16:9 の場面写真の上に白線の再生ボタンと白枠ラベルを重ね、下に小さなキャプションを付ける - **白枠ラベル**（`frame-label`）: 写真の隅に置く、白い細枠で囲んだ明朝の短いラベル - **縦書きキャッチ**（`vertical-catch`）: 写真の右端に、ピンクの明朝体で縦書きのコピーを置く - **写真上の引用**（`quote-overlay`）: 全幅写真に白文字のレビューを重ね、ダッシュの後に出典を書く - **キャストプロフィール**（`cast-profile`）: 大きな人物写真、中央揃えの役名・和名・欧文名、両端揃えの略歴を縦に並べる - **コメントカード**（`comment-card`）: 黒地の上に場面写真を薄く敷いたタイルを置き、白文字のコメントとピンクの名前を載せる ## Do's and Don'ts **Do** - 和文はすべて明朝体にそろえる - セクションは筆記体の英字見出し 1 つで始める - 写真を大きく使い、霧のグラデーションでつなぐ - モチーフのイラスト（鳥など）を余白にアクセントとして置く - 本文は字下げした両端揃えで、行間を広くとる **Don't** - 角丸や影の強いカードを使わない - 原色のボタンやポップな配色を UI に持ち込まない - 丸ゴシックやポップな書体を使わない - 見出しに太いゴシックの和文を使わない - 背景を単色のまま長く続けず、写真やグラデーションを挟む ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開状況を一目で伝える）: 全面ポスターに明朝のタイトル、筆記体の英字、公開告知、黒地のクレジットを重ねる 2. **予告編**（動画で興味を引く）: 白地に筆記体の見出しを置き、16:9 のサムネイルを縦に 4 本並べる 3. **イントロダクション**（作品の概要と見どころを紹介する）: 全幅の場面写真から霧の青灰へ溶かし、白文字の導入文と本文を置く。右端に縦書きのピンクのキャッチを添える 4. **ストーリー**（あらすじを伝える）: 全幅写真の左にセリフを並べ、続けて霧の地に本文と、ずらして重ねた場面写真を置く 5. **レビュー引用**（第三者の評価で信頼を高める）: 全幅写真の上に白文字の短評と出典を重ねる 6. **キャスト・監督**（出演者と監督を紹介する）: 淡い青白の地に人物写真、名前、略歴を繰り返し、間を細線で区切る 7. **コメント**（著名人の推薦で後押しする）: 黒地の上にイラストや写真入りのコメントタイルをグリッドで並べる（PC で確認） 8. **フッター**（クレジットと共有導線を置く）: 場面写真の帯、クレジット、タイトルロゴ、SNS シェアボタンを中央に並べる ## Imagery - 青緑の霧と草原のような、彩度を落とした幻想的な風景写真を使う - 朱色やオレンジの鳥など、シュールなモチーフを大胆に配置する - 人物写真は自然光のシネマ調で、ピンクや黄色の室内色を活かす - 切り抜いたモチーフのイラストを余白に小さく置く - 雲や霧のテクスチャで写真と地の色をなじませる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では上部に黒いグローバルナビを横並びで置き、ファーストビュー左に丸いキャンペーンバッジを縦に並べる - PC では FV 直下にチケット購入枠とプレゼント告知の帯を追加する - PC の予告編は中央 約 47% 幅で縦に並べる - PC のキャストは左に写真、右にテキストの 2 カラムにする - PC のコメントは黒地に 3 列のタイルグリッドで並べる - PC の場面写真は横に 3 枚並べる ## 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-606da2c0`（元 LP の URL から採番） - **元 LP**: https://happinet-phantom.com/tuesday/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。