--- version: alpha name: Midnight Navy Cinematic Anime Film LP description: ほぼ全面を深い紺色で塗り、鮮やかな青の巨大な欧文セリフ見出しと、反転させた鏡像で幻想的な夜を表現する映画告知LP。本文は白の明朝体を中央に揃え、場面写真には青い光彩をまとわせる。細い円弧の線と小さな菱形で、魔法らしい静けさを出している。 colors: background: '#12122E' primary: '#184FD5' text: '#FBFBFD' text-body: '#BEBFD0' text-muted: '#9799AC' line: '#172D6A' accent-1: '#2E9BE0' accent-2: '#3379FC' surface: '#EDF1F2' background-alt: '#B3DCE6' marker: '#3473FE' background-accessible: '#D1D1ED' typography: display: fontFamily: Playfair Display fontSize: 110px fontWeight: 700 lineHeight: 0.9 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.3 accent: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.4em body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Playfair Display fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 0px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-mirror: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 180px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 95px link-view-more: textColor: '{colors.text}' typography: '{typography.label-button}' height: 30px glow-image: height: 140px credit-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 130px badge-ornament: backgroundColor: '{colors.accent-2}' textColor: '{colors.background}' typography: '{typography.note}' rounded: '{rounded.md}' height: 36px video-banner: textColor: '{colors.text}' typography: '{typography.body-lg}' height: 230px footer-links: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 80px --- # DESIGN.md — 深夜紺×青発光の劇場アニメ告知LP（Midnight Navy Cinematic Anime Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、クール・先進的、シンプル・ミニマル - **キーワード**: 深夜の紺・青い発光・鏡像タイポグラフィ・明朝体の物語性・細線の円弧・シネマティック - **地の質感**: ほぼ単色の紺色の面。写真の周りにだけ青いグローをかけ、ほかに質感は付けない - **形**: 角のない矩形の写真と、画面をまたぐ大きな細線の円・縦線。小さな菱形を区切りに使う - **温度感**: 寒色で、夜の静けさと緊張感がある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#12122E` | ページ全体の地色（深夜の紺） | 75% | 画素の実測 | | `primary` | `#184FD5` | 巨大な欧文見出し・強調語の青 | 4% | 画素の実測 | | `text` | `#FBFBFD` | 見出し・本文・人名の白 | 3% | 画素の実測 | | `text-body` | `#BEBFD0` | 物語本文のやや灰がかった白 | 2% | 画素の実測 | | `text-muted` | `#9799AC` | 日付・英訳の補足文字 | 0% | 画素の実測 | | `line` | `#172D6A` | ニュース区切り線・円弧の細線 | 0% | 画素の主要色に補正 | | `accent-1` | `#2E9BE0` | 見出し下のカタカナ副題（シアン寄りの青） | 0% | 推定 | | `accent-2` | `#3379FC` | 写真の外周の青いグロー・バッジの面 | 1% | 画素の実測 | | `surface` | `#EDF1F2` | ロゴ画像を置く明るい面 | 2% | 画素の実測 | | `background-alt` | `#B3DCE6` | メインビジュアル上部の空の色（淡いミントグレー） | 8% | 画素の実測 | | `marker` | `#3473FE` | 区切りの小さな菱形 | 0% | 画素の実測 | | `background-accessible` | `#D1D1ED` | AA を満たす補正値（計算） | | 計算 | - ファーストビューより下は、すべて紺の単色を地色にする - 青は巨大な見出しと、本文中の強調語 1 か所だけに使う - 文字は基本的に白。日付と英訳だけをグレーに落とす - 写真の外周には青いグロー（box-shadow）をかけ、夜に光っているように見せる - 明るい面は、ロゴ画像を置く板だけに限定する - 暖色は写真の中だけにとどめ、UI には使わない - `section-title-mirror` は文字 `#184FD5` × 背景 `#12122E` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#D1D1ED`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の巨大な欧文。画面からはみ出させ、下に鏡像を置く | 欧文セリフ | Playfair Display | 700 | 110px | 0.9 | -0.02em | | `headline-lg` | イントロのキャッチ（強調語だけ青で大きくする） | 明朝 | Shippori Mincho | 800 | 30px | 1.4 | 0.02em | | `headline-md` | スタッフ・キャストの人名 | 明朝 | Shippori Mincho | 700 | 22px | 1.3 | 0em | | `accent` | 欧文見出しに重ねるカタカナの副題 | 明朝 | Noto Serif JP | 400 | 16px | 1.2 | 0.4em | | `body-lg` | 物語の導入文（中央または右揃え） | 明朝 | Noto Serif JP | 600 | 15px | 2 | 0.05em | | `body-md` | ニュースのタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `note` | 日付・英訳・役職ラベル・著作権表記 | 欧文サンセリフ | Montserrat | 400 | 10px | 1.7 | 0.02em | | `label-button` | View More のテキストリンク | 欧文セリフ | Playfair Display | 400 | 13px | 1.2 | 0.08em | - 物語や人名は明朝体にする。ゴシック体はニュースとフッターだけに使う - セクション見出しは、巨大な欧文セリフにカタカナ副題を重ねる組み合わせに統一する - 巨大な欧文は画面幅を超えて左右を切り、下に半透明の上下反転コピーを置く - キャッチは強調語だけを 1.5 倍の大きさと青で目立たせる - 物語文の下には、小さなグレーの英訳を添える - 役職は小さな太字、人名は大きな明朝の 2 段で組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。スタッフとキャストは 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算） - ニュースは左右に余白を広めにとり、細い線で区切ったリストにする - イントロ本文は中央揃えにし、行間を広くとる - 場面写真は幅を変えながら縦に並べ、左右にずらして配置する - スタッフ欄は、2 列の各項目の下に菱形を置いて区切る - セクション見出しの前後は 80〜120px 空ける ## Elevation & Depth - 影は使わず、写真の外周に青いグロー（0 0 20px rgba(46,107,255,.6)）をかける - ロゴの板にも同じ青いグローをかける - 巨大な見出しの鏡像は、不透明度 40% 程度とぼかしで奥に沈める ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの 16:9 または横長の矩形。外周に青く発光させる - **セクション境界**: 境界線は引かない。巨大な欧文見出しと余白で区切る - 画面をまたぐ大きな円弧と縦の細線（端に小さな点）を背景の装飾にする - 区切りには 6px ほどの菱形を使う - バッジは装飾的な額縁形（角を内側に切り欠いた形）にする - 矢印は細線の先に点と小さな矢じりを付ける ## Components - **鏡像付きの巨大欧文見出し**（`section-title-mirror`）: 画面幅を超える青い欧文セリフ。中央にカタカナ副題を重ね、下に反転してぼかしたコピーを置く - **ニュースリスト**（`news-list`）: グレーの日付と白い太字タイトル（2 行で省略）を並べ、間を細い紺の線で区切る - **View More リンク**（`link-view-more`）: 白のセリフ体の文字の右に、点と矢じりの付いた青い細線の矢印を添える - **発光する場面写真**（`glow-image`）: 角丸なしの横長写真。外周を青く発光させ、サイズ違いで左右にずらして並べる - **スタッフクレジット**（`credit-grid`）: 2 列のグリッド。小さな役職名と大きな明朝の人名を重ね、下に青い菱形を置く - **額縁形のバッジ**（`badge-ornament`）: 青い面に紺の太字を入れた、装飾的な額縁形のラベル - **予告動画バナー**（`video-banner`）: 場面写真の上に白い細線の丸い再生ボタンと、明朝の白いタイトルを重ねる - **フッターリンク**（`footer-links`）: 縦線で区切った白の太字ゴシックのリンクと、小さな著作権表記 ## Do's and Don'ts **Do** - 地色は紺一色に保ち、青は見出しと強調語に絞る - セクション見出しは、毎回同じ鏡像付きの巨大欧文で統一する - 写真には青いグローをかけ、夜に浮かぶ光のように見せる - 物語文は明朝体にし、行間を 2.0 前後とって静かに組む - 細線の円弧や縦線で、ゆったりした奥行きを出す **Don't** - 暖色や彩度の高いボタンで、販促っぽく見せない - 角丸やドロップシャドウのカードを使わない - 本文を丸ゴシックやポップな書体にしない - 白や明るい背景のセクションを挟まない - 装飾を詰め込みすぎて余白をなくさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開日を一目で伝える）: 全面にキービジュアルを置き、縦書きの明朝コピー、題字ロゴ、公開日を重ねる。左上に SNS アイコン、左端にキャラクターのサムネイルを縦に並べる 2. **予告動画**（動画の再生へ誘導する）: 場面写真の上に、白い細線の丸い再生ボタンと動画タイトルを置く 3. **ニュース**（最新情報を一覧で見せる）: 鏡像付きの見出しの下に、日付とタイトルを細線で区切ったリストを 5 件並べ、最後に View More を置く 4. **イントロダクション**（作品の背景と期待感を伝える）: 強調語だけ青い明朝のキャッチを置き、続いて中央揃えの長い明朝本文を組む 5. **ストーリー**（物語の導入を見せる）: 発光する場面写真を、大きさを変えながら左右にずらして並べ、その間に右揃えの明朝文と英訳を挟む。背景には大きな円弧と縦線を引く 6. **スタッフ・キャスト**（制作陣と出演者を示す）: 青い欧文の小見出しの下に、2 列のクレジットを菱形で区切って並べる 7. **音楽**（主題歌を紹介する）: 細い円の中に、額縁形のバッジ、発光するロゴの板、曲名、View More を中央に並べる 8. **関連バナー・シェア・フッター**（関連作品への導線とシェアを置く）: 横長のバナー、SNS アイコン、縦線で区切ったリンク、著作権表記を中央に並べる ## Imagery - 夜や薄暗い室内の場面写真を使う。青白い魔法光が差すカットが中心 - 写真は横長に切り抜き、外周に青いネオンのようなグローをかける - ファーストビューだけは、昼の森と洋館のような色の多いイラストで対比を作る - 装飾は画面をまたぐ細線の円・縦線と、小さな菱形だけにする - ロゴは明るい板の上に置き、青い光彩で囲む - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のファーストビューは、2 枚のキービジュアルを左右に並べた横長の構成にする - PC のニュースは、日付・タイトル・矢印を 1 行に収めた横長のリストにする - PC のストーリーは、写真を 2 列にずらして配置し、文章を写真の脇に置く - 巨大欧文の見出しは PC でも画面幅を超えさせ、迫力を保つ - PC のスタッフは 2 列のまま、列の間隔を広くとる - PC では、ページ先頭へ戻る縦の矢印を右下に固定する ## 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-77f47e71`（元 LP の URL から採番） - **元 LP**: https://mahoyo-movie.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。