---
version: alpha
name: Pastel Hologram K-Style Furisode Catalog LP
description: ピンク・水色・ラベンダーのパステルグラデーションに、ホログラム風の光る帯をあしらった振袖スタイル特集LP。極太の手書き風ゴシック見出しと黒文字の細ゴシック本文を組み合わせている。写真を大きく見せるスライダー、白いピル型ボタン、きらめきの装飾で、K-POP風のトレンド感を出す。
colors:
  primary: '#FEBCD5'
  secondary: '#A3DAF9'
  background: '#F4EBFC'
  background-alt: '#DAF3F1'
  tint-1: '#DFD3FB'
  tint-2: '#FBDDFD'
  surface: '#FEFEFE'
  text: '#212121'
  text-muted: '#5F545A'
  line: '#221F24'
  accent-1: '#F2E924'
  accent-2: '#F4A9C9'
  cta: '#FEFEFE'
  on-cta: '#221F24'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Fredoka
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
  headline-md:
    fontFamily: Mochiy Pop One
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Kosugi Maru
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.08em
  accent:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  label-button:
    fontFamily: Mochiy Pop One
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  style-selector-button:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 64px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  back-link:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 24px
  photo-slider:
    backgroundColor: '{colors.surface}'
    height: 520px
  caption-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 64px
  check-badge:
    backgroundColor: '{colors.text}'
    textColor: '{colors.surface}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 44px
  scroll-divider:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 24px
  intro-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 900px
---

# DESIGN.md — パステルホログラムの韓国風振袖カタログLP（Pastel Hologram K-Style Furisode Catalog LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、ポップ・元気、クール・先進的、やさしい・柔らかい
- **キーワード**: パステルグラデーション・ホログラム・K-POP・きらめき・カタログ型・写真主役
- **地の質感**: ピンクから水色への柔らかいグラデーション地。写真の周りにホログラム風の虹色が流れる光沢帯を置く。
- **形**: 白いピル型ボタン、立体的なゼリー調の選択ボタン、細い黒枠の写真、四芒星のきらめき。
- **温度感**: やや涼しいパステル。黒の文字と小物で引き締める甘辛バランス。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FEBCD5` | ブランドを代表するピンクのグラデーション地 | 12% | 画素の実測 |
| `secondary` | `#A3DAF9` | 対になる水色のグラデーション地 | 8% | 画素の実測 |
| `background` | `#F4EBFC` | セクションの淡いラベンダー白地 | 20% | 画素の実測 |
| `background-alt` | `#DAF3F1` | 商品説明ブロックのミント地 | 10% | 画素の実測 |
| `tint-1` | `#DFD3FB` | 説明ブロックのラベンダー地 | 8% | 画素の実測 |
| `tint-2` | `#FBDDFD` | 説明ブロックの薄紫ピンク地 | 6% | 画素の実測 |
| `surface` | `#FEFEFE` | 写真の白フレームとボタン面 | 11% | 画素の実測 |
| `text` | `#212121` | 見出しと本文の黒 | 6% | 画素の実測 |
| `text-muted` | `#5F545A` | 注釈の文字 | 1% | 画素の主要色に補正 |
| `line` | `#221F24` | 写真の細い枠線とキャプション枠 | 0% | 画素の主要色に補正 |
| `accent-1` | `#F2E924` | ポップ系スタイル名の黄色ロゴ文字 | 0% | 画素の実測 |
| `accent-2` | `#F4A9C9` | キュート系スタイル名のピンクロゴ文字 | 0% | 推定 |
| `cta` | `#FEFEFE` | 詳細リンクの白いピル型ボタン | 1% | 画素の実測 |
| `on-cta` | `#221F24` | ボタン上の黒文字 | 0% | 画素の主要色に補正 |

