---
version: alpha
name: Vegetable Motif Seasonal Apparel Lookbook LP
description: 白とライトグレーのスタジオ写真に、手描き風の野菜イラストと、かすれ質感の太い英字見出しを野菜ごとの色で重ねる季節コレクションのルックブック型 LP。商品カードは白地に小さな緑のピル型ボタンで、静かに並べる。
colors:
  background: '#FEFEFE'
  background-alt: '#F0F0F2'
  tint-1: '#F2F7F0'
  primary: '#063B23'
  cta: '#7EB04E'
  on-cta: '#FEFFFE'
  accent-1: '#6CB62A'
  accent-2: '#ED952D'
  accent-3: '#514690'
  marker: '#DA306D'
  text: '#26282F'
  line: '#C8C6C2'
  cta-accessible: '#5C8039'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 38px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Alfa Slab One
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.1
    letterSpacing: 0.03em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.4
  label-button:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.2em
rounded:
  sm: 0px
  md: 14px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 110px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-buy:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 22px
  heading-veggie:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 120px
  heading-vertical:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.accent-3}'
    typography: '{typography.display}'
    height: 340px
  product-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 260px
  fabric-circle:
    rounded: '{rounded.full}'
    height: 95px
  brand-title:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 110px
  price-special:
    textColor: '{colors.marker}'
    typography: '{typography.body-lg}'
    height: 18px
---

# DESIGN.md — 白地と野菜色の手描きアパレル LP（Vegetable Motif Seasonal Apparel Lookbook LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: ナチュラル、ポップ・元気、シンプル・ミニマル、親しみ・手作り感
- **キーワード**: ルックブック・野菜モチーフ・手描きイラスト・スタンプ調英字・白場多め・スタジオ撮影
- **地の質感**: 見出し英字にかすれたスタンプ質感。イラストは版画・色鉛筆風のざらつき。地はフラットな白とグレー。
- **形**: 写真は角丸なしの矩形。素材アップのみ白縁つきの円形。ボタンは細線のピル型。
- **温度感**: 明るく爽やかな夏の温度感。野菜色の差し色でほどよく陽気に。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FEFEFE` | ページの地色 | 36% | 画素の実測 |
| `background-alt` | `#F0F0F2` | スタジオ写真の背景グレー | 27% | 画素の実測 |
| `tint-1` | `#F2F7F0` | ファーストビューの淡いミント地 | 3% | 画素の実測 |
| `primary` | `#063B23` | ブランド見出しの深緑 | 0% | 画素の実測 |
| `cta` | `#7EB04E` | BUYボタンの線・文字・ドット | 0% | 画素の実測 |
| `on-cta` | `#FEFFFE` | BUYボタンの内側 | 0% | 画素の実測 |
| `accent-1` | `#6CB62A` | 緑系野菜の英字見出し | 1% | 画素の実測 |
| `accent-2` | `#ED952D` | オレンジ系野菜の英字見出し | 1% | 画素の実測 |
| `accent-3` | `#514690` | 紫系野菜の縦組み英字見出し | 0% | 画素の実測 |
| `marker` | `#DA306D` | お試し価格・ラディッシュ見出しのピンク | 0% | 画素の実測 |
| `text` | `#26282F` | コピー・商品名・価格 | 2% | 画素の主要色に補正 |
| `line` | `#C8C6C2` | 素材アップ円の白縁・細線 | 0% | 画素の実測 |
| `cta-accessible` | `#5C8039` | AA を満たす補正値（計算） |  | 計算 |

- 地は白とスタジオグレーの 2 色だけで交互に切り替える。
- 英字見出しはそのセクションの野菜の色で塗る（緑・オレンジ・紫・ピンク）。
- ブランド名と総合タイトルだけ深緑のスラブ系英字にする。
- CTA は黄緑の細線ピルで統一し、塗りつぶしボタンは使わない。
- ピンクは割引価格と赤い野菜の見出しのみに限定する。
- 本文はダークグレーで、黒ベタは使わない。
- `button-buy` は文字 `#7EB04E` × 背景 `#FEFFFE` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#5C8039`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 野菜名の英字大見出し（かすれ質感） | 装飾・ディスプレイ | Montserrat | 900 | 38px | 1.05 | 0.02em |
| `headline-lg` | コレクション総合タイトル | 欧文セリフ | Alfa Slab One | 400 | 22px | 1.3 | 0.08em |
| `headline-md` | 導入の和文キャッチ | ゴシック | Noto Sans JP | 300 | 26px | 1.5 | 0.08em |
| `headline-sm` | 英字見出し下の和文サブコピー | ゴシック | Noto Sans JP | 400 | 15px | 1.5 | 0.15em |
| `body-md` | 導入の説明文 | ゴシック | Noto Sans JP | 400 | 12px | 2.1 | 0.03em |
| `body-lg` | 商品名と価格 | ゴシック | Noto Sans JP | 400 | 12px | 1.5 | 0.03em |
| `note` | （税込）の小注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em |
| `label-button` | BUY ボタン | 欧文サンセリフ | Montserrat | 700 | 10px | 1.0 | 0.2em |

