郵便赤×紺のギフト体験ショップ LP

Postal Red and Navy Gift Shop LP

朱赤と濃紺を主役にしたギフト専門店の紹介LP。ベージュの紙っぽい地に、アーチ型の写真枠、線画イラスト、十字型の見出し装飾を組み合わせる。手紙や郵便を思わせる、温かみのあるクラフト感のあるデザイン。

その他親しみ・手作り感レトロやさしい・柔らかい信頼・誠実SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は「赤→白→赤→ベージュ→赤→白→紺」の順に面で切り替え、リズムをつくる
見出しの文字、枠線、ボタンはすべて濃紺で統一する
赤地では本文を白、カードは白地に紺の文字にする
コーラルは写真や装飾のアーチだけに使う
グラデーションはSNS誘導のバナーだけに限る
フッターは濃紺の全面塗りにして白文字を置く

TYPOGRAPHY

書体

display欧文のセクション見出し欧文サンセリフ／ Poppins 700 ／ 28px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg和文の大見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdステップ名（ルビ付き）とカードの見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm欧文見出しの下に添える和訳ゴシック／ Noto Sans JP 700 ／ 9px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 500 ／ 10px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

note日付や注記ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accentStep番号のラベル欧文サンセリフ／ Poppins 700 ／ 11px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文字ゴシック／ Noto Sans JP 700 ／ 9px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

見出しは「欧文の太字＋小さな和訳」の2段で組む
本文は行間を2.0前後と広くとり、字間も少し開ける
赤地のリード文は中央の短い行で区切り、段落の間を1行空ける
重要な語には小さなルビを付けてステップ名にする
ファーストビューのコピーは白い縦書きで添える

PAGE STRUCTURE

セクション構成

ファーストビュー店の世界観を一目で伝える円で切り抜いた店内写真を大きく置き、白い縦書きコピーを添える。右上に丸いメニューとSNSボタン
SNS誘導バナー公式SNSへ送客する切手のようなギザギザの縁取りで、グラデ地のリボン型バナー
お知らせ最新情報を見せる欧文見出しと、破線区切りのリスト、紺ボタン
コンセプト体験の価値を語る赤地に十字装飾の見出しを置き、白文字の詩的な短文を段落で並べる
SNS投稿紹介具体的な楽しみ方を見せる紺のアーチカードの中に写真スライダーを置き、下にクリームのボタン
店内紹介ステップ体験の流れを3段階で伝える白地。Stepラベル付きの写真カード、ルビ付きの見出し、本文を3回繰り返す
商品スライダー商品の特徴を見せる紺枠のカードに写真とキャプション、番号ページャー
商品カテゴリ選び方の種類を示す赤地にリード文を置き、白いリンクカードを縦に3枚並べる
料金案内料金ページへ誘導するベージュ地。十字装飾の見出し、短文、紺ボタン、線画イラスト
よくある質問FAQページへ誘導する赤地に欧文見出し、短文、紺ボタン
アクセス来店を促すMapラベル付きの枠で地図を置き、住所、紺枠の交通情報ボックス、営業時間を続ける
フッターサイト内を回遊させる紺地。2列のリンクを点線で区切り、白い問い合わせボタン、ロゴ、コピーライトを置く

COMPONENTS

部品

紺の一覧ボタン button-primary紺地に白文字を中央に置き、右端に小さな▸を付けた長方形ボタン
クリームのSNSボタン button-sub赤地の上に置くクリーム地のボタン。アイコン＋紺文字＋赤い▸
十字装飾の見出し heading-cross見出しの左上と右下に、紺と赤の十字線（切手の消印風）を置く
アーチ型カード arch-card上辺が半円の紺地カード。白い細線の内枠を入れ、写真スライダーと白文字の説明を載せる
ステップ写真カード step-card紺枠の角丸カード。上辺中央にピル型の「Step」ラベルを重ねる
選書リンクカード link-card赤地の上に置く白カード。紺の見出しと説明文、右上に丸い再生アイコン
破線区切りのニュース news-list日付（小）とタイトルを、黒い破線で区切ったリスト
番号付きページャー pager-dots円の中に数字を入れたページ送り。現在のページは紺で塗る
アクセス情報ボックス info-box淡いグレー地に紺枠を付け、中央揃えの情報を載せる。角にスタンプ風のロゴを重ねる

