---
version: alpha
name: Dark Chocolate Hexagon Pop Confectionery LP
description: 深いチョコレート色の地に、ピンク・紫・黄・ターコイズの六角形モチーフを散らしたポップなスイーツ LP。溶けたチョコの垂れ形状でセクションを区切り、ワイドに字間を空けた斜体の英字見出しと手書き風スクリプトで甘く遊び心のある印象をつくる。
colors:
  primary: '#30020C'
  dark-section: '#4A1622'
  background: '#FFFFFF'
  background-alt: '#E1E6EA'
  accent-1: '#EA5569'
  accent-2: '#6A348E'
  marker: '#FFFF01'
  accent-3: '#009EA7'
  tint-1: '#F9DCDC'
  secondary: '#D73E54'
  text: '#28030A'
  on-dark: '#FFFFFF'
  tint-2: '#4A1720'
  accent-1-accessible: '#E4253F'
  secondary-accessible: '#BF283D'
typography:
  display:
    fontFamily: Josefin Sans
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.12em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.3em
  accent:
    fontFamily: Great Vibes
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  label-button:
    fontFamily: DM Sans
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  header-bar:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 54px
  hex-badge:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 150px
  story-band:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 200px
  product-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    height: 480px
  info-frame:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 560px
  novelty-hex:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 340px
  drip-divider:
    backgroundColor: '{colors.primary}'
    height: 120px
  sns-grid:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 430px
---

# DESIGN.md — 濃茶×ビビッド六角形のチョコ菓子 LP（Dark Chocolate Hexagon Pop Confectionery LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、上品・高級
- **キーワード**: チョコレートの濃茶・六角形キューブ・溶けるドリップ・水彩イラスト・斜体ワイド英字・ギフト
- **地の質感**: 淡いざらつきのある紙風テクスチャと水彩タッチのイラスト。濃茶地には薄い六角形の透かし柄や縦ストライプを敷く。
- **形**: 六角形・アイソメトリックの立方体と、チョコが垂れるドリップ曲線が主役。カードは角丸なしの矩形。
- **温度感**: 暖色寄り。濃茶の重さをビビッドなパステル系の色で明るく中和する。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#30020C` | チョコレート濃茶（ヘッダー・主背景） | 30% | 画素の実測 |
| `dark-section` | `#4A1622` | ストライプ背景のワイン茶 | 8% | 画素の実測 |
| `background` | `#FFFFFF` | 白地（ノベルティ・フッター） | 20% | 画素の実測 |
| `background-alt` | `#E1E6EA` | FV・商品カードの淡いグレー紙地 | 11% | 画素の実測 |
| `accent-1` | `#EA5569` | STORYのコーラルピンク帯 | 5% | 画素の実測 |
| `accent-2` | `#6A348E` | 商品カードの紫 | 7% | 画素の実測 |
| `marker` | `#FFFF01` | ノベルティ六角形のビビッドイエロー | 8% | 画素の実測 |
| `accent-3` | `#009EA7` | ターコイズ（商品名・アイコン） | 3% | 画素の実測 |
| `tint-1` | `#F9DCDC` | ストロベリーカードの淡ピンク | 6% | 画素の実測 |
| `secondary` | `#D73E54` | ストロベリー商品名の赤ピンク文字 | 1% | 画素の実測 |
| `text` | `#28030A` | 白地上の本文・見出し（濃茶） | 2% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 濃茶地上の白文字 | 2% | 画素の主要色に補正 |
| `tint-2` | `#4A1720` | ナンバー六角形の暗ワイン | 1% | 画素の実測 |
| `accent-1-accessible` | `#E4253F` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#BF283D` | AA を満たす補正値（計算） |  | 計算 |

