DESIGN.md — 霞む灰白と淡青線の文芸アニメ公式 LP（Quiet Watercolor Mist Anime Title LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい
• キーワード: 余白・霞・細い明朝・淡青の曲線・紙片・静けさ
• 地の質感: 灰色の水墨・雲のようなにじみテクスチャを背景に薄く敷く
• 形: 角ばった矩形が基本。ボタンは正円の矢印ボタンと四角い暗色ボタン
• 温度感: やや寒色寄りのニュートラル。冷たすぎない灰白

Colors

• 地は灰白に霞テクスチャ。情報密度の高い一覧だけ白カードに載せる
• 見出し英字は濃いスレート〜墨のグラデーション風
• 青はラベル・ふりがな・アイコン・現在地のみに少量
• 淡い水色の細い曲線を区切りの装飾に使う
• 暗色はSNSボタンの面のみ。広い暗色セクションは作らない
• 淡い青灰の矩形ブロックを見出しの背後にずらして置く

Typography

• 見出しは英字セリフ、日本語は明朝と細めゴシックの組み合わせ
• タイトルは1文字ずつ大きく字間を空ける
• ストーリー本文は中央揃え・行間広めで詩のように改行
• キャッチの一部の漢字だけ大きくして緩急をつける
• 太字は役職ラベルなど小さい文字に限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スタッフ・キャスト一覧のみ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 110px、基本単位 8px、カード内 30px（375px 幅換算）
• 余白を大きくとり、1画面に要素を詰め込まない
• 英字見出しは左寄せ、キャッチとストーリーは中央
• スライダーは右端が見切れて次がのぞく
• ニュースは日付＋ラベル＋本文を細線で区切る縦リスト
• 淡色矩形をコンテンツと少しずらして重ねる

Elevation & Depth

• SNSボタンと動画サムネに柔らかく広いドロップシャドウ
• キャラ立ち絵は紙を重ねたような薄い影と青灰の紙片
• 白カードは影なしで地との明度差のみ

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: キービジュアルと動画は角丸なしの矩形。アイコンは正方形
• セクション境界: 直線区切りはなく、淡青の手描き曲線と霞で緩やかにつなぐ
• 矢印ボタンは細い枠線の正円
• カードもボタンも角丸を使わない
• 紙片はわずかに傾けて重ねる

Components

• SNS暗色ボタン（button-sns）: 暗い矩形に白いセリフ英字とアカウント名の小文字、影付き
• 正円矢印ボタン（button-arrow-circle）: 細いグレー枠の円に矢印。前後送り・一覧へ
• 英字セリフ見出し（heading-en）: 大きめのセリフ英字、背後に淡青灰の矩形をずらして配置
• 括弧枠の放送告知（onair-bracket）: 左右に細い角括弧線を置き、中に明朝の日付と放送局
• ニュース行（news-item）: 日付と亀甲括弧の青ラベル、2行本文、下に細線
• 紙片風キャラカード（character-paper）: 白紙に立ち絵、背後に淡青の紙を傾けて重ね、小さな英字メモと破線
• スタッフキャスト白カード（credit-card）: 白い面に太字小ラベルと名前、青い吹き出しアイコン、細線区切り2カラム
• CVバッジ（cv-badge）: 細枠の小さな円にCVの文字、横に声優名

Do's and Don'ts

Do - 余白を大胆に残し、静かに読ませる - 淡青の手描き曲線をセクションをまたいで流す - 英字はセリフ体、日本語は明朝か細めのゴシック - 強調は字の大きさの差と字間で表現する - 背景に薄い水墨の霞を敷く

Don't - 彩度の高い色や大きなグラデーション面を使わない - 角丸やピル型のボタンを使わない - 太い極太ゴシックで叫ぶような見出しにしない - 装飾アイコンやバッジを多用しない - セクションを濃い色帯で区切らない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（作品の世界観を一目で伝える）: 上部に字間広い明朝タイトル、下に縦長キービジュアル、ビジュアル切替チェックボックス
2. 放送告知（放送日と放送局を知らせる）: 左右の角括弧線で囲んだ中央揃えの明朝テキスト
3. SNS導線（公式アカウントへの誘導）: 暗色矩形ボタンを縦に2つ
4. 動画（PV視聴）: 英字見出し、見切れスライダー、再生円アイコン、ドットと矢印ボタン
5. お知らせ（最新情報）: 日付・青ラベル・本文の縦リストと一覧への矢印
6. イントロダクション（物語の導入）: 大きな明朝キャッチと手描き下線、中央揃えの行間広い本文
7. キャラクター（登場人物紹介）: 正方形アイコン一覧、紙片風立ち絵、ふりがな・名前・CV・説明、矢印
8. スタッフ・キャスト（制作陣と声優のクレジット）: 白カード内に2カラムの役職と名前、コメント吹き出しアイコン
9. フッター（サイト内ナビと関連サイト）: 大きなタイトル、セリフ英字ナビ、筆記体見出しと円形SNS、関連バナー、コピーライト

Imagery

• 淡い色調・柔らかな線の手描きアニメ風イラスト
• 背景は灰色の水墨・雲のにじみを全面に薄く
• キャラ立ち絵は下部を白へフェードさせ紙に描いたように
• アイコンは青灰の地に胸から上のバストアップ
• 細い水色の曲線を1〜2本、手描き風に流す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はタイトルを縦書きにしてキービジュアル左に配置
• PC ではSNSボタンを横並び
• PC のキャラクターはテキスト左・紙片立ち絵右の2カラム
• PC のスタッフ・キャストは左に見出し、右に役職と名前の横並び表
• PC の右端に縦書きの英字作品名とハンバーガーメニュー

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 行書くと起動時に読み込まれる。