守ること

赤・紺・ベージュの3色を中心にまとめる
見出しは欧文の太字に和訳を添える
写真はアーチ形や角丸の紺枠で包む
紺の線画イラストを見出しの脇に小さく添える
赤やベージュの地に、うっすら紙の質感を入れる

DON'T

避けること

強いドロップシャドウや光沢を使わない
紺と赤以外の濃い色を見出しに使わない
グラデーションを多用しない
本文の行間を詰めない
写真を角ばった枠なしで並べない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 郵便赤×紺のギフト体験ショップ LP（Postal Red and Navy Gift Shop LP）

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

Overview

業種: その他／ 雰囲気: 親しみ・手作り感、レトロ、やさしい・柔らかい、信頼・誠実
キーワード: 郵便ポストの赤・濃紺の線・アーチ枠・線画イラスト・紙の質感・ステップ紹介
地の質感: 赤とベージュの面にうっすら紙のノイズ質感。全体はフラットで影は控えめ。
形: アーチ（半円の上辺）の写真枠とカード、角丸の紺枠カード、ピル型のラベル見出し
温度感: 暖かい（朱赤・ベージュ）を濃紺で引き締める

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#C34136`	ブランドの朱赤。セクションの地	20%	画素の実測
`secondary`	`#00335A`	濃紺。見出し・ボタン・枠線・フッター	10%	画素の実測
`cta`	`#003D6C`	一覧へ進むボタンの地	1%	画素の実測
`on-cta`	`#FFFFFF`	ボタンの文字	0%	画素の主要色に補正
`background`	`#FFFFFE`	紹介セクションの白い地	20%	画素の実測
`background-alt`	`#E5D9CD`	ニュース欄のグレージュの地	9%	画素の実測
`tint-1`	`#E9CDB5`	料金案内セクションのサンドベージュ	7%	画素の実測
`surface`	`#FBEFE3`	サブボタンの淡いクリーム地	2%	画素の実測
`tint-2`	`#F6F7F9`	情報カード内の淡いグレー	2%	画素の実測
`accent-1`	`#E27D5C`	アーチ枠のコーラル	3%	画素の主要色に補正
`text-body`	`#333333`	本文テキスト	2%	推定
`on-primary`	`#FFFFFF`	赤地上の白文字	1%	画素の主要色に補正
`accent-2`	`#DC347A`	SNSバナーのオレンジ〜ピンクのグラデ	1%	画素の実測

地は「赤→白→赤→ベージュ→赤→白→紺」の順に面で切り替え、リズムをつくる
見出しの文字、枠線、ボタンはすべて濃紺で統一する
赤地では本文を白、カードは白地に紺の文字にする
コーラルは写真や装飾のアーチだけに使う
グラデーションはSNS誘導のバナーだけに限る
フッターは濃紺の全面塗りにして白文字を置く

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	欧文のセクション見出し	欧文サンセリフ	Poppins	700	28px	1.2	0.0em
`headline-lg`	和文の大見出し	ゴシック	Noto Sans JP	700	20px	1.5	0.05em
`headline-md`	ステップ名（ルビ付き）とカードの見出し	ゴシック	Noto Sans JP	700	15px	1.5	0.05em
`headline-sm`	欧文見出しの下に添える和訳	ゴシック	Noto Sans JP	700	9px	1.4	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	500	10px	2.0	0.08em
`note`	日付や注記	ゴシック	Noto Sans JP	400	8px	1.6	0.05em
`accent`	Step番号のラベル	欧文サンセリフ	Poppins	700	11px	1.2	0.02em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	700	9px	1.4	0.05em

