DESIGN.md — 紫・珊瑚・紺・黄緑の色面切替カラコン LP（Color-Blocked Editorial Beauty Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: クール・先進的、力強い・インパクト、ポップ・元気
• キーワード: カラーブロック・エディトリアル・ストリート・コラージュ・縦書き欧文・ダンス
• 地の質感: マットな単色面と高彩度の人物写真。方眼紙のような淡いグリッド地を部分的に使う
• 形: 角が少し丸い写真のずらし配置、楕円の瞳アップ、正円のレンズ画像、波線の区切り
• 温度感: カラーごとに暖色と寒色が入れ替わる。全体はやや暖かめ

Colors

• カラーのセクションは、地の色をそのレンズの象徴色で塗りつぶす
• 最初と最後は紫で揃え、ページ全体を紫で挟む
• 色面の上の文字と線はすべて白にする
• ラインナップと講師紹介は明るいグレーのグリッド地にして、色面のあいだで一息つかせる
• ラインナップのカードは、上の写真部分を淡くし、名前の帯だけを各カラーの色で塗る
• 白い帯を敷いたキャッチだけは、文字を地の色で抜く
• lineup-card は文字 #FDEDE3 × 背景 #F48D7E のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D12A12、4.54:1）を使う。
• marker-catch は文字 #F48D7E × 背景 #FEFCFB のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D12A12、4.54:1）を使う。
• spec-table は文字 #FDEDE3 × 背景 #8764B5 のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#805BB1、4.54:1）を使う。

Typography

• 欧文の太いセリフ体をメインのビジュアル要素として扱う
• カラー名は、写真の右端に 90 度回して縦に置く
• 和文は太いゴシックだけにし、中央揃えで短くまとめる
• スペックの数字の単位（mm）は小さくする
• 線だけのアウトライン欧文を、写真やセクションの角に斜めに散らす
• ロゴは白い手書き風の太い文字として、写真をまたいで重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2×2 グリッドかずらしのコラージュ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算）
• カラーのセクションは、メイン写真、レンズ説明、写真コラージュの 3 段を 1 色の地で通す
• レンズ説明は左右の縦の白線で挟み、左の線上に小さな縦書き欧文を置く
• メイン写真の右下に楕円の瞳アップを重ねる
• コラージュの写真は互い違いに重ね、端を画面からはみ出させる
• セクションの境は余白を取らず、色を直接切り替える

Elevation & Depth

• 基本はフラットで影を付けない
• 正円のレンズ画像だけ、ふわっとした柔らかい影で浮かせる
• 立体感は影ではなく、写真の重なりと細い白枠で出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は四角か角丸の四角で、ずらしてコラージュする。瞳のアップは楕円、レンズは正円
• セクション境界: 小さな波線（スカラップ）で次の色に切り替える。講師紹介は大きな半円で仕切る
• FV は紫の地に、四辺が波打つフレームで写真を収める
• ラインナップのカードは角を少し丸め、カラー色の細い枠を付ける
• 商品情報の表は角丸のない細い白線の枠で囲む

Components

• ラインナップカード（lineup-card）: 上は瞳の写真、下はカラー色の帯。帯にカラー名とスペックを白で載せ、端にレンズの円とパッケージ画像を重ねる。2×2 で並べる
• 縦書きのカラー名（vertical-color-name）: 写真の右端に置く、白い極太セリフの縦書き。下に小さくカナを添える
• レンズの紹介ブロック（lens-showcase）: 正円のレンズ画像を中央に置き、右上に小さな線とハート 3 つの色見本を付ける。下にカラー名、白い帯のキャッチ、説明文、スペック、地球儀風のアイコンを中央揃えで並べる
• 瞳アップの楕円（eye-oval）: メイン写真の右下に重ねる楕円の瞳写真。地の色の太い縁取りで囲む
• 白帯のキャッチ（marker-catch）: 白い帯の上に、地の色の太いゴシックで一行を載せる
• アウトラインの欧文装飾（outline-deco）: 細い線だけで描いた欧文を斜めに配置する。円弧に沿わせた欧文や、星のきらめきも散らす
• 音楽プレイヤー風の飾り（player-control）: 紫の線にシークバーの丸を付け、その下に巻き戻し・再生・早送りの三角を並べる
• 商品情報の表（spec-table）: 紫の地を白い細線の枠で囲み、項目名と値の 2 列を小さな白文字で並べる

Do's and Don'ts

Do - カラーごとに地の色を変え、その色でセクション全体をまとめる - 人物写真は大きく使い、角度や位置をずらして重ねる - 極太のセリフ欧文を縦に置いて、雑誌の表紙のような強さを出す - 星のきらめき、アウトライン欧文、波線で、動きと遊び心を足す - 文字は白を基本にして、短く中央揃えで置く

Don't - 淡いパステルだけで、くすんだ優しい印象にまとめない - 長い本文や箇条書きを詰め込まない - 色面の上に、黒い本文を載せない - 角丸を大きくしたカードを均等に並べるだけの単調な配置にしない - グラデーションや光沢の強いボタンを使わない

Page Structure

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

1. ファーストビュー（世界観と、ブランドの強さを一瞬で伝える）: 紫の波枠に人物写真を 2×2 で収める。中央に白い手書きロゴ、上に欧文コピー、下に 1 行のスペックを置く
2. ラインナップ一覧（全カラーを見比べてもらう）: グリッド地に小さなロゴを置き、色帯付きのカードを 2×2 で並べる
3. カラー紹介1（暖色のカラーの魅力を伝える）: 珊瑚色の地にメイン写真と縦書きの名前を置き、楕円の瞳を重ねる。続けてレンズ紹介と人物コラージュを並べる
4. カラー紹介2（寒色のカラーの魅力を伝える）: 紺青の地で、カラー紹介1と同じ構成を繰り返す。境目は波線で切り替える
5. カラー紹介3（個性的なカラーの魅力を伝える）: 黄緑の地で同じ構成。音の波形やレコードの線画を添える
6. カラー紹介4（クールなカラーの魅力を伝える）: グレージュ緑の地で同じ構成。最後に人物 3 枚のコラージュを置く
7. プロデューサー紹介（監修者の信頼感と世界観を伝える）: 半円の紫にロゴを置き、人物写真にサインを重ねる。グリッド地に筆記体と極太セリフの名前、プレイヤー風の飾り、中央揃えの経歴を並べる
8. ブランドストーリー（ブランド名に込めた想いを伝える）: 紫の地に、大きく透けたロゴを敷き、白い太字の文章を中央揃えで置く
9. 商品情報・注意書き（法定表示と使用上の注意を伝える）: 白い線の枠で囲んだ表を置き、その下に注意書き、最後に白いロゴを置く

Imagery

• 多国籍なモデルを、ストロボを当てた高彩度で撮る。顔のアップと強い目線を中心にする
• ラメ、ネイル、ピアス、デニムなど、ストリート系のスタイリングにする
• 果物などカラー名を連想させる小物を、顔の近くで持たせる
• レンズ単体は真上から撮り、正円に切り抜いて柔らかい影を付ける
• 装飾は白い線画で入れる（星、地球儀とハートのマーク、音の波形、レコード）
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC では中央に 480px 前後の SP 幅のカラムを置き、左右の余白をそのセクションの地の色で埋める
• ラインナップは PC では 4 列にしてもよい
• 縦書きのカラー名とコラージュの重なりは、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 行書くと起動時に読み込まれる。