---
version: alpha
name: Kraft Paper Asian Bazaar Goods LP
description: クラフト紙調のベージュ地に、レモンイエローの面と鮮やかな青の欧文見出しを差した、旅の雑誌のような雑貨特集 LP。縦書きの章タイトル枠、ちぎった布のようなコラージュ写真、ピル型の小さな購入ボタンで、手仕事の温かさと異国感を出している。後半は白地の 2 カラム商品一覧になる。
colors:
  background: '#DACBB6'
  primary: '#EEE26C'
  secondary: '#0C9BDD'
  text: '#4F373B'
  background-alt: '#ECECEC'
  surface: '#FFFFFF'
  cta: '#FEFEFD'
  on-cta: '#4F373B'
  accent-1: '#A1907D'
  accent-2: '#5C7FA6'
  dark-section: '#827264'
  marker: '#CDC6B6'
  text-muted: '#777777'
  accent-3: '#D9302C'
  secondary-accessible: '#0A7EB4'
typography:
  display:
    fontFamily: Alfa Slab One
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Cinzel
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.1em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.2
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  label-button:
    fontFamily: Playfair Display
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.1em
  accent:
    fontFamily: Montserrat
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 8px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-buy:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 24px
  chapter-title-vertical:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 160px
  price-label:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.surface}'
    typography: '{typography.body-md}'
    height: 18px
  contents-arch:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 460px
  recipe-block:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 200px
  button-all-items:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.surface}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 36px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 260px
  lead-marker:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 20px
---

# DESIGN.md — クラフト紙×黄×青のアジア雑貨特集 LP（Kraft Paper Asian Bazaar Goods LP）

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

## Overview

- **業種**: 日用品・生活雑貨 ／ **雰囲気**: 親しみ・手作り感、ナチュラル、レトロ、ポップ・元気
- **キーワード**: クラフト紙・旅の雑誌・コラージュ・縦書き・手仕事・異国情緒
- **地の質感**: 紙の繊維が見える細かなノイズ入りのベージュ地。写真は切り抜きやずらし配置で、スクラップブックのような重なりを作る。
- **形**: 角丸の縦長章タイトル枠、ピル型の小ボタン、アーチ型の装飾フレーム、ちぎれたような写真の縁。
- **温度感**: 暖かい。砂色の地に黄と青の差し色で、乾いた陽射しの市場を思わせる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#DACBB6` | クラフト紙調のメイン地 | 30% | 画素の実測 |
| `primary` | `#EEE26C` | 章の差し色に使うレモンイエローの面 | 8% | 画素の実測 |
| `secondary` | `#0C9BDD` | 欧文見出しと価格ラベルの青 | 2% | 画素の実測 |
| `text` | `#4F373B` | 見出し・本文のこげ茶 | 4% | 画素の主要色に補正 |
| `background-alt` | `#ECECEC` | レシピ帯・告知帯の薄グレー | 9% | 画素の実測 |
| `surface` | `#FFFFFF` | 商品一覧の白地・ボタン地 | 23% | 画素の実測 |
| `cta` | `#FEFEFD` | BUY ボタン（白地に茶枠） | 1% | 画素の実測 |
| `on-cta` | `#4F373B` | BUY ボタンの文字・枠 | 0% | 画素の主要色に補正 |
| `accent-1` | `#A1907D` | レシピ番号の淡い数字 | 0% | 画素の実測 |
| `accent-2` | `#5C7FA6` | 線画の花模様・地図線 | 1% | 推定 |
| `dark-section` | `#827264` | ALL ITEMS の茶色い角丸ボタン | 0% | 画素の主要色に補正 |
| `marker` | `#CDC6B6` | リード文の行背景マーカー | 0% | 画素の主要色に補正 |
| `text-muted` | `#777777` | 一覧の補足文・グレー文字 | 1% | 推定 |
| `accent-3` | `#D9302C` | New ラベルの赤 | 0% | 推定 |
| `secondary-accessible` | `#0A7EB4` | AA を満たす補正値（計算） |  | 計算 |

