--- version: alpha name: Mecha Sci-Fi Anime Official Site description: 薄いグレーの方眼地と黒の極太英字見出しを組み合わせた、TVアニメ公式サイトの型。HUDやメカのUIを思わせる角欠けの枠、細い罫線、4色の小さな四角マークで先進感を出す。ストーリーだけは漆黒の面にレーダー模様を敷き、白文字の中央揃えで没入感を高める。 colors: background: '#FAFAFA' primary: '#000000' text: '#000000' dark-section: '#030303' on-dark: '#FDFDFD' surface: '#545454' text-muted: '#8F8F8F' line: '#CEC5C0' accent-1: '#D22423' accent-2: '#2F5FB0' accent-3: '#E69C0E' secondary: '#3FC8E8' typography: display: fontFamily: Roboto fontSize: 52px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.01em headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em label-button: fontFamily: Roboto fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em accent: fontFamily: Roboto fontSize: 72px fontWeight: 900 lineHeight: 1.0 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 70px button-more: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 48px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 120px video-frame: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 260px credit-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px character-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 290px slider-arrow: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 44px share-icon: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 50px --- # DESIGN.md — 白グリッド×漆黒のメカSFアニメ公式サイト（Mecha Sci-Fi Anime Official Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル - **キーワード**: HUD風フレーム・方眼グリッド地・極太英字見出し・白黒コントラスト・4色ドットマーク・斜めカット - **地の質感**: ほぼ白のグレー地に、細い方眼と斜線の幾何学パターンを薄く敷く。ダーク面には同心円のレーダー線と走査線を重ねる。 - **形**: 角を斜めに欠いた八角形の枠、四隅のL字ブラケット、平行四辺形に切ったキャラクターカード。角丸は使わない。 - **温度感**: 寒色寄りで無機質。黒と白が主役で、色はキャラクターと4色マークにだけ入る。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAFAFA` | 方眼パターンを敷くページの地 | 62% | 画素の実測 | | `primary` | `#000000` | 見出し・ボタン・フッターの黒 | 10% | 画素の実測 | | `text` | `#000000` | 英字見出しと人名の黒文字 | 3% | 画素の実測 | | `dark-section` | `#030303` | ストーリーの漆黒の面 | 14% | 画素の実測 | | `on-dark` | `#FDFDFD` | 黒地の上の白文字 | 2% | 画素の主要色に補正 | | `surface` | `#545454` | ニュースカードの濃いグレー面 | 4% | 画素の実測 | | `text-muted` | `#8F8F8F` | 役職・役名の小さなラベル | 0% | 画素の実測 | | `line` | `#CEC5C0` | フレームの細い罫線・方眼線 | 2% | 画素の主要色に補正 | | `accent-1` | `#D22423` | 見出し上4色マークの赤・キャラ地の赤 | 2% | 画素の実測 | | `accent-2` | `#2F5FB0` | 4色マークの青・キャラ地の青 | 1% | 推定 | | `accent-3` | `#E69C0E` | 4色マークの山吹色 | 0% | 画素の実測 | | `secondary` | `#3FC8E8` | 選択中サムネ枠などのシアン | 0% | 推定 | - 地はほぼ白のグレーにし、方眼と斜線を薄いグレーで敷く - 見出し・ボタン・フッターは純黒にし、白黒の強いコントラストを主役にする - 彩度の高い色は、キャラクタービジュアルと見出し上の4色マークにだけ使う - ストーリーなど世界観を語る箇所は、黒い面＋白文字に反転させる - ニュースカードは濃いグレーの面に白文字を置き、黒より一段軽く見せる - 役職などのラベルは中間グレーにして、人名の黒を引き立てる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の極太英字見出し | 欧文サンセリフ | Roboto | 900 | 52px | 1 | -0.01em | | `headline-lg` | イントロダクションの極太和文キャッチ | ゴシック | Dela Gothic One | 400 | 30px | 1.2 | 0em | | `headline-md` | 放送日時・ストーリーの締め文 | ゴシック | Noto Sans JP | 900 | 20px | 1.5 | 0.03em | | `headline-sm` | スタッフ・キャストの人名 | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.05em | | `body-md` | 紹介文・ストーリー本文 | ゴシック | Noto Sans JP | 500 | 12px | 2 | 0.05em | | `note` | 役職ラベル・日付・著作権表記 | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.03em | | `label-button` | MOREボタン・フッターリンクの英字 | 欧文サンセリフ | Roboto | 700 | 13px | 1 | 0.08em | | `accent` | 背景に置く白抜きアウトライン英字 | 欧文サンセリフ | Roboto | 900 | 72px | 1 | 0em | - セクション見出しは英字の極太サンセリフを大きく置き、和文の見出しは添えない - 見出しの上に、青・灰・山吹・赤の小さな四角を4つ並べる - 長い英字見出しは単語の途中で2行に割り、ブロック状に見せる - 人名は太字、役職は小さなグレー文字で上に置く - ストーリー本文は中央揃えにし、行間を2.0前後と広く取る - 背景に、同じ英字を細いアウトラインで大きくはみ出して置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。スタッフ・キャストは 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算） - キービジュアルは全幅で、ページ両端に細い縦罫線のフレームを通す - 見出しは中央揃え。イントロダクションのみ左揃えにする - 人名リストは左右2列で中央揃え、行間をたっぷり取る - 写真は左右にずらして重ね、段差のある配置にする - 黒いストーリー面は全幅にし、上下の端にゲージ風の細い線を入れる ## Elevation & Depth - 影は使わず、罫線とブラケットで奥行きを出す - ボタンの外側に1pxの白線を少し離して重ね、二重枠に見せる - 写真同士を少し重ね、段差で階層を表す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は長方形のまま段差を付けて重ねる。キャラクターは平行四辺形に斜めカットする - **セクション境界**: 直線で切り替え、境界に台形の切り欠きやゲージ線を添える - 角丸は使わず、角は直角か45度カットにする - カードは上下の辺の中央を一段へこませた、メカUI風の形にする - 四隅にL字のブラケットを置き、照準のような枠にする - スライダーの現在地は、四角の中に四角を入れたドットで示す ## Components - **4色マーク付き英字見出し**（`section-heading`）: 小さな4色の四角を上に置き、極太英字を大きく組む - **黒の矢印付きボタン**（`button-more`）: 黒い長方形に白の英字と右矢印。外側に細い枠とブラケットを付ける - **メカUI風ニュースカード**（`news-card`）: 濃いグレーの角欠け面に日付と見出しを置き、上下に細い罫線とコード風の小さな文字を添える - **照準付き動画枠**（`video-frame`）: 全幅の動画サムネに中央の照準アイコンと、上下のゲージ線を重ねる - **役職＋人名の組**（`credit-item`）: グレーの小ラベルの下に太字の人名。キャストには黒い吹き出しアイコンを添える - **斜めカットのキャラカード**（`character-card`）: キャラの色の面を平行四辺形に切り、全身を立たせて英字ルビと名前を左下に置く - **黒の四角矢印**（`slider-arrow`）: 黒い正方形に白の細い矢印。白の細枠で囲む - **フッターのSNS枠**（`share-icon`）: 黒地に白線の正方形で囲んだSNSアイコンを横に3つ並べる ## Do's and Don'ts **Do** - 見出しは極太の英字サンセリフで、画面幅いっぱいに近い大きさで組む - 地には薄い方眼と斜線のパターンを必ず敷く - 枠は角欠け・L字ブラケット・細罫線でメカUI風にする - 色はビジュアルと4色マークだけに入れ、UIは白黒で通す - 世界観を語る章は、黒地＋白文字の中央揃えにする **Don't** - 角丸やピル型のボタンを使わない - パステル色や暖色のグラデーションを地に使わない - ドロップシャドウで浮かせない - 和文の丸ゴシックや手書き書体を使わない - UIパーツにキャラクターの色を多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とキャラクターを一目で伝える）: メカと複数キャラを帯状に重ねた全幅ビジュアル。縦書きのキャッチを添え、下にロゴと放送日を極太で置く 2. **ビジュアル切替・バナー**（別ビジュアルと関連企画へ誘導する）: モノクロの小サムネを4つ並べ、選択中だけシアン枠のカラーにする。下にバナースライダーと四角ドット 3. **ニュース**（最新情報を伝える）: 左揃えの極太英字見出しに、角欠けのグレーカードを縦に並べ、黒のMOREボタンで締める 4. **動画**（PVを見せる）: 全幅の動画サムネに照準アイコンとゲージ線を重ね、下にスライダードット 5. **スタッフ**（制作陣を示す）: 中央の英字見出しの下に、役職ラベル＋人名を2カラムで並べる 6. **キャスト**（声優を示す）: スタッフと同じ型で、人名の右に吹き出しアイコンを付ける 7. **イントロダクション**（作品の概要と見どころを伝える）: 2行に割った左揃えの英字見出し、ずらして重ねた場面写真、極太和文キャッチ、本文の順 8. **ストーリー**（あらすじで没入させる）: 漆黒の全幅面にレーダー模様を敷き、白文字を中央揃えで組む。最後の一文は大きく 9. **キャラクター**（登場人物を紹介する）: 背景にアウトライン英字、平行四辺形カードの横スライダーと黒の四角矢印、MOREボタン 10. **フッター**（SNS共有と規約・権利表記）: 黒地の中央にロゴ、四角枠のSNSアイコン、縦線区切りのリンク、細線の上矢印 ## Imagery - アニメ調のキャラクターとメカを、青空の背景で帯状に区切って重ねる - 場面写真は暗い背景に青く光るアイテムなど、コントラストの強いカットを選ぶ - キャラクターは全身の立ち絵を単色の面に置き、背後に同じキャラの大きな顔を薄く重ねる - 装飾はHUD風の照準、ゲージ、コード風の小さな文字、同心円のレーダー線を細線で描く - 走査線のような横縞を動画枠やダーク面に薄く重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはキービジュアルを中央寄せにし、左上にビジュアル切替用の小サムネを縦に並べる - PCのニュースは見出しを縦向きにして左に置き、カードを3列で横に並べる - PCのスタッフ・キャストは4列または3列のグリッドにする - PCのイントロダクションは、見出しと写真を左、キャッチと本文を右にした2カラムにする - PCのキャラクターは見出しの右に矢印を置き、カードを3枚ほど同時に見せる - PCのフッターはロゴと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-aa9fb7e5`（元 LP の URL から採番） - **元 LP**: https://vertexforce.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-25、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。