---
version: alpha
name: Torn-Paper Editorial Art Festival LP
description: 白地を基本に、藍・深緑・土色の面をちぎった紙のような輪郭で重ねた国際芸術祭のサイト。縦書きの和文見出しと欧文を並べた二言語表記で、雑誌のような落ち着いた編集デザインに仕上げている。各セクションは左端の縦書きラベルと細い縦線で区切り、横スクロールのカードで情報を見せる。
colors:
  background: '#FFFFFF'
  primary: '#35529E'
  secondary: '#00644A'
  dark-section: '#7B6A56'
  on-dark: '#FFFFFF'
  text: '#161513'
  accent-1: '#35529E'
  surface: '#F5F2E9'
  background-alt: '#F5F2E9'
  accent-2: '#010100'
  line: '#635F61'
  text-muted: '#635F61'
  tint-1: '#E2E3E1'
  primary-accessible: '#5E7CC9'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.2em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
  accent:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  note:
    fontFamily: Noto Sans JP
    fontSize: 6px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 8px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  torn-hero:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 590px
  nav-tabs:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 22px
  info-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 370px
  section-label:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 120px
  news-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 190px
  category-tag:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 14px
  button-pill:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 16px
  work-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 150px
  logo-wall:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 100px
  footer-sitemap:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 520px
---

# DESIGN.md — 藍・深緑・土色のちぎり紙アート祭 LP（Torn-Paper Editorial Art Festival LP）

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

## Overview

- **業種**: 自治体・公共・団体 ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的、ナチュラル
- **キーワード**: ちぎり紙の輪郭・縦書き見出し・和英併記・エディトリアル・細い罫線・横スクロールカード
- **地の質感**: マットな単色面。境界は手でちぎった紙のようなギザギザ。影や光沢はない。
- **形**: 四角いカードと細い罫線が基本。ボタンだけを小さなピル型にする。
- **温度感**: やや涼しめで知的。土色が温かさを少し足している。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFFF` | ページの地色 | 60% | 画素の主要色に補正 |
| `primary` | `#35529E` | 藍色。FV の面・フッター・ラベル | 7% | 画素の実測 |
| `secondary` | `#00644A` | 深緑。FV のちぎり面・グッズ帯 | 3% | 画素の実測 |
| `dark-section` | `#7B6A56` | 土色。開催概要の帯 | 6% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 色面の上の文字 | 1% | 画素の主要色に補正 |
| `text` | `#161513` | 見出しと本文の文字色 | 3% | 画素の実測 |
| `accent-1` | `#35529E` | コンセプト本文の藍色文字 | 0% | 画素の主要色に補正 |
| `surface` | `#F5F2E9` | 作品カードの生成り面 | 3% | 画素の実測 |
| `background-alt` | `#F5F2E9` | ヘッダーとグッズ帯の生成り | 3% | 画素の実測 |
| `accent-2` | `#010100` | 黒いバナー面 | 3% | 画素の実測 |
| `line` | `#635F61` | セクションの縦線・カードの枠 | 0% | 画素の主要色に補正 |
| `text-muted` | `#635F61` | 注釈・ロゴの下のキャプション | 0% | 画素の主要色に補正 |
| `tint-1` | `#E2E3E1` | ナビボタンの淡いグレー | 0% | 画素の実測 |
| `primary-accessible` | `#5E7CC9` | AA を満たす補正値（計算） |  | 計算 |

- 地は白。藍・深緑・土色の 3 色を、ちぎり紙の面として大きく使う。
- 藍はブランドの色。FV・フッター・カードのラベルに使う。
- 土色の帯は開催概要などの重要な情報だけに使い、文字は白にする。
- 深緑はセクションの境目にちぎり帯として入れる。
- コンセプトの本文は藍色の文字にして、他の本文（黒）と分ける。
- 彩度の高い強調色は使わない。CTA も白地に黒い枠線で控えめにする。
- `torn-hero` は文字 `#161513` × 背景 `#35529E` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#5E7CC9`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の大きなタイトル（和文と欧文） | ゴシック | Zen Kaku Gothic New | 500 | 44px | 1.5 | 0.2em |
| `headline-lg` | コンセプトの縦書き見出し | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.4 | 0.15em |
| `headline-md` | 開催概要のキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.5 | 0.05em |
| `headline-sm` | セクション名の縦書きラベル（和英併記） | ゴシック | Zen Kaku Gothic New | 400 | 10px | 1.3 | 0.1em |
| `body-md` | カード内の見出しと本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em |
| `accent` | 欧文の訳と日付 | 欧文サンセリフ | Inter | 400 | 10px | 1.5 | 0em |
| `note` | 注釈とロゴのキャプション | ゴシック | Noto Sans JP | 400 | 6px | 1.5 | 0.02em |
| `label-button` | ピル型ボタンとカードのラベル | ゴシック | Noto Sans JP | 400 | 8px | 1.2 | 0.05em |

- 和文のすぐ後に欧文の訳を小さく添えて、必ず二言語で書く。
- セクションのラベルとコンセプトの見出しは縦書きにする。
- 太字はほとんど使わない。weight は 400〜500 にとどめる。
- FV のタイトルは字間を大きく取って、格子に置くように並べる。
- 本文は小さめ（10px 前後）で、行間をゆったり取る。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は左に約 70px の縦ラベル列、右に本文列の 2 列構成。カードは横スクロール
- **本文ブロックの幅**: 画面幅の約 80%
- **余白**: セクション間 56px、基本単位 8px、カード内 8px（375px 幅換算）
- 各セクションの左端に縦書きのラベルと縦線を置く。
- カードは 1 枚約 120px 幅で横に並べ、右端は見切れさせる。
- カード列の下に、中央のピル型ボタンと右端の矢印を置く。
- 支援企業のロゴは 1 列に大きく並べ、下に小さく社名を入れる。
- ランクが下がるとロゴを 2 列にして小さくする。

