---
version: alpha
name: Playful Kraft Paper Factory Tour LP
description: 生成りのクラフト紙のような地に、太い黒線で描いたゆるいキャラクターと黄色のピル型ボタンを合わせた、親しみやすい企業の工場見学サイト。記事カードは白地に黒の太枠と角丸。緑・水色のベタ面セクションで情報を区切っている。
colors:
  background: '#F3EADD'
  primary: '#FCDA4C'
  cta: '#FBDA4D'
  on-cta: '#262D2C'
  surface: '#FFFFFF'
  text: '#262D2C'
  text-muted: '#BCBCBC'
  secondary: '#74BC5A'
  accent-1: '#A5DFEA'
  accent-2: '#59AC69'
  accent-3: '#921C53'
  tint-1: '#A4DDE3'
  background-alt: '#ECF4F7'
  marker: '#F09A1E'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.06em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.06em
  accent:
    fontFamily: Montserrat
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 46px
  button-map-banner:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  article-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.lg}'
    height: 440px
  tag-label:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 28px
  badge-new:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 24px
  section-title-en:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 80px
  category-pill:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.surface}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 24px
  marquee-band:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.tint-1}'
    typography: '{typography.accent}'
    height: 90px
  circle-link:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 110px
---

# DESIGN.md — クラフト紙×黄色ボタンの工場見学ポップ LP（Playful Kraft Paper Factory Tour LP）

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

## Overview

- **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい
- **キーワード**: クラフト紙・太い黒線・ゆるキャラ・黄色ピルボタン・ベタ面の色ブロック・雲形の写真
- **地の質感**: 生成りの紙の繊維が見えるざらっとした質感の地。その上にフラットなベタ塗りのイラストを乗せる。
- **形**: 黒の太枠付きの角丸カード。ボタンはピル型でオフセットの影が付く。写真は雲形・不定形に切り抜く。
- **温度感**: 暖かく陽気。生成りと黄色を土台に、緑と水色で爽やかさを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F3EADD` | クラフト紙調の地 | 30% | 画素の実測 |
| `primary` | `#FCDA4C` | ボタン・見出し文字の黄色 | 4% | 画素の実測 |
| `cta` | `#FBDA4D` | 主ボタンの面 | 2% | 画素の実測 |
| `on-cta` | `#262D2C` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | 記事カードの白 | 25% | 画素の実測 |
| `text` | `#262D2C` | 見出し・本文・枠線の黒 | 5% | 画素の主要色に補正 |
| `text-muted` | `#BCBCBC` | 日付・所在地のグレー | 0% | 画素の実測 |
| `secondary` | `#74BC5A` | お知らせセクションの緑の面 | 8% | 画素の実測 |
| `accent-1` | `#A5DFEA` | 工場一覧・導線セクションの水色の面 | 9% | 画素の実測 |
| `accent-2` | `#59AC69` | 地図・ラベルの濃緑 | 2% | 画素の実測 |
| `accent-3` | `#921C53` | カテゴリラベル（ワイン） | 0% | 画素の実測 |
| `tint-1` | `#A4DDE3` | 流れる英字帯の淡い水色 | 1% | 画素の実測 |
| `background-alt` | `#ECF4F7` | フッターのリンク群の地 | 3% | 画素の実測 |
| `marker` | `#F09A1E` | NEW・新着バッジのオレンジ | 0% | 推定 |

- ページの土台はクラフト紙調の生成り。コンテンツは白いカードに乗せる。
- ボタンは黄色の面＋黒の文字＋黒い丸の矢印で統一する。
- セクションの切り替えは緑・水色のベタ面で行う。グラデーションは使わない。
- 英字の大見出しは黄色の文字に黒のフチを付ける。
- カテゴリごとに色を分けたピル型ラベルを使う（黄土・茶・ワイン・水色）。
- 線と文字はほぼ黒の一色で太めに引く。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風の大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.1 | 0.02em |
| `headline-lg` | セクションの英字見出し（黄色文字＋黒フチ） | 欧文サンセリフ | Montserrat | 800 | 40px | 1.0 | 0.02em |
| `headline-sm` | 英字見出しの下に添える和文の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.03em |
| `body-lg` | リード文・カードのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.9 | 0.06em |
| `body-md` | お知らせ・工場一覧の本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.04em |
| `note` | 日付・所在地・注釈 | 欧文サンセリフ | Noto Sans JP | 400 | 11px | 1.5 | 0.02em |
| `label-button` | ボタンとタグの文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.2 | 0.06em |
| `accent` | 横に流れる英字の帯 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.0 | 0.05em |

- 和文は太めのゴシック。字間を少し空けて、やわらかく見せる。
- セクション見出しは、大きな英字に小さな和文を添える 2 段構成。
- 英字見出しには黒のフチ（2〜3px）を付けてステッカー風にする。
- 日付・所在地はグレーの小さい文字で控えめにする。
- リード文は中央揃えで 3 行程度にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。工場一覧だけ 2 カラムのリスト。
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 記事カードは縦に積み、カード同士の間を約 32px 空ける。
- カードの中は写真→タイトル→日付→右寄せの「読む」リンク→タグの順。
- お知らせは日付列と本文列の 2 列で並べる。
- セクションの末尾に中央寄せのピル型ボタンを置く。
- セクションの隅にキャラクターや設備のイラストを配置する。

