DESIGN.md — 水色額縁×パステルの恋愛アニメ公式 LP（Pastel Frame Romantic Anime LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、レトロ
• キーワード: 額縁フレーム・パステルグラデーション・焦げ茶明朝・欧文セリフ見出し・筆記体の透かし・ストライプ地
• 地の質感: 淡いストライプやグラデーション、市松の透明パターン、ぼかした水玉を薄く重ねる。紙のようにやわらかい質感。
• 形: 四隅を内側にえぐった額縁フレーム、焦げ茶の細線で囲んだピル型カード、円形のアイコン、アーチ窓、フッターの波型。
• 温度感: 暖かい焦げ茶と冷たい水色を合わせ、甘すぎない中間の温度にする

Colors

• 画面全体を水色の外枠で囲み、内側の地は生成り→ミント→クリーム→ピンク→水色と、セクションごとにパステルをグラデーションで移す
• 文字・罫線・ボタンはすべて焦げ茶でそろえ、黒は使わない
• 濃い面は丸ボタンなどの小さい部品だけに使う
• 水色は外枠・フッター・筆記体の透かしに使い、ブランドの色として通す
• 装飾のぼかし玉は彩度を落としたピンクと水色にする

Typography

• 見出しは大きな欧文セリフ体を置き、その下に小さく字間の広い和文、さらに◆◆◆の飾りを中央にそろえる
• 本文は明朝体で行間を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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。