--- version: alpha name: Neon Lime Dark Action Anime LP description: 黒い地に蛍光ライムと紫〜マゼンタのグラデを合わせた、攻撃的なアニメ作品の公式サイト。極太のコンデンス欧文見出し、筆で擦ったような境界、デスクトップのウィンドウ風カードで、ストリート感とデジタル感を両方出している。 colors: background: '#000000' primary: '#C8F000' secondary: '#7401DA' accent-1: '#DC00E4' dark-section: '#131311' on-dark: '#FFFFFF' cta: '#C2C2C5' on-cta: '#0B0A0A' accent-2: '#454AEC' accent-3: '#F07020' line: '#333333' text-muted: '#796F6F' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Bebas Neue fontSize: 30px fontWeight: 700 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.8 note: fontFamily: Montserrat fontSize: 8px fontWeight: 700 lineHeight: 1.4 label-button: fontFamily: Montserrat fontSize: 8px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 70px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px menu-button: backgroundColor: '{colors.primary}' height: 36px section-title: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 36px news-item: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 46px highlight-band: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 26px window-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px play-button: textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px diagonal-band: backgroundColor: '{colors.accent-2}' height: 60px --- # DESIGN.md — 黒×蛍光ライム×紫グラデのアクションアニメLP（Neon Lime Dark Action Anime LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、ポップ・元気 - **キーワード**: ダーク・蛍光ライム・紫グラデ・ブラシストローク・ウィンドウUI・極太コンデンス - **地の質感**: 暗い地に、筆で擦ったような荒い境界とグランジ調の背景写真を重ねる - **形**: 四角いウィンドウ風カード、ピル型ボタン、斜めに流れる帯 - **温度感**: 暗くて冷たい地に、ネオン色で熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの地色 | 45% | 画素の実測 | | `primary` | `#C8F000` | 蛍光ライム（ロゴ・見出し・メニューボタン） | 4% | 推定 | | `secondary` | `#7401DA` | 紫グラデの起点 | 8% | 画素の実測 | | `accent-1` | `#DC00E4` | マゼンタ（グラデの終点・強調語） | 5% | 画素の実測 | | `dark-section` | `#131311` | 濃紺のヘッダー・FV下地 | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い地の上の文字 | 3% | 推定 | | `cta` | `#C2C2C5` | ピル型ボタンの面 | 0% | 画素の実測 | | `on-cta` | `#0B0A0A` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#454AEC` | ロイヤルブルーの帯・ウィンドウの見出しバー | 3% | 画素の実測 | | `accent-3` | `#F07020` | オレンジのウィンドウ枠 | 1% | 推定 | | `line` | `#333333` | ニュース一覧の区切り線 | 0% | 推定 | | `text-muted` | `#796F6F` | フッターの補足文字 | 0% | 画素の主要色に補正 | - 地は黒か濃紺。明るい色の面はイントロの紫→マゼンタの縦グラデ 1 か所だけにする - 見出し・ロゴ・日付ラベル・再生アイコンは蛍光ライムで統一する - 強調したい語はマゼンタ文字にし、白文字の行は黒い帯に乗せる - ウィンドウ風カードの枠はライム・オレンジ・ブルーで色分けする - ボタンはライトグレーのピル型にし、右端にライムの丸い矢印を付ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ・告知日 | ゴシック | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Bebas Neue | 700 | 30px | 1.1 | 0.0em | | `headline-md` | 黒い帯に乗せたリード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.02em | | `body-md` | 本文・ニュースのタイトル | ゴシック | Noto Sans JP | 500 | 11px | 1.8 | 0.0em | | `note` | 日付・コピーライト | 欧文サンセリフ | Montserrat | 700 | 8px | 1.4 | 0.0em | | `label-button` | ピル型ボタン・フッターナビ | 欧文サンセリフ | Montserrat | 800 | 8px | 1.0 | 0.02em | - セクション見出しは英字の大文字だけで、極太のコンデンス書体を使う - 日本語の見出しは白文字を黒い帯に乗せ、1 行ずつ帯を切る - 本文は小さめにし、左揃えで短く改行する - ボタンとナビは英字の大文字で、太いサンセリフにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。コミックスの書影は横スクロール - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算） - FV はキービジュアル 1 枚を全幅で縦長に見せる - ニュースは日付とラベルを左、タイトルを右に並べた 1 行ずつのリスト - ウィンドウ風カードは少しずつずらして重ね、斜めの帯の上に散らす - ボタンは中央か右下に置く ## Elevation & Depth - 影はほぼ使わず、ウィンドウ同士の重なりで奥行きを出す - カードには 2〜3px の太い色付きの枠を付ける - 背景写真は暗く落とし、その上に文字を直接置く ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: キービジュアルと動画は全幅の四角。書影は四角のまま並べる - **セクション境界**: 筆で擦ったようなギザギザのブラシストローク境界 - カードは角丸なしの四角いウィンドウにし、上部にタイトルバーと丸い 3 つのボタンを付ける - ウィンドウの見出しバーは端を斜めにカットする - ボタンだけを完全なピル型にする ## Components - **矢印付きピル型ボタン**（`button-pill`）: ライトグレーのピル型で、英字の大文字ラベルと右端にライムの丸い矢印を置く。暗い地では黒地に白枠のものも使う - **ハンバーガーメニュー**（`menu-button`）: 右上に固定する、ライムの正方形に黒い 3 本線のボタン - **英字見出し**（`section-title`）: 極太コンデンスの大文字を中央に置く。ニュースだけはライムで左揃え - **ニュース行**（`news-item`）: 日付とライムの小さなラベルの横にタイトルを置き、下に細い区切り線を引く - **黒帯テキスト**（`highlight-band`）: 紫グラデの上に白文字を黒い帯で乗せ、強調語だけマゼンタにする - **ウィンドウ風カード**（`window-card`）: OS のウィンドウを模したカード。タイトルバー付きで、ライム・オレンジ・ブルーの枠と半透明〜グラデの中身 - **動画再生ボタン**（`play-button`）: ライムの円の中に三角形を置き、下に英字ラベルを添える - **斜めのロゴ帯**（`diagonal-band`）: ブルー地にロゴを繰り返し並べたテープ状の帯を斜めに流す ## Do's and Don'ts **Do** - 見出しとアイコンのアクセントは蛍光ライムに絞る - セクションの境目はブラシストロークで荒く切る - カードはウィンドウ UI 風にして、少しずつずらして重ねる - 英字見出しは大文字の極太コンデンス書体にする **Don't** - 白やパステルの明るい地を広く使わない - カードを大きな角丸や柔らかい影で作らない - ライムを本文の長い文章に使わない - 細い明朝体や丸ゴシックを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（言語の切り替えとメニュー）: 黒地の左に縦並びの言語タブ、右にライムのメニューボタン 2. **ファーストビュー**（作品の世界観と告知日を伝える）: 全幅のキービジュアルに縦書きキャッチ・ライムの告知日・下部の巨大ロゴを重ねる 3. **ニュース**（最新情報を見せる）: 黒地にライムの見出しと 5 件のリスト。中央にピル型ボタン 4. **作品紹介**（あらすじと制作の背景）: 紫→マゼンタの縦グラデ地に黒帯の見出しと本文。上下はブラシ境界 5. **動画**（PV へ誘導する）: 全幅の静止画にライムの再生ボタン、右下にピル型ボタン 6. **ファンクラブ**（コミュニティへの参加を促す）: 斜めのロゴ帯の上に、説明・できること・参加手順のウィンドウカードを重ねる 7. **原作紹介**（原作の購入へ誘導する）: 暗い廃墟の写真を背景に、中央の見出し・ボタン 2 つ・書影の横並び 8. **フッター**（公式 SNS とナビ）: ライムのロゴ、SNS アイコン、英字ナビ 2 列、最下部にコピーライト ## Imagery - 紫・赤・青のネオン光が入った、暗くドラマチックなアニメ調のキービジュアル - 背景は夜の廃墟や荒れた街並みの写真を暗く落とし、グランジな質感にする - インクが飛び散ったような、筆で擦ったような装飾 - ロゴを繰り返し並べたテープ状の斜めの帯 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を横長にし、キャッチを左、告知日を右に振り分ける - PC の作品紹介は本文を 2 カラムにする - PC のウィンドウカードは横に広げて散らす - PC の原作紹介は見出しを左、ボタンを右に置く - PC のフッターはロゴを左、ナビ 2 列を右に並べる ## 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-3be0f39d`（元 LP の URL から採番） - **元 LP**: https://www.tankchair-anime.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。