--- version: alpha name: Glitch Mint Cyber Anime Film LP description: 白地にミントのグリッド模様を散らし、黒い章と細い明朝体で SF の緊張感を出すアニメ映画の公式サイト型。グリッチ画像の帯と、ミントのラベルや斜めの面がデジタル世界観を表す。 colors: background: '#FFFFFF' primary: '#4AE3C7' cta: '#4CE2C6' on-cta: '#0F0F0F' text: '#181819' text-body: '#37393C' text-muted: '#545F64' dark-section: '#050505' on-dark: '#FFFFFF' line: '#A6AEB2' tint-1: '#CDEFEA' accent-1: '#020102' background-alt: '#797174' typography: display: fontFamily: Shippori Mincho B1 fontSize: 64px fontWeight: 800 lineHeight: 1.0 headline-lg: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.15em headline-sm: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Cormorant Garamond fontSize: 8px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.05em label-button: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-floating-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 46px frame-corner-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px label-role: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' height: 10px news-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px banner-interview: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 95px heading-band-vertical: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 160px label-black-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 24px slider-counter: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 16px thumb-parallelogram: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px --- # DESIGN.md — 白×黒×ミントのグリッチ調アニメ映画 LP（Glitch Mint Cyber Anime Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、上品・高級、シンプル・ミニマル - **キーワード**: サイバー・グリッチ・ミントアクセント・細明朝・広い字間・モノクロ - **地の質感**: 白地に薄いミントの三角グリッド模様を散らす。黒い章には細い格子線と粒子のノイズを重ねる。 - **形**: 角丸なしの直線と細い枠線。四隅だけのカギ括弧型フレーム、斜めの平行四辺形サムネイルを使う。 - **温度感**: 寒色寄りで静か。ミントが唯一の色みとして光る。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地色 | 55% | 画素の実測 | | `primary` | `#4AE3C7` | ブランドのミント（ラベル・斜めの面） | 4% | 画素の実測 | | `cta` | `#4CE2C6` | 追従する上映館ボタン | 1% | 画素の実測 | | `on-cta` | `#0F0F0F` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#181819` | 見出し・本文の黒文字 | 4% | 画素の実測 | | `text-body` | `#37393C` | 本文テキスト | 3% | 画素の主要色に補正 | | `text-muted` | `#545F64` | 補足・日付・英字サブ | 1% | 画素の主要色に補正 | | `dark-section` | `#050505` | 物語章の黒背景 | 10% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#A6AEB2` | ニュース枠・区切りの細線 | 0% | 画素の主要色に補正 | | `tint-1` | `#CDEFEA` | 背景のミントのグリッド模様 | 4% | 推定 | | `accent-1` | `#020102` | 黒ラベル帯（白抜き文字） | 1% | 画素の実測 | | `background-alt` | `#797174` | 動画章のグレー背景 | 6% | 画素の主要色に補正 | - 地は白が基本。物語の章だけを黒の全幅帯に切り替える。 - 色みはミント 1 色に限る。ラベル、斜めの面、ボタン、小さな点に使う。 - 強調したい見出しは、ミントの縦帯か黒い帯に文字を載せて目立たせる。 - 背景の装飾は薄いミントの線だけにして、文字の読みやすさを保つ。 - 動画の章はモノクロの写真に格子線を重ね、カラーは動画の枠の中だけにする。 - 罫線は細いグレー。太い線や影は使わない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV 左右に置く大きな縦書きのタイトル文字 | 明朝 | Shippori Mincho B1 | 800 | 64px | 1 | 0em | | `headline-lg` | セクションの英字見出し | 欧文セリフ | Cormorant Garamond | 500 | 24px | 1.2 | 0.2em | | `headline-md` | キャッチや作品名の和文 | 明朝 | Shippori Mincho | 500 | 20px | 1.4 | 0.15em | | `headline-sm` | キャラクター名・黒帯の見出し | 明朝 | Noto Serif JP | 600 | 26px | 1.3 | 0.05em | | `body-md` | 紹介文・あらすじの本文 | 明朝 | Noto Serif JP | 400 | 11px | 2 | 0.1em | | `note` | 英字の小見出し・役職ラベル・日付 | 欧文セリフ | Cormorant Garamond | 400 | 8px | 1.4 | 0.1em | | `accent` | ミントの縦帯に載せる縦書きの台詞 | 明朝 | Shippori Mincho | 600 | 30px | 1.1 | 0.05em | | `label-button` | 追従ボタンの文字 | 明朝 | Shippori Mincho | 500 | 18px | 1.2 | 0.1em | - 和文も欧文もセリフ体でそろえ、ゴシックは使わない。 - 英字見出しは大文字にし、字間を 0.2em 前後まで広げる。 - 英字見出しの下に、極小の英字サブタイトルを添える。 - 本文は 11px 前後と小さめにし、行間 2.0 で静かに読ませる。 - 強調する台詞は縦書きにし、帯の上に白抜きか黒文字で載せる。 - 数字や日付は字間を広げたセリフ体で書く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。スタッフとキャストの一覧は 2 カラムにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは英字見出しを中央に置き、その下に内容を並べる。 - グリッチ画像の帯をセクション間に左右へずらして挟む。 - スタッフ一覧は、ミントのラベルの下に名前を置く組を 2 列に並べる。 - ニュースは日付の枠と本文の枠を左右に並べ、行ごとに分ける。 - 黒い章は全幅にし、内側に細い格子線を敷く。 - 上映館ボタンは右下に固定して追従させる。 ## Elevation & Depth - 影はほぼ使わず、線と面の切り替えだけで階層を作る。 - 黒地と白地を反転させて章の切り替わりを示す。 - 固定 CTA だけはミントの面でページ上に浮かせる。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は白背景の切り抜きにする。メイン画像は斜めのミントの面と組み合わせる。サムネイルは平行四辺形に切る。 - **セクション境界**: 直線で切り替える。グリッチ状に崩れた画像の帯を区切りに使う。 - 角丸は使わず、すべて直角にする。 - 枠は細線か、四隅だけのカギ括弧型にする。 - 斜めの平行四辺形でスピード感を出す。 - 矢印は太い山形（シェブロン）にする。 ## Components - **追従 CTA ボタン**（`button-floating-cta`）: 画面右下に固定する、ミントの角型ボタン。明朝の文字を載せる。 - **カギ括弧型の枠**（`frame-corner-box`）: 四隅だけに線を引いた枠。作品解説への導線や SNS アイコンを囲む。 - **ミントの役職ラベル**（`label-role`）: ミントの小さな帯に極小の黒文字で役職を書き、下に名前を置く。 - **ニュース行**（`news-row`）: 日付の枠と見出しの枠を細線で分け、右端に矢印を付ける。 - **インタビューバナー**（`banner-interview`）: グリッド地に大きな和文の見出しと黒帯の英字を置き、右に人物写真を配置する。 - **縦帯の台詞見出し**（`heading-band-vertical`）: ミントの縦帯を 3 本並べ、縦書きの台詞を載せる。黒い章で使う。 - **黒帯ラベル**（`label-black-band`）: 黒い帯に白抜きの明朝体を載せる。肩書きや強調の一文に使う。 - **スライダー番号**（`slider-counter`）: 現在の番号と総数を細い横線でつなぎ、左右にシェブロンの矢印を置く。 - **平行四辺形のサムネイル列**（`thumb-parallelogram`）: キャラクターを斜めに切った枠で横に並べ、未公開の枠は記号で示す。 ## Do's and Don'ts **Do** - 白、黒、ミントの 3 色に絞る。 - 見出しは字間を広げたセリフ体の英字にする。 - 背景に薄いミントのグリッド模様をランダムに散らす。 - グリッチ画像の帯や小さな点を余白に置き、デジタル感を出す。 - 人物は切り抜いて余白を大きく取る。 - 固定 CTA は右下に 1 つだけ置く。 **Don't** - 角丸やピル型のボタンにしない。 - ゴシックの太字やポップな書体を使わない。 - ミント以外の鮮やかな色を足さない。 - ドロップシャドウやグラデーションのボタンを使わない。 - 本文を大きくして余白を詰めない。 - 装飾の模様を濃くして文字の上に重ねない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開日を伝える）: 白地の中央にキャラクター 4 人の集合イラストを置き、左右の端に大きな縦書きのタイトルを配置する。下に明朝のキャッチ、英字ロゴ、公開日を中央揃えで並べる。 2. **作品解説への導線**（前作を知らない人を解説へ誘導する）: カギ括弧型の枠の中に、英字セリフ体の問いかけを 2 行で書く。 3. **ニュース**（最新情報を伝える）: 英字見出しの下にニュース行を 3 件並べ、右下に一覧へのリンクを置く。 4. **スタッフ**（制作陣の信頼感を示す）: ミントのラベルと名前の組を 2 列で並べ、最後に主題歌の情報を添える。 5. **キャスト**（声優陣を紹介する）: スタッフと同じ 2 列で並べ、下にインタビューバナーを 2 つ置く。 6. **動画**（予告映像を見せる）: モノクロの背景に格子線を重ね、中央にカラーの動画を置く。左右の矢印と番号で切り替える。 7. **イントロダクション**（作品の経緯を説明する）: 白地に左揃えの明朝本文を置き、段落の間にグリッチ画像の帯を挟む。 8. **ストーリー**（あらすじで期待を高める）: 黒い全幅の章にする。左にミントの縦帯で台詞を置き、右に白い本文、最後に締めの一文を大きく書く。 9. **キャラクター**（登場人物を 1 人ずつ見せる）: アップのイラストと斜めのミントの面を重ねたスライダーにする。名前、英字、担当声優、全身の立ち絵を添え、下に平行四辺形のサムネイルを並べる。 10. **フッター**（SNS や関連リンクへ誘導する）: トップへ戻る山形の矢印、カギ括弧の枠で囲んだ SNS アイコン、黒地のロゴ、英字のリンク、著作権表記を中央揃えで縦に並べる。 ## Imagery - キャラクターは細い線のセル画風イラストにする。白い衣装にミントと黒の差し色を入れ、背景は透過にする。 - 立ち絵は全身にし、アップのイラストは大胆にトリミングする。 - モノクロのメカ画像を横に引き裂いたようなグリッチの帯を装飾に使う。 - 背景は細い線の三角グリッドと小さなドットの集まりで作る。 - 動画や場面写真はモノクロ化し、格子線を重ねて画面越しの質感を出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューの集合イラストを中央に置き、キャッチを縦書きで右上に寄せる。 - PC のニュース行は、日付と見出しを 1 行の横長の枠に収める。 - PC のキャストは左に見出し、右に一覧とバナーを置く 2 段組にする。 - PC のイントロダクションは、本文とグリッチ画像を左右にずらして交互に置く。 - PC のキャラクターは、文字を左、イラストを右に置く横並びにする。 - PC のフッターは、サイトマップを 2 列にして左に置き、リンクと SNS を右に置く。 ## 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-b5c39040`（元 LP の URL から採番） - **元 LP**: https://rakuen-tsuiho-r.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。