DESIGN.md — パステル銀河×溶けるアイスのルームウェアLP（Pastel Dreamy Galaxy Loungewear Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: パステル・溶けるアイス・銀河・星・ルックブック・ふわふわ質感・夢見心地
• 地の質感: マットなパステル単色の地に、雲や星屑のソフトフォーカス写真を重ねる。紙のようにフラットで影はない
• 形: しずく状に垂れる境界、波形の切り抜き、大きな角丸、円形の写真、土星の輪のような細い弧線
• 温度感: やや冷たいラベンダーとミントに、ピーチの暖色をはさむ。全体は柔らかい中間の温度

Colors

• カテゴリごとに地の色をラベンダー、ミント、ピーチから一色選んで切り替える
• 見出しと価格の文字色は、地の色を濃くした同じ系統の色にする
• ピーチ地のセクションだけ、線と文字をゴールドにする
• 写真の上に重ねる文字は白にする
• 濃い色や彩度の高い色は商品写真の中だけに使い、地には使わない
• 黒い文字は使わない。最も濃い文字でもくすみ中間色に留める
• page は文字 #95B8B7 × 背景 #FFFFFF のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#547E7D、4.51:1）を使う。

Typography

• 見出しと商品情報は、縦長のコンデンスド体の英字（全て大文字）で統一する
• 日本語は導入文だけに使い、細めのゴシック体で中央揃え、行間を広く取る
• 価格のキャプションは写真の角に沿わせ、回転や円弧に沿わせた配置も使う
• 見出しは大きくしすぎず、円の中に収まるサイズにする
• 太字の訴求コピーや強調マーカーは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真を左右交互に寄せて配置する
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算）
• 商品写真は画面幅の約 80〜95% にし、左右どちらかへ寄せて非対称にする
• 写真と写真の間は 80〜120px 空け、浮遊する装飾を置く
• カテゴリ見出しのリングは、セクション冒頭の写真の右上か左上に重ねる
• キャプションは写真の直下か、写真の端に重ねて置く
• 導入文は中央揃えにし、上下に 80px 以上の余白を取る

Elevation & Depth

• 影は基本的に使わず、フラットに見せる
• 写真に白い太縁と傾きを付けて、ポラロイド風の浮きを出すことがある
• 影の代わりに、装飾イラストを写真の縁に重ねて奥行きを出す

Shapes

• 角丸: 小 8px ／ 中 24px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 片側だけを大きな角丸にした長方形、円形、波形のブロブ形を混在させる。円形の写真にはゴールドの弧線を巻き付ける
• セクション境界: 上の色が溶けたアイスのしずくのように垂れ落ちる形、または緩い波形
• 写真の下端からも、しずく状の垂れを伸ばすことがある
• カテゴリ見出しは細い線の円にし、右下に四芒星のきらめきを付ける
• 直線の区切り線は使わない

Components

• リング見出し（ring-heading）: 細い線の円の中に、コンデンスド体の英字でカテゴリ名を置く。右下に四芒星を付ける
• ブランド帯（brand-band）: メインビジュアルの直下に置く、くすみピンクの横帯。白い字間の広い欧文を載せる
• しずく境界（drip-divider）: セクションの地の色が下へ垂れ落ちるような境界の形
• 商品キャプション（product-caption）: 品名と価格を英字の大文字で 1〜4 行並べる。地の色を濃くした色か白で書く
• 軌道付き円形写真（orbit-photo）: 円形に切り抜いた商品写真に、ゴールドの細い弧線を土星の輪のように斜めに掛ける
• 浮遊装飾（floating-deco）: アイスの玉、惑星、フラットなキャラクターイラスト、星の小さなアイコンを余白に浮かべる
• リング型リンク（ring-link）: 星空の背景の中央に細い円を置き、英字のラベルを入れた一覧への導線

Do's and Don'ts

Do - カテゴリごとにパステルの地の色を切り替えて、章立てを見せる - 写真の切り抜き方を、角丸・円・波形と変えてリズムを出す - 余白にはアイスや惑星などの装飾を浮かべ、空白を楽しく見せる - 文字は少なくし、英字の小さなキャプションだけで情報を伝える - 撮影背景も雲・星空・パステル色にそろえる

Don't - 純黒の文字や彩度の高い原色の地を使わない - 四角く太い購入ボタンや、赤い強調の帯を置かない - 長い日本語の説明文や箇条書きを並べない - 直線の区切りや硬いグリッドで整列させない - 濃いドロップシャドウを付けない

Page Structure

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

1. ファーストビュー（コラボの世界観を一枚で伝える）: パステルの雲と浮かぶアイスの中にモデル 2 人を立たせた全幅写真。左上にロゴ、直下にブランド帯を置く
2. コンセプト導入（物語の口調で情緒を伝える）: ミント地に、中央揃えの短い詩的な行を 4 段落置く。その下に音声オン表示付きの動画枠を置く
3. ウェア（主力のルームウェアを見せる）: ラベンダー地にリング見出しを置き、モデル写真を左右交互に並べる。写真の下端からしずくを垂らし、価格キャプションを添える
4. ニット雑貨（ブランケットやポーチを見せる）: ミント地を波形の境界で区切り、全幅写真を斜めのキャプションと並べる
5. グッズ（小物を見せる）: ピーチ地に、ゴールドの軌道線付き円形写真を縦に並べる。キャプションは円弧に沿わせる
6. キッズ・ベビー（親子向けの商品を見せる）: ラベンダー地に、ブロブ形に切り抜いた写真と回転させたキャプションを並べる
7. 寝具（枕カバーやクッションを見せる）: ミント地に、白い縁の角丸写真と大きな角丸写真を並べる
8. ペット（ペット用ウェアを見せる）: ピーチ地に、軌道線付きの円形写真とキャラクター装飾を置く
9. 一覧導線・フッター（全商品ページへ誘導する）: 淡い水色の星空背景の中央にリング型リンクを置き、最下部に小さな著作権表記を入れる

Imagery

• 雲・星屑・パステルのグラデーションの空を背景にしたスタジオ撮影
• アイスクリームの玉を惑星に見立てて宙に浮かべ、溶けて垂れる表現を加える
• 物撮りはピンクの大理石調やラベンダーの星空の上に、真上や斜め上から置いて撮る
• モデルは無表情か微笑みにし、ナチュラルなポーズで全身か上半身を撮る
• 装飾には単色フラットのキャラクターイラストと四芒星のきらめきを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は画面中央に約 33% 幅の SP レイアウトの列をそのまま置き、左右は白い余白にする
• PC は左側にカテゴリの円形サムネイルナビを、右側に一覧へのピルボタンを固定する
• PC の左右の余白には、淡いミントの地に水色の星を散らす
• 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 行書くと起動時に読み込まれる。