- 地は濃茶を基本とし、白・淡グレーのセクションと交互に置いて明暗のリズムをつくる。
- 商品ごとに地色（淡ピンク・紫・淡グレー）を割り当て、商品名の文字色も対応させる。
- ビビッドイエローとターコイズはノベルティなど楽しい要素に限定して大面積で使う。
- 濃茶地の文字は白、白地の文字は濃茶。純黒は使わない。
- 濃茶地には少し明るい茶で六角形の透かしや縦ストライプを重ね、平坦に見せない。
- `story-band` は文字 `#FFFFFF` × 背景 `#EA5569` のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E4253F`、4.53:1）を使う。
- `product-card` は文字 `#D73E54` × 背景 `#F9DCDC` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#BF283D`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ブランドロゴ風の大きな英字 | 欧文サンセリフ | Josefin Sans | 500 | 34px | 1.2 | 0.12em |
| `headline-lg` | セクション見出し（斜体・字間広め英字） | 欧文サンセリフ | Montserrat | 500 | 22px | 1.3 | 0.3em |
| `accent` | 商品名に添える手書きスクリプト | 欧文スクリプト | Great Vibes | 400 | 30px | 1.2 | 0.0em |
| `headline-md` | FVキャッチ・小見出し（和文） | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.8 | 0.08em |
| `headline-sm` | 商品の和名・サブ見出し | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.5 | 0.05em |
| `body-md` | 本文・説明文（中央揃え中心） | ゴシック | Zen Kaku Gothic New | 500 | 11px | 2.0 | 0.08em |
| `label-button` | フッターナビ・アイテム名 | 欧文サンセリフ | DM Sans | 500 | 15px | 1.4 | 0.0em |

- セクション見出しは英字の斜体で、字間を 0.3em 前後に大きく空ける。
- 商品名は手書きスクリプトの英字と幾何学的なサンセリフのロゴ文字を組み合わせる。
- 和文本文は小さめ・行間広め・中央揃えで、やわらかく見せる。
- 和文見出しは太字でも 18px 前後に抑え、英字見出しを主役にする。
- ノベルティのアイテム名は斜体の英字サンセリフにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品・情報カードは左右に約 6% の余白をとって中央に置く。
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 商品カードは余白なしで縦に積み、地色を切り替えて区切る。
- INFORMATION は濃茶地の上に白い細線の枠で囲む。
- ノベルティは番号付きの大きな六角形を 1 点ずつ縦に並べ、下に短い説明文を置く。
- セクション間はたっぷり空け、1 画面に要素 1 つを目安にする。
- ヘッダーは濃茶の細い帯で、ロゴを中央・ハンバーガーを右に置く。

## Elevation & Depth

- 基本はフラットで、影は使わない。
- 商品カードのまとまりにだけ、濃茶地へごく弱い影を落として浮かせる。
- チョコのイラストは枠やセクションの境界にはみ出させ、奥行きを出す。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なしの矩形。バッジやアイテムは六角形でくり抜く。
- **セクション境界**: 溶けたチョコが垂れるドリップ曲線（濃茶→白、白→濃茶）。
- 装飾の基本形は六角形とアイソメトリックの立方体にする。
- 角丸は使わず、シャープな矩形と六角形で構成する。
- ドリップ形状は濃茶の地と白の地が切り替わる境目に使う。
- 番号バッジは暗いワイン色の六角形を、黄色い六角形の左上に重ねる。

## Components

- **濃茶ヘッダー**（`header-bar`）: 濃茶の帯の中央にロゴ、右に白いハンバーガーメニューを置く。
- **六角形告知バッジ**（`hex-badge`）: 半透明のターコイズの六角形に、斜体の英字で告知を 3 行入れて写真に重ねる。
- **ストーリー帯**（`story-band`）: コーラルピンクの地に六角形の透かし柄を敷き、白文字の短い詩的な文を中央揃えで並べる。
- **商品カード**（`product-card`）: スクリプト英字→水彩のチョコイラスト→ロゴ英字の商品名→和名→説明 3 行の順に縦に積む。地色は商品ごとに変える。
- **白線枠のお知らせ**（`info-frame`）: 濃茶地に白い 2px の枠と六角形の透かし柄。英字見出し・本文・線画イラストを入れる。
- **番号付きノベルティ六角形**（`novelty-hex`）: 大きな黄色の六角形にターコイズのフラットなアイテムアイコンと斜体の名前を入れ、左上にワイン色の番号六角形を重ねる。
- **チョコドリップ区切り**（`drip-divider`）: チョコが垂れる不規則な曲線で、色の違う地どうしをつなぐ。
- **SNS 画像グリッド**（`sns-grid`）: 縦ストライプのワイン地に、正方形の画像を 2 列で隙間なく並べる。

