DESIGN.md — ネオンピンク×Y2K帯テープのヘアケアLP（Y2K Neon Sticker Pop Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ポップ・元気、クール・先進的、力強い・インパクト、かわいい
• キーワード: Y2K・ネオン・3DCG・ステッカー・帯テープ・クローム
• 地の質感: 光沢のあるクロームやガラス玉の3DCG、星空や空のグラデーション背景、ステッカー風のロゴ重ね
• 形: 波打つ帯テープ、トゲの多い星形バースト、アーチ窓、黒い太縁のピル型
• 温度感: 暖色ピンクと寒色ブルー・ミントを強くぶつける高彩度

Colors

• セクションごとに地色を大きく切り替える（ピンク→星空紺→空色→ピンク→黒）。
• 帯テープはセクションごとに色を変える（ピンク・黄・紫・青）。
• ボタンは常に白面に黒文字と黒太縁、影も黒。
• 情報カードは黒地に白文字で、カラフルな背景から浮かせる。
• フッターは黒一色で白文字にする。

Typography

• 見出しは英字の極太サンセリフ大文字に統一する。
• 和文は太字ゴシックで、写真の上でも読めるよう白抜きにする。
• コンセプト文は短い行を中央揃えで積む。
• 日付の数字は大きく、年月は小さく分けて組む。
• ロゴ風の装飾文字はクロームやステッカー風に処理する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ニュースは 2 列を互い違いに配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 10px（375px 幅換算）
• セクションの境目は必ず波打つ帯テープでつなぐ。
• ニュースカードは左右の列を上下にずらして並べる。
• 商品は中央のカードを大きくし、左右のカードを端ではみ出させるカルーセルにする。
• 各セクションの最後に中央寄せの MORE ボタンを置く。
• ファーストビューは画面いっぱいのビジュアルにして、文字は置かない。

Elevation & Depth

• ボタンは黒い影を右下に 4px ずらして重ね、ステッカーのように見せる。
• カードにぼかした影は付けない。黒縁と面のコントラストで浮かせる。
• 3DCGのガラス玉やハートを背景の前に浮かべて奥行きを出す。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: ニュース画像は角丸の矩形にし、上にタブ状のタイトル部を付ける。商品はアーチ窓に入れる。
• セクション境界: 斜めに交差して波打つ帯テープ（英字を繰り返し印字）
• 日付の部分は星形バーストの黒い吹き出しにする。
• ボタンは黒の2px線で縁取ったピル型にする。
• SNSアイコンは白線の円で囲む。
• 装飾にはトゲの多い星形やキラキラ星を使う。

Components

• 帯テープ見出し（ribbon-heading）: 英字の見出しを繰り返し印字した波打つ帯を2〜3本交差させ、黒縁を付ける。
• MOREボタン（button-more）: 白いピル型に黒の太縁と黒いずれ影を付け、文字は字間を広く取る。
• SHOP大ボタン（button-shop）: 横幅いっぱいの白いピル型。極太の英字を中央に置き、右端に＋を付ける。
• ニュースカード（news-card）: 黒いタブにタイトルを入れ、その下に画像を置く。左下には星形バーストの日付を重ねる。
• 星形日付バッジ（date-burst）: トゲのある黒い星形の中に、小さい年月と大きい日を白で入れる。
• アーチ窓商品カード（product-card）: ミント色のカードにアーチ窓を開け、黄緑からピンクのグラデの中に商品を置く。英字と和文の商品名を添える。
• 想いリンクピル（concept-pill）: 白い小さなピルに黒縁を付け、和文ラベルを入れる。
• SNS円ボタン（sns-circle）: 黒地に白線の円を描き、中に白いアイコンを入れて3つ並べる。

Do's and Don'ts

Do - セクションの境目には色違いの帯テープを使う。 - 背景は高彩度のグラデか3DCGにして、平坦な白地を避ける。 - ボタンとカードは黒縁と黒いずれ影でステッカー風にする。 - 装飾にクロームの文字や虹色のガラス玉を散らす。 - 見出しは英字の極太大文字で短くする。

Don't - 淡いパステル一色の上品なトーンにしない。 - 細い明朝体や繊細な線の装飾を使わない。 - ぼかした柔らかい影を使わない。 - 長文の説明ブロックを置かない。 - 白地にグレー文字だけのシンプルな構成にしない。

Page Structure

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

1. ファーストビュー（ブランドの世界観を一瞬で伝える）: ピンク地にボトル2本を大きく置き、3DCGのハート花と星形を散らす。ロゴは縦積みで大きく。
2. 世界観ビジュアル（空想の街並みで没入感を出す）: 3DCGの島の風景を全幅で見せ、キラキラ星を添える。
3. コンセプト（ブランドの想いを短い詩で伝える）: 風景の上に白の太字ゴシックを6行ほど中央揃えで置き、下にロゴと想いへのピルボタン。
4. トピックス（イベントやニュースを知らせる）: ピンクの帯テープを見出しにし、星空から青空へのグラデ地に黒カードを2列で互い違いに並べ、MOREボタンを置く。
5. 商品紹介（商品ラインナップを見せる）: 黄色の帯テープを見出しにし、ピンクからミントへのグラデ地にアーチ窓カードのカルーセルを置く。
6. スペシャル（動画やモデルビジュアルで憧れを作る）: 紫の帯テープを見出しにし、顔のアップ写真を全幅で見せ、MOREボタンを置く。
7. 購入導線（店舗とオンライン購入へ誘導する）: 青の帯テープを見出しにし、ピンクのグラデ地に星形バーストを敷いて、大きなSHOPボタンを2段に並べる。
8. ロゴステッカー帯（ブランドの印象を締めくくる）: 書体の違うロゴのステッカーをカラフルに重ねて貼り、黒いフッターへつなぐ。
9. フッター（企業情報と規約への導線）: 黒地に白ロゴ、中央揃えのリンクリスト、円形のSNSアイコン3つ。

Imagery

• 光沢のあるクロームやガラス質の3DCGオブジェクト（ハート、花、玉）を浮かべる。
• ミニチュアの空想の街や島を、霞んだ色の3DCG風景で描く。
• 商品は正面から撮り、彩度の高い単色背景で見せる。
• モデルは顔のアップや動きのあるポーズで、映画風の色調にする。
• クロームのロゴやグラフィティ風のステッカーを重ねて貼る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもビジュアルは全幅のまま、コンテンツは中央に寄せる。
• PCではニュースカードを4枚横に並べる。
• PCでは商品カードを3枚横に並べ、中央を大きくする。
• PCではSHOPボタンを2つ横に並べる。
• PCのフッターはロゴを左に置き、リンクを2列で横に配置する。

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