--- version: alpha name: Warm Apricot Cat-Lover Eyewear LP description: 白地にアプリコットオレンジを効かせた、猫好き向けの眼鏡ブランド LP。丸ゴシックと猫写真、肉球の飾りで、やさしく可愛く仕上げる。セクションごとにクリーム・オレンジ・ピンク・黄緑の面で区切り、カード・タブ・タイムライン・アコーディオンでたくさんの商品情報を整理している。 colors: primary: '#F7BD5A' background: '#FFFFFF' background-alt: '#FFF0D9' tint-1: '#FEF6E2' tint-2: '#FFF4F8' accent-1: '#DB97B3' accent-2: '#E8FCBF' accent-3: '#62742F' cta: '#FDB745' secondary: '#F7CE5A' on-cta: '#FEFAEA' marker: '#D4A95D' text: '#343434' text-muted: '#6B6560' primary-accessible: '#9C6508' accent-1-accessible: '#BE4476' cta-accessible: '#A26502' marker-accessible: '#926B27' typography: display: fontFamily: Quicksand fontSize: 30px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 19px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Maru Gothic fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Zen Maru Gothic fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em accent: fontFamily: Quicksand fontSize: 34px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-arch-card: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 150px diagnosis-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 190px tab-switch: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 48px price-pill: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 80px model-label: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px circle-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px timeline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 480px accordion-pink: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 68px button-shop: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 115px button-secondary: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — アプリコット×白の猫モチーフ眼鏡 LP（Warm Apricot Cat-Lover Eyewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感 - **キーワード**: 猫モチーフ・アプリコット・丸ゴシック・肉球・やさしい・コレクション感 - **地の質感**: 白とクリームの平らな面が中心。影はごく弱く、写真の切り抜きとラフな手描き線で温かみを出す - **形**: 角丸の大きいカードとピル型ラベル。上部が半円のアーチ型写真枠、猫耳の形の線画 - **温度感**: 暖色寄り。オレンジとクリームを中心に、ピンクと黄緑をサブの面色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F7BD5A` | ブランドのアプリコット（ヘッダー・HISTORY の地・英字見出し） | 9% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 50% | 画素の実測 | | `background-alt` | `#FFF0D9` | 商品一覧セクションのクリーム地 | 7% | 画素の実測 | | `tint-1` | `#FEF6E2` | 価格パネルの淡黄 | 2% | 画素の実測 | | `tint-2` | `#FFF4F8` | アンバサダー紹介アコーディオンの淡ピンク | 6% | 画素の実測 | | `accent-1` | `#DB97B3` | ピンクの見出し文字・アコーディオンの枠 | 0% | 画素の実測 | | `accent-2` | `#E8FCBF` | 保護猫支援パネルの黄緑 | 3% | 画素の実測 | | `accent-3` | `#62742F` | 保護猫支援の見出しのオリーブ緑 | 0% | 画素の実測 | | `cta` | `#FDB745` | 店舗検索ボタンのオレンジ | 1% | 画素の実測 | | `secondary` | `#F7CE5A` | オンラインショップボタンの山吹色 | 1% | 画素の実測 | | `on-cta` | `#FEFAEA` | ボタン上の白文字 | 0% | 画素の実測 | | `marker` | `#D4A95D` | サブボタンや診断バナー枠のキャメル | 0% | 画素の実測 | | `text` | `#343434` | 見出し・本文のこげ茶 | 2% | 画素の実測 | | `text-muted` | `#6B6560` | 注釈・猫の名前ラベルのグレー | 0% | 推定 | | `primary-accessible` | `#9C6508` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BE4476` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#A26502` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#926B27` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にし、セクションの切り替えにクリーム・アプリコット・淡ピンク・黄緑の面を使う - 英字の大見出しとキーワードの強調はアプリコットにする - アプリコット地の上に置くカードは白にし、文字はこげ茶にする - ピンクはアンバサダーなど『猫そのもの』を紹介する部分に限って使う - 黄緑とオリーブ緑は社会貢献（保護猫支援）の部分だけに使う - 文字は黒を使わず、こげ茶で温かさを残す - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション見出し | 欧文サンセリフ | Quicksand | 700 | 30px | 1.1 | 0.02em | | `headline-lg` | コンセプトのキャッチ（キーワードだけアプリコット） | 丸ゴシック | Zen Maru Gothic | 700 | 19px | 1.6 | 0.05em | | `headline-md` | 和文のサブ見出し・セクション内タイトル | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.4 | 0.08em | | `headline-sm` | ポイントカードの白文字ラベル | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.5 | 0.05em | | `body-md` | 本文・説明文（中央揃え） | 丸ゴシック | Zen Maru Gothic | 500 | 12px | 2.0 | 0.1em | | `note` | 注釈・猫名ラベル | 丸ゴシック | Zen Maru Gothic | 400 | 10px | 1.6 | 0.1em | | `accent` | 価格の数字・年号 | 欧文サンセリフ | Quicksand | 700 | 34px | 1.1 | 0.0em | | `label-button` | ボタン・タブの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.4 | 0.08em | - 見出しは英字（アプリコット）の大きな文字と、和文（こげ茶）の小さな文字の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-6429a5dd`（元 LP の URL から採番） - **元 LP**: https://www.aigan.co.jp/feature/zoku_nekororin/?pr - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。