見出しは「欧文の太字＋小さな和訳」の2段で組む
本文は行間を2.0前後と広くとり、字間も少し開ける
赤地のリード文は中央の短い行で区切り、段落の間を1行空ける
重要な語には小さなルビを付けてステップ名にする
ファーストビューのコピーは白い縦書きで添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 60px、基本単位 8px、カード内 14px（375px 幅換算）
セクションの見出しと短い説明は中央揃え、本文は左揃え
ステップ紹介は写真カードと説明文を縦に繰り返す
ニュースは破線で区切ったリストにする
ボタンは幅約半分の中央配置にする
セクションの境目には細い二重線を入れることがある

Elevation & Depth

影はほぼ使わず、線と面で階層を表す
SNSバナーにだけ、ごく薄いドロップシャドウを付ける
カードは影でなく紺の1.5px枠で浮かせる

Shapes

角丸: 小 3px ／中 10px ／大 200px。ボタンは角丸の長方形。
写真の切り抜き: 写真は角丸の四角か、上辺が半円のアーチ形に切り抜く
セクション境界: 直線で切り替え、細い白の二重線を添える。ファーストビューの下端は大きな円弧
Stepラベルはピル型にして、カード枠の上辺にまたがるように置く
カードは角丸10px前後＋紺枠
ボタンは角丸3px程度の長方形で、右端に小さな三角を付ける
ファーストビューは大きな円で写真を切り抜く

Components

紺の一覧ボタン（button-primary）: 紺地に白文字を中央に置き、右端に小さな▸を付けた長方形ボタン
クリームのSNSボタン（button-sub）: 赤地の上に置くクリーム地のボタン。アイコン＋紺文字＋赤い▸
十字装飾の見出し（heading-cross）: 見出しの左上と右下に、紺と赤の十字線（切手の消印風）を置く
アーチ型カード（arch-card）: 上辺が半円の紺地カード。白い細線の内枠を入れ、写真スライダーと白文字の説明を載せる
ステップ写真カード（step-card）: 紺枠の角丸カード。上辺中央にピル型の「Step」ラベルを重ねる
選書リンクカード（link-card）: 赤地の上に置く白カード。紺の見出しと説明文、右上に丸い再生アイコン
破線区切りのニュース（news-list）: 日付（小）とタイトルを、黒い破線で区切ったリスト
番号付きページャー（pager-dots）: 円の中に数字を入れたページ送り。現在のページは紺で塗る
アクセス情報ボックス（info-box）: 淡いグレー地に紺枠を付け、中央揃えの情報を載せる。角にスタンプ風のロゴを重ねる

Do's and Don'ts

Do - 赤・紺・ベージュの3色を中心にまとめる - 見出しは欧文の太字に和訳を添える - 写真はアーチ形や角丸の紺枠で包む - 紺の線画イラストを見出しの脇に小さく添える - 赤やベージュの地に、うっすら紙の質感を入れる

Don't - 強いドロップシャドウや光沢を使わない - 紺と赤以外の濃い色を見出しに使わない - グラデーションを多用しない - 本文の行間を詰めない - 写真を角ばった枠なしで並べない

Page Structure

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

ファーストビュー（店の世界観を一目で伝える）: 円で切り抜いた店内写真を大きく置き、白い縦書きコピーを添える。右上に丸いメニューとSNSボタン
SNS誘導バナー（公式SNSへ送客する）: 切手のようなギザギザの縁取りで、グラデ地のリボン型バナー
お知らせ（最新情報を見せる）: 欧文見出しと、破線区切りのリスト、紺ボタン
コンセプト（体験の価値を語る）: 赤地に十字装飾の見出しを置き、白文字の詩的な短文を段落で並べる
SNS投稿紹介（具体的な楽しみ方を見せる）: 紺のアーチカードの中に写真スライダーを置き、下にクリームのボタン
店内紹介ステップ（体験の流れを3段階で伝える）: 白地。Stepラベル付きの写真カード、ルビ付きの見出し、本文を3回繰り返す
商品スライダー（商品の特徴を見せる）: 紺枠のカードに写真とキャプション、番号ページャー
商品カテゴリ（選び方の種類を示す）: 赤地にリード文を置き、白いリンクカードを縦に3枚並べる
料金案内（料金ページへ誘導する）: ベージュ地。十字装飾の見出し、短文、紺ボタン、線画イラスト
よくある質問（FAQページへ誘導する）: 赤地に欧文見出し、短文、紺ボタン
アクセス（来店を促す）: Mapラベル付きの枠で地図を置き、住所、紺枠の交通情報ボックス、営業時間を続ける
フッター（サイト内を回遊させる）: 紺地。2列のリンクを点線で区切り、白い問い合わせボタン、ロゴ、コピーライトを置く

