DESIGN.md — アプリコット×白の猫モチーフ眼鏡 LP（Warm Apricot Cat-Lover Eyewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感
• キーワード: 猫モチーフ・アプリコット・丸ゴシック・肉球・やさしい・コレクション感
• 地の質感: 白とクリームの平らな面が中心。影はごく弱く、写真の切り抜きとラフな手描き線で温かみを出す
• 形: 角丸の大きいカードとピル型ラベル。上部が半円のアーチ型写真枠、猫耳の形の線画
• 温度感: 暖色寄り。オレンジとクリームを中心に、ピンクと黄緑をサブの面色にする

Colors

• 地は白を基本にし、セクションの切り替えにクリーム・アプリコット・淡ピンク・黄緑の面を使う
• 英字の大見出しとキーワードの強調はアプリコットにする
• アプリコット地の上に置くカードは白にし、文字はこげ茶にする
• ピンクはアンバサダーなど『猫そのもの』を紹介する部分に限って使う
• 黄緑とオリーブ緑は社会貢献（保護猫支援）の部分だけに使う
• 文字は黒を使わず、こげ茶で温かさを残す
• price-pill は文字 #F7BD5A × 背景 #FEF6E2 のコントラスト比が 1.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9C6508、4.56:1）を使う。
• accordion-pink は文字 #DB97B3 × 背景 #FFF4F8 のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BE4476、4.57:1）を使う。
• button-shop は文字 #FEFAEA × 背景 #FDB745 のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A26502、4.56:1）を使う。
• button-secondary は文字 #FEFAEA × 背景 #D4A95D のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#926B27、4.61:1）を使う。

Typography

• 見出しは英字（アプリコット）の大きな文字と、和文（こげ茶）の小さな文字の 2 段にする
• 本文は中央揃えで字間を広めにし、行間は 2 前後にする
• キャッチの中の強調語だけをアプリコットにする
• 数字（価格・年号）は丸みのある欧文書体で大きくする
• 全体を丸ゴシックで統一し、明朝は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品検索は 3 列、ポイントは 2 列、アンバサダーは 3 列、ショップボタンは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央に置き、上に 60〜80px の余白をとる
• コンセプト文の左右に、角丸の猫写真を互い違いに配置する
• 商品の詳細は大きな白い角丸カードにまとめ、背景はクリームにする
• グリッドの写真は正方形に揃え、名前を下に小さく添える
• 履歴は左に点線と丸印を並べた縦のタイムラインにする

Elevation & Depth

• 影はほとんど使わず、平らな面と線で区切る
• 商品ロゴを選ぶタブは選択中だけ、下にオレンジの細い影をずらして付ける
• HISTORY のカードは、オレンジ色の面を少しずらして重ね、厚みを出す
• 猫の切り抜き写真には白いフチと弱い影を付け、ステッカーのように見せる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: グリッドの写真は正方形の角丸なし。コンセプトの写真は角丸 20px 前後。ポイントの写真は上が半円のアーチ型。商品は角丸の白い枠に入れる
• セクション境界: 直線で色面を切り替える。ヘッダーの右下だけ斜めにカットする
• ボタン・型番ラベル・価格パネルはピル型にする
• ポイントの番号は白丸に細い線を付けた円形バッジにし、カードの右上に重ねる
• 猫耳の形の線画で、バナーや見出しを飾る
• カードの枠線は 2〜3px のアプリコットかキャメルにする

Components

• アーチ型ポイントカード（point-arch-card）: 上が半円の写真の下に、アプリコットの帯と白文字ラベルを付ける。右上に番号の丸バッジを付ける
• 診断誘導バナー（diagnosis-banner）: キャメルの太い枠を付けた角丸バナー。猫の切り抜き写真、猫耳の線画、矢印付きの click 文字を置く
• 上が丸いタブ（tab-switch）: 選択中は塗りつぶしに白文字、選択していないものは白地にアプリコットの枠と文字。下にアプリコットの線を引く
• 価格パネル（price-pill）: 淡黄色のピル型の面。左に小さなラベル、右に大きなアプリコットの価格を置き、下に注釈を添える
• 型番ピル（model-label）: アプリコットで塗ったピル型に、白い型番の文字を入れる
• 丸い訴求バッジ（circle-badge）: アプリコットの円形に、白い 2 行の短いコピーを入れる。横に丸印付きの箇条書きを並べる
• 沿革タイムライン（timeline）: 白いカードの中に、アプリコットの丸印と点線を縦に並べる。年号はアプリコット、内容はこげ茶。手描きの吹き出しで補足する
• ピンクのアコーディオン（accordion-pink）: 淡ピンクの面にピンクの細い枠を付けた角丸ボックス。中央にピンクの見出し、右に白丸の矢印を置く
• ショップボタン（button-shop）: 角丸の大きなボタン。アイコン、白い見出し、小さな説明文を縦に積み、オレンジと山吹色で 2 つ並べる
• サブ誘導ボタン（button-secondary）: キャメル色のピル型に白文字を入れる。中央に置く

