--- version: alpha name: Bright Orange Kids Toy Play LP description: 全面のオレンジ地にクリーム色の角丸カードを縦に積む、幼児向け玩具の商品紹介LP。縁取り付きの極太見出し、緑の木札風ナビ、遊んでいる写真を円や角丸で切り抜いて散らし、にぎやかで楽しい雰囲気にしている。 colors: primary: '#F39801' background: '#FFFAE6' secondary: '#8FC7B2' cta: '#F39901' on-cta: '#FEFAEA' accent-1: '#A55043' accent-2: '#3E9A3A' accent-3: '#E6332A' tint-1: '#E4D1A0' tint-2: '#FCE59C' surface: '#FEFAEA' text: '#4A3226' line: '#8FC7B2' accent-3-accessible: '#DF241A' accent-2-accessible: '#296626' cta-accessible: '#A26601' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Mochiy Pop One fontSize: 22px fontWeight: 400 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 32px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' card-section: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.lg}' height: 420px heading-outlined: textColor: '{colors.tint-2}' typography: '{typography.display}' height: 50px label-pill: backgroundColor: '{colors.accent-3}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 24px button-wood: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px nav-anchor: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px bubble-callout: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px spec-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px set-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 160px button-retailer: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px --- # DESIGN.md — オレンジ地×クリームカードの幼児玩具LP（Bright Orange Kids Toy Play LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: オレンジ全面地・クリームの角丸カード・白フチ付き極太文字・野菜の散らしイラスト・子どもの遊び写真・木札風ボタン - **地の質感**: フラットな面に、空色のグラデーション背景と手描き風の野菜イラストを薄く散らす - **形**: 大きめ角丸のカード、ピル型ラベル、円形の写真切り抜き、木の板風の横長ボタン - **温度感**: 暖色寄りでとても明るい。オレンジと黄色が主役で、緑と赤をアクセントに使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F39801` | ページ全面の地色・ブランドを代表するオレンジ | 34% | 画素の実測 | | `background` | `#FFFAE6` | コンテンツカードの地色（クリーム） | 20% | 画素の実測 | | `secondary` | `#8FC7B2` | セット内容パネルなどのミント地 | 9% | 画素の主要色に補正 | | `cta` | `#F39901` | 販売店ボタンの山吹色の面 | 2% | 画素の主要色に補正 | | `on-cta` | `#FEFAEA` | 販売店ボタン上のロゴ文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#A55043` | 木札風ナビ・ボタンの茶色フチ | 3% | 画素の主要色に補正 | | `accent-2` | `#3E9A3A` | 見出しの緑・ボタン面の緑 | 2% | 推定 | | `accent-3` | `#E6332A` | 強調見出し・吹き出しの赤 | 1% | 推定 | | `tint-1` | `#E4D1A0` | ナビ板・サブ地のベージュ | 6% | 画素の主要色に補正 | | `tint-2` | `#FCE59C` | 見出し文字の黄色グラデ・帯 | 4% | 画素の主要色に補正 | | `surface` | `#FEFAEA` | 仕様表のセル地（白） | 3% | 画素の主要色に補正 | | `text` | `#4A3226` | 本文・仕様表の濃い茶文字 | 1% | 推定 | | `line` | `#8FC7B2` | 仕様表の見出しセル（緑灰） | 1% | 画素の主要色に補正 | | `accent-3-accessible` | `#DF241A` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#296626` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#A26601` | AA を満たす補正値（計算） | | 計算 | - 地はページ全体をオレンジ一色にし、内容はすべてクリームのカードに載せる - カード内の見出し帯は空色グラデや木目茶で区切る - 見出し文字は黄〜オレンジのグラデに濃い茶か白の太フチを付ける - ボタン面は緑、フチは茶色にして木札風に見せる - 赤は擬音・吹き出し・最後の販売告知の強調だけに使う - セット内容などの一覧はミント地パネルにまとめる - `label-pill` は文字 `#FEFAEA` × 背景 `#E6332A` のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#DF241A`、4.56:1）を使う。 - `button-wood` は文字 `#3E9A3A` × 背景 `#E4D1A0` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#296626`、4.61:1）を使う。 - `nav-anchor` は文字 `#3E9A3A` × 背景 `#E4D1A0` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#296626`、4.61:1）を使う。 - `button-retailer` は文字 `#FEFAEA` × 背景 `#F39901` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A26601`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のメイン見出し・セクション見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.02em | | `headline-lg` | 見出しの前に置く小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.03em | | `headline-md` | ピル型ラベルのリード文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.4 | 0.02em | | `accent` | 写真に添える擬音・吹き出し文字 | 装飾・ディスプレイ | Mochiy Pop One | 400 | 22px | 1.1 | 0.0em | | `body-md` | 仕様表・セット内容のリスト | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.0em | | `label-button` | 木札ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.2 | 0.05em | | `note` | 商標表記などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 見出しは極太にして、白と茶の二重フチを付ける - 見出しの漢字には小さなルビを振り、幼児と親の両方が読めるようにする - 擬音は写真の近くに斜めに配置し、色を変える - 本文は短く、長い文章ブロックは作らない - ボタン文字はキーワードを大きく、続く語を小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。写真はカード内で2列や重ね置きにしてよい - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 32px、基本単位 8px、カード内 16px（375px 幅換算） - オレンジ地の上に、角丸カードを一定の間隔で縦に積む - 各カードの上部に見出し、中央に写真群、下部に木札ボタンを置く - FV直下にページ内リンクの横長3分割ナビを置く - 商品詳細は画像と仕様表を左右に並べ、SPでは縦に積む - 購入先ボタンは同じサイズのタイルで横に並べる ## Elevation & Depth - カードに影は付けず、オレンジ地との色差だけで浮かせる - 木札ボタンは茶色の太フチと下側の濃い段差で立体感を出す - 写真の切り抜きには白い太フチを付ける - 商品画像には軽いドロップシャドウを付けてよい ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 円形や角丸四角に切り抜き、白フチを付けて重ねる - **セクション境界**: 区切り線は使わず、オレンジ地の隙間でカードを分ける - カードは角丸12〜16px - リードのラベルはピル型 - ナビは板を3つ並べたような角丸長方形 - 写真は少し傾けたり重ねたりして遊び心を出す ## Components - **セクションカード**（`card-section`）: クリーム地の角丸カード。上部は空色のグラデ背景にする - **フチ付き極太見出し**（`heading-outlined`）: 黄〜オレンジのグラデ文字に白と茶の二重フチ、ルビ付き - **リードのピル帯**（`label-pill`）: 見出しの下に置く、色付きのピル型帯と白文字の一文 - **木札ボタン**（`button-wood`）: ベージュ面に茶フチ、左にアイコン、右に矢印。ピル型 - **3分割ページ内ナビ**（`nav-anchor`）: 茶フチの板を3区画に分け、各区画にキーワードと矢印を置く - **吹き出し**（`bubble-callout`）: 紺や白の丸い吹き出しに、短い訴求文を入れる - **仕様表**（`spec-table`）: 左に緑灰の見出しセル、右に白い値セルを並べる2列の表 - **セット内容パネル**（`set-panel`）: ミント地の角丸パネルに、付属品の切り抜き画像と名前を並べる - **販売店ボタン**（`button-retailer`）: 山吹色の角丸タイルに販売店のロゴを載せ、横に並べる ## Do's and Don'ts **Do** - 地はオレンジ1色に統一し、内容はクリームのカードの中に置く - 見出しは必ずフチ付きの極太文字にし、ルビを振る - 写真には擬音や吹き出しを添えて、動きを出す - カードの余白に野菜などの小さなイラストを散らす - 各セクションの最後には木札ボタンを置き、次の行動へ誘導する **Don't** - 寒色や黒を地の色に使わない - 細い明朝体や小さな文字だけの見出しにしない - 写真を四角のまま整然と並べるだけにしない - 長い説明文を詰め込まない - カードに強い影やきつい角を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の全体像と遊び方をひと目で伝える）: 空色と草原の背景の中央に商品を置き、ロゴ見出しと遊び方の円形写真、数字バッジを周りに配置する 2. **ページ内ナビ**（特長・動画・購入へ誘導する）: 茶フチの木札を3分割した横長ナビ 3. **特長1（体験）**（遊びながら学べることを訴求する）: 空色グラデのカードに極太見出しとピル帯、大きな円形写真2枚と擬音、吹き出し、木札ボタン 4. **特長2（学び）**（知育の効果を伝える）: 野菜のイラストを散らした見出しと赤いピル帯。子どもの写真4枚を傾けて重ね、ボタンを置く 5. **商品詳細**（価格・対象年齢・内容物を示す）: 左にパッケージ画像、右に2列の仕様表 6. **セット内容**（付属品を一覧で見せる）: ミント地のパネルに、切り抜き画像とラベルをグリッドで並べる 7. **購入CTA**（販売店へ誘導する）: 赤い極太の販売告知の下に、山吹色の販売店タイルを4つ並べ、最後に注釈を入れる ## Imagery - 明るい室内で幼児が玩具で遊ぶ様子を、手元のアップで撮る - 商品は白背景で切り抜いて使う - 野菜やハサミなどを、フラットな手描き風イラストにして散らす - 空色のグラデと虹、草原の背景で、ファーストビューを絵本のようにする - 写真は円形や角丸に切り抜き、白フチを付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央の幅約640pxのカード列で、左右はオレンジ地 - SPではカードを幅90%にし、写真を2列か縦積みにする - 商品詳細は、SPでは画像の下に仕様表を置く - ナビの3分割はSPでも横並びを保ち、文字を小さくする - 販売店ボタンは、SPでは2×2のグリッドにする ## 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-67d7651e`（元 LP の URL から採番） - **元 LP**: https://www.agatsuma.co.jp/special/nouen/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（2/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。