Imagery

明るく柔らかい自然光の店内写真。木の棚と赤・紺の小物を写す
手元のラッピング作業など、人の手が入った温かいカット
紺の単色線画で、ゆるい人物や手紙・本のイラストを描く
封筒・切手・消印などの郵便モチーフを装飾に使う
ハートと箱を組み合わせた、シンプルなアイコン調のモチーフ
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは中央にSP幅（約500px）のカラムを固定し、左右をベージュ地にする
PCの左サイドにロゴとお知らせリスト、両サイドに線画イラストを置く
PCではSNSバナーやコンセプトを赤地のカラム内に組み込み、お知らせはサイドへ移す
フッターのリンクは2列のまま、カラム幅に収める

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Postal Red and Navy Gift Shop LP
description: 朱赤と濃紺を主役にしたギフト専門店の紹介LP。ベージュの紙っぽい地に、アーチ型の写真枠、線画イラスト、十字型の見出し装飾を組み合わせる。手紙や郵便を思わせる、温かみのあるクラフト感のあるデザイン。
colors:
  primary: '#C34136'
  secondary: '#00335A'
  cta: '#003D6C'
  on-cta: '#FFFFFF'
  background: '#FFFFFE'
  background-alt: '#E5D9CD'
  tint-1: '#E9CDB5'
  surface: '#FBEFE3'
  tint-2: '#F6F7F9'
  accent-1: '#E27D5C'
  text-body: '#333333'
  on-primary: '#FFFFFF'
  accent-2: '#DC347A'
typography:
  display:
    fontFamily: Poppins
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.05em
  accent:
    fontFamily: Poppins
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 3px
  md: 10px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 14px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 25px
  button-sub:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.secondary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 25px
  heading-cross:
    textColor: '{colors.secondary}'
    typography: '{typography.headline-lg}'
    height: 60px
  arch-card:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 480px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    rounded: '{rounded.md}'
    height: 360px
  link-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 85px
  news-list:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 55px
  pager-dots:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 16px
  info-box:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 95px
---

# DESIGN.md — 郵便赤×紺のギフト体験ショップ LP（Postal Red and Navy Gift Shop LP）

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

## Overview

- **業種**: その他 ／ **雰囲気**: 親しみ・手作り感、レトロ、やさしい・柔らかい、信頼・誠実
- **キーワード**: 郵便ポストの赤・濃紺の線・アーチ枠・線画イラスト・紙の質感・ステップ紹介
- **地の質感**: 赤とベージュの面にうっすら紙のノイズ質感。全体はフラットで影は控えめ。
- **形**: アーチ（半円の上辺）の写真枠とカード、角丸の紺枠カード、ピル型のラベル見出し
- **温度感**: 暖かい（朱赤・ベージュ）を濃紺で引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#C34136` | ブランドの朱赤。セクションの地 | 20% | 画素の実測 |
| `secondary` | `#00335A` | 濃紺。見出し・ボタン・枠線・フッター | 10% | 画素の実測 |
| `cta` | `#003D6C` | 一覧へ進むボタンの地 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタンの文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFE` | 紹介セクションの白い地 | 20% | 画素の実測 |
| `background-alt` | `#E5D9CD` | ニュース欄のグレージュの地 | 9% | 画素の実測 |
| `tint-1` | `#E9CDB5` | 料金案内セクションのサンドベージュ | 7% | 画素の実測 |
| `surface` | `#FBEFE3` | サブボタンの淡いクリーム地 | 2% | 画素の実測 |
| `tint-2` | `#F6F7F9` | 情報カード内の淡いグレー | 2% | 画素の実測 |
| `accent-1` | `#E27D5C` | アーチ枠のコーラル | 3% | 画素の主要色に補正 |
| `text-body` | `#333333` | 本文テキスト | 2% | 推定 |
| `on-primary` | `#FFFFFF` | 赤地上の白文字 | 1% | 画素の主要色に補正 |
| `accent-2` | `#DC347A` | SNSバナーのオレンジ〜ピンクのグラデ | 1% | 画素の実測 |

