DESIGN.md — 紫ピンクのホロ×濃紺のコスメランキングLP（Holographic Pastel Cosmetics Ranking LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型
• キーワード: ホログラム・星くず・アワード・ランキング・ロイヤルブルー・パステル
• 地の質感: ピンク・ラベンダー・水色のふんわりしたグラデーションに小さな白と紫の星が散り、放射状の光線が入る。カードは白で少し透けたすりガラス風。
• 形: 角丸なしの四角いカードと、斜めに切った青い帯がカードの角を支える。ボタンは長方形で右下に小さな三角。部門アイコンはフリル付きの円形バッジ。
• 温度感: 甘めでクール寄り。ピンクの甘さを濃紺が引き締める。

Colors

• 地はピンク・ラベンダー・水色のホログラムで、単色の面にはしない。
• 濃紺は締め色。部門帯・ナビ面・ボタン・商品名・価格に使う。
• 商品カードは白地にして、写真と文字を読みやすくする。
• 紫はお気に入り数のバッジと順位メダルだけに使う。
• 大きな見出し文字は、濃紺・白・ピンクを重ねてホロ調の立体にする。
• 暖色の赤や黄は使わない。強調は濃紺と太字で行う。
• wishlist-badge は文字 #7377BF × 背景 #FFFFFF のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6A6EBB、4.6:1）を使う。

Typography

• 文字はほぼすべて濃紺。黒は使わない。
• 英字の大見出しは、太い線を斜めのストライプで重ね、立体のロゴ風にする。
• リード文は中央寄せにして、短い行で改行する。
• 商品のキャッチは「＼ ／」で挟んで中央に置く。
• 価格は数字を大きくし、(税込)は小さくして下線を引く。
• 注釈は米印付きの小さな文字で、本文のすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は1カラム。2・3位は2列カード。ナビは2列グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 1位は大きな白カードにする。写真枠を少し内側に入れ、その下に情報を置く。
• 2位と3位は、横2列の正方形カードにする。
• 各部門は、大見出し→部門帯→リード→1位→2・3位の順に繰り返す。
• お気に入り数バッジは右端に固定して浮かせる。
• CHECKボタンはカード内で中央に置き、幅は約60%。

Elevation & Depth

• 影はほぼ使わない。平面のカードにする。
• 立体感は、写真枠の後ろに置く斜めの青い帯で出す。
• 浮かせたハートバッジは、白い円に薄紫の枠線をつける。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 白地に商品の切り抜き写真を入れ、正方形の枠に収める。
• セクション境界: 境界線は引かない。連続する背景の上に大見出しを置いて区切る。
• カードとボタンは角丸なしの直角にする。
• ボタンの右に小さな三角を付ける。
• 順位メダルはフリル付きの円で、周囲に小さな文字を入れる。
• ハートボタンは円形にする。

Components

• CHECKボタン（button-check）: 濃紺の長方形に白い英字を置き、右端に三角を付ける。
• 部門名帯（category-band）: 濃紺の横帯に白い日本語見出しを置く。左右の端は少し斜めにする。
• 部門ナビタイル（nav-tile）: 濃紺パネルに白いタイルを2列で並べる。円形アイコンと部門名を入れ、右下に三角を付ける。
• 順位メダル（rank-medal）: フリル付きの紫の円に、白い大きな数字を入れる。カードの左上に重ねる。
• 1位商品カード（product-card-hero）: 白カードに写真枠を入れ、斜めの青い帯で支える。キャッチ、ブランド、商品名、価格、説明、注釈、ボタンの順に並べる。
• 2・3位カード（product-card-sub）: 正方形の写真枠の下に、ブランド、商品名、価格、ボタンを置く。
• ほしいものバッジ（wishlist-badge）: 右端に固定する。濃紺の小さなラベルと、紫のハート数字を入れた白い円を組み合わせる。
• お気に入りハート（heart-button）: 白い円に薄いグレーブルーのハートを入れ、写真枠の右下に置く。

Do's and Don'ts

Do - 背景はホログラムのグラデーションと星柄を全面に敷く。 - 濃紺は線と面で使い、ページ全体を締める。 - 各部門で同じカードの型を繰り返す。 - 価格は大きく、注釈は小さくして差をつける。 - 英字の見出しはストライプで重ね、立体のロゴ風にする。

Don't - カードやボタンを角丸やピル型にしない。 - 文字に黒や暖色を使わない。 - 背景を単色のベタ塗りにしない。 - 写真の上に文字を重ねない。 - 影を強くつけない。

Page Structure

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

1. ファーストビュー（アワードを告知する）: ホロ背景に立体の英字ロゴとトロフィーを置く。下に英文の小見出しを添える。
2. イントロ（開始日と趣旨を説明する）: 半透明の白パネルに、日付と中央寄せの文章を入れる。
3. お気に入り案内（ハート機能の使い方を案内する）: 短い2行の文と、紫のハートバッジを置く。
4. 部門ナビ（各部門へジャンプさせる）: 濃紺パネルに、英字の部門見出しと2列の白タイルを並べる。
5. 注目予測（次に流行る商品を紹介する）: 大見出しとリードの下に、大きな商品カードを縦に並べる。
6. 新人賞（新商品を紹介する）: 注目予測と同じ構成。大見出しの背景に放射状の光線を入れる。
7. 部門別ランキング（部門ごとに1〜3位を見せる）: 大見出し、部門帯、バイヤーのコメント、1位の大カード、2・3位の2列カードの順に並べる。
8. フッター（締めと導線）: 明るいグレーの地に、リンクや注意書きを置く。

Imagery

• 商品は白背景の切り抜き写真。中央に配置し、余白を広く取る。
• 背景はピンク・紫・水色が混ざるパステルグラデーションに、白と紫の星を散らす。
• 放射状の光線や斜めのストライプで、ホロのきらめきを出す。
• 部門アイコンは、コスメの線画をフリル付きの円に入れたデザインにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では背景のホロを全幅に広げる。コンテンツは中央に置き、幅は最大700px程度に収める。
• PC の2・3位カードは2列のままにし、余白を広げる。
• PC の大見出しは120px程度まで大きくする。
• お気に入りバッジは、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 行書くと起動時に読み込まれる。