---
version: alpha
name: Icy Blue Figure Skating Anime Official Site
description: 白〜淡い氷色の地に雪の結晶と細い弧の線を散らした、透明感のあるアニメ作品公式サイト。全面のキービジュアルの下に、キャラアイコン、動画カルーセル、ニュース、筆記体の英字見出しで区切った各セクションを中央揃えで縦に並べる。文字は青系の単色でそろえ、フッターだけをターコイズで塗る。
colors:
  background: '#FCFDFE'
  surface: '#FDFDFE'
  primary: '#2F7AAB'
  text-body: '#5991B3'
  accent-1: '#A7BCD3'
  accent-2: '#C9A043'
  line: '#8FCBE6'
  dark-section: '#01C2C3'
  on-dark: '#FEFEFE'
  cta: '#026DB3'
  on-cta: '#FEFEFE'
  text-muted: '#5589A9'
  secondary: '#24364F'
  text-body-accessible: '#477B9A'
  dark-section-accessible: '#018384'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  label-button:
    fontFamily: Playfair Display
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 0px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
  heading-script:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 90px
  character-icons:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.full}'
    height: 60px
  video-carousel:
    height: 140px
  news-list:
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 75px
  credit-grid:
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 60px
  cast-badge:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.full}'
    height: 20px
  book-grid:
    backgroundColor: '{colors.surface}'
    height: 180px
  banner-cta:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 190px
  footer-turquoise:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 180px
---

# DESIGN.md — 氷と雪の結晶の水色アニメ公式サイト（Icy Blue Figure Skating Anime Official Site）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 清潔・爽やか、上品・高級、やさしい・柔らかい
- **キーワード**: 氷・雪の結晶・透明感・筆記体見出し・中央揃え・水色グラデーション
- **地の質感**: 白地に薄い氷のテクスチャとスケートの軌跡のような細い曲線を重ねる。
- **形**: 円形のアイコン、角丸なしの細い枠、雪の結晶のマーク。
- **温度感**: 寒色で冷たいが柔らかい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FCFDFE` | ページ地（氷の白） | 62% | 画素の実測 |
| `surface` | `#FDFDFE` | 純白の面 | 10% | 画素の実測 |
| `primary` | `#2F7AAB` | ブランドの青（人名・本文） | 3% | 画素の実測 |
| `text-body` | `#5991B3` | あらすじ本文の明るい青 | 2% | 画素の実測 |
| `accent-1` | `#A7BCD3` | 英字見出しの水色グラデーション | 1% | 画素の実測 |
| `accent-2` | `#C9A043` | ニュースの日付の金色 | 0% | 推定 |
| `line` | `#8FCBE6` | ニュースの区切り線（金色から水色へ） | 0% | 推定 |
| `dark-section` | `#01C2C3` | フッターのターコイズ | 4% | 画素の実測 |
| `on-dark` | `#FEFEFE` | フッター上の白文字 | 0% | 画素の主要色に補正 |
| `cta` | `#026DB3` | 試し読みバナーの青い帯 | 0% | 画素の実測 |
| `on-cta` | `#FEFEFE` | 帯の上の白文字 | 0% | 画素の主要色に補正 |
| `text-muted` | `#5589A9` | 役職名の淡い青 | 0% | 画素の実測 |
| `secondary` | `#24364F` | FVの夜空の濃紺 | 3% | 画素の主要色に補正 |
| `text-body-accessible` | `#477B9A` | AA を満たす補正値（計算） |  | 計算 |
| `dark-section-accessible` | `#018384` | AA を満たす補正値（計算） |  | 計算 |

- 地はほぼ白の氷色で統一し、濃い色の面はフッターだけにする。
- 文字はすべて青系の単色。黒文字は使わない。
- 英字見出しは水色から白へのグラデーションにする。
- 金色はニュースの日付と区切り線の始まりだけに使う。
- 濃色はキービジュアルの夜空に任せ、UIでは使わない。
- `page` は文字 `#5991B3` × 背景 `#FCFDFE` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#477B9A`、4.51:1）を使う。
- `footer-turquoise` は文字 `#FEFEFE` × 背景 `#01C2C3` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#018384`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの英字見出し | 欧文スクリプト | Playfair Display | 400 | 40px | 1.2 | 0.02em |
| `headline-md` | 人名・作品名の強調 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.05em |
| `headline-sm` | 役職名・キャラ名のラベル | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.4 | 0.05em |
| `body-md` | あらすじ・ニュース本文 | ゴシック | Zen Kaku Gothic New | 400 | 14px | 2.0 | 0.08em |
| `note` | 掲載誌名などの補足・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.03em |
| `accent` | ニュースの日付 | 欧文サンセリフ | Montserrat | 400 | 11px | 1.4 | 0.05em |
| `label-button` | MOREリンク・バナー帯の文字 | 欧文セリフ | Playfair Display | 400 | 16px | 1.2 | 0.03em |

