--- version: alpha name: Pop Pink Character Product Series LP description: 淡いピンクの地に、えんじ色の見出しと濃いピンクのピル型ボタンを合わせたポップな商品シリーズLP。モノクロ調の漫画キャラクターと商品写真を白い円の中に重ねてグリッドに並べる。キャンペーン部分は白いアコーディオン型の情報カードで整理している。 colors: background: '#FFDBE5' background-alt: '#FEC4D3' surface: '#FEFEFE' primary: '#90363E' secondary: '#642424' cta: '#F0145A' on-cta: '#FFFFFF' dark-section: '#636465' tint-1: '#FCDDE5' accent-1: '#E0245E' text: '#3A2A2A' line: '#90363E' text-muted: '#A7A0A2' cta-accessible: '#E80F54' typography: display: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em label-button: fontFamily: Montserrat fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-secondary: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px nav-pentagon-tab: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 110px series-header: textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 110px product-circle-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 240px accordion-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px pickup-carousel: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px character-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 170px step-flow: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 160px --- # DESIGN.md — ピンク×えんじのキャラクター家電シリーズ LP（Pop Pink Character Product Series LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 淡ピンク地・えんじ見出し・漫画キャラ・白丸の商品置き・ピル型Check・カテゴリ別シリーズ - **地の質感**: フラットな単色面。背景にキャラ顔の薄いパターンを敷き、写真と線画イラストを重ねる - **形**: 白い円、角丸カード、ピル型ボタン、下向き五角形のナビタブ - **温度感**: 暖かくにぎやか。コミカルで親しみやすい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFDBE5` | ページ基調の淡ピンク | 30% | 画素の実測 | | `background-alt` | `#FEC4D3` | キャンペーン帯などの濃いめピンク | 25% | 画素の実測 | | `surface` | `#FEFEFE` | カード・商品の白丸 | 16% | 画素の実測 | | `primary` | `#90363E` | 見出し・ラベルのえんじ | 6% | 画素の主要色に補正 | | `secondary` | `#642424` | 商品カテゴリラベルの濃茶地 | 1% | 画素の実測 | | `cta` | `#F0145A` | Checkボタンの濃ピンク | 2% | 推定 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#636465` | 詳細はこちらのグレーボタン | 0% | 画素の実測 | | `tint-1` | `#FCDDE5` | アコーディオン見出し帯 | 4% | 画素の実測 | | `accent-1` | `#E0245E` | 日付・数字の強調ピンク赤 | 0% | 推定 | | `text` | `#3A2A2A` | 本文の濃茶 | 2% | 推定 | | `line` | `#90363E` | カード枠のえんじ線 | 0% | 画素の主要色に補正 | | `text-muted` | `#A7A0A2` | キャラ透かし・副情報のグレー | 3% | 画素の主要色に補正 | | `cta-accessible` | `#E80F54` | AA を満たす補正値（計算） | | 計算 | - 地は淡ピンクと濃いめピンクを交互に使い、セクションを区切る - 見出しと枠線はえんじ色でそろえ、黒は使わない - 購入・遷移のボタンは濃ピンクの一色に統一する - 詳細を見るボタンは控えめなグレーにして、主CTAと差をつける - 商品と情報は白い面に載せて、ピンク地から浮かせる - 日付・人数など数字の強調だけにピンク赤を使う - `button-primary` は文字 `#FFFFFF` × 背景 `#F0145A` のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E80F54`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | シリーズ名などの大見出し | 丸ゴシック | Zen Maru Gothic | 900 | 28px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.05em | | `headline-md` | バナー下のタイトル | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.03em | | `headline-sm` | 商品名 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.02em | | `body-md` | 説明文・規約 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 注意書き・カテゴリラベル | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `accent` | 英字のサブ見出し（星付き） | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.12em | | `label-button` | Checkボタンの文字 | 欧文サンセリフ | Montserrat | 700 | 14px | 1.0 | 0.03em | - 見出しは太い丸ゴシックで、えんじ色の中央揃え - 英字見出しは大文字にして字間を広げ、左右に小さな星を置く - 商品名の上に濃茶地の白抜き小ラベルでカテゴリを示す - 本文は中央揃えで短く改行する。規約だけは左揃え - 数字の強調は大きめの太字にしてピンク赤で示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品グリッドは 2 列（PC は 3 列） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは中央見出しから始め、下に商品グリッドを並べる - カテゴリごとに『ラベル枠＋シリーズ名＋英字サブ』のヘッダーを置く - 商品は白丸画像→ラベル→商品名→Checkボタンの縦積みにする - キャンペーンの詳細はアコーディオンを連ねた白カードにまとめる - バナー画像は横いっぱいに置き、その下にタイトル・説明・ボタンを入れる ## Elevation & Depth - 影はほぼ使わず、フラットな面で構成する - ナビタブはえんじ色の厚い下辺で立体感を出す - カードは白地に細い枠線か、地色との差で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は白い正円の上に置き、キャラクターを円の外にはみ出させる - **セクション境界**: 直線で色を切り替える。ファーストビュー下だけ大きな弧を描く - ボタンはすべてピル型にする - ナビタブは下向きの五角形（ホームベース形）にする - キャラクター紹介のカードは角丸とえんじ色の枠線で作る ## Components - **Checkボタン**（`button-primary`）: 濃ピンクのピル型の小さなボタン。商品ごとに置く - **詳細はこちらボタン**（`button-secondary`）: グレーのピル型ボタン。キャンペーンの補足用 - **五角形ナビタブ**（`nav-pentagon-tab`）: 白地にえんじの枠。上にキャラクターの画像がのる、4つ並びのアンカーナビ - **シリーズ見出し**（`series-header`）: 丸アイコン、えんじ枠のカテゴリラベル、大見出し、星付きの英字サブを組み合わせる - **商品丸カード**（`product-circle-card`）: 白丸に商品写真とキャラクターのイラストを重ね、下に濃茶ラベルと商品名を置く - **アコーディオン情報**（`accordion-panel`）: 淡ピンクの見出し帯に開閉の矢印を付け、中身は白地にする - **ピックアップカルーセル**（`pickup-carousel`）: 角丸の白カードにバナーとタイトルとボタンを載せ、下にドットインジケーターを置く - **キャラクター紹介カード**（`character-card`）: ピンク地にえんじの枠。左にキャラ、右に名前と属性ラベルの表を置き、背景にロゴを透かす - **応募ステップ**（`step-flow`）: えんじの丸数字を付けたピンクのパネルを3つ、三角矢印でつなぐ ## Do's and Don'ts **Do** - キャラクターは商品の白丸からはみ出させて動きを出す - ボタンは濃ピンクのピル型に統一する - 見出しはえんじ色の丸ゴシックで中央揃えにする - カテゴリ名を濃茶地の小ラベルで必ず添える - 長い規約はアコーディオンに入れる **Don't** - 純黒の太い見出しや寒色系の地色を使わない - 角張った四角いボタンにしない - 商品写真を白丸なしで地色に直接置かない - 写実的なストックフォトを主役にしない - 強調色を3色以上に増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズのキャラと主力商品を見せる）: キャラ顔のパターンを敷いたピンク地。中央にキャラ、周りに商品パッケージを並べ、ギザギザ吹き出しを添える 2. **ピックアップ**（注目のキャンペーンを紹介する）: 両隣のカードが見えるカルーセルにし、ドットで送る 3. **ナビゲーション**（各セクションへ誘導する）: 五角形のタブを4つ並べ、上にキャラを乗せる 4. **商品紹介**（カテゴリ別に商品を一覧する）: シリーズ見出しごとに商品丸カードのグリッドを置く 5. **キャンペーン**（応募の内容を伝える）: 横長バナーの下に、期間・賞品・応募方法などのアコーディオンを連ねる 6. **限定・新商品バナー**（限定品や販売店へ誘導する）: バナーの下にタイトル・説明・ボタンを置き、特長カードとアイコンを並べる 7. **キャラクター**（世界観に愛着を持ってもらう）: えんじ枠のカードを縦に3枚並べ、プロフィールを表で見せる 8. **新シリーズ**（新ラインを告知する）: ロゴの下に商品丸カードを2つ並べる 9. **フッター**（ロゴとSNSへの導線を置く）: 淡ピンク地の中央にロゴとSNSアイコンとコピーライトを置く ## Imagery - グレースケール中心の漫画調キャラクターを、太い線と白い服で描く - コミカルなポーズで商品を持ったり使ったりさせる - 商品は白背景の切り抜き写真にする - バナーは集中線・星・吹き出し入りの賑やかな広告調にする - 背景にキャラ顔の薄いピンクパターンを敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約460px相当の幅に収めた縦長の構成 - SP では商品グリッドを2列にし、ナビタブは2×2か横スクロールにする - カルーセルは SP でカード幅85%にして、両端をのぞかせる - アコーディオンは SP で全幅にし、タップしやすいよう高さ44px以上にする ## 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-93722fe4`（元 LP の URL から採番） - **元 LP**: https://e-doshisha.com/hanako/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。