- 地は全面クラフト紙調のベージュにし、白い地は商品一覧のエリアだけで使う。
- 章の始まりはレモンイエローを全幅で敷き、その面の上に青い欧文の大見出しを置く。
- 青は欧文見出し、価格ラベルの帯、強調段落の文字だけに使う。
- 文字は黒ではなくこげ茶にする。枠線と装飾も同じ茶系でそろえる。
- レシピや告知は薄グレーの全幅帯に置き、ベージュの地と区別する。
- 鮮やかな色は写真の布柄に任せ、UI の色数は増やさない。
- `price-label` は文字 `#FFFFFF` × 背景 `#0C9BDD` のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0A7EB4`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 章の欧文大見出し（青やこげ茶） | 欧文セリフ | Alfa Slab One | 400 | 34px | 1.1 | 0.02em |
| `headline-lg` | 縦書きの章タイトル（枠の中） | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.3 | 0.15em |
| `headline-md` | 目次の英字見出し | 欧文セリフ | Cinzel | 700 | 16px | 1.3 | 0.1em |
| `body-lg` | リード文の詩のような短文 | ゴシック | Zen Kaku Gothic New | 400 | 14px | 2.2 | 0.1em |
| `body-md` | 商品名・価格・レシピ本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.05em |
| `note` | 一覧の補足文・注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `label-button` | BUY ボタンの英字 | 欧文セリフ | Playfair Display | 700 | 11px | 1.0 | 0.1em |
| `accent` | レシピの番号数字（アウトライン） | 欧文サンセリフ | Montserrat | 300 | 26px | 1.0 | 0.05em |

- 章タイトルは縦書きにし、角丸の二重線枠で囲む。
- レシピ本文も縦書きで組み、雑誌のような雰囲気を出す。
- 欧文の大見出しは太いスラブセリフにし、2 行で大きく組む。
- リード文は行ごとに字下げを変え、ずらして並べる。
- 商品名は 2 行以内にし、価格は商品名のすぐ下に置く。
- 見出しを太字ゴシックで強くしすぎない。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: 特集部分は SP で 1 カラムの自由なコラージュ配置。商品一覧は 2 カラムのグリッド。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 8px（375px 幅換算）
- 写真は左右交互に寄せ、一部を画面端まで裁ち落とす。
- 商品写真の近くに商品名・価格・BUY ボタンを 1 組で置く。
- 写真同士は少し重ねるか、段差をつけて配置する。
- 章の間には 80px 以上の余白を取る。
- レシピは全幅のグレー帯に、横スクロールのような縦書きで置く。

## Elevation & Depth

- 影はほぼ使わず、平面の重なりで奥行きを出す。
- 切り抜き写真は地の上に直接置く。
- ボタンにも影をつけず、細い線だけで表現する。

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 四角の写真に加え、布や籠を輪郭で切り抜いたもの、ちぎった布端のような写真を混ぜる。
- **セクション境界**: 直線で背景色を切り替える。黄の面は不定形に食い込ませることがある。
- 章タイトルの枠は角丸の縦長の二重線にする。
- 目次は細線のアーチ枠で囲み、上下に小さな装飾をつける。
- BUY ボタンは小さなピル型にし、両脇に菱形の飾りをつける。
- ALL ITEMS は茶色の小さな角丸四角にし、下向きの矢印をつける。

## Components

- **BUY ピルボタン**（`button-buy`）: 白地に茶の細枠のピル型ボタン。左右に菱形の飾りを入れ、英字はセリフ体にする。
- **縦書き章タイトル枠**（`chapter-title-vertical`）: 角丸の二重線で囲んだ縦長の枠に、章の名前を縦書きで入れる。写真の左上に重ねる。
- **青帯の価格ラベル**（`price-label`）: 商品名と価格を行ごとに青い帯で敷き、白文字で載せる。黄の章で使う。
- **アーチ枠の目次**（`contents-arch`）: 細線のアーチ枠に英字見出し、切り抜き写真、縦書きの章リスト（各項目の上にロータス風の印）を入れる。
- **レシピ帯**（`recipe-block`）: 大きな欧文見出しと淡い番号を置き、料理の切り抜き写真の下にグレー帯を敷く。帯には材料と作り方を縦書きで入れる。
- **一覧への小ボタン**（`button-all-items`）: 茶色の角丸四角に白い英字 2 行と下向き矢印を入れる。章の終わりの右側に置く。
- **商品一覧カード**（`product-card`）: 白地の 2 カラム。正方形の写真の下に太字の商品名、グレーの補足、価格、ハートアイコン、New ラベルを置く。
- **マーカー付きリード文**（`lead-marker`）: 短い詩のような行を、ずらして並べる。前半の行には薄い茶色の行背景を敷く。

## Do's and Don'ts

**Do**
- クラフト紙の質感を全体の地にする。
- 写真は切り抜き・重ね・裁ち落としでコラージュにする。
- 章ごとに縦書きの枠タイトルを置く。
- 商品ごとに商品名・価格・BUY ボタンをそろえて置く。
- 線画の花模様や地図を、余白に薄く添える。

**Don't**
- 真っ白や原色の地を特集部分に使わない。
- 大きなベタ塗りの CTA ボタンを置かない。
- 写真を整然としたグリッドだけで並べない。
- 黒の太いゴシックで見出しを強く打たない。
- グラデーションや強い影を使わない。

## Page Structure

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

1. **ファーストビュー**（特集のテーマと限定感を伝える）: 布を詰めた切り抜きコラージュに、縦書きの大きな和文タイトル（円形のコマ）、黄帯の欧文ロゴ、赤い判子風の限定マークを重ねる。
2. **リード**（暮らしに旅を取り入れる世界観を示す）: 短い行を 4〜5 行、中央付近でずらして並べ、前半にマーカーを敷く。
3. **目次**（章の構成を案内する）: アーチ枠の中に切り抜き写真と縦書きの章名を並べ、一覧ボタンを添える。
4. **章1（黄の面）**（代表的な産地の商品を紹介する）: 黄の全幅面に青い欧文見出しを置く。地図線と写真のコラージュに、青帯の価格と BUY ボタンを添える。
5. **章2〜5 商品紹介**（テーマ別に商品を見せる）: ベージュ地に縦書きの章枠を置き、モデル写真と商品の切り抜きを左右交互に並べ、BUY ボタンをつける。
6. **レシピ**（食から異国の暮らしを想像させる）: 欧文見出しと番号、料理の切り抜き写真、グレー帯の縦書きレシピで構成する。
7. **バイヤーコメント**（買い付けの思いで共感を得る）: 青い欧文の大見出しの下に青文字の段落を置き、現地のスナップ写真を重ねる。
8. **販売期間の告知**（期間限定で購入を促す）: ベージュ地の中央に、青文字で期限と注記を置く。
9. **商品一覧**（全商品を比較して買ってもらう）: 白地の 2 カラムカードグリッドにし、上部に絞り込みと並び替え、下部にページ送りを置く。
10. **関連特集バナー**（回遊を促す）: 横長バナーを縦に積み、下部におすすめ特集を 2 カラムで並べる。

## Imagery

- 自然光の室内や路上で、民族柄の服を着た女性モデルを素朴に撮る。
- 刺繍布・キルト・籠バッグなどの商品は、輪郭で切り抜いて地に直接置く。
- 職人の手元（版木押し・縫製）をクローズアップで入れ、手仕事感を出す。
- 料理は器ごと真上か斜め上から撮って切り抜き、余白に置く。
- 装飾は青や茶の単色線画で、ボタニカル模様や国の地図の輪郭を描く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では中央に 1000px 前後の帯を取り、コラージュは写真を横に広げて並べる。
- 縦書きの章タイトルは PC でも縦書きのまま、写真の左に大きめに置く。
- 商品一覧は PC で 4 カラムにする。
- 欧文の大見出しは PC で 56〜64px に拡大する。

## 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-8a42536e`（元 LP の URL から採番）
- **元 LP**: https://www.felissimo.co.jp/kraso/contents_kr/contentsevent2608_kr
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。