---
version: alpha
name: Sketchbook Desk Anime Showcase LP
description: 方眼紙のような淡いグレーの地に、鉛筆・クリップ・原画用紙などの文房具を散らした「制作机」の世界観。明朝体の語りかける本文と、手書き風の多色ロゴで、企業が手がけたアニメ作品を新しい順に番号付きで紹介する。作品タイトルにはマーカー線、日付には淡いオレンジのラベル、リンクには蛍光イエローの帯を使い、文房具らしいアクセントを加えている。
colors:
  background: '#F2F3F5'
  primary: '#3A3A3A'
  text-body: '#4A4A4A'
  text-muted: '#969799'
  marker: '#FDFE0C'
  accent-1: '#F4C9CE'
  accent-2: '#BCEBFB'
  tint-1: '#FDECD2'
  secondary: '#D9333F'
  line: '#B5B5B5'
  surface: '#FFFFFF'
  dark-section: '#818181'
  text: '#252527'
typography:
  display:
    fontFamily: Yomogi
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Shippori Mincho
    fontSize: 16px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  accent:
    fontFamily: Roboto Slab
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.02em
  label-button:
    fontFamily: Roboto Slab
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hand-logo:
    typography: '{typography.display}'
    height: 150px
  work-number:
    textColor: '{colors.text-muted}'
    typography: '{typography.accent}'
    height: 40px
  title-marker:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 36px
  date-badge:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 16px
  open-badge:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 30px
  special-site-button:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 60px
  credit-table:
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 110px
  link-banner:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 220px
---

# DESIGN.md — 方眼紙と文房具の企業発アニメ紹介 LP（Sketchbook Desk Anime Showcase LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、シンプル・ミニマル、信頼・誠実
- **キーワード**: 方眼紙・文房具・原画・手書きロゴ・マーカー・明朝体の語り
- **地の質感**: うっすら格子が入った紙の地。文房具の写真に影を付け、机の上に置いたように見せる
- **形**: 角丸なしの四角。破線や細い線をトンボ・枠線のように使う
- **温度感**: やや冷たいニュートラルグレーに、柔らかい暖色を差して少しだけ温かく見せる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F2F3F5` | 方眼紙の地 | 60% | 画素の実測 |
| `primary` | `#3A3A3A` | 見出しと本文に使う墨色 | 4% | 推定 |
| `text-body` | `#4A4A4A` | 作品あらすじの小さな本文 | 3% | 推定 |
| `text-muted` | `#969799` | 大きな番号と欧文見出しのグレー | 1% | 画素の実測 |
| `marker` | `#FDFE0C` | リンクと日付を強調する蛍光イエロー | 0% | 画素の実測 |
| `accent-1` | `#F4C9CE` | タイトル下のピンクのマーカー線 | 0% | 画素の実測 |
| `accent-2` | `#BCEBFB` | タイトル下の水色のマーカー線 | 0% | 画素の実測 |
| `tint-1` | `#FDECD2` | 公開日を載せる淡いオレンジのラベル | 0% | 画素の実測 |
| `secondary` | `#D9333F` | リンク見出し左の縦線に使う赤 | 0% | 推定 |
| `line` | `#B5B5B5` | 破線の枠とトンボ線 | 0% | 推定 |
| `surface` | `#FFFFFF` | フッターの白い面 | 4% | 画素の実測 |
| `dark-section` | `#818181` | ページトップへ戻るグレーの帯 | 1% | 画素の実測 |
| `text` | `#252527` | SNS アイコンとリンクラベルの黒 | 0% | 画素の実測 |

- 地の色は方眼紙グレー 1 色に統一し、セクションごとに色を切り替えない
- 文字は墨色とグレーだけにして、彩りは作品画像と文房具の写真にまかせる
- 作品タイトルの下には、作品ごとにピンクや水色など色を変えた半透明のマーカー線を引く
- 蛍光イエローは公開日バッジとリンクボタンの文字の背景だけに使う
- 赤はリンク見出しの縦線だけに少量使う
- フッターだけを白い面にして、本文エリアと分ける

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 手書き風の多色ロゴ | 手書き・筆 | Yomogi | 400 | 56px | 1.2 | 0.02em |
| `headline-lg` | 冒頭のリード見出し | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.05em |
| `headline-md` | 作品タイトル | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.5 | 0.02em |
| `body-lg` | 語りかけるイントロ本文 | 明朝 | Shippori Mincho | 400 | 16px | 2.0 | 0.04em |
| `body-md` | あらすじとクレジット | ゴシック | Noto Sans JP | 400 | 9px | 1.8 | 0.02em |
| `accent` | 作品番号と欧文のセクション見出し | 欧文セリフ | Roboto Slab | 700 | 36px | 1.0 | 0.02em |
| `label-button` | リンクボタンの欧文テキスト | 欧文セリフ | Roboto Slab | 700 | 15px | 1.2 | 0.0em |
| `note` | 公開日ラベルとリンクの小見出し | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.05em |