- 地は「赤→白→赤→ベージュ→赤→白→紺」の順に面で切り替え、リズムをつくる
- 見出しの文字、枠線、ボタンはすべて濃紺で統一する
- 赤地では本文を白、カードは白地に紺の文字にする
- コーラルは写真や装飾のアーチだけに使う
- グラデーションはSNS誘導のバナーだけに限る
- フッターは濃紺の全面塗りにして白文字を置く

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 欧文のセクション見出し | 欧文サンセリフ | Poppins | 700 | 28px | 1.2 | 0.0em |
| `headline-lg` | 和文の大見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em |
| `headline-md` | ステップ名（ルビ付き）とカードの見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em |
| `headline-sm` | 欧文見出しの下に添える和訳 | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 10px | 2.0 | 0.08em |
| `note` | 日付や注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.05em |
| `accent` | Step番号のラベル | 欧文サンセリフ | Poppins | 700 | 11px | 1.2 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.05em |

- 見出しは「欧文の太字＋小さな和訳」の2段で組む
- 本文は行間を2.0前後と広くとり、字間も少し開ける
- 赤地のリード文は中央の短い行で区切り、段落の間を1行空ける
- 重要な語には小さなルビを付けてステップ名にする
- ファーストビューのコピーは白い縦書きで添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 60px、基本単位 8px、カード内 14px（375px 幅換算）
- セクションの見出しと短い説明は中央揃え、本文は左揃え
- ステップ紹介は写真カードと説明文を縦に繰り返す
- ニュースは破線で区切ったリストにする
- ボタンは幅約半分の中央配置にする
- セクションの境目には細い二重線を入れることがある

## Elevation & Depth

- 影はほぼ使わず、線と面で階層を表す
- SNSバナーにだけ、ごく薄いドロップシャドウを付ける
- カードは影でなく紺の1.5px枠で浮かせる

## Shapes

- **角丸**: 小 3px ／ 中 10px ／ 大 200px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸の四角か、上辺が半円のアーチ形に切り抜く
- **セクション境界**: 直線で切り替え、細い白の二重線を添える。ファーストビューの下端は大きな円弧
- Stepラベルはピル型にして、カード枠の上辺にまたがるように置く
- カードは角丸10px前後＋紺枠
- ボタンは角丸3px程度の長方形で、右端に小さな三角を付ける
- ファーストビューは大きな円で写真を切り抜く

## Components

- **紺の一覧ボタン**（`button-primary`）: 紺地に白文字を中央に置き、右端に小さな▸を付けた長方形ボタン
- **クリームのSNSボタン**（`button-sub`）: 赤地の上に置くクリーム地のボタン。アイコン＋紺文字＋赤い▸
- **十字装飾の見出し**（`heading-cross`）: 見出しの左上と右下に、紺と赤の十字線（切手の消印風）を置く
- **アーチ型カード**（`arch-card`）: 上辺が半円の紺地カード。白い細線の内枠を入れ、写真スライダーと白文字の説明を載せる
- **ステップ写真カード**（`step-card`）: 紺枠の角丸カード。上辺中央にピル型の「Step」ラベルを重ねる
- **選書リンクカード**（`link-card`）: 赤地の上に置く白カード。紺の見出しと説明文、右上に丸い再生アイコン
- **破線区切りのニュース**（`news-list`）: 日付（小）とタイトルを、黒い破線で区切ったリスト
- **番号付きページャー**（`pager-dots`）: 円の中に数字を入れたページ送り。現在のページは紺で塗る
- **アクセス情報ボックス**（`info-box`）: 淡いグレー地に紺枠を付け、中央揃えの情報を載せる。角にスタンプ風のロゴを重ねる