## Elevation & Depth

- ぼかしの影は使わない。黒い面をずらしたオフセット影（右下 3〜4px）を付ける。
- カードには影を付けず、黒の 2px 枠で浮かせる。
- 丸いバッジやボタンにもオフセット影を付ける。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: FV の写真は雲形・不定形に切り抜く。カード内の写真は角のない長方形。工場の写真は小さな長方形。
- **セクション境界**: 直線で色を切り替える。境界に黒の細線を入れる場合もある。
- カードは角丸 16px＋黒の 2px 枠。
- ボタンはピル型＋黒枠＋オフセット影。
- タグは荷札型の線アイコン＋文字で、背景は付けない。
- カテゴリラベルは色付きのピル型。

## Components

- **黄色ピルボタン**（`button-primary`）: 黄色の面に黒枠とオフセット影。右端に黒丸の矢印を付ける。
- **丸サムネ付き導線バナー**（`button-map-banner`）: 左に丸い地図のサムネイル、上にNEWバッジを重ねた横長のピル型ボタン。
- **記事カード**（`article-card`）: 白地に黒の太枠の角丸カード。写真・タイトル・日付・読むリンク・タグを入れる。
- **荷札タグ**（`tag-label`）: 荷札の線アイコンと太字のカテゴリ名。カード下部に横並びにする。
- **NEWバッジ**（`badge-new`）: オレンジ地に黒枠の小さなピル型、または円形のバッジ。
- **英字見出し**（`section-title-en`）: 黄色文字に黒フチの大きな英字。下に和文の小見出しを添える。
- **カテゴリラベル**（`category-pill`）: カテゴリごとに色を変えたピル型のラベル。白抜きの文字。
- **流れる英字帯**（`marquee-band`）: 白地に淡い水色の英字を点で区切って横に連続させる帯。
- **丸型リンク**（`circle-link`）: 黄色い円に黒枠を付け、中に短い見出しと矢印を入れる。横にキャラクターを添える。

## Do's and Don'ts

**Do**
- 地はクラフト紙の質感にし、白カードとの対比をはっきりさせる。
- ボタン・カード・イラストの線は同じ太さの黒で揃える。
- 影はすべてずらしたベタのオフセット影にする。
- キャラクターのイラストを各セクションの端に配置する。
- セクションは緑・水色のベタ面で区切る。

**Don't**
- ぼかしの影やグラデーションを使わない。
- 細い明朝体や高級感のある書体を使わない。
- 黄色以外の色をボタンに使わない。
- 写真を角丸カードの外にそのまま大きく置かない。
- 線を細いグレーにしない。

## Page Structure

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

1. **ヘッダー**（ブランドの表示とメニュー）: 白地にロゴを左、ハンバーガーメニューを右に置く。黄色い丸のメニューボタンを固定表示する。
2. **ファーストビュー**（サイトの世界観を伝え、主な導線へ誘導する）: 雲形の写真とイラストを散らし、中央にロゴ風の見出しと 3 行のリードを置く。その下に歩くキャラクター、黄色ボタン 2 つ。
3. **記事一覧**（読みもの記事で興味を引く）: 白い太枠カードを縦に積む。末尾に一覧ページへのボタン。
4. **お知らせ**（イベントなどの最新情報を伝える）: 緑のベタ面に英字見出しを置き、日付と本文の 2 列で並べる。末尾にボタンと設備のイラスト。
5. **英字帯**（区切りとリズムをつける）: 白地に淡い水色の英字を横に流す。
6. **拠点の案内**（見学できる場所を一覧で示す）: 水色の面に日本地図とピンを置く。その下に色分けしたカテゴリ別の 2 カラムリスト。
7. **サブ導線**（マップやQ&Aへ誘導する）: 水色の面に、丸サムネ付きのバナーと丸型リンク。
8. **メルマガ登録**（継続的な接点をつくる）: 紙の質感の枠の中にキャラクター、白い吹き出しの説明文、黄色ボタン、注釈を入れる。
9. **フッター**（関連サイトへの導線）: アコーディオンのメニューと、淡い水色の地に白いバナーのグリッドを並べる。

## Imagery

- キャラクターは太い黒線＋フラットなベタ塗り。もじゃもじゃ頭の人物が旅姿で歩く、ゆるい作風。
- 写真は明るい屋内での見学風景。笑顔の人物を雲形に切り抜く。
- 記事サムネイルは写真の上に黒フチの太いテロップを重ね、キャラクターを合成する。
- 芝生の緑の丘、樽・蒸留器などの設備を小さなイラストとして散らす。
- 地図は単色ベタ塗り。しずく型のピンをカテゴリの色で置く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はファーストビューを横長にし、イラストを左右に広げて見出しを中央に置く。
- PC の記事カードは 3 カラムのグリッド。
- PC のお知らせは、左に見出し、右に一覧の 2 カラム。
- 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-c97a3c75`（元 LP の URL から採番）
- **元 LP**: https://www.suntory.co.jp/new/factory/?ke=ft
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。