Do's and Don'ts

Do - 猫の写真を主役にして、ほぼ全セクションに登場させる - 英字＋和文の 2 段見出しを全セクションで統一する - 肉球のシルエットや猫耳の線画を、淡い色で飾りとして散らす - 角は丸く、線は太めのアプリコットにして、やさしさを保つ - 情報が多い部分は、タブ・アコーディオン・スライダーでまとめる

Don't - 黒や原色の赤で強い訴求をしない - 明朝体や細く硬いゴシックを使わない - 角の尖ったカードや、濃い影を使わない - ピンクや黄緑を、指定のセクション以外の主役色にしない - 写真に暗いフィルターや、強いコントラストをかけない

Page Structure

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

1. ヘッダー・ナビ（ブランドを示し、各セクションへ案内する）: アプリコット地の中央にロゴを置き、下線付きの白い英字ナビを横に並べる
2. ファーストビュー（猫と商品の世界観を一目で伝える）: 2×2 の写真グリッド。各マスに、オレンジの大きな丸ゴシックで猫の種類名を重ねる
3. コンセプト（ブランドの想いを語る）: ロゴと『とは…?』、強調語入りのキャッチ、中央揃えの詩的な本文。左右に角丸の猫写真と眼鏡を交互に置く
4. 3 つのポイント（商品の特長を要約する）: 肉球の飾りの下に、アーチ型ポイントカードを 2 列で並べる
5. 診断バナー（遊び要素で回遊を促す）: キャメルの枠の角丸バナー。猫の切り抜き写真と猫耳の線画を置く
6. 商品検索（猫の種類やスタイルから商品を探せるようにする）: 2 つのタブと、猫の顔写真を正方形で 3 列に並べたグリッド
7. 商品一覧・詳細（シリーズと仕様・価格を示す）: クリーム地にロゴのタブを並べ、白い大きなカードに型番ピル、ポイントの吹き出し、丸バッジ、価格パネル、カラーのグリッドをまとめる
8. ヒストリー（ブランドの歩みで信頼を作る）: アプリコット地。イラスト付きのスライダーカードと、白いタイムラインのカード
9. アンバサダー紹介（ユーザーの猫を見せて共感を作る）: ピンクの見出しと、淡ピンクのアコーディオンの中に猫写真を 3 列で並べる
10. 社会貢献（保護猫の支援活動を伝える）: オリーブ緑の見出し。黄緑の角丸パネルに、文章・ロゴ・写真を並べる
11. 販売情報（店舗検索・通販へ誘導する）: 2 色の角丸の大きなボタンを並べ、下にキャメルのサブボタンを置く

Imagery

• 猫は顔のアップを正面から撮り、明るく自然光のやわらかいトーンにする
• 商品は白背景の切り抜きで、斜め 45 度から見せる
• 猫の全身を切り抜き、白フチのステッカー風にして散らす
• 肉球のシルエットを淡いオレンジで並べ、飾りにする
• 線画イラストは太さが均一な、ゆるいタッチの人物にする
• 手描き風の細い吹き出し線と矢印で、補足を加える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの 2×2 グリッドを横長にし、猫の種類名を縦書きにする
• PC ではポイントカードを 3 列にし、中央のカードだけ下にずらす
• PC では商品検索を 4 列、アンバサダーを 3 列にする
• PC では価格パネルを商品画像の右上に置いた角丸の四角にし、カラーのグリッドは 2 列にする
• PC でもコンテンツ幅は約 1000px 以内に収め、余白を広げる

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