DESIGN.md — くすみ青×くすみピンクのルームウェア図鑑LP（Dusty Blue and Rose Lookbook Roomwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル
• キーワード: くすみカラー・ルックブック・欧文セリフ・弧を描く文字・楕円フレーム・きらめき装飾
• 地の質感: グラデーションも影もないマットな単色面。写真のやわらかい光と起毛素材の質感で温かみを出す。
• 形: 楕円・アーチ・片側の角だけ大きく丸めた写真枠。縦方向の弧に沿って英字を回す。
• 温度感: 前半は青で静かで涼しく、後半はピンクで温かい。全体として低彩度でやわらかい。

Colors

• ページを2章に分け、前半はブルー系、後半はローズ系で背景をそろえる。
• 各章で濃い地と明るい地を交互に置き、帯の切り替えでリズムをつくる。
• 見出しと弧文字は、その章の地色を濃くした同系色にする。黒は使わない。
• 白は導入文・楕円カード・フッターだけに使う。
• 彩度の高い色やCTA用の強い色は入れず、写真の色を主役にする。
• 透かし英字は地色より少し明るい色で大きく敷く。
• oval-intro-card は文字 #6E8093 × 背景 #FDFEFE のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#667789、4.55:1）を使う。
• view-all-link は文字 #B5737A × 背景 #FEFEFE のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#AA5F67、4.58:1）を使う。

Typography

• 見出しはすべて欧文セリフにし、日本語の大見出しは使わない。
• 本文は小さめにして中央揃えにし、行間を広く取る。
• アイテム名は写真の角に沿わせるか、円・波の形に沿って回す。
• 大きな透かし英字は写真と重ねてよい。
• 太字はほとんど使わず、細めから中くらいの太さで上品さを保つ。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真は左右へずらして非対称に置く。
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右交互・斜めにずらし、余白を多めに残す。
• 写真が背景帯の境目をまたぐように置き、章の切り替えをなめらかにする。
• アイテムごとに写真1〜2枚と英字ラベルをまとめて1ブロックにする。
• テキストは最小限にして、楕円カードか短い中央揃えの段落にまとめる。
• ポンチョのような連続カットは横に4枚並べ、SPでは横スクロールにする。

Elevation & Depth

• 影は使わず、完全にフラットにする。
• 奥行きは写真と透かし文字の重なりと、帯の色の差で出す。
• 楕円カードは細い同系色の線を二重にして縁取る。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 48px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の1〜2隅だけ大きく丸めた形、上だけ丸いアーチ、縦長の楕円を組み合わせる。
• セクション境界: 直線で色の帯を切り替える。写真を境目にまたがせて置く。
• 写真ごとに丸める隅を変え、リズムをつくる。
• 説明カードは縦長の楕円にする。
• 四隅とも同じ角丸のカードを並べるのは避ける。
• 小さなきらめき（4方向に光る星）を余白に散らす。

Components

• 楕円の紹介カード（oval-intro-card）: 白い縦長の楕円に細い縁取り。英字の名前、日本語の短い説明、角にキャラクターのイラストを置く。
• 片側だけ丸い写真枠（corner-round-photo）: 1〜2隅だけ大きく丸めた写真。右下に小さなコピーライト表記を入れる。
• 弧を描くアイテム名（arc-label）: 写真の角に沿って曲がる、大文字の欧文セリフのアイテム名。
• 透かしの大見出し（watermark-title）: 地色よりわずかに明るい色の大きな欧文セリフを、3行に分けて写真に重ねる。
• 横に流れる英字帯（marquee-text）: アイテム名を繰り返す1行の英字帯。画面の端から端まで流れ、写真の下を通る。
• 波・円に沿う英文（wave-text）: 円や波の線に沿って英文を回し、楕円の写真を囲む。
• きらめき装飾（sparkle）: 細い線で描いた小さな4方向の星。余白に2〜3個ずつ散らす。
• 一覧リンク（view-all-link）: 白地の中央に置く欧文セリフのテキストリンク。両側に小さな星を添える。

Do's and Don'ts

Do - 章ごとに1つの色系統で背景・文字・装飾をそろえる。 - 写真は大きく、非対称にずらして置く。 - 英字は曲げる・流す・透かすの3通りで使い分ける。 - 余白を十分に取り、文字量は最小限にする。 - 楕円とアーチでやわらかい輪郭をつくる。

Don't - 鮮やかな原色や黒い太字を使わない。 - 影・グラデーション・立体的なボタンは使わない。 - 日本語の大きなゴシック見出しを置かない。 - 写真を均等なグリッドに整列させすぎない。 - 価格訴求や派手なバッジを入れない。

Page Structure

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

1. ファーストビュー（2つのテーマを並べて世界観を示す）: 青とピンクの写真を左右半分ずつ並べ、中央に白い欧文セリフのタイトルを重ねる。
2. 導入文（コレクションの概要を伝える）: 白地に小さな明朝体の文章を中央揃えで6〜7行置く。
3. テーマ1の紹介（1つ目のキャラクターとテーマを紹介する）: ブルー地の左に楕円カード、右に片側だけ丸い大きな寝室の写真を置く。
4. アイテム紹介（寝具）（主力アイテムを見せる）: 帯の境目をまたいで写真を置き、角に弧文字のアイテム名を添える。
5. アイテム紹介（小物）（小物アイテムを見せる）: 写真2枚を斜めにずらして置き、透かしの大見出しを重ねる。
6. 着用イメージ（着用した雰囲気を伝える）: アーチ形の写真の横に英語のひとことを添え、ポンチョ写真と横に流れる英字帯を組み合わせる。
7. テーマ2の紹介（2つ目のテーマへ切り替える）: ローズ地にして、テーマ1と左右を反転した構成で繰り返す。
8. テーマ2のアイテム群（寝具・小物・着用イメージを見せる）: 楕円の写真と波に沿う英文、4枚の連続カット、片側だけ丸い写真で構成する。
9. 一覧リンク・クレジット（商品一覧へ誘導し、制作者を記す）: 白地の中央に欧文の一覧リンクと、小さな文字のクレジットを中央揃えで置く。

Imagery

• 欧風の寝室やリビングで撮ったやわらかい自然光の写真。カーテンや壁は章の色に合わせる。
• 起毛・ボア素材のアップで手ざわりを伝える。
• モデルは眠る・くつろぐなど穏やかなポーズで撮る。
• 写真の色は低コントラストで、くすんだトーンに整える。
• 角に小さなキャラクターのイラストを添える。
• 装飾は細い線のきらめきだけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元画像はPC版のみ。PCでは写真を左右に大きく振り、空いた余白に文字を置いている。
• SPでは1カラムにし、写真は幅85〜90%で左右交互に寄せる。
• 楕円カードはSPでは写真の上に配置し、幅70%程度にする。
• 4枚の連続カットはSPでは2×2か横スクロールにする。
• 透かし英字はSPで40px前後に縮め、写真との重なりは保つ。

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