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

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

Typography

• 見出しはクセのある太いポップ書体で、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

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

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