## Do's and Don'ts

**Do**
- 赤・紺・ベージュの3色を中心にまとめる
- 見出しは欧文の太字に和訳を添える
- 写真はアーチ形や角丸の紺枠で包む
- 紺の線画イラストを見出しの脇に小さく添える
- 赤やベージュの地に、うっすら紙の質感を入れる

**Don't**
- 強いドロップシャドウや光沢を使わない
- 紺と赤以外の濃い色を見出しに使わない
- グラデーションを多用しない
- 本文の行間を詰めない
- 写真を角ばった枠なしで並べない

## Page Structure

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

1. **ファーストビュー**（店の世界観を一目で伝える）: 円で切り抜いた店内写真を大きく置き、白い縦書きコピーを添える。右上に丸いメニューとSNSボタン
2. **SNS誘導バナー**（公式SNSへ送客する）: 切手のようなギザギザの縁取りで、グラデ地のリボン型バナー
3. **お知らせ**（最新情報を見せる）: 欧文見出しと、破線区切りのリスト、紺ボタン
4. **コンセプト**（体験の価値を語る）: 赤地に十字装飾の見出しを置き、白文字の詩的な短文を段落で並べる
5. **SNS投稿紹介**（具体的な楽しみ方を見せる）: 紺のアーチカードの中に写真スライダーを置き、下にクリームのボタン
6. **店内紹介ステップ**（体験の流れを3段階で伝える）: 白地。Stepラベル付きの写真カード、ルビ付きの見出し、本文を3回繰り返す
7. **商品スライダー**（商品の特徴を見せる）: 紺枠のカードに写真とキャプション、番号ページャー
8. **商品カテゴリ**（選び方の種類を示す）: 赤地にリード文を置き、白いリンクカードを縦に3枚並べる
9. **料金案内**（料金ページへ誘導する）: ベージュ地。十字装飾の見出し、短文、紺ボタン、線画イラスト
10. **よくある質問**（FAQページへ誘導する）: 赤地に欧文見出し、短文、紺ボタン
11. **アクセス**（来店を促す）: Mapラベル付きの枠で地図を置き、住所、紺枠の交通情報ボックス、営業時間を続ける
12. **フッター**（サイト内を回遊させる）: 紺地。2列のリンクを点線で区切り、白い問い合わせボタン、ロゴ、コピーライトを置く

## Imagery

- 明るく柔らかい自然光の店内写真。木の棚と赤・紺の小物を写す
- 手元のラッピング作業など、人の手が入った温かいカット
- 紺の単色線画で、ゆるい人物や手紙・本のイラストを描く
- 封筒・切手・消印などの郵便モチーフを装飾に使う
- ハートと箱を組み合わせた、シンプルなアイコン調のモチーフ
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは中央にSP幅（約500px）のカラムを固定し、左右をベージュ地にする
- PCの左サイドにロゴとお知らせリスト、両サイドに線画イラストを置く
- PCではSNSバナーやコンセプトを赤地のカラム内に組み込み、お知らせはサイドへ移す
- フッターのリンクは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-18fc2468`（元 LP の URL から採番）
- **元 LP**: https://www.sozobox.pf.japanpost.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

その他山吹×焦げ茶の秋の商業施設イベントLPAutumn Mustard Seasonal Mall Event LP その他紺×金の明朝で魅せる眼鏡専門店サービス LPNavy and Gold Craftsman Optical Service LP その他青×水色×クリームの交通系モバイルサービスLPBright Blue Mobile Transit Service LP その他赤×紺×黄の手書き風ポップ店舗キャンペーン LPBold Red Navy Yellow Pop Retail Campaign LP その他白×金×焦げ茶の上品な家事代行サービスLPWarm Gold Premium Housekeeping Service LP その他ミント緑×朱色の線画イラスト士業相談 LPMint Green Friendly Professional Service LP