- 英字見出しは斜体の筆記体寄りのセリフ体で大きく入れ、真下に雪の結晶を置く。
- 日本語はすべて中央揃え（ニュースだけ左揃え）。
- 本文は行間2.0と広めの字間で、透明感を出す。
- 役職とその名前は小さい細字と太字の2段にする。
- 太すぎる書体や影付きの文字は使わない（ロゴは除く）。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。スタッフ・キャストは 2 カラム、単行本は 3 カラムのグリッド
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 90px、基本単位 8px、カード内 12px（375px 幅換算）
- 全セクションを中央軸にそろえる。
- スタッフとキャストは2列の均等グリッドで、行間は約40pxとる。
- ニュースは日付と見出しの2列で、下に区切り線を引く。
- 動画は横にスクロールするカルーセルで、両端の動画を少しはみ出させる。
- セクションの間は広くとり、詰めすぎない。

## Elevation & Depth

- 影はほぼ使わず、平らに仕上げる。
- 円形アイコンには水色の細い外枠と淡いグロウを付ける。
- 書影は細い青枠で囲み、影は付けない。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
- **写真の切り抜き**: キャラは円形のアイコン、動画と書影は角丸なしの長方形
- **セクション境界**: 直線の境界は使わず、余白と英字見出しで区切る。フッターだけ直線で塗りを切り替える
- 角丸は円形アイコン以外に使わない。
- 線はすべて1px前後の細さにする。
- 雪の結晶のアイコンを見出しや人名の脇の飾りに繰り返し使う。
- 背景にフィギュアスケートの軌跡のような大きな弧を薄く引く。

## Components

- **筆記体の英字見出し＋雪の結晶**（`heading-script`）: 水色グラデーションの斜体英字の下に、小さい雪の結晶を中央に置く。
- **キャラクターの円形アイコン列**（`character-icons`）: 直径約55pxの円形アイコンを横一列に並べ、水色の枠を付ける。
- **動画カルーセル**（`video-carousel`）: 中央に再生マーク付きのサムネイル、両端に隣の動画をのぞかせ、下に細い矢印を付ける。
- **ニュース一覧**（`news-list`）: 左に金色の日付、右に青い見出し。下に金色から水色へ変わる区切り線を引き、右下にMOREを置く。
- **スタッフクレジットの2列グリッド**（`credit-grid`）: 上に細字の役職、下に太字の名前を中央揃えで2列に並べる。
- **キャスト名の結晶バッジ**（`cast-badge`）: 声優名の右に、青い雪の結晶形の小さなボイスボタンを付ける。
- **単行本の書影グリッド**（`book-grid`）: 3列の書影を細い青枠で囲んで並べる。
- **試し読みバナー**（`banner-cta`）: イラストのバナーの下端に青い帯を付け、「＞」付きの白文字を入れる。
- **ターコイズのフッター**（`footer-turquoise`）: 一面ターコイズの上に、白いロゴとコピーライト、薄い円弧の線を重ねる。

## Do's and Don'ts

**Do**
- 白地に青文字の組み合わせを守り、余白を広くとる。
- 英字見出しと雪の結晶を全セクションで同じ形で繰り返す。
- クレジットは中央揃えの2列にそろえる。
- 背景に薄い氷のテクスチャと細い弧を入れて、奥行きを出す。
- 強調は太字と色の濃さの差でつける。

**Don't**
- 暖色や原色の大きな面を本文エリアに使わない。
- 角丸のカードや影の強いボタンを置かない。
- 黒い本文文字を使わない。
- 見出しを太いゴシックの日本語にしない。
- 装飾を詰め込み、透明感を損なわない。

## Page Structure

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

1. **ファーストビュー**（作品の世界観と放送情報を一目で伝える）: 全幅のキービジュアル。両脇に縦書きのコピー、下にロゴと放送日。右上にメニューと動画バッジを置く。
2. **キャラクターアイコン**（登場人物の一覧へ誘導する）: 円形アイコンを横一列に並べる。
3. **動画カルーセル**（PVや主題歌の動画を見せる）: 横にスクロールするサムネイルと細い矢印。
4. **ニュース**（最新の情報を知らせる）: 日付と見出しを3件、区切り線付きで並べ、最後にMOREを置く。
5. **イントロダクション**（あらすじを伝える）: 英字見出し＋結晶の下に、青い中央揃えの本文を2段落置く。
6. **スタッフ**（制作陣を紹介する）: 先頭に原作者を1列で置き、続きを2列のクレジットグリッドにする。
7. **キャスト**（声優を紹介する）: キャラ名と声優名の2列。声優名の横に結晶のボイスボタンを付ける。
8. **原作コミックス**（原作の購入を促す）: 中央揃えの書誌情報、3列の書影グリッド、試し読みバナー。
9. **フッター**（ロゴと権利表記を示す）: ターコイズの全幅の帯に白いロゴとコピーライトを入れる。

## Imagery

- メインはアニメ塗りのキャラ集合イラスト。夜空と氷上を背景に、光と紙吹雪を散らす。
- 背景は白い氷面のような淡いざらつきのテクスチャにする。
- 雪の結晶のアイコンは青い線画か塗りで、小さく繰り返し使う。
- スケートの軌跡のような細く長い弧を、虹色か水色で薄く重ねる。
- サムネイルはキャラのアップに、ポップな黄色の見出し文字を重ねる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はキービジュアルを全幅にし、上部に横並びのグローバルナビを置く。
- PC は本文を中央の狭い幅（約50%）にまとめ、左右の余白を広くとる。
- PC は書影を4列にする。
- PC の動画カルーセルは2本が並んで見える幅にする。
- PC でもクレジットは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-7b3f0050`（元 LP の URL から採番）
- **元 LP**: https://medalist-pr.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。