--- version: alpha name: Quiet Greige Mincho Eyewear LP description: 生成りの地にグレージュやセージグレーの面を重ねた、落ち着いた大人向け眼鏡ブランドの LP。明朝体と細い欧文セリフ、大きな白抜きの英字見出し、余白の多い白カードで品格を出す。角はほぼ四角で、影は使わない。 colors: background: '#EFECE5' surface: '#FEFEFD' primary: '#9B8F8F' on-primary: '#FBF8F7' cta: '#494542' on-cta: '#FFFFFF' secondary: '#C3C6BF' accent-1: '#E6D6BC' accent-2: '#C9973F' accent-3: '#8C7C62' tint-1: '#9BA3AD' tint-2: '#B7AE9D' text: '#4C413C' line: '#4C413C' accent-2-accessible: '#966F2A' primary-accessible: '#7C6E6E' typography: display: fontFamily: Cormorant Garamond fontSize: 46px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 16px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Quicksand fontSize: 48px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Montserrat fontSize: 9px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 54px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 54px button-line-anchor: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px heading-vline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px brand-frame: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 170px reason-slide: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 460px guarantee-timeline: backgroundColor: '{colors.surface}' typography: '{typography.note}' height: 140px bonus-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 170px product-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 200px --- # DESIGN.md — 生成り×グレージュの上質な眼鏡 LP（Quiet Greige Mincho Eyewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、シンプル・ミニマル、信頼・誠実、やさしい・柔らかい - **キーワード**: 生成り・グレージュ・明朝体・余白・大人の品格・日本製 - **地の質感**: マットで平らな面。グラデーションや影は使わず、淡い色面と白カードを重ねて奥行きを出す - **形**: 角丸なしの四角形が中心。写真の一部だけ小さな角丸。細い縦線と細い罫線で区切る - **温度感**: やや暖かいニュートラル（生成り・ベージュ・ローズグレー） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EFECE5` | ページの地色（生成り） | 30% | 画素の実測 | | `surface` | `#FEFEFD` | カード・商品パネルの白 | 29% | 画素の実測 | | `primary` | `#9B8F8F` | ブランドを代表するローズグレー（理由セクション・特典ボックス） | 10% | 画素の実測 | | `on-primary` | `#FBF8F7` | ローズグレー面の上の白文字 | 1% | 画素の実測 | | `cta` | `#494542` | 主ボタン（店舗来店）の濃いブラウングレー | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 主ボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#C3C6BF` | 男性向けラインのセージグレー面 | 6% | 画素の実測 | | `accent-1` | `#E6D6BC` | 女性向けラインの淡いベージュボタン | 1% | 画素の実測 | | `accent-2` | `#C9973F` | 女性向けラインの金茶の見出し文字 | 0% | 推定 | | `accent-3` | `#8C7C62` | 保証バーの濃いブラウン | 0% | 画素の実測 | | `tint-1` | `#9BA3AD` | 保証バーの青みグレー | 0% | 画素の実測 | | `tint-2` | `#B7AE9D` | 保証の淡いベージュバー・ラベル地 | 1% | 画素の実測 | | `text` | `#4C413C` | 見出し・本文の濃いチャコール | 2% | 画素の主要色に補正 | | `line` | `#4C413C` | カード内の細い罫線・縦線 | 0% | 画素の主要色に補正 | | `accent-2-accessible` | `#966F2A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#7C6E6E` | AA を満たす補正値（計算） | | 計算 | - 地は生成り、情報カードは白にして淡い 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション背景に敷く白い大きな英字 | 欧文セリフ | Cormorant Garamond | 400 | 46px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（縦線の下に中央揃え） | 明朝 | Shippori Mincho | 500 | 18px | 1.6 | 0.08em | | `headline-md` | カードや保証項目の見出し | 明朝 | Shippori Mincho | 500 | 16px | 1.6 | 0.08em | | `body-md` | 本文・コンセプト文 | 明朝 | Noto Serif JP | 400 | 11px | 2.1 | 0.08em | | `note` | 注釈・保証の条件・ラベル | ゴシック | Noto Sans JP | 400 | 8px | 1.7 | 0.03em | | `accent` | 大きな番号（01 など）・品番 | 欧文サンセリフ | Quicksand | 300 | 48px | 1.0 | 0.02em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 400 | 11px | 1.4 | 0.08em | | `headline-sm` | 小さな英字ラベル（カード上部の英単語） | 欧文サンセリフ | Montserrat | 400 | 9px | 1.4 | 0.02em | - 見出しと本文は明朝体で統一し、太字は使わない - 本文は中央揃えにし、行間を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-310e215d`（元 LP の URL から採番） - **元 LP**: https://www.aigan.co.jp/feature/shinshi_fuzin/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。