DESIGN.md — くすみピンク×生成りの花柄ギフトアパレル LP（Soft Floral Editorial Gift Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、シンプル・ミニマル
• キーワード: ルックブック・くすみピンク・花束・余白・細い欧文・重なる写真
• 地の質感: マットな単色の地に自然光の柔らかい写真を置く。グラデーションや影は使わない。
• 形: 楕円・アーチ・円の写真切り抜きと、四角い写真のずらし重ね。細い縦線の枠もある。
• 温度感: 暖かめで淡く、春の午後のような穏やかなトーン。

Colors

• 地はくすみピンクを基本にし、部屋着の章だけ生成りグレーに切り替える。
• 文字色は商品の色に合わせる。ピンク章はピンク、ネイビー章は紫紺、イエロー章は黄色。
• 黒は使わず、濃い色でもグレーブラウンか紫紺にとどめる。
• 写真上の見出しは白抜きの細字にする。
• 鮮やかな色は写真の花だけに任せ、面の色はすべて彩度を落とす。
• page は文字 #6E6461 × 背景 #ECDEDE のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6B625F、4.54:1）を使う。

Typography

• 見出しは欧文だけにし、和文の見出しは置かない。
• 欧文見出しは極細のジオメトリック体で、単語ごとに改行して中央に積む。
• 色名の筆記体は写真の角からはみ出すように重ねる。
• 和文本文は小さめにして、行間と字間を広く取り中央揃えにする。
• 価格は『品名 価格yen』の形で1行ずつ並べ、右揃えか左揃えで写真の横に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして非対称に配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真の幅を60〜95%で変え、左寄せと右寄せを交互にする。
• 写真どうしを一部重ねたり、画面端で切ったりして雑誌のようなリズムを作る。
• 1章に色名・写真2〜3枚・価格を1組で置く。
• 章の間は60〜100px空ける。
• 生成り章は左右の細い縦線で枠のように囲う。

Elevation & Depth

• 影は一切使わず、重なりは写真を置く順番で表す。
• 写真の内側に白い細線を入れ、額装のように見せる。

Shapes

• 角丸: 小 0px ／ 中 24px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角が基本。ほかに縦長の楕円、上だけ丸いアーチ、片側だけ丸い角、正円をアクセントに使う
• セクション境界: 直線で地の色を切り替える。生成り章は細い縦線の枠で区切る
• ボタンの形は作らず、円形写真の上に白い文字を載せたものをリンクにする。
• アーチ写真には内側に細い白線の枠を付ける。
• 四角い写真は角丸なしにする。

Components

• 写真上の白抜きタイトル（hero-photo-title）: 全幅の人物写真の上部余白に、細い欧文を2行で中央に置く
• 楕円写真の見出し（oval-photo-title）: 縦長の楕円に切り抜いた花の写真に、白い細字の欧文を3行で重ねる
• 筆記体の色名ラベル（script-color-label）: 商品の色に合わせた筆記体の色名を、写真の角に重ねる
• 価格リスト（price-list）: 品名と価格を小さな欧文で2〜3行並べる
• アーチ枠写真（arch-frame-photo）: 上が半円のアーチ型写真に、内側の白い細線と白抜きの見出しを付ける
• 縦線で囲う章（line-framed-section）: 生成り地の左右に濃いグレーの細い縦線を引き、章全体を枠で囲む
• 円形写真のCTA（circle-link）: 正円に切り抜いた花束の写真に、白い細字で一覧へのリンク文言を3行で重ねる
• 縦書きの欧文ラベル（vertical-label）: 写真と写真の間に、90度回転させた細い欧文を置く

Do's and Don'ts

Do - 写真を主役にし、文字は小さく少なくする。 - 切り抜きの形を楕円・アーチ・円で変化させる。 - 章ごとに文字色を商品の色に合わせる。 - 余白を広く取り、写真の位置を左右にずらす。 - 見出しは極細の欧文で、単語ごとに改行する。

Don't - 塗りつぶしの太いボタンやピル型のボタンを置かない。 - 原色や真っ黒を面の色に使わない。 - 影・グラデーション・アイコンを使わない。 - 太字の和文見出しや煽る訴求バッジを入れない。 - 写真をグリッドで均等に並べない。

Page Structure

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

1. ファーストビュー（季節のギフトというテーマを伝える）: 全幅の人物写真の上部に、白い細字の欧文タイトルを置く
2. リード文（贈る気持ちとコレクションの概要を伝える）: ピンク地に、中央揃えの小さな和文を3段落で並べる
3. テーマ写真（花束のイメージで気分を作る）: 楕円の写真に白い欧文を重ねる
4. ピンクのルック（1つ目の色の商品を紹介する）: 四角い写真を3〜4枚ずらして置き、欧文単語と筆記体の色名、価格を添える
5. イエローのルック（2つ目の色の商品を紹介する）: 写真を重ね、黄色の筆記体と右揃えの価格を置く
6. ネイビーのルック（3つ目の色の商品を紹介する）: アーチ枠の写真で導入し、全幅に近い写真に紫紺の色名を添える
7. 部屋着の章（リラックスウェアを紹介する）: 生成り地を縦線で囲い、縦書きの欧文・アーチ写真・クリーム色の筆記体を置く
8. 落ち着いた時間の章（部屋着の続きと小物を紹介する）: ブルーグレーの欧文見出しの下に、写真を階段状にずらして置く
9. 小物の紹介（ギフト向けの雑貨を紹介する）: ピンク地に欧文見出しを置き、角丸の写真と四角い写真をジグザグに並べて価格を添える
10. ギフトサービス（ラッピングとカードの特典を伝える）: 白い細線枠の写真に白い欧文を載せ、その下に中央揃えの和文説明を置く
11. CTA（商品一覧へ誘導する）: 円形の花束写真に白い欧文を3行で重ねてリンクにする

Imagery

• 自然光の差し込む白い布や壁の前で撮った、柔らかい影のある人物写真。
• モデルが生花の花束やチューリップを持っている。
• 花の接写は背景を大きくぼかし、淡いグレーの背景にする。
• 小物はシーツの上に置き、斜めの日差しで撮る。
• 写真全体を低彩度・明るめに補正し、肌と布の白が飛びすぎないようにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では左側に固定のファーストビュー写真を置き、右側に SP と同じ縦長のコンテンツを幅約50%で流す。
• PC の右カラムの中は SP の配置をそのまま縮小して使う。
• 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 行書くと起動時に読み込まれる。