- イントロは明朝体で、1 行を短く改行して詩のように読ませる
- 作品情報は小さなゴシック体で、資料のように淡々と並べる
- 作品番号は「03.」の形にした大きな欧文セリフで、グレーにしてすかし気味に見せる
- 欧文見出しはスラブセリフのグレーにして、タイプライターの印字のように見せる
- 手書きロゴは文字ごとに色を変えた多色にする
- 太字は使いすぎず、ウェイトの差は控えめにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。クレジットは役名と名前の 2 列表
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 作品ブロックは「番号→キービジュアル→タイトル→日付→あらすじ→場面写真→クレジット→リンク」の順に固定する
- 場面写真は SP で 2 枚を横に並べる
- 作品ブロックの左と下に細い破線を引き、トンボのように区切る
- 文房具の写真は画面の端からはみ出させ、本文の横に重ねる
- リンク集は見出しとバナーの組をくり返す
- 余白は広めにとり、詰め込まない

## Elevation & Depth

- 文房具と原画用紙の写真には、柔らかいドロップシャドウを付けて机に置いたように見せる
- 作品画像やカードには影を付けず、平らに置く
- バナーは 1px の黒い細枠で囲む

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形。キービジュアルは 16:9、場面写真は 4:3 前後
- **セクション境界**: 直線の境界。破線とトンボ線で区切る
- 角丸は一切使わない
- リンクボタンは斜線ハッチングの入った長方形を破線で囲む
- マーカー線は文字の下半分にかかるように、少し斜めにかすれさせる

## Components

- **多色手書きロゴ**（`hand-logo`）: 1 文字ずつ色を変えたペン書き風のタイトル。2 行で組む
- **作品番号**（`work-number`）: グレーの大きなスラブセリフで「03.」のように書き、横に破線を伸ばす
- **マーカー付き作品タイトル**（`title-marker`）: タイトル文字の下に、半透明のピンクや水色の帯を引く
- **公開日ラベル**（`date-badge`）: 淡いオレンジの小さな帯に公開日を書く
- **公開告知バッジ**（`open-badge`）: 最新作の右上に置く。蛍光イエローの帯に、日付と OPEN の文字を載せる
- **特設サイトボタン**（`special-site-button`）: 斜線ハッチングの長方形を破線とトンボで囲み、中央の欧文に蛍光イエローの帯を敷く
- **クレジット表**（`credit-table`）: 罫線なしで役名と名前を 2 列に並べる。文字は小さめ
- **リンクバナー**（`link-banner`）: 見出しの左に赤い縦線を付け、その下に黒の細枠で囲んだバナー画像を置く

## Do's and Don'ts

**Do**
- 紙の地と文房具の写真で、制作机の世界観を保つ
- 作品は新しい順に、番号を大きい数から振る
- 作品ブロックの構成は毎回同じにして、そろえて見せる
- イントロは明朝体で、ゆったりと改行する
- 強調には蛍光イエローとマーカー線を使い、手で引いたような質感にする

**Don't**
- 角丸やピル型のボタンを使わない
- 濃いベタ塗りの背景セクションを作らない
- 派手なグラデーションや強い影を付けない
- 本文に色を付けない
- 手書き書体を本文に使わない

## Page Structure

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

1. **ファーストビュー**（企業の想いと企画名を伝える）: 明朝体の 2 行リードを置き、その下に多色の手書きロゴを大きく配置する。周りには原画用紙や鉛筆を散らす
2. **イントロダクション**（企画の背景を語りかける）: 明朝体の本文を短い行で 3 段落に分ける。右端には文房具の写真を重ねる
3. **最新作の紹介**（最新のアニメ作品を告知する）: 番号と蛍光イエローの OPEN バッジを付け、キービジュアル、マーカー付きタイトル、あらすじ、場面写真、クレジット、特設サイトボタンの順に並べる
4. **過去作品の紹介（2 作目）**（シリーズの継続性を見せる）: 最新作と同じ構成で作る。マーカーの色だけを水色に変える
5. **過去作品の紹介（1 作目）**（シリーズの原点を見せる）: 同じ構成で、タイトルが 2 行になる場合もマーカー線を引く
6. **関連リンク**（企業の取り組みへ誘導する）: グレーの欧文見出しを置き、赤い縦線付きの小見出しと細枠バナーを縦に 4 つ並べる
7. **SNS 案内**（公式アカウントへ誘導する）: 欧文見出しと短い説明の下に、丸い SNS アイコンを 3 つ並べる
8. **フッター**（規約などの情報を置く）: 白い面にロゴ、小さなリンク、コピーライトを置き、最下部にグレーのトップへ戻る帯を付ける

## Imagery

- 文房具（鉛筆、色鉛筆、クリップ、消しゴム、定規、鉛筆削り）を真上から撮った切り抜き写真に、柔らかい影を付ける
- 鉛筆で描いたラフ原画の用紙を斜めに置き、画面の端から少しのぞかせる
- 作品画像は明るく透明感のあるアニメ調のキービジュアルと場面カットにする
- 背景には淡い方眼のテクスチャを全面に敷く
- リンクバナーは企業らしい写真やフラットなイラストにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では本文を中央の約 55% 幅に収め、左右の余白に文房具を大きく散らす
- PC では作品番号を縦書きにして、ブロックの左に大きく置く
- PC では場面写真を 4 枚横に並べる
- PC ではクレジットと特設サイトボタンを左右に並べる
- PC ではリンクバナーを 4 列の横並びにする
- 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-aa29cf6f`（元 LP の URL から採番）
- **元 LP**: https://www.kyocera.co.jp/animation/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。