DESIGN.md — 紺×くすみモーブのルームウェア特集 LP（Navy and Dusty Mauve Editorial Loungewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい、シンプル・ミニマル
• キーワード: エディトリアル・楕円フレーム・欧文セリフ・くすみカラー・肉球モチーフ・写真主体
• 地の質感: マットな単色面にやわらかい自然光の写真を置く。グラデーションや影は使わない
• 形: 楕円・アーチ・片側だけ角丸の矩形で写真を切り抜く。ボタンや枠線はほとんど使わない
• 温度感: 濃紺の落ち着きとくすみピンクの温かさが半々。全体はやや涼しげで上品

Colors

• 地は濃紺・白・くすみモーブの3色だけで、セクションごとに切り替える
• 濃紺の地には白の文字と白い肉球を、淡い地には濃紺の文字と肉球を置く
• 派手な強調色は使わない。商品のパステル色を写真で見せる
• モーブ帯は写真の横スクロール列やセット紹介の地に使う
• 文字は基本的に濃紺か白の1色。グレーの本文は使わない

Typography

• 見出しはすべて大文字の欧文セリフで、字間は広めにとる
• 和文は FV 直後のリード文だけに使い、短い行を中央揃えで行間を広くする
• ラベルは写真の端に半分かかるように重ねる
• 大きな欧文は90度回転させて帯の左右端に配置する
• 太字は使わず、細めのウェイトで上品にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か、左右の余白を少し残した中央寄せ
• 本文ブロックの幅: 画面幅の約 72%
• 余白: セクション間 70px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真は全幅、楕円、アーチの3パターンを交互に使い、単調にしない
• 横スクロール風に写真を3枚並べ、両端の写真は見切れさせる
• セクション間は単色の地を切り替えて区切る
• テキストブロックは最小限にし、写真で語らせる
• 肉球アイコンを斜めの足跡状に並べ、次のセクションへ視線を誘導する

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真と単色の面の重なり（アーチ写真の背後にずらした濃紺の板）で出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 120px。ボタンは角丸の長方形。
• 写真の切り抜き: 縦長の楕円、上だけ半円のアーチ、角を1つだけ大きく丸めた矩形
• セクション境界: 直線で単色の面を切り替える
• 写真の矩形は角丸なしの直角にする
• 楕円は縦長で、地の幅の85%程度にする
• アーチ写真の背後に同じ形の濃紺の板をずらして重ねる
• 肉球は丸みのあるシルエットで、小さく散らす

Components

• 楕円写真フレーム（oval-photo-frame）: 濃紺かモーブの地の中央に縦長の楕円写真を置き、欧文ラベルを2つ重ねる
• アーチ写真＋曲線文字（arch-photo）: 上が丸い写真の輪郭に沿って欧文を曲げて配置する
• 回転欧文ラベル（rotated-label）: 帯の左右端に90度回転させた大きなセリフ体を置く
• 見切れ写真列（photo-carousel-row）: 中央に1枚、両端を見切れさせた縦長写真を並べ、下に欧文アイテム名を置く
• 肉球の足跡装飾（paw-trail）: 5個前後の肉球を斜めに並べ、セクションの境目にまたがせる
• 一覧誘導の写真リンク（view-all-link）: 角を丸めた濃紺の板と写真を重ね、一覧への導線となる欧文を縦横に配置する
• FV コラージュ（fv-collage）: 写真3枚を格子状に組み、1マスを濃紺にしてコレクション名を置く

Do's and Don'ts

Do - 地の色は濃紺・白・モーブの3色に絞る - 欧文見出しは大文字のセリフ体にし、字間を広くとる - 写真の切り抜きは楕円・アーチ・矩形を順番に使い分ける - 肉球アイコンでセクションの間をつなぐ - モデルと動物がおそろいの服を着たカットを入れる

Don't - 原色や蛍光色の CTA ボタンを置かない - 影・グラデーション・太い枠線を使わない - 和文の長い説明文を多用しない - 丸ゴシックやポップな書体を使わない - 写真の上に文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（コレクションの世界観を一目で伝える）: 写真3枚と濃紺1マスのコラージュ。下端に限定表記の欧文を重ねる
2. コンセプト文（コレクションのテーマと限定性を説明する）: 濃紺の地に白い和文4行を中央揃えで置き、肉球を散らす
3. アイテム詳細写真（柄や素材感を見せる）: 濃紺の地に縦長写真を置き、続けて全幅のアップ写真を入れる
4. セットアップ紹介1（色違いのセットを見せる）: 濃紺の地に楕円写真を置き、2つの欧文ラベルを重ねる
5. ライフスタイル写真（人と動物でおそろいを着る情景を見せる）: 全幅の自然光写真
6. アイテム列（上下のアイテムを紹介する）: 白い地に見切れ写真を3枚並べ、欧文ラベルを付ける
7. ペットウェア（動物用アイテムを紹介する）: アーチ写真に曲線の欧文を沿わせ、下に肉球の足跡を置く
8. セットアップ紹介2（別の色のセットを見せる）: モーブの地に楕円写真と欧文ラベル
9. ワンピース紹介（別アイテムを紹介する）: 全幅のアップ写真のあと、モーブの地に欧文見出しと見切れ写真の列を置く
10. メンズサイズ（サイズ展開を伝える）: 濃紺の地に楕円写真を置き、左右に回転させた大きな欧文を配置する
11. 一覧への導線（全商品ページへ誘導する）: 白い地に、写真と濃紺の角丸板を重ねた一覧への導線を置く

Imagery

• 白〜グレーの壁の前で自然光を使い、やわらかく低コントラストに撮る
• モデルは無表情か視線を外したポーズで、雑誌のように見せる
• 動物はモデルとおそろいの服を着せ、俯瞰や寝転びのカットも入れる
• 生地の質感が伝わる胸元のアップを全幅で使う
• 装飾は単色の肉球アイコンだけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC ではコンテンツ幅を約 960px に制限し、楕円写真と欧文ラベルを左右に分けた2カラムにする
• 見切れ写真の列は PC では5枚並べるか、横スクロールにする
• 回転させた欧文は 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 行書くと起動時に読み込まれる。