## Do's and Don'ts

**Do**
- 六角形・立方体のモチーフを、FV・バッジ・透かし柄・ノベルティで一貫して使う。
- 濃茶の地と白・パステルの地を交互に置き、境目にドリップ曲線を入れる。
- 英字見出しは斜体で字間を広くとる。
- チョコは水彩タッチのイラストにし、セクションの境界にはみ出させる。
- 商品ごとに地色と文字色をセットで変える。

**Don't**
- 角丸のピル型ボタンや柔らかいカードを多用しない。
- 純黒や寒色系のグレーを地に使わない。
- ビビッドイエローを文字色や小さな要素に散らさない。
- 長文を詰め込まない。本文は 3〜4 行に収める。
- 写真ばかりで構成しない。イラストとフラットなアイコンを主役にする。

## Page Structure

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

1. **ファーストビュー**（ブランドの世界観を一目で伝える）: 淡いグレーの紙地に、色とりどりの半透明立方体を散らす。中央にスクリプトとロゴ英字、太字の和文キャッチを 2 行、縦書きの Scroll 表示を置く。
2. **告知バナー**（期間限定の出店を告知する）: 濃茶の地に、チョコ粒を並べた写真を横長で置き、右側に六角形の告知バッジを重ねる。
3. **ストーリー**（贈り物としての想いを伝える）: コーラルピンクの帯に、斜体の英字見出しと短い文を中央揃えで 5 行並べる。
4. **商品紹介**（フレーバーごとの特徴を見せる）: 濃茶地の上に、色違いのカードを 3 枚縦に積む。各カードはスクリプト・水彩のチョコ・商品名・説明で構成する。
5. **お知らせ**（出店の日程と場所を伝える）: 白い線の枠の中に、斜体の英字見出し・小見出し・本文・売り場の線画イラストを入れ、角にチョコを添える。
6. **ノベルティ**（購入特典で購買を後押しする）: ドリップで白地に切り替え、条件を 1 文で示したあと、番号付きの黄色い六角形でアイテムを 3 点並べる。
7. **SNS 誘導**（最新情報のフォローを促す）: 縦ストライプのワイン地に、英字見出し・案内文・2 列の画像グリッドを置き、チョコのイラストを飛ばす。
8. **フッター**（ページ内を移動しやすくする）: ドリップで白地に戻し、英字のナビを中央に縦に並べ、最下部にコピーライトを置く。

## Imagery

- チョコは水彩で描いた丸い粒にし、表面に細い線がけを斜めに入れる。
- アイソメトリックの半透明立方体の中に、ハート型のチョコを入れて描く。
- 店舗や人物は白地に黒の細い線画で描き、ブランド色だけを差す。
- ノベルティはターコイズ 1 色のフラットなシルエットアイコンにする。
- 写真は暗い石目の背景に、カラフルなチョコを俯瞰で並べて撮る。
- 背景には六角形の透かし柄と、紙のざらつきテクスチャを重ねる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーを左ロゴ・右テキストナビの横並びにする。
- PC の商品紹介は 3 枚のカードを横 3 列に並べる。
- PC のノベルティは 3 点を横に並べ、説明文をその下に置く。
- PC の SNS 画像は横 4 列の 1 段にする。
- PC の英字見出しは大きく薄い色にし、背景透かしのように扱う。
- PC のフッターナビは横 1 列にする。

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