DESIGN.md — 白地×深紅のモード系カラコン LP（Mode Editorial Color Contact Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: クール・先進的、力強い・インパクト、上品・高級、シンプル・ミニマル
• キーワード: モード誌・エディトリアル・全幅写真・深紅アクセント・コラージュ・カラー別背景
• 地の質感: フラットな白地とスタジオ撮影写真。グラデーションや影はほぼ使わず、写真の質感で見せる
• 形: 角丸なしの四角が基本。レンズ画像だけが正円。写真を数度傾けて重ねる
• 温度感: 白と黒はクールで、カラー別背景（深紅・キャメル・ロイヤルブルー）が温度を切り替える

Colors

• 地は白、文字は黒が基本。赤は小面積の差し色に限る
• 英字カラー名は頭文字 1 字だけを赤にする
• カラー別ブロックは、そのカラーを象徴する単色の背景で撮った写真に切り替える
• 機能説明は深紅のベタ面に白文字でまとめ、ページ後半の締めにする
• 黒い帯は細く、スペック表示や英字ラベルに使う
• ピンクは機能バッジだけに使う
• feature-badge は文字 #FFFFFF × 背景 #E2A3B3 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#C64C6B、4.52:1）を使う。

Typography

• 英字を主役に、和文は脇役として小さめに添える
• カラー名は英字の太字見出しの下に小さなカナ読みを置く
• 和文本文は中央揃えで、2〜3 行の短い文にする
• 英字キャッチはイタリックにし、単語の頭文字を赤くする
• 写真の上のコピーは白文字で右寄せにする
• 数値スペックは数字を大きく、単位を小さく組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カラーごとに見出し→レンズ画像→スペック→写真群の順を繰り返す
• 写真は余白なしで全幅に積む
• コラージュは写真を 3〜5 度傾けて重ね、端をはみ出させる
• 白地のテキストブロックは上下に 80px 前後の広い余白をとる
• 目元のアップは横長の全幅にトリミングする

Elevation & Depth

• 影はほぼ使わない
• 傾けた写真はわずかな影か白縁で重なりを見せる
• 奥行きはレイヤーを重ねて表現する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は全幅の四角。レンズは正円の切り抜き。コラージュ写真は傾けた四角
• セクション境界: 直線で切り替える。背景色の面がそのまま接する
• 角丸は使わない
• レンズのサムネイルは灰色の縁取りをつけた正円
• ラベル帯は細長い長方形を斜めに置く

Components

• カラー名見出し（color-title）: 英字の太字で頭文字だけ赤。下にカナ読みを小さく添える
• スペック帯（spec-bar）: 黒い細帯に白文字で、仕様を縦線で区切って並べる
• 斜め英字ラベル（tilted-label）: 深紅や黒の帯に白い英字を載せ、写真コラージュに斜めに貼る
• 機能バッジ（feature-badge）: ピンクの小さな四角に白文字。上に小さな英字と矢印をのせる
• 目元比較タイル（eye-compare-tile）: 目元アップを 2 列に並べ、下の黒帯にレンズの丸サムネイルとカラー名を置く
• レンズ画像（lens-circle）: 白地の中央に正円のレンズを大きく置き、下にスペックを添える
• 機能リスト（feature-list）: 深紅の面に白い線画アイコンを 4 つ並べ、下に番号付きの英字と和文の説明を置く
• ロゴプレート（logo-plate）: 深紅の面の上に白い長方形を置き、黒い英字ロゴを入れる

Do's and Don'ts

Do - 写真を主役にし、文字は最小限にする - カラーごとに背景色を変えて世界観を切り替える - 赤は頭文字やラベルなど小さな面に限る - 目元のアップでレンズの発色を見せる - 傾けたコラージュで誌面のような動きを出す

Don't - 角丸のボタンやパステル調のかわいい装飾を使わない - 和文を大きく詰め込まない - 赤を広い面に多用しない（機能セクションだけにする） - ドロップシャドウやグラデーションのボタンを使わない - イラストやアイコンを多用しない

Page Structure

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

1. ファーストビュー（ブランドの世界観とラインナップを一目で伝える）: 顔のアップを全幅に置き、白い英字ロゴ、レンズの丸 4 つ、黒いスペック帯を重ねる
2. キャッチコピー（仕上がりのイメージを宣言する）: 白地に太い和文 2 行。冒頭の語を深紅のマーカーで囲む
3. 新色告知（展開するカラーを紹介する）: 左右に小さな英字、イタリックの大見出し、大きなレンズ画像とカラー名一覧
4. 目元比較（カラーごとの発色を比べてもらう）: 2 列の目元タイルと黒帯を 2 段。間に短い説明文
5. カラー別紹介（繰り返し）（各カラーの個性を見せる）: 背景色の違う全身写真、写真の上のコピー、目元アップ、カラー名、レンズ、スペック、コラージュの順に並べる
6. 構造の説明（レンズが回らない設計を説明する）: ピンクのバッジと対象カラー、大きなレンズ図、太字見出しと中央揃えの本文、注釈
7. 機能一覧（素材と快適さを伝える）: 深紅のベタ面にロゴプレート、白い線画アイコン 4 つ、番号付きリスト
8. ブランドメッセージ（世界観で締める）: 頭文字が赤のイタリック英字キャッチ、中央揃えの和文、白いパッケージの写真

Imagery

• スタジオで撮った単色背景のファッションポートレート。モデルは強い目線でモードなメイク
• 目元は極端にアップにして横長に切り、まつ毛と虹彩の模様を見せる
• レンズは白地に正円の切り抜きで、ドットの模様がわかるくらい高精細に
• カラーのイメージに合わせて背景と衣装をそろえる（赤×スポーティ、キャメル×レオパード、青×メタリック）
• 傾けた顔アップの写真に英字ラベル帯を重ねたコラージュ
• パッケージは白い箱を白背景で正面から撮り、床に映り込みを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 750px）のカラムを置き、左右の余白は白かライトグレーにする
• PC では写真を 2 枚横に並べたり、コラージュを横長に広げたりしてもよい
• 目元比較は PC で 4 列に並べられる
• 見出しの文字サイズは PC で 1.3〜1.5 倍にする

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