- 地はピンク・水色・ラベンダーのパステルグラデーションにし、セクションごとに色相を少しずつずらす。
- 商品説明ブロックはミント→ラベンダー→ピンクの淡い単色系の地を交互に使う。
- 文字と線はほぼ黒に統一し、パステル地を引き締める。
- 写真の左右にはホログラム風の虹色光沢帯を敷き、華やかさを出す。
- ボタンは白地に黒文字で、塗りの強い色は使わない。
- 黄色とピンクはスタイル名ロゴのアクセントだけに使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 特集タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.25 | 0.05em |
| `headline-lg` | スタイル名の欧文ロゴ見出し | 欧文サンセリフ | Fredoka | 700 | 40px | 1.1 | 0.0em |
| `headline-md` | 写真下の2行キャッチ | 手書き・筆 | Mochiy Pop One | 700 | 20px | 1.5 | 0.08em |
| `headline-sm` | リード見出し・問いかけ | 丸ゴシック | Kosugi Maru | 700 | 17px | 1.7 | 0.08em |
| `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.08em |
| `accent` | 品番・Scroll・hair&make の小見出し | 欧文サンセリフ | Montserrat | 500 | 15px | 1.4 | 0.05em |
| `label-button` | ピル型ボタンのラベル | 手書き・筆 | Mochiy Pop One | 700 | 13px | 1.0 | 0.08em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em |

- 見出しはクセのある太いポップ書体で、2行に分けて中央に揃える。
- スタイル名は欧文の丸い極太ロゴにし、水色やピンクのずれた影を付ける。
- 本文は細めのゴシックで行間を広くとり、左に揃える。
- 品番は欧文の細字で、本文の上に1行置く。
- 字間はやや広め（0.05〜0.08em）にして、余裕のある印象にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 24px、基本単位 8px、カード内 24px（375px 幅換算）
- 1着ごとに「写真スライダー→キャッチ→色地の説明ブロック→ボタン→一覧へ戻るリンク」を1セットにして繰り返す。
- 写真は画面幅の約80%で、左右に前後のスライドを少しのぞかせる。
- 説明ブロックは全幅の色地で、本文は左右に約60pxの余白をとる。
- ボタンは中央に置き、幅は約60%にする。
- スライダーの左右には細い山形矢印を置く。

## Elevation & Depth

- 選択ボタンはゼリー調の立体ピル型で、内側にハイライト、下に淡いピンクの影を付ける。
- ロゴ文字には水色のオフセット影を付ける。
- 写真カードは影を付けず、白いフレームと光沢帯で浮かせる。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 縦長の長方形で角丸なし。白いフレームか細い黒枠で囲む。
- **セクション境界**: 直線で色地を切り替える。グラデーションを自然につなぐ。
- ボタンはすべて完全なピル型にする。
- キャプション枠は白地に黒い細線の長方形にし、写真の下端に重ねる。
- 白い四芒星のきらめきを角や境目に散らす。
- 曲線の細い黒線で写真を包むような軌道を描く。

## Components

- **スタイル選択ボタン**（`style-selector-button`）: 水色からピンクへのグラデーションのゼリー調ピル。小さな和文ラベルと大きな欧文ロゴを載せ、右端に三角の矢印を付ける。
- **詳細リンクボタン**（`button-primary`）: 白いピル型に黒いポップ書体のラベル。色地の説明ブロック内で中央に置く。
- **一覧へ戻るリンク**（`back-link`）: 黒い三角の記号と欧文混じりの小さなテキストリンク。
- **ホログラム枠の写真スライダー**（`photo-slider`）: 虹色の光沢帯の上に白フレームの写真を置き、左右に細い矢印を付ける。
- **黒枠キャプション**（`caption-box`）: 写真の下端に重ねる白地・黒細線の箱に、ポップ書体の2行キャッチを入れる。
- **チェック丸バッジ**（`check-badge`）: 黒丸に白いチェック。小さな筆記体のラベルを添え、おすすめ小物の見出しに付ける。
- **Scroll 区切り線**（`scroll-divider`）: 左右の細い矢印線の中央に、手書き風の欧文を置く。
- **導入カード**（`intro-card`）: 半透明の白カードに白い細枠とキラキラを添え、リード・本文・選択ボタンをまとめる。

## Do's and Don'ts

**Do**
- パステルのグラデーションを地に敷き、セクションごとに色相を移す。
- 写真は大きく見せ、ホログラム風の光沢帯で囲む。
- 見出しはポップで太い書体、本文は細いゴシックで差をつける。
- 白い四芒星のきらめきを要所に散らす。
- 1着ごとの構成を同じ順番で繰り返し、カタログらしく見せる。

**Don't**
- 原色や濃い背景色を広い面に使わない。
- ボタンを角張らせたり、濃色で塗ったりしない。
- 写真に強い影や太い装飾枠を付けない。
- 明朝体などの和の格式ばった書体を見出しに使わない。
- 本文の行間を詰めない。

## Page Structure

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

1. **ファーストビュー**（トレンド感と特集テーマを一目で伝える）: モデル2人の大きな写真に、手書き風の外国語ロゴと縦書きの白帯コピーを重ねる。周りに曲線とキラキラを添え、地はパステルのグラデーション。
2. **特集タイトルと導入**（コンセプトを語る）: 極太の2行タイトルの下に白い導入カードを置き、太字のリードと行間の広い本文を並べる。
3. **スタイル選択**（好みの系統へ誘導する）: 問いかけ見出しの下に、ゼリー調のピル型ボタンを3つ縦に並べる。
4. **スタイル見出し**（系統の始まりを示す）: 短い説明文・小さな和文ラベル・大きな欧文ロゴを順に置き、Scroll 区切り線を添える。
5. **サムネイルスライダー**（その系統の着物を一覧で見せる）: 白フレームの縦長写真を、ホログラム地の上で横にスクロールさせる。
6. **商品詳細（繰り返し）**（1着ずつ魅力を伝える）: 写真スライダー、ポップ書体のキャッチ、色地の品番・説明文、白いピル型ボタン、戻るリンクの順に並べる。
7. **ヘアメイク紹介**（トータルコーデを提案する）: 筆記体の小見出し、黒枠のバストアップ写真、重ねたキャプション箱、本文の順に置く。
8. **おすすめ小物**（小物の合わせ方を見せる）: チェックバッジ付きの見出しの下に、白背景の小物写真と※注釈を置く。
9. **スタイル切替ナビ**（ほかの系統へ回遊させる）: 白いピル型の帯の中に、3系統のロゴを横に並べる。

## Imagery

- モデルは白壁かグレーのコンクリート風の背景で撮影し、韓国アイドル風のメイクとポーズにする。
- 振袖には黒レースやチュール、ベレー帽などの洋小物を合わせ、甘辛ミックスにする。
- 写真の背後には、虹色のホログラムフィルムのような光沢帯を敷く。
- 白い四芒星のきらめきと、細い黒の楕円軌道線を装飾に使う。
- 小物は白背景の俯瞰で物撮りする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では、ファーストビューは左に縦タイトル、右に写真を置く。
- PC の導入は横長カードにし、左に本文、右に選択ボタンを置く2カラムにする。
- PC の商品詳細は、写真と説明文を左右交互に配置する。
- PC では写真上部にサムネイルを3枚並べ、横に縦書きの欧文ラベルを添える。
- PC のサムネイルスライダーは、横一列に7枚程度を見せる。

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