- 英字見出しは 2〜3 行で大きく組み、和文サブコピーを細めに 1 行添える。
- 見出しの揃えはセクションごとに左・右・中央・縦組みと変えてリズムを作る。
- 縦組みセクションは英字を 90 度回転させ、和文は縦書きにする。
- 和文は細めのウェイトで字間を広めに取る。
- 商品名は〈レディース〉〈メンズ〉の山括弧で区分を付記する。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品は 2 列グリッド、または写真と情報の左右 2 分割。
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 110px、基本単位 8px、カード内 12px（375px 幅換算）
- セクションは英字見出し → 着用写真 → 商品カードの順で繰り返す。
- メイン写真は画面幅いっぱいか片側に寄せて置き、余白を非対称にする。
- 商品は白抜きの平置き写真の下（または右）に名称・価格・BUY を中央揃えで置く。
- セクション間は 100px 以上の大きな白場を取る。
- イラストは写真の端や余白にはみ出させて配置する。

## Elevation & Depth

- 影はほぼ使わずフラットにする。
- 素材アップの円だけごく薄いドロップシャドウと白縁を付ける。
- 立体感は写真の床影とイラストの重なりで出す。

## Shapes

- **角丸**: 小 0px ／ 中 14px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 着用写真は角丸なしの矩形。生地のアップは白縁つきの円形。商品は切り抜きの平置き。
- **セクション境界**: 直線で切り替える。白とグレー地の境界をイラストがまたいでいる。
- ボタンだけ角丸にし、写真やカードは角を立てる。
- 円形の素材アップは直径 120px 前後にする。
- 区切り線や枠で囲まず、白場で区切る。

## Components

- **BUY ピルボタン**（`button-buy`）: 白地に黄緑 1px の枠線。中央に字間広めの英字、右端に黄緑の小さな丸ドット。幅は約 70px。
- **野菜英字見出し**（`heading-veggie`）: かすれ質感の極太英字を野菜色で置き、下に細い和文コピーを添える。
- **縦組み見出し**（`heading-vertical`）: 写真の左側に、回転させた英字と縦書きの和文を並べる。
- **商品カード**（`product-card`）: 切り抜きの商品写真、名称 2 行、価格、BUY を縦に中央揃えで並べる。
- **素材アップ円**（`fabric-circle`）: 柄や刺繍を拡大した円形写真。商品写真の左隣に置く。
- **コレクションタイトル**（`brand-title`）: 点線に挟んだ小さなブランド英字と、深緑のスラブ英字 2 行。ページの冒頭と末尾に置く。
- **お試し価格表記**（`price-special`）: 矢印に続けて、ピンク文字で割引価格を表示する。

## Do's and Don'ts

**Do**
- 野菜ごとに見出し色とイラストを変え、柄の服と対応させる。
- 写真は無地のグレー背景で全身を撮る。
- イラストを写真の角にはみ出させて重ねる。
- 見出しの揃え位置をセクションごとに変える。
- 商品情報は小さく控えめにして、写真を主役にする。

**Don't**
- 塗りつぶしの大きな CTA ボタンを置かない。
- 写真に角丸や太い枠を付けない。
- 濃い背景のセクションを作らない。
- 見出しの英字を細いフォントにしない。
- テキストを詰め込みすぎない。
- 写真やリアルな素材画像で野菜の装飾を代用しない。

## Page Structure

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

1. **ファーストビュー**（コレクションの世界観を一目で伝える）: 淡いミント地に総合タイトルを中央に置き、モデル数人の全身切り抜きを横に並べる。四隅に野菜イラストを置く。
2. **コンセプト導入**（テーマを短く説明する）: 白地に細い和文キャッチを 2 行、その下に説明文を 4 行ほど置く。
3. **テーマ別ルック①（左揃え）**（1 柄目の着用イメージを見せる）: グレー地の大きな写真の上に、オレンジの英字見出しを左寄せで重ねる。
4. **商品グリッド**（関連商品を購入へつなぐ）: 着用写真 2 枚と商品切り抜き 2 点を 2 列に並べ、それぞれに BUY を付ける。
5. **テーマ別ルック②（右揃え）**（別の柄を見せる）: 緑の英字見出しを右寄せにし、写真の端にイラストをはみ出させる。
6. **縦組みルック**（変化をつけて目を止めさせる）: 写真の左側に回転した英字と縦書きの和文を置き、右側にモデルを立たせる。
7. **中央見出しルック**（単品の柄シャツを訴求する）: 中央揃えの見出しの下に、左右へ余白を残した写真と、右に情報を置いた商品を並べる。
8. **左右分割ルック**（男女別の商品を見せる）: 写真を左右に寄せて、反対側に商品カードを置く千鳥配置にする。
9. **素材アップ付き商品**（柄や刺繍のディテールを伝える）: 左に円形の素材アップ、中央に商品写真、右に情報を置く 3 要素の横並び。
10. **カラー展開**（色違い商品とお試し価格を訴求する）: 色違いの着用写真 2 枚と 3 色並べの商品を置き、ピンクで割引価格を添える。
11. **クロージング**（ブランド印象で締める）: 白地の中央に総合タイトルを再掲する。

## Imagery

- モデル写真は明るいグレーの無地背景で、全身をフラットな光で撮る。
- モデルは野菜やかごを手に持ち、自然な笑顔を見せる。
- 商品写真はハンガー掛けか平置きで背景を切り抜き、薄い影だけを残す。
- 野菜イラストは版画・ガッシュ風のかすれたテクスチャで、輪郭線は描かない。
- イラストは柄の野菜と一致させ、2〜3 点を写真の周囲に散らす。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも中央に幅 約 480px の 1 カラムを維持し、左右は白場にする。
- PC のファーストビューは横長にして、モデル 6 人ほどを横一列に並べる。
- PC の導入文は 1 行キャッチと横長の段落にまとめる。
- 写真やグリッドの比率は SP と同じで、余白だけ広げる。

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