--- version: alpha name: Pastel Frame Romantic Anime LP description: 水色の外枠で囲んだ額縁風の画面に、生成り・ミント・ピンクのパステル地を縦にグラデーションで移していくアニメ公式サイトの型。文字は焦げ茶の明朝体、見出しは大きな欧文セリフ体、背景には筆記体を透かして入れる。やさしく上品なラブコメの雰囲気にする。 colors: primary: '#AFDCE1' text: '#6F4537' cta: '#754433' on-cta: '#FDFDF7' background: '#F9F9EF' background-alt: '#FDEDF0' tint-1: '#EAFCFF' tint-2: '#FFF7EC' surface: '#F4FAF2' text-muted: '#AAC2C0' accent-1: '#BDC1DB' line: '#D7CBC6' typography: display: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 500 lineHeight: 1.1 headline-sm: fontFamily: Shippori Mincho fontSize: 10px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.3em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Shippori Mincho fontSize: 13px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.08em body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em accent: fontFamily: Pinyon Script fontSize: 70px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Cormorant Garamond fontSize: 16px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 16px lg: 40px 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}' frame-border: backgroundColor: '{colors.primary}' rounded: '{rounded.lg}' news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 95px button-more: textColor: '{colors.text}' typography: '{typography.label-button}' height: 64px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 110px intro-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 800px credit-list: textColor: '{colors.text}' typography: '{typography.body-lg}' height: 60px chara-icon: backgroundColor: '{colors.tint-1}' rounded: '{rounded.full}' height: 72px share-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 56px --- # DESIGN.md — 水色額縁×パステルの恋愛アニメ公式 LP（Pastel Frame Romantic Anime LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: やさしい・柔らかい、上品・高級、かわいい、レトロ - **キーワード**: 額縁フレーム・パステルグラデーション・焦げ茶明朝・欧文セリフ見出し・筆記体の透かし・ストライプ地 - **地の質感**: 淡いストライプやグラデーション、市松の透明パターン、ぼかした水玉を薄く重ねる。紙のようにやわらかい質感。 - **形**: 四隅を内側にえぐった額縁フレーム、焦げ茶の細線で囲んだピル型カード、円形のアイコン、アーチ窓、フッターの波型。 - **温度感**: 暖かい焦げ茶と冷たい水色を合わせ、甘すぎない中間の温度にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AFDCE1` | ページ外枠・フッター地の水色 | 10% | 画素の実測 | | `text` | `#6F4537` | 見出し・本文・線の焦げ茶 | 4% | 画素の実測 | | `cta` | `#754433` | 矢印丸・SNS丸ボタン | 1% | 画素の実測 | | `on-cta` | `#FDFDF7` | 丸ボタン上のアイコン | 0% | 画素の主要色に補正 | | `background` | `#F9F9EF` | 生成りの基本地 | 20% | 画素の実測 | | `background-alt` | `#FDEDF0` | ピンクのセクション地 | 12% | 画素の実測 | | `tint-1` | `#EAFCFF` | ミントのセクション地 | 12% | 画素の実測 | | `tint-2` | `#FFF7EC` | クリームのセクション地 | 10% | 画素の実測 | | `surface` | `#F4FAF2` | カードの白地 | 6% | 画素の実測 | | `text-muted` | `#AAC2C0` | FVの斜体サブコピー水色 | 0% | 画素の実測 | | `accent-1` | `#BDC1DB` | キャラクター欄のラベンダー地 | 3% | 画素の実測 | | `line` | `#D7CBC6` | 罫線・点線 | 0% | 画素の主要色に補正 | - 画面全体を水色の外枠で囲み、内側の地は生成り→ミント→クリーム→ピンク→水色と、セクションごとにパステルをグラデーションで移す - 文字・罫線・ボタンはすべて焦げ茶でそろえ、黒は使わない - 濃い面は丸ボタンなどの小さい部品だけに使う - 水色は外枠・フッター・筆記体の透かしに使い、ブランドの色として通す - 装飾のぼかし玉は彩度を落としたピンクと水色にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文見出し | 欧文セリフ | Cormorant Garamond | 500 | 40px | 1.1 | 0.0em | | `headline-sm` | 欧文見出しの下に置く和文の小見出し | 明朝 | Shippori Mincho | 600 | 10px | 1.4 | 0.3em | | `headline-md` | キャラクター名・放送日時 | 明朝 | Shippori Mincho | 600 | 20px | 1.4 | 0.05em | | `body-md` | 本文・あらすじ | 明朝 | Shippori Mincho | 500 | 13px | 2.1 | 0.08em | | `body-lg` | スタッフ・キャストの名前 | 明朝 | Noto Serif JP | 500 | 15px | 1.5 | 0.05em | | `note` | 役職ラベル・コピーライト | 明朝 | Noto Serif JP | 500 | 10px | 1.5 | 0.08em | | `accent` | 背景に透かす筆記体 | 欧文スクリプト | Pinyon Script | 400 | 70px | 1.0 | 0.0em | | `label-button` | Moreボタン・ニュースの日付 | 欧文セリフ | Cormorant Garamond | 600 | 16px | 1.2 | 0.05em | - 見出しは大きな欧文セリフ体を置き、その下に小さく字間の広い和文、さらに◆◆◆の飾りを中央にそろえる - 本文は明朝体で行間を2倍ほどに広く取り、中央ぞろえで短く改行する - FVのコピーは縦書きにし、水色の帯に白抜きの文字で載せる - ゴシック体は使わず、明朝体とセリフ体だけでまとめる - 日付は欧文セリフ体の数字を大きく、年と曜日は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。スタッフ・キャストは2カラムのリスト - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算） - 画面の左右に約8pxの水色の外枠を常に出し、内側に焦げ茶の細い線を引く - 外枠の左右の縁には、一定の間隔で小さなくさび型の切り欠きを付ける - 見出しは中央ぞろえ。ただしStaff/Castの小見出しは左ぞろえにして、横線で区切る - ニュースは縦に積んだカードを3件並べ、下にMoreの横長ボタンを置く - 単行本は横スクロールのカルーセルにし、進捗バーを付ける ## Elevation & Depth - 影はほぼ使わない。立体感は焦げ茶の細線と色面の差で出す - ニュースのカードには、水色の斜めストライプで少しずらした影を付ける - 書影は細い枠と白い余白で額装し、浮いて見せる ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは円形のアイコンかアーチ窓で切り抜く。立ち絵は背景を抜いて使う - **セクション境界**: グラデーションでなめらかにつなぐ。フッターだけ波型(スカラップ)にする - イントロのボックスは、四隅を内側の円弧でえぐった額縁型にする - ニュースのカードは焦げ茶の線で囲んだピル型にし、中を点線で区切る - 丸い矢印ボタンは焦げ茶の正円にする - 声優ボイス用に、吹き出し型の小さなアイコンを名前の横に置く ## Components - **額縁外枠**（`frame-border`）: 画面全体を囲む水色の帯と焦げ茶の細線。左右の縁に切り欠きを付ける - **ニュースカード**（`news-card`）: 左に日付、右にタイトルと丸い矢印を置くピル型のカード。ストライプの影を付ける - **Moreボタン**（`button-more`）: 上下に焦げ茶の線を引いた横長の枠。右端に丸い矢印を付ける - **欧文見出しセット**（`section-heading`）: 大きな欧文セリフ体、小さな和文、◆◆◆の飾りを縦に積む - **額縁ボックス**（`intro-frame`）: 角をえぐった細線の枠。中に中央ぞろえの本文を入れる - **クレジットリスト**（`credit-list`）: 2カラムで、小さな役職ラベルと名前を縦に組む - **キャラクターの丸アイコン**（`chara-icon`）: 焦げ茶の細線で囲んだ正円のサムネイルを4列に並べる - **SNS丸ボタン**（`share-button`）: 焦げ茶の正円に白いSNSアイコンを載せる ## Do's and Don'ts **Do** - 地の色はセクションごとにパステルをグラデーションでつなぎ、境界線は付けない - 文字と線はすべて焦げ茶にし、細線の装飾でまとめる - 欧文の筆記体を大きく薄く背景に流す - ぼかした水玉と市松パターンを画面の端に控えめに置く - 余白を広く取り、中央ぞろえで静かに見せる **Don't** - 純黒の文字やビビッドな原色を使わない - ゴシック体の太字で目立たせない - 濃い影や光沢のあるボタンを使わない - 直角の箱を並べただけの無機質なレイアウトにしない - 水色の外枠を途中で途切れさせない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とメインビジュアルを見せる）: ストライプ地の額縁にキービジュアルを入れ、縦書きのコピー帯と丸いサムネイルを重ねる。メニュータブは右端に置く 2. **タイトル・放送情報**（作品ロゴと放送開始日を伝える）: 生成りの地にロゴを置き、その下に水色の明朝で日時を2行で中央ぞろえにする 3. **ニュース**（最新情報を伝える）: ピル型のカードを3件並べ、Moreボタンを置く 4. **イントロダクション**（あらすじを紹介する）: 筆記体の透かしを背景に置き、額縁ボックスの中で中央ぞろえの明朝本文を見せる 5. **コメント**（原作者のメッセージを載せる）: 左ぞろえの見出しを置き、点線の罫線を敷いた便箋風の本文にする 6. **スタッフ・キャスト**（制作陣と声優を一覧で見せる）: 2カラムのクレジットにし、小見出しは横線と重ねる。声優の名前には吹き出しアイコンを付ける 7. **キャラクター**（登場人物を紹介する）: 丸アイコンで選ばせ、立ち絵、アーチ窓のアップ、名前、紹介文をミントからラベンダーのグラデーション地に組む 8. **原作書籍**（原作単行本へ誘導する）: 額装した書影の横スクロールに、進捗バーと巻数を付ける 9. **フッター**（シェアと関連リンクを置く）: 波型の水色の面に、SNS丸ボタン、外部バナー、コピーライトを置く。上にバラのイラストのページトップを添える ## Imagery - アニメ調のセル画風の立ち絵は、背景を抜いて大きく置く - キャラクターのアップは円形かアーチ型の窓に、パステル地で入れる - メインビジュアルの背景には、白と水色の斜めストライプにやわらかい光のぼけを重ねる - 装飾はぼかした水玉、透明を表す市松パターン、細線で描いたバラのイラスト - 書影は細い枠で額装して並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも水色の額縁外枠を保ち、内側の幅をほぼいっぱいに使う - PCのFVでは、ビジュアルの左に縦書きのコピー、右に縦書きのロゴと放送情報を置く - PCのニュースは、左に見出しとMore、右にカードの2カラムにする - PCのコメントは、左に見出し、右に本文の2カラムにする - PCのスタッフ・キャストは4カラムに、キャラクターは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-9c49541b`（元 LP の URL から採番） - **元 LP**: https://tomeiotoko-ningenonna.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/）からご連絡ください。