## Elevation & Depth

- 影は使わない。
- 奥行きはちぎり紙の面を重ねることで出す。
- カードは細い罫線で囲み、平らに見せる。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 四角に切り抜き、角丸にしない。人物は 1:1、作品は 4:3。
- **セクション境界**: ちぎり紙のようなギザギザの輪郭で色面を切り替える。
- 色面の境界は直線にせず、不規則なちぎり紙の輪郭にする。
- カードと画像の角は直角にする。
- ボタンは細い黒の枠線だけのピル型にする。
- ヘッダーのナビは角丸のタブを 4 つ並べる。

## Components

- **ちぎり紙の FV**（`torn-hero`）: 藍・白・深緑の面をちぎった輪郭で重ね、和英のタイトルと縦書きの会期を置く。
- **ナビタブ**（`nav-tabs`）: 和英併記の角丸タブを 4 つ横に並べる。
- **開催概要の帯**（`info-band`）: 土色の面に白文字。項目名と値を縦線に沿って並べる。
- **縦書きのセクションラベル**（`section-label`）: 左端に和文と欧文を縦書きで並べ、細い縦線を添える。
- **記事カード**（`news-card`）: 黒い細枠の中に画像・日付・和文の見出し・英訳を入れる。右上に藍色のラベルを付ける。
- **カテゴリラベル**（`category-tag`）: 画像の右上に重ねる帯状のラベル。色はカテゴリごとに藍・深緑・土色を使い分ける。
- **ピル型の詳細ボタン**（`button-pill`）: 白地に黒い細枠。和英併記で、右端に細い矢印を添える。
- **作品・作家カード**（`work-card`）: 写真の下に生成りの面を敷き、作品名と作家名を和英で入れる。
- **協賛ロゴの一覧**（`logo-wall`）: ランク名を見出しにして、ロゴと小さな社名を中央にそろえて並べる。
- **藍色のサイトマップ**（`footer-sitemap`）: 藍の面にロゴと、和英併記のリンクを階層付きで並べる。

## Do's and Don'ts

**Do**
- 見出し・ボタン・ラベルは必ず和文と欧文を並べて書く。
- 色面の境界はちぎり紙の輪郭にする。
- 左端の縦ラベルと縦線で、すべてのセクションの位置をそろえる。
- 白い余白をたっぷり取り、雑誌のように見せる。
- CTA は細い枠線のピル型にして控えめに置く。

**Don't**
- グラデーション・影・光沢は使わない。
- 赤やオレンジなどの派手なボタン色は使わない。
- 太いゴシックで強く訴える見出しにしない。
- 色面の境界を直線や波線にしない。
- カードを角丸にしない。

## Page Structure

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

1. **ヘッダー**（ブランドと主要な導線を見せる）: 生成りの地に土色のちぎり帯。左にタイトル、右にハンバーガー。下にナビタブを 4 つ並べる。
2. **ファーストビュー**（イベント名と会期を印象づける）: 藍・白・深緑のちぎり紙の面の上に、大きな和英タイトルと縦書きの会期を置く。
3. **お知らせバー**（開館状況など最新情報を伝える）: 罫線で区切った 2 段に、和文と英文を 1 行ずつ入れる。閉じるボタンを付ける。
4. **開催概要**（会期・時間・休館日を伝える）: 土色の帯に白文字。項目名と値を縦線に沿って並べ、注釈を小さく添える。
5. **コンセプト**（イベントの考え方を伝える）: 全幅の写真のあとに、番号の丸・縦書きの見出し・藍色の本文を置く。
6. **バナー**（特集や関連の企画へ誘導する）: 黒や藍の面のバナーを横に並べる。
7. **ニュース**（最新記事を見せる）: 枠線のカードを横スクロールで並べ、一覧ボタンを置く。
8. **作品・作家**（作品と作家を紹介する）: 上を土色のちぎり帯で区切る。写真と生成りのカードを並べる。
9. **建築・イベント・まち歩き**（見どころとプログラムを紹介する）: 同じ形のカードを横に並べ、カテゴリラベルの色で種類を分ける。
10. **応援メッセージ**（支援者の言葉で信頼を伝える）: 人物写真と、和英の引用を入れたカード。
11. **オフィシャルグッズ**（グッズの購入へ誘導する）: 深緑のちぎり帯を区切りにして、生成りの地に商品のカードを並べ、価格を藍色の文字で入れる。
12. **SNS**（SNS へ誘導する）: 3 列の写真グリッドに SNS のアイコンを添える。
13. **協賛・パートナー**（支援企業を紹介する）: ランクごとにロゴを並べ、上のランクほど大きく、下のランクは 2 列で小さくする。
14. **フッター**（サイト全体のリンクを見せる）: 藍の面に白文字のロゴとサイトマップ、最下部に白地のコピーライト。

## Imagery

- 写真は自然光で撮った建築・展示空間・人物。彩度はやや低めにする。
- 人物は無地や植物の背景で、落ち着いた表情にする。
- 装飾は単色の面をちぎった紙のような形にする。藍・深緑・土色のみを使う。
- アイコンは細い線の矢印やカレンダーなど、最低限にとどめる。
- イラストやキャラクターは使わない。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも左に縦ラベル、右にコンテンツを置く構成を保つ。
- PC ではヘッダーのナビボタンを右上にまとめる。
- PC の開催概要は 2 列に分ける。
- PC のコンセプトは写真の上に半透明のパネルで本文を重ねる。
- PC の協賛ロゴは 3〜5 列のグリッドにする。
- 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-4c6a0280`（元 LP の URL から採番）
- **元 LP**: https://maebashi-biennale.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-18、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。