DESIGN.md — 生成り×グレージュの上質な眼鏡 LP（Quiet Greige Mincho Eyewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、シンプル・ミニマル、信頼・誠実、やさしい・柔らかい
• キーワード: 生成り・グレージュ・明朝体・余白・大人の品格・日本製
• 地の質感: マットで平らな面。グラデーションや影は使わず、淡い色面と白カードを重ねて奥行きを出す
• 形: 角丸なしの四角形が中心。写真の一部だけ小さな角丸。細い縦線と細い罫線で区切る
• 温度感: やや暖かいニュートラル（生成り・ベージュ・ローズグレー）

Colors

• 地は生成り、情報カードは白にして淡い 2 層構造にする
• ブランド色のローズグレーは理由セクションと特典ボックスだけに使う
• 女性ラインは生成りの帯、男性ラインはセージグレーの帯で背景を分ける
• 主ボタンは濃いブラウングレー、サブボタンは白地にチャコール文字
• 金茶は女性ラインのロゴ見出しとキャッチだけに使う
• 保証の期間バーは青みグレーとブラウンの 2 色で無料と半額を区別する
• brand-frame は文字 #C9973F × 背景 #FEFEFD のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#966F2A、4.52:1）を使う。
• reason-slide は文字 #FBF8F7 × 背景 #9B8F8F のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7C6E6E、4.61:1）を使う。
• bonus-box は文字 #FBF8F7 × 背景 #9B8F8F のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7C6E6E、4.61:1）を使う。

Typography

• 見出しと本文は明朝体で統一し、太字は使わない
• 本文は中央揃えにし、行間を 2 倍前後とって詩のように短く改行する
• 英字の大見出しは画面幅いっぱいの白文字にし、次のセクションに少し重ねる
• 番号は細いサンセリフで大きく、白か半透明の白にする
• 注釈は小さいゴシック体にし、※で始める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真のグリッドは 2×2
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 18px ほど空けた白い面にする
• セクション見出しの上に短い縦線を置き、中央揃えにする
• 人物写真 2 枚は位置をずらして重ね、白パネルからはみ出させる
• ボタンは幅 75% ほどにし、縦に 2 つ並べる
• セクション間はとても広く空け、写真を宙に浮かべる演出を入れる

Elevation & Depth

• 影は使わず、地色と白の色差だけで面を分ける
• 写真や英字見出しをパネルに重ねて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は正方形のタイル、人物は縦長の四角。散らす写真だけ角丸 8px
• セクション境界: 直線で色面を切り替える。英字の大見出しを境目にまたがせる
• ボタンとカードは角丸なしの四角にする
• ボタン右端の矢印は円形のアイコンに入れる
• ブランド名は細い枠線の正方形の中に置く
• カラーバリエーションは小さな丸い点を並べて示す

Components

• 店舗来店ボタン（button-primary）: 濃いブラウングレーの四角いボタン。左に白文字、右に円形の矢印アイコンを置く
• オンライン詳細ボタン（button-secondary）: 白地にチャコール文字の四角いボタン。右に淡いグレーの円形矢印を置く
• ライン別の誘導ボタン（button-line-anchor）: ベージュまたはセージの帯に明朝の文字と下向きの山形矢印を置く
• 特長カード（feature-card）: 白いカード。上に小さな英字ラベル、その下に黒い罫線、明朝の見出しと本文を続ける
• 縦線付きの見出し（heading-vline）: 短い縦線の下に明朝の見出しを中央揃えで置く
• ブランド名の枠（brand-frame）: 細いグレーの枠の正方形に、ロゴ名と細線、2 行のキャッチを入れる
• 番号付きの理由スライド（reason-slide）: ローズグレーの面に大きな細字番号と白い明朝見出しを置く。右上に縦並びのドットのページャーを付ける
• 保証期間のバー図（guarantee-timeline）: 白いカードに起点と期間の目盛りを置き、その下に塗りのバーで無料・半額を示す。下にベージュの小さなラベルで条件を書く
• 特典ボックス（bonus-box）: ローズグレーの四角に英字ラベル、罫線、英字と和文の見出しを左右に並べる。商品写真に重ねて置く
• 商品ラインナップ（product-tile）: 白パネルにフレームの切り抜き写真、品番、カラーの丸い点を縦に並べる

