--- version: alpha name: Pop Pink Cloud Toy-World Confectionery Site description: 蛍光ピンクの面と白い雲の帯を交互に重ね、群青の見出しとピル型ボタンで締めた子ども向けのお菓子メーカーサイト。3Dの動物キャラや虹、気球を画面の端に置き、絵本のような楽しい世界観をつくっている。 colors: primary: '#2A0D99' secondary: '#FF2A9E' background: '#FFFFFF' on-primary: '#FFFFFF' cta: '#2A0D9B' on-cta: '#FFFFFF' text: '#222222' text-muted: '#777777' line: '#C8C8C8' background-alt: '#F1F2F6' dark-section: '#2A0D99' on-dark: '#FCF8FF' accent-1: '#E8202A' surface: '#FDFAFD' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.1em note: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 8px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 70px cloud-divider: backgroundColor: '{colors.background}' height: 60px brand-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px cloud-link: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px carousel-dots: backgroundColor: '{colors.primary}' rounded: '{rounded.full}' height: 12px footer-accordion: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 56px --- # DESIGN.md — ピンク×群青と雲の玩具風お菓子メーカーLP（Pop Pink Cloud Toy-World Confectionery Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感 - **キーワード**: 蛍光ピンク・群青・もこもこ雲・虹・3Dキャラ・絵本の世界 - **地の質感**: 光沢のある3DCG風キャラと、柔らかい影の白い雲。地の面はフラットな単色。 - **形**: 雲形の波でセクションを区切る。カードは角丸、ボタンはピル型。 - **温度感**: 暖かく明るい。ピンクで熱量を出し、群青で引き締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2A0D99` | 見出し・ボタン・フッターの群青 | 17% | 画素の実測 | | `secondary` | `#FF2A9E` | セクション地の蛍光ピンク | 14% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 42% | 画素の実測 | | `on-primary` | `#FFFFFF` | 群青ボタン上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#2A0D9B` | 一覧ボタンの群青 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `text` | `#222222` | ニュース本文などの黒文字 | 2% | 推定 | | `text-muted` | `#777777` | 日付のグレー | 0% | 推定 | | `line` | `#C8C8C8` | リストの区切り線 | 0% | 推定 | | `background-alt` | `#F1F2F6` | 雲の陰影のグレー | 6% | 画素の実測 | | `dark-section` | `#2A0D99` | フッターの群青 | 12% | 画素の実測 | | `on-dark` | `#FCF8FF` | フッター白文字 | 1% | 画素の実測 | | `accent-1` | `#E8202A` | ロゴや虹の赤 | 0% | 推定 | | `surface` | `#FDFAFD` | カルーセルカードの白 | 3% | 画素の主要色に補正 | - 地はピンクと白を交互に切り替え、境目には必ず白い雲の波を挟む - 見出しとボタンは群青に統一する。ピンク地の上でも群青の見出しを使う - 虹色（赤・橙・黄・緑・青・紫）は装飾とメインコピーの文字色だけに使う - フッターは群青ベタ塗りに白文字 - 本文は白地に黒、日付はグレーにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー（1文字ずつ虹色） | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（群青） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.3 | 0.08em | | `accent` | 見出しの上に弧を描いて置く英字ラベル | 欧文サンセリフ | Montserrat | 500 | 10px | 1.2 | 0.2em | | `headline-sm` | カードの商品名・リンク名 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.08em | | `body-md` | ニュースのタイトル・商品説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.1em | | `note` | 日付 | 欧文サンセリフ | Montserrat | 500 | 11px | 1.4 | 0.05em | | `label-button` | ピル型ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.0 | 0.1em | - 見出しは太字で、字間を広めにとる - 見出しの上に小さな英字を弧状に配置し、薄いグレーかピンクで添える - メインコピーは1文字ずつ色を変え、一部の文字だけ白い雲の上に乗せる - 本文の字間は0.1emでゆったり取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品・ブランド・ピックアップは横スクロールのカルーセルにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは中央揃えの見出しから始める - カルーセルは左右のカードを画面外に少しはみ出させて見せる - 一覧ボタンはセクションの末尾に中央配置し、幅は約70% - ニュースは区切り線で仕切ったリストにする - キャラクターはコンテンツの左右の余白に重ねて置く ## Elevation & Depth - カードには淡いぼかしの影と白い太縁をつける - 雲には下側にグレーの柔らかい陰影をつけ、立体的に見せる - ボタンに影はつけない（フラット） ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品パッケージは切り抜いて白い雲の台座に乗せる。バナーは角丸のカードに収める - **セクション境界**: もこもこした雲形の波 - 直線の区切りはリストの罫線だけにする - セクション境界はすべて雲の形にする - ナビやスライダーのドットは円形にする ## Components - **群青のピルボタン**（`button-primary`）: 一覧ページへ送るボタン。中央に配置し、白の太字ラベルを置く - **弧状英字付き見出し**（`section-heading`）: 小さな英字を弧状に配置し、その下に群青の大見出しを置く - **雲の区切り**（`cloud-divider`）: ピンク面と白面の境目に置く、陰影付きの雲の帯 - **ブランドカード**（`brand-card`）: 白い角丸カードの上にブランド名、下に商品パッケージを置き、横スクロールで並べる - **雲台座リンク**（`cloud-link`）: 3Dの建物イラストの下に雲形のボタンを置き、群青の文字でリンク名を入れる - **ニュースリスト**（`news-list`）: グレーの日付とタイトルを1行ずつ置き、罫線で区切る - **スライダードット**（`carousel-dots`）: 紫系の丸ドット。現在地は濃い群青にする - **フッターアコーディオン**（`footer-accordion`）: 群青地に白の太字メニューを並べ、右端に＋か＞を置き、細線で区切る ## Do's and Don'ts **Do** - ピンクと白の面は雲の波で交互に切り替える - 見出し・ボタン・フッターは群青で統一する - 3Dキャラ・虹・気球を画面の端にちりばめる - 商品は切り抜いて雲の台座に乗せる - ボタンは必ずピル型にする **Don't** - 直線や角ばった区切りでセクションを分けない - くすんだ色や暗いグレーを地色に使わない - 明朝体など堅い書体を使わない - 虹色を本文に使わない - ボタンの色を群青以外にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとナビゲーションを置く）: 白地の左にロゴ、右に言語切替のピル・検索・メニューのアイコン 2. **ファーストビュー**（世界観と主力商品を印象づける）: ピンク地に虹色のコピーを置き、商品写真のスライダーと大きなキャラの顔を重ね、周囲を動物キャラと雲で囲む 3. **新商品**（新しい商品を紹介する）: 白地に弧状英字付きの見出し、雲に乗せた商品のカルーセル、商品名、一覧ボタン 4. **ブランド紹介**（主要ブランドを一覧で見せる）: 上下を雲で縁取ったピンク地に、白い角丸カードを横スクロールで並べ、虹の帯を斜めに通す 5. **ニュース**（プレスリリースとお知らせを載せる）: 白地の罫線リスト2ブロック。それぞれの末尾に群青のピルボタン 6. **ピックアップ**（キャンペーンを告知する）: ピンク地に角丸のバナーカードのスライダーとドット 7. **コンテンツリンク**（楽しめるコンテンツや通販へ誘導する）: 3Dの建物イラストと雲台座のボタンを縦に3つ並べ、上に弧状の英字を添える 8. **フッター**（サイト全体のナビゲーションを置く）: 群青地にロゴ、アコーディオンメニュー、SNSアイコン、コピーライト ## Imagery - 光沢のある3DCGの動物キャラ（ソフビ人形風）を雲の上に座らせる - 白くもこもこした雲には下側に淡いグレーの陰影をつける - 立体的な虹のリボンを画面の端から曲線で流す - ストライプ柄の気球や星などの小物を添える - 建物は丸みのあるミニチュア風の3Dイラストにする - 商品パッケージは正面から撮って切り抜く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも雲の区切りとピンク・白の交互構成はそのまま保つ - PCではカルーセルに4〜7枚を同時に表示し、左右に丸い矢印ボタンを置く - PCのニュースはプレスリリースとお知らせを2カラムで並べる - PCではコンテンツリンクを横に3つ並べる - PCのフッターはメニューを4カラムに展開する（アコーディオンにしない） - PCのヘッダーはテキストナビを横一列に並べる ## 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-c871e941`（元 LP の URL から採番） - **元 LP**: https://ginbis.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。