--- version: alpha name: Crimson Serif Sci-Fi Anime Official Site description: 明るいグレーの地に深紅の欧文セリフ見出しとチャコールのピル型ボタンを合わせた、オリジナルアニメの公式サイト型 LP。曲線のライン装飾と円形の切り抜きで、未来感と上品さを両立させている。 colors: primary: '#B42943' accent-1: '#DC1E37' background: '#F0F0F0' cta: '#34353A' on-cta: '#E6E7E9' dark-section: '#1F1F1F' on-dark: '#F9F9F9' text: '#2F3034' text-body: '#555A60' line: '#A4ACAF' background-alt: '#E8E8E8' surface: '#F1F1F1' typography: display: fontFamily: EB Garamond fontSize: 52px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: EB Garamond fontSize: 19px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em accent: fontFamily: EB Garamond fontSize: 30px fontWeight: 400 lineHeight: 1.0 rounded: sm: 4px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill-dark: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px section-title-en: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px label-red: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 28px episode-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 220px circle-visual: rounded: '{rounded.full}' height: 320px title-with-rules: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 40px movie-carousel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 300px --- # DESIGN.md — 深紅×チャコールの明朝系SFアニメ公式LP（Crimson Serif Sci-Fi Anime Official Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 上品・高級、クール・先進的、シンプル・ミニマル - **キーワード**: 深紅のセリフ英字・ライトグレー地・二重線のピルボタン・回路のような曲線・円形の切り抜き・黒い波形の帯 - **地の質感**: フラットなライトグレー。暗いセクションには点と十字の細かいグリッドを薄く敷く - **形**: ピル型ボタン、角丸カード、円形の画像マスク、上下がうねる帯 - **温度感**: クールなグレーに深紅で熱を差す、やや冷たい基調 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B42943` | 英字見出し・ラベル・ライン装飾の深紅 | 3% | 画素の実測 | | `accent-1` | `#DC1E37` | キャラクター紹介セクションの赤い面 | 10% | 画素の実測 | | `background` | `#F0F0F0` | ページ全体の地 | 45% | 画素の実測 | | `cta` | `#34353A` | 配信先・MOREボタンの面 | 8% | 画素の実測 | | `on-cta` | `#E6E7E9` | ボタン上の文字 | 0% | 画素の実測 | | `dark-section` | `#1F1F1F` | 動画セクションの黒帯 | 6% | 画素の実測 | | `on-dark` | `#F9F9F9` | 黒帯・赤帯上の見出しと本文 | 1% | 画素の実測 | | `text` | `#2F3034` | 見出し・強調テキスト | 2% | 画素の実測 | | `text-body` | `#555A60` | 本文テキスト | 2% | 推定 | | `line` | `#A4ACAF` | ボタン外周の細い二重線 | 1% | 画素の主要色に補正 | | `background-alt` | `#E8E8E8` | フッター付近のグレーのグラデーション地 | 6% | 画素の実測 | | `surface` | `#F1F1F1` | 白抜きのサブボタン・SNS丸アイコン | 0% | 画素の実測 | - 地はライトグレー #F0F0F0 が基本。純白は面には使わず、ボタンやアイコンだけに使う - 英字のセクション見出し・小ラベル・曲線装飾はすべて深紅で統一する - ボタンは常にチャコールの面に白文字。赤い面の上だけ赤地＋白の線のボタンにする - ページ中盤に深紅の全面帯と黒の全面帯を 1 回ずつ入れて、リズムを変える - 本文はチャコール系のグレー。真っ黒は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文セリフ | EB Garamond | 400 | 52px | 1.0 | 0.0em | | `headline-lg` | 放送日などの大きな和文見出し | 明朝 | Noto Serif JP | 500 | 26px | 1.5 | 0.02em | | `headline-md` | リード見出し・小見出し | 明朝 | Noto Serif JP | 500 | 19px | 1.6 | 0.03em | | `headline-sm` | 赤い英字の小ラベル | 欧文セリフ | EB Garamond | 400 | 19px | 1.3 | 0.02em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 13px | 2.0 | 0.05em | | `note` | 注釈・コピーライト | 明朝 | Noto Serif JP | 400 | 11px | 1.8 | 0.03em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 400 | 13px | 1.3 | 0.05em | | `accent` | カード上の縦書き風の話数表記 | 欧文セリフ | EB Garamond | 400 | 30px | 1.0 | 0.0em | - 和文も欧文もセリフ・明朝で統一し、ゴシックは使わない - 英字見出しは大きく細め。左右に寄せたり 2 行に分けたりして配置する - 本文は行間を 2.0 前後まで広くとる - 太字はほとんど使わない。強調はサイズと赤い色で出す - カード上の話数は 90° 回転させて右端に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、ボタン群だけ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの頭に深紅の英字大見出しを置き、曲線のラインを添える - 配信先ボタンは 2 列で並べ、奇数個のときは最後の 1 個を中央に置く - 本文ブロックは左揃え。告知系は中央揃え - カードは縦に並べ、カード同士の間隔は 8px 程度 - MORE ボタンは各セクションの最後に中央配置 ## Elevation & Depth - 影はほぼ使わずフラットに作る - ボタンはチャコールのピルの外側に 4px 程度の隙間を空け、細いグレーの二重線で囲んで立体感を出す - 黒帯の上下は波形にくり抜いて、浮いている印象を出す ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: キービジュアルの画像は円形マスクで切り抜き、外周に細い赤の同心円と小さな点を添える。話数カードは角丸 16px - **セクション境界**: 赤帯は片側だけ緩い段差のカーブ、黒帯は上下ともうねる波形で切り替える - ボタンはすべてピル型＋外周の細い線 - 曲線ラインの端には小さな赤い丸を付けて回路のように見せる - 直線の区切り線は細く、赤またはグレーにする ## Components - **二重線のピルボタン**（`button-pill-dark`）: チャコールのピルの外側に細いグレーの枠を重ねる。左端に小さなアイコン、中央に文字 - **MOREボタン**（`button-more`）: 左に白い小さな点、中央に英字。赤地や黒地の上では面を透明にして白線だけで描く - **英字セクション見出し**（`section-title-en`）: 深紅のセリフ英字を大きく置き、下や横から曲線ラインを伸ばす。ラインの端は赤い点で止める - **赤い英字ラベル**（`label-red`）: 小さな赤い英字の上ラベルの下に、大きな和文見出しを置く - **話数カード**（`episode-card`）: 場面写真を全面に敷いた角丸カード。左下に白いタイトル、右端に回転させた大きな話数表記 - **円形ビジュアル**（`circle-visual`）: 画像を円で切り抜き、赤い細線の同心円と点で囲む。画面の端から少しはみ出させる - **左右線つき小見出し**（`title-with-rules`）: 中央の赤い英字の左右に赤い細線を伸ばす - **動画カルーセル**（`movie-carousel`）: 黒帯の上に横スクロールのサムネイルを並べる。中央に円形の再生アイコン、下にキャプション ## Do's and Don'ts **Do** - 見出しの英字は深紅のセリフ体で大きく扱う - ボタンは必ずピル型＋外周の細い線で作る - 曲線ラインと赤い点で見出しや写真をつなぐ - 余白を広くとり、静かで上品な密度を保つ - 赤帯・黒帯は 1 回ずつ入れて、全体のリズムを作る **Don't** - ゴシック体や太いポップ書体を使わない - 赤を本文や広い面に多用しない（全面帯の 1 か所だけに留める） - 角張った四角ボタンや、強いドロップシャドウを使わない - 純白の地やビビッドな多色使いにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とロゴを見せる）: キャラクター全員のキービジュアルを全幅で敷き、上部中央にロゴ。下端は緩やかなカーブで地と切り替える 2. **放送・配信情報**（放送日と視聴先を案内する）: 赤い英字ラベルと明朝の大見出しを中央揃えにし、配信先を種類ごとに見出しで分けて 2 列のピルボタンで並べる 3. **ニュース**（最新のお知らせを伝える）: 縦書きの赤い英字見出しと曲線ライン。横スライドのカードに日付（赤）と本文を添え、最後に MORE ボタン 4. **作品紹介**（作品のコンセプトを伝える）: 2 行に分けた英字見出しと右側の円形ビジュアル。下に明朝のリードと本文、注釈を置く 5. **キャラクター紹介**（主役ロボットの設定を見せる）: 深紅の全面帯に白い英字見出しと全身の立ち絵。白文字の説明とクレジットを置き、白線の MORE ボタンで締める 6. **エピソード一覧**（各話の世界観を見せる）: 角丸の場面写真カードを縦に並べ、右端に回転させた話数を置く 7. **動画**（PVを見せる）: 上下が波形の黒帯に細かいグリッド模様を敷き、白い英字見出しと動画カルーセルを置く 8. **音楽**（主題歌を紹介する）: 赤い英字ラベル＋和文の楽曲名＋正方形のジャケット写真を縦に積む 9. **スタッフ・キャスト**（制作体制を示す）: 左右線つきの小見出しで区切り、赤い役職名の下に名前を中央揃えで置く。両端にチャコールの装飾帯を入れる 10. **企業の想い**（制作した企業の意図を伝える）: 英字見出しに曲線ラインを添え、問いかけの見出しと本文を左揃えで置く。下にワイヤーフレーム風の円形ビジュアル 11. **フッター**（公式SNSと関連リンクへ誘導する）: グレーのグラデーション地にバナー、ロゴ、丸い白のSNSアイコン、白とチャコールのピルボタン、シェアアイコン、ポリシーのリンクを並べる ## Imagery - 高彩度で緻密なセルアニメ調のキービジュアルとキャラクター立ち絵 - キャラクター設定画は背景なしの切り抜きにして、赤地の上に正面と背面を並べる - 場面写真は宇宙・夕景・ネオン街など、ドラマチックな光のものを使う - ワイヤーフレームのモノクロ 3D レンダーを、未来感を出す装飾に使う - 赤い細線の同心円・曲線・点で、回路や軌道のような装飾を描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はキービジュアルを横長にし、配信先ボタンを 4 列に並べる - PC のニュースは 3 カラムのカードグリッドにする - PC のエピソードは、開いた 1 枚と細い縦カードが並ぶ横アコーディオンにする - PC のキャラクター・作品紹介・スタッフは、テキストとビジュアルの左右 2 カラムにする - PC はシェアアイコンを画面左端に縦に固定し、本文の幅は約 70% に絞る ## 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-eae6d0a3`（元 LP の URL から採番） - **元 LP**: https://miru-anime.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。