DESIGN.md — 黄×生成りのレトロ写真コラージュ衣料LP（Retro Film Collage Character Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: レトロ、かわいい、親しみ・手作り感、上品・高級
• キーワード: フィルム写真・旅のアルバム・ポラロイド枠・章ごとの地色切替・レトロ欧文見出し・キャラクター線画
• 地の質感: 古紙のような生成りの地とフィルムの粒子感。セージ地には細い縦ストライプを敷く。
• 形: 四角い写真を少し傾けて重ねる。白フチと薄い影を付ける。円形のカテゴリボタンを使う。
• 温度感: 温かい（くすんだ暖色が中心）

Colors

• 章ごとに地色を1色に決め、全幅で切り替える。順番は黄→白→生成り→黄→白→生成り→セージ縞→ピンク。
• 見出しの色は地に合わせる。白・生成りの地には赤・青・黄の欧文、ピンクの地には青を使う。
• 本文と価格は墨色1色にする。強調のために色を変えない。
• 彩度の高い色は見出しとキャラクター線画だけに使う。
• 写真は退色したフィルム調にそろえ、地色と温度感を合わせる。

Typography

• 見出しはすべて欧文にし、章ごとに書体を変えて旅雑誌のように見せる。
• 章タイトルの一部は弧状やアーチ状に配置する。
• 本文は中央揃えで1段落だけにする。同じ英文段落を章の区切りに繰り返してよい。
• 価格は品名の大文字と数字に円の英表記を付けて表す。写真の左下か右下に添える。
• 日本語は冒頭のリード文にだけ使い、細めの丸ゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は幅をずらし、重ねて配置する
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 6px（375px 幅換算）
• 写真は全幅、75%幅を左寄せ、75%幅を右寄せの3種類を交互に使う。
• 写真同士は10〜30px重ねるか、白フチ付きで傾けて散らす。
• 各章は全幅写真で始め、続けてコラージュを置く。
• キャラクター線画は写真の角や余白に小さく添える。
• 章と章の間は60〜100pxの余白をとる。

Elevation & Depth

• ポラロイド風の写真には白フチ6px前後と、薄くぼかした影（0 2px 6px rgba(0,0,0,.2)）を付ける。
• 黄の章では、写真に黒い細枠を付けて平面的に重ねる。
• UIには影を使わない。ボタンは線だけで表現する。

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 縦長の四角に切り抜く。白フチ付きで−6〜+6度傾ける。
• セクション境界: 基本は直線で地色を切り替える。締めのピンク章だけは上端を大きなアーチにする。
• 写真に角丸を付けない。
• カテゴリボタンは細い墨色の線の正円にする。
• 一覧ボタンは角丸6px前後の長方形にし、2pxの枠線を付ける。
• 黄の章の写真は黒い1〜2pxの枠にする。

Components

• 傾いたポラロイド写真（polaroid-photo）: 白フチと薄い影を付けた写真。数枚を傾けて重ね、アルバムのように散らす。
• 品名・価格キャプション（price-caption）: 写真の下の隅に置く、手書き風の大文字2〜4行。
• レトロ欧文の章タイトル（retro-chapter-title）: スラブ体や縁取りの黄文字、弧状に並べた文字などで章名を示す。脇にキャラクター線画を添える。
• 円形カテゴリボタン（category-circle）: 白地に細い墨線の正円。中に小さな前置き語と対象名を2行で入れる。3個と2個の2段に並べる。
• 全商品へのボタン（button-primary）: 白地に墨色の枠線と大文字ラベルを置いた横長ボタン。
• 流れるテキスト帯（marquee-band）: 写真の上端に重ねる細い帯。コラボ名を小さく繰り返して流す。
• 写真スライダー（carousel-photo）: 白フチ写真の左右に細い矢印を置き、下にドットを並べる。
• 制作クレジット（credit-list）: 役職と名前を中央揃えの小さな大文字で列挙する。

Do's and Don'ts

Do - 写真はすべてフィルム調で、退色した暖色系に統一する。 - 章ごとに地色と見出し書体を変え、旅の行程のように見せる。 - 写真の傾き・重なり・サイズ違いでリズムを作る。 - キャラクターや線画のイラストは小さく、余白のアクセントに留める。 - 説明は短い英文1段落と価格だけにして、写真で語る。

Don't - 鮮やかなグラデーションや光沢のあるボタンを使わない。 - 写真に角丸や太い影を付けない。 - 日本語の長い説明文や箇条書きの訴求を入れない。 - 価格を大きく目立たせたり、赤字にしたりしない。 - 全ページを白地だけで通さない。

Page Structure

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

1. ファーストビュー（世界観を一枚で伝える）: 全幅の縦長フィルム写真だけを置き、文字は載せない。
2. コンセプト導入（記念企画の趣旨を伝える）: 黄地に極太欧文タイトル、英文段落、記念ロゴ、日本語リード文を中央に積む。
3. 章1：旅の出発地（主力アイテムの着用を見せる）: 白地に縁取り黄文字の章名を置く。写真を左右にずらして重ね、価格キャプションを添える。
4. 小物コラージュ（雑貨アイテムを紹介する）: 白フチ写真を傾けて散らし、隅にキャラクター線画を置く。
5. 章2：ゆかりの街（街歩きのスタイリングを見せる）: 生成り地にスラブ体の章名を置く。全幅写真に、赤の3行メッセージと短い英文を続ける。
6. ペアルック章（男女のペア着用を見せる）: 黄地に黒枠の写真を重ね、英文段落と小さな線画で締める。
7. 章3：施設めぐり（限定アイテムを紹介する）: 白地に、弧状に並べた青・赤・黄の章名と傾いた写真を交互に置く。
8. キッズ章（子ども向けアイテムを見せる）: 生成り地にホテル室内の写真を並べ、連続写真を3コマ並べる。
9. ルームウェア章（寝具とペアの部屋着を見せる）: セージの縦縞地に流れるテキスト帯を置き、ポラロイド写真とスライダーを並べる。
10. パーティー章（祝祭感で締めくくる）: ピンク地の上端をアーチにし、青の極太タイトル、重ねた写真、英文段落、全幅写真を続ける。
11. カテゴリ導線（一覧ページへ送客する）: 生成り地に円形ボタン5個と、横長の枠線ボタンを置く。
12. クレジット・フッター（制作者を明記し、謝意を示す）: 中央揃えの小さなクレジットを置き、手書き風の謝辞2行と権利表記で終える。

Imagery

• 35mmフィルム風の写真。粒子感があり、暗部が少し緑がかり、彩度は低めにする。
• 空港・街角・アイスリンク・クラシックなホテルなど、旅先のロケーションでモデルが自然に佇む構図にする。
• 像や壁画など、現地のキャラクター要素を背景に写し込む。
• 商品だけを撮る場合は、壁の前に吊るすか床に置き、生活感のある場所で撮る。
• 白背景のモノクロ線画キャラクターを小さく配置して、写真の間を埋める。
• セージ地には細い縦ストライプのテクスチャを、生成り地には紙のムラを薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも幅は約1000pxに収める。写真は2〜3枚を横に並べ、重ねて散らすコラージュにする。
• PCではタイトルを1行にまとめ、英文段落を横長にする。
• PCの円形カテゴリボタンは5個を横1列に並べる。
• 冒頭の全幅写真は、PCでは横長にトリミングする。
• 地色の切り替え順とアーチ型の境界は、SPとPCで共通にする。

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 行書くと起動時に読み込まれる。