Do's and Don'ts

Do - 余白をたっぷりとり、文章は短く改行して中央に揃える - 明朝体と細い欧文セリフで静かな品格を保つ - 生成り・白・グレージュの低い彩度の範囲で配色をまとめる - 人物写真は重ねてずらし、雑誌のようなレイアウトにする - 保証や条件は図と注釈で分かりやすく整理する

Don't - 原色や蛍光色の強調色を使わない - ピル型ボタンやドロップシャドウを使わない - 太いゴシックの見出しや煽りの装飾を入れない - 価格訴求のバッジやリボンを多用しない - 白いカードを詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（男女 2 つのラインと上質さを一目で伝える）: 男女の人物写真を左右 2 分割で置き、中央に白い明朝のキャッチを重ねる。下の生成りの帯にフレーム写真と欧文のライン名を並べる
2. コンセプト（ブランドの世界観を語る）: 明朝の見出しの下に、短く改行した詩的な本文を中央揃えで 4 段落並べる
3. 商品写真グリッドと誘導（質感を見せて各ラインへ誘導する）: 2×2 の正方形写真の下に、ライン別の色帯ボタンを 2 つ置く
4. 特長（共同開発や日本製であることを伝える）: 縦線付きの見出しの下に、白い特長カードを 2 枚縦に並べる
5. 浮遊写真の演出（人物写真で雰囲気を盛り上げる）: 広い余白の中に角丸の小さな写真を散らし、大きな白い英字見出しへつなぐ
6. 選ばれる理由（機能面のこだわりを 5 つ伝える）: ローズグレーの面で番号付きのスライドを見せ、その下に CTA ボタンを 2 つ置く
7. 女性向けラインナップ（女性ラインの商品を紹介する）: 生成りの地に白パネルを置き、重ねた人物写真、ブランド名の枠、商品タイルを縦に並べる
8. 男性向けラインナップ（男性ラインの商品を紹介する）: セージグレーの地で、女性ラインと同じ構成を写真の位置を反転させて作る
9. 安心保証（購入後の不安をなくす）: 白抜きの大きな番号を付けた生成りのブロックを 3 つ並べ、保証期間のバー図と注釈を入れる
10. 締めのメッセージ（体験を促す）: 明朝 2 行の中央揃えの見出しの下に、角丸の商品写真を横にずらして 3 枚並べる
11. 購入特典（特典で背中を押す）: 大きな白い英字の上に特典ボックスを重ね、ケースの写真と組み合わせる
12. CTA（来店とオンライン購入へ誘導する）: 濃色の主ボタンと白いサブボタンを縦に 2 つ並べる

Imagery

• 人物は落ち着いたベージュや茶系の背景で撮る。自然な笑顔か思慮深い表情で、大人の男女を写す
• フレームは白や淡色の背景に置いた切り抜きか、斜めから寄った質感のカットにする
• 質感カットは黒の反射、ピーチ、クリーム、グレーなど 1 枚ごとに単色の背景にする
• アイコンやイラストは使わず、写真と細い線だけで構成する
• セクション見出しの代わりに、大きな白い英字を装飾として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではコンセプト文と 2×2 の写真グリッドを左右 2 カラムに並べる
• PC では特長カードを内側で左に見出し、右に本文の 2 カラムにする
• PC の理由セクションは左に写真、右にローズグレーのスライドを置く
• PC の商品タイルは 2 列のグリッドにする
• PC の保証ブロックは左に説明、右にバー図を置く
• PC の CTA ボタンは横に 2 つ並べる

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