DESIGN.md — パステル三色×ローズの童話風キッズ眼鏡 LP（Pastel Fairytale Character Eyewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: 童話・パステル・アーチフレーム・手描き水彩・キラキラ・色分けセクション
• 地の質感: フラットな淡色の面に、白い線画の小物と星のきらめきを散らす。影はほぼ使わない。
• 形: 上が丸いアーチ窓、正円の切り抜き、ピル型ボタン、波形のセクション境界。
• 温度感: 暖かく甘い。ローズとピンクが中心で、ラベンダーとミントで変化をつける。

Colors

• 地の色は淡いピンクと白を交互に使う。キャラクター紹介だけはピンク・ラベンダー・ミントの3色に切り替える。
• 見出しと罫線はローズ1色にまとめる。
• キャラクター別セクションでは、ボタン・モデル名・矢印・アーチ枠をそのセクションのテーマ色の濃いめに統一する。
• 本文は黒、注釈はローズで小さく書く。
• ゴールドや原色は使わない。強い色はイラストの中だけにとどめる。
• button-primary は文字 #FFF8FE × 背景 #EE8FAD のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC215C、4.55:1）を使う。
• color-chip は文字 #EE8FAD × 背景 #FFFFFF のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC215C、4.53:1）を使う。
• slider-arrow は文字 #FFF8FE × 背景 #EE8FAD のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC215C、4.55:1）を使う。

Typography

• 欧文見出しは細めのセリフ体をローズで大きく置く。
• 日本語の見出しは明朝体にして、品のある雰囲気を保つ。
• モデル名は筆記体で書き、下に日本語名を小さく添える。
• 本文は中央揃えにし、行間を2倍前後と広めにとる。
• 難しい読みにはルビを振る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え。サムネイルは3列。
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• ほぼ全要素を中央揃えにする。
• キャラクター1人ごとに「大きな全身イラスト」と「アーチ型の商品カード」を1セットにして、セクションを繰り返す。
• 情報ブロックの間には細いローズ罫線を入れる。
• セクションの上下には大きめの余白（80px前後）をとる。

Elevation & Depth

• 影はほとんど使わない。
• 付属品の写真にだけ、ごく弱いドロップシャドウを付ける。
• 奥行きは枠線と淡い色面で表現する。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 180px。ボタンはピル型。
• 写真の切り抜き: キャラクター画像は上が丸いアーチ窓か正円で切り抜く。商品の細部は楕円で切り抜く。
• セクション境界: 中央が下にへこむ緩い波形のカーブで地の色を切り替える。
• 商品カードは二重線のアーチ枠にし、上部に唐草模様の飾りを付ける。
• ボタンとリンクボタンはすべてピル型にする。
• カラー選択は、角丸カードに吹き出しの尾を付けた形にする。

Components

• 購入ボタン（button-primary）: テーマ色で塗ったピル型ボタン。白抜きの英字ラベルで、アーチ枠の下辺に重ねて置く。
• アウトラインのリンクボタン（button-outline）: 白地にローズの枠線を引いたピル型ボタン。左に線画アイコン、右に三角矢印を置く。
• アーチ型の商品カード（arch-card）: 上が半円の白いカード。二重線の枠と唐草の飾りを付け、中に番号・筆記体のモデル名・型番・商品写真・説明・スライダーを入れる。
• 発売日の枠（release-badge）: ローズの二重線で囲んだ横長のピル枠。明朝で発売日を書き、下に注釈を添える。
• キャラクターの丸ナビ（circle-nav）: テーマ色の正円にキャラクターを入れ、下に筆記体名・日本語名・下向き矢印を置く。各セクションへのアンカーリンクにする。
• カラー選択のチップ（color-chip）: 吹き出しの尾が付いた角丸カード。眼鏡のアイコンと色名を入れ、選択中は白、それ以外は淡色にする。
• スライダーの矢印（slider-arrow）: テーマ色の円形ボタンに白い山形矢印を入れ、ドットインジケーターと組み合わせる。
• 特典のピルラベル（price-pill）: 白地にローズの細い枠線を引いた小さなピル。特典内容を書く。

Do's and Don'ts

Do - キャラクターごとにテーマ色を決め、地・ボタン・枠を統一する。 - 見出しの上に小さな王冠のアイコンを添える。 - 余白には星のきらめきと白い線画の小物を散らす。 - 価格・型数・特典は罫線で区切って縦に積む。 - 商品写真は淡いグレー地で明るく撮る。

Don't - 濃い背景や黒い面を使わない。 - 太いゴシックの見出しで硬くしない。 - 強い影やグラデーションのボタンを使わない。 - テーマ色を1つのセクションの中で混ぜない。 - 四角い写真をそのまま並べない。

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: ロゴの下に大きな欧文セリフのタイトルを置く。その下に、3色のアーチ窓に入れたキャラクターを横に3つ並べる。
2. コンセプトのリード（コレクションの内容を説明する）: ローズの明朝で2行のコピーを書き、中央揃えの本文を続ける。
3. 発売日の告知（発売日と販売時間を知らせる）: 二重線のピル枠に明朝の日付を入れ、注釈を添える。下端は波形の境界にする。
4. ラインナップの概要（型数・価格・特典を示す）: 王冠と欧文見出しの下に、罫線で区切った情報を縦に積む。最後に3つの丸ナビを置く。
5. キャラクター別のモデル紹介（×3）（各モデルの詳細を見せて購入へ誘導する）: テーマ色の地に大文字のキャラクター名と全身イラストを置き、アーチ型の商品カード、購入ボタン、カラー選択チップを続ける。
6. 付属品（ケースと眼鏡拭きの特典を見せる）: 淡いピンク地に欧文見出しを置き、商品写真を縦に並べる。周りにリボンと星の線画を散らす。
7. 誘導リンク・フッター（一覧ページと購入方法へ送る）: 白地にアウトラインのピルボタンを2つ並べ、下線付きのテキストリンクとコピーライトを置く。

Imagery

• キャラクターは、黒い線画にマーカーや水彩の淡い塗りを重ねた手描きタッチで描く。
• 背景には白い線で描いた小物（ポット・花・魚など）と星を散らす。
• 商品写真は正面から撮った切り抜きで、淡いグレー地に置く。
• 細部のカットは楕円の中に大きく寄せて見せる。
• 王冠・きらめき・唐草の飾りは、ローズかテーマ色の細い線で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは、左にアーチ窓3つ、右にタイトルの2カラムにする。
• PC のキャラクターセクションでは、全身イラストと商品カードのスライダーを左右交互に並べる。
• PC のラインナップ情報は、罫線で区切って3列の横並びにする。
• PC では付属品を2点横並びにする。
• ボタンは PC でも中央揃えにし、幅は約400pxに抑える。

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