--- version: alpha name: Quiet Watercolor Mist Anime Title LP description: 墨絵のような霞がかった灰白の地に、細い明朝とセリフ欧文を静かに置いた、文芸作品らしいアニメ公式サイト。淡い青の手描き曲線と紙片風のキャラ立ち絵で余白と情緒を演出する。 colors: background: '#F8F8F8' surface: '#FFFFFF' background-alt: '#E9EDF0' primary: '#3E4A55' text: '#231F1E' cta: '#22262A' on-cta: '#F3FAFB' accent-1: '#2E86B5' accent-2: '#B1E3F4' line: '#E9ECED' text-muted: '#C3C3C3' tint-1: '#9AA8B4' typography: display: fontFamily: Shippori Mincho fontSize: 52px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.3em headline-lg: fontFamily: Marcellus fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.04em headline-md: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Dancing Script fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Marcellus fontSize: 18px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.06em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 30px section: 110px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-sns: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 64px button-arrow-circle: textColor: '{colors.text}' rounded: '{rounded.full}' height: 44px heading-en: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px onair-bracket: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 130px news-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 125px character-paper: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 520px credit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1600px cv-badge: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px --- # DESIGN.md — 霞む灰白と淡青線の文芸アニメ公式 LP（Quiet Watercolor Mist Anime Title LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 上品・高級、シンプル・ミニマル、やさしい・柔らかい - **キーワード**: 余白・霞・細い明朝・淡青の曲線・紙片・静けさ - **地の質感**: 灰色の水墨・雲のようなにじみテクスチャを背景に薄く敷く - **形**: 角ばった矩形が基本。ボタンは正円の矢印ボタンと四角い暗色ボタン - **温度感**: やや寒色寄りのニュートラル。冷たすぎない灰白 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F8F8F8` | ページ全体の霞んだ灰白地 | 45% | 画素の実測 | | `surface` | `#FFFFFF` | スタッフ・キャストの白カード | 21% | 画素の実測 | | `background-alt` | `#E9EDF0` | 見出し背後などの淡い青灰ブロック | 5% | 画素の実測 | | `primary` | `#3E4A55` | 英字見出しの深いスレート色 | 2% | 推定 | | `text` | `#231F1E` | タイトル・本文の墨色 | 4% | 推定 | | `cta` | `#22262A` | SNSボタンの暗色面 | 2% | 推定 | | `on-cta` | `#F3FAFB` | 暗色ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#2E86B5` | カテゴリラベル・ふりがな・現在地リンクの青 | 0% | 推定 | | `accent-2` | `#B1E3F4` | 手描き曲線の淡い水色 | 0% | 画素の主要色に補正 | | `line` | `#E9ECED` | リスト区切りの細線 | 0% | 画素の主要色に補正 | | `text-muted` | `#C3C3C3` | 未公開リンク・コピーライト | 0% | 画素の実測 | | `tint-1` | `#9AA8B4` | キャラアイコンの青灰背景 | 1% | 推定 | - 地は灰白に霞テクスチャ。情報密度の高い一覧だけ白カードに載せる - 見出し英字は濃いスレート〜墨のグラデーション風 - 青はラベル・ふりがな・アイコン・現在地のみに少量 - 淡い水色の細い曲線を区切りの装飾に使う - 暗色はSNSボタンの面のみ。広い暗色セクションは作らない - 淡い青灰の矩形ブロックを見出しの背後にずらして置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 作品タイトルロゴ（字間広め） | 明朝 | Shippori Mincho | 400 | 52px | 1.2 | 0.3em | | `headline-lg` | 英字セクション見出し | 欧文セリフ | Marcellus | 400 | 40px | 1.1 | 0.04em | | `headline-md` | 放送情報・キャッチ | 明朝 | Shippori Mincho | 500 | 28px | 1.4 | 0.05em | | `headline-sm` | キャラクター名 | ゴシック | Zen Kaku Gothic New | 400 | 30px | 1.3 | 0.05em | | `body-md` | ストーリー本文・ニュース | ゴシック | Zen Kaku Gothic New | 400 | 14px | 2.2 | 0.1em | | `note` | 役職ラベル・日付・注記 | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.05em | | `accent` | フッターの筆記体英字 | 欧文スクリプト | Dancing Script | 400 | 30px | 1.2 | 0.02em | | `label-button` | ボタン・ナビの英字 | 欧文セリフ | Marcellus | 400 | 18px | 1.3 | 0.06em | - 見出しは英字セリフ、日本語は明朝と細めゴシックの組み合わせ - タイトルは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 ```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-3d41c91c`（元 LP の URL から採番） - **元 LP**: https://ikoku-anime.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。