DESIGN.md — ココアブラウン×深紅リボンのカラコンLP（Dark Cocoa Ribbon Lady Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、かわいい、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: ココアブラウン地・深紅リボン・パール装飾・ダイヤ格子柄・セリフ体の欧文・ネオン調の発光文字
• 地の質感: 暗い地に細いダイヤ格子とキラキラの光を重ね、パールとリボンを立体素材として散らす
• 形: 大きな円形の写真枠、上が丸いアーチ窓、フレーム付きの装飾見出し、ドット縁取りの円
• 温度感: 暖かく甘いのに、暗めで落ち着いたトーン

Colors

• 基本の地はココアブラウンにする。ダイヤ格子柄はわずかに明るい茶色で重ねる
• 商品カラーを紹介するときは、地をその色のイメージ（モーブ、ラベンダーグレー）に丸ごと切り替える
• 深紅はリボン、スペック帯、プロフィールの面に絞って使う
• カラー名はそれぞれのレンズ色に合わせたパステル（ピンク、ミント、ラベンダー、マスタード）で色分けする
• 一覧やチャートは白地に置いて見やすくし、前後を暗い地ではさむ
• 金の細線とパールは、高級感を出すための縁取りだけに使う
• lens-card は文字 #E0408A × 背景 #FFFFFF のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC287B、4.53:1）を使う。
• pill-label は文字 #FFFFFF × 背景 #8E83B5 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#7B6EA9、4.52:1）を使う。
• feature-card は文字 #8A7A80 × 背景 #FFFFFF のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#817177、4.6:1）を使う。
• color-chart は文字 #8A7A80 × 背景 #FFFFFF のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#817177、4.6:1）を使う。

Typography

• 欧文はセリフ体と筆記体を組み合わせて、ドレッシーに見せる
• 主な見出しには白やマゼンタの外側グロー（発光）をつける
• 縦書きの大きな英字カラー名を写真の左端に重ねる
• 日本語の見出しは字間を広めに取り、明朝で上品に見せる
• スペックの数字は大きくし、単位のmmは小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。レンズ一覧とスペックカードは2カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
• レンズ一覧は、目元写真の右下に丸いレンズ画像を重ねる2列で並べる
• スペックとイメージ写真は、左に円、右に角丸写真を置いて横に並べる
• カラー紹介は、アーチ窓のポートレート、ズームの目元、説明文の順で縦に積む
• 見出しの両側にパール3粒を並べて左右対称にする
• 写真枠の背面に、色付きの板をずらして重ねる

Elevation & Depth

• カードとプレートには、細い金線の二重枠と弱いドロップシャドウをつける
• パールとレンズ画像には、下に柔らかい影を落として立体感を出す
• 円とアーチ窓の周りに、外側のぼかしグローをつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 大きな円、上が丸いアーチ窓、楕円の目元、白フチのポラロイド風の写真
• セクション境界: 直線で地の色を切り替える。紫や茶の地は白へグラデーションでフェードさせる
• 見出しプレートは、角を内側にえぐったクラシックなフレーム形にする
• スペックは、白いドットで縁取りした円の中に入れる
• レンズ画像は必ず正円で、白フチと影をつける
• グラフのカードは角丸24pxの白い面にする

Components

• フレーム見出しプレート（heading-plate）: 生成りの面に金線の二重枠をつけ、深紅のセリフ英字と小さな和文ルビを入れる。上にリボン、両脇にパールを置く
• リボン帯見出し（ribbon-banner）: 深紅の帯の両端を燕尾形にカットし、白いセリフ英字を入れる
• スペック帯（spec-bar）: 横幅いっぱいの深紅の帯に、DIAなどの数値を区切り線で横に並べる
• レンズ一覧カード（lens-card）: 目元写真の背面に色板をずらして重ね、右下に丸いレンズを置く。下にカラー名と和名を添える
• Newバッジ（badge-new）: 左上に置く、深紅の円に白い筆記体の小さなバッジ
• 直径ラベル（pill-label）: ミントやピンクのピル型ラベルに、白い直径表記を入れる
• スペック円（spec-circle）: ドット縁取りの円に、筆記体の見出しと数値を中央揃えで入れる
• 機能スペックカード（feature-card）: 白いカードに金枠をつけ、左にアイコン、右に見出しと説明を置いて2列で並べる
• カラーチャート（color-chart）: 白い角丸カードに方眼を引き、縦軸に明るさ、横軸に体感サイズを取ってレンズを配置する

Do's and Don'ts

Do - 暗いココアの地にダイヤ格子とキラキラの光を必ず重ねる - リボン、パール、金線の三点で装飾を統一する - カラーごとに地の色を切り替えて世界観を変える - レンズは正円で白フチと影をつける - 英字はセリフ体か筆記体にする

Don't - ポップな丸ゴシックや原色の配色にしない - 角ばった太い枠やフラットな四角いボタンを使わない - 装飾のない白地だけのセクションを続けない - 深紅を広い面に多用しない（使うのは帯とプロフィールだけ） - 写真を素の四角でそのまま置かない

Page Structure

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

1. ファーストビュー（世界観とプロデューサーを印象づける）: 大きな円形の人物写真に金の細枠をつけ、ロゴと発光するメインコピーを重ねる。円の縁に沿って英字を曲線で配置する
2. 新色告知（新色を伝える）: リボン付きのプレートの下に新色レンズ2つとカラー名を置き、全色のレンズを1列に並べる。下にスペック帯を通す
3. ラインナップ（全カラーを一覧で見せる）: リボン帯の見出しの下に、目元写真とレンズのカードを2列で並べる
4. 新色の訴求（デザインの特徴を伝える）: 発光する見出しの下に、2色を半分ずつ合わせた巨大なレンズを置き、吹き出しの円を添える
5. カラー別紹介（各色の雰囲気を伝える）: そのカラーの地に切り替え、アーチ窓のポートレート、縦書きのカラー名、ズームの目元、説明帯を並べる
6. スペックと装用イメージ（自然光と室内光での見え方を示す）: 白地に、スペック円と写真を3段で並べる
7. 機能スペック（レンズの機能を伝える）: 茶色の地に、アイコン付きの白いカードを2列で並べる
8. プロデューサー紹介（権威づけと共感）: 深紅の地にパール縁の写真を置き、大きな飾りイニシャルと中央揃えの略歴を続ける
9. カラーチャート（色を選ぶ助けにする）: 方眼のグラフ上にレンズとカラー名ラベルを配置する

Imagery

• 暗い茶色の背景で撮った人物写真。赤いリボンやドレス、パールで甘くクラシックに見せる
• 目元のアップは明るく均一な光で撮り、まつげをくっきり見せる
• レンズ単体は白い背景で真上から撮り、円形で切り抜く
• 装飾にはパールの粒、赤いリボン、十字のキラキラを散らす
• 背景には細い線のダイヤ格子パターンを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約480pxでSPのレイアウトを置き、左右の余白は格子柄の地で埋める
• 広げる場合は、ラインナップを3〜4列にし、スペック円と写真の横並びを維持する
• カラーチャートは最大幅800pxにして中央に置く

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