DESIGN.md — くすみミント×ベージュの有機形ルックブック眼鏡 LP（Organic Blob Editorial Eyewear Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、シンプル・ミニマル、ナチュラル、やさしい・柔らかい
• キーワード: 有機形の切り抜き・エディトリアル・くすみミント・ヌーディベージュ・墨色ピル・弧状の欧文
• 地の質感: フラットで紙のようなマット感。影は商品カードのみ控えめ。
• 形: 不定形のブロブで写真を切り抜き、カードとボタンは大きな角丸とピル。
• 温度感: やや暖かいニュートラル。ベージュの温かさにミントで清涼感を足す。

Colors

• 地は#F6F6F6の明るいグレーで、写真の背景をヌーディベージュに統一する。
• 章の始まり（FV・章扉）はくすみミント全面で区切る。
• 商品カルーセルはグレージュ／薄グレー／淡ミントの帯の上に白カードを置く。
• 強調色は墨色のみ。ボタン・ラベルピル・見出しを墨で締める。
• 鮮やかな色は写真の植物・花（緑・オレンジ）だけに任せる。

Typography

• 大見出しは丸みのある幾何学欧文で、和文の大見出しは使わない。
• 写真ブロブの縁に沿って欧文ラベルを弧状に配置する。
• 和文見出しは中サイズ・字間広めで2行に改行する。
• 本文は行間1.8、字間0.08em前後でゆったり組む。
• 価格・クレジットは左に名称、右に価格の左右揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は横スワイプのカルーセル
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 72px、基本単位 8px、カード内 28px（375px 幅換算）
• 写真は左右に寄せたり大小を組み合わせて余白でリズムを作る。
• スタイルごとに写真→和文見出し→本文→CTA→クレジットの順で積む。
• 商品カードは画面の約85%幅で、両隣が少し見えるように置く。
• テキストは左揃え、商品セクション見出しは中央揃え。

Elevation & Depth

• 基本はフラットで影なし。
• 商品カードは白面と地色の差だけで浮かせる。
• 最下部のバナーカードのみごく薄い影。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物・商品写真はアメーバ状の不定形ブロブでマスクする
• セクション境界: 直線で色帯を切り替える
• ブロブは毎回形を変え、左右非対称にする。
• カードは角丸32px程度の大きな丸み。
• ボタンはすべてピル型で右端に斜め矢印。
• ボックス紹介には細い1px線の四角枠を使う。

Components

• 墨色ピルCTA（button-primary）: 左寄せ文字と右端の↗矢印を持つ墨色ピル。幅は約3分の2。
• アウトラインピルボタン（button-outline）: 白地に1px墨線、文字左寄せ・↗矢印。購入や一覧への導線。
• ブロブ切り抜き写真（blob-photo）: ベージュ背景の人物写真を有機形でマスクし、植物を形からはみ出させる。
• 弧状欧文ラベル（arc-label）: 写真の上縁に沿って曲がる欧文の名前+番号ラベル。
• 商品カルーセルカード（product-card）: 白の大角丸カードに商品画像、色違いサムネ、品番・価格、CTA。左右に丸い矢印、下にドット。
• 着用アイテムクレジット（credit-list）: アイテム名と価格を左右に振り分けた小さな文字のリスト。
• モデル名ピル（name-pill）: 墨色ピルに白の欧文名とSNSアイコン。
• 細線ボックス（outline-box）: 1px線の四角枠内に欧文ロゴ見出しと詩的な短文を左揃えで。

Do's and Don'ts

Do - 写真背景はヌーディベージュに揃え、ブロブで柔らかく切り抜く。 - 欧文見出しは丸みのある幾何学サンセリフで大きく使う。 - 色帯はくすみミントとグレージュの2系統だけで章を区切る。 - ボタンは墨色ピル+↗矢印で統一する。 - 余白を広く取り、雑誌のような静かな流れを保つ。

Don't - 原色の赤・黄などのセール色を使わない。 - 写真を四角いまま並べない。 - 太いゴシックの大きな和文訴求見出しを入れない。 - ドロップシャドウやグラデーションを多用しない。 - バッジや吹き出しで情報を詰め込まない。

Page Structure

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

1. ファーストビュー（季節特集の世界観を一目で伝える）: グレージュ→ミントの面に大小ブロブ写真をコラージュし、斜体気味の欧文ロゴを重ねる。
2. テーマ紹介（今季のコンセプトを提示）: 小さな欧文前置き→大きな2行欧文→行間広めの和文詩文→年号。
3. 章扉（Seasonal items #番号）（テーマごとの章の開始）: 弧状欧文+大きな番号、2人のブロブ写真と商品ブロブ2つを散らす。
4. ファッションスタイル紹介（着こなし提案と商品導線）: 縦長全身ブロブ写真→2行和文見出し→本文→墨ピルCTA→クレジット。
5. ヘアメイク紹介（顔まわりの合わせ方を提案）: 顔アップのブロブ写真+弧状ラベル→見出し→本文→CTA。
6. 商品カルーセル（アイウエア）（着用フレームの購入導線）: グレー帯に中央欧文見出し、白カードの横スワイプ、注釈と一覧アウトラインボタン。
7. 商品カルーセル（サングラス）（フレーム×レンズの組合せ提案）: グレージュ/ミント帯、カード内をフレームとレンズで左右分割し×で結び、アウトラインボタン2つ。
8. ブランド紹介（シリーズの考え方を伝える）: 細線の四角枠にロゴ大見出しと詩的な短文。
9. モデルプロフィール（起用モデルの紹介）: 2人のブロブ写真、名前ピル+略歴本文を2組。
10. 関連特集バナー（回遊導線）: 白角丸カードに大きなロゴと角丸写真。

Imagery

• ベージュ無地のスタジオ背景で、人物を柔らかい自然光で撮る。
• グリーンの草花やオレンジのカラーを小道具として持たせ、色のアクセントにする。
• 商品は石・竹・木片・大理石など自然素材の上に置いて俯瞰で撮る。
• モデルは無表情気味のクールな視線、白・ベージュ・グレー中心の服。
• 商品カード用は白背景の正面切り抜き写真。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは写真とテキストを左右交互の2カラムに配置し、ジグザグに流す。
• PCの商品カルーセルは4枚横並びで表示。
• 章扉はPCで写真左・欧文見出しと商品ブロブ右に配置。
• ブランド紹介ボックスはPCで左ロゴ・右文章の横組み。
• FVはPCで3つのブロブを横一列に並べ、帯の高さを抑える。

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