--- version: alpha name: Storybook Forest Character Collab Goods LP description: 若草色の森のイラストを縦スクロールでたどり、お店ごとにキャラクターグッズを紹介する絵本風のコラボLP。焼き菓子の茶色と黄色を差し色にして、手書き風の文字と丸みのある吹き出しで遊び心を出している。 colors: primary: '#C5EB94' secondary: '#25893C' accent-1: '#7DBD28' background: '#FEFBCD' tint-1: '#FDDA98' dark-section: '#5C3027' accent-2: '#DA5B0B' cta: '#FEEA02' on-cta: '#222222' text: '#533F31' surface: '#FFFFFF' background-alt: '#F7F7ED' marker: '#E60012' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-lg: fontFamily: Yomogi fontSize: 15px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.1em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Fredoka fontSize: 18px fontWeight: 600 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' shop-illustration: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 300px click-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 44px scroll-cue: textColor: '{colors.text}' typography: '{typography.note}' height: 30px ribbon-heading: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 48px product-carousel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 360px arrow-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 36px banner-link: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 150px copyright-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' height: 32px --- # DESIGN.md — 若草色の森と焼き色の絵本風キャラグッズLP（Storybook Forest Character Collab Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、親しみ・手作り感、ナチュラル、ポップ・元気 - **キーワード**: 森の絵本・お店めぐり・焼き菓子カラー・手書き文字・スクロール探索 - **地の質感**: フラットなイラストに細かいドット柄の若草地。写真は切り抜いてイラストになじませる - **形**: 丸い吹き出し、六角形の菓子モチーフ、ゆるい波形のセクション境界 - **温度感**: 暖かく明るい。緑と黄色、焼き色の茶 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C5EB94` | 森の草地の地色 | 30% | 画素の実測 | | `secondary` | `#25893C` | 木や葉の濃い緑 | 9% | 画素の実測 | | `accent-1` | `#7DBD28` | 明るい葉の黄緑 | 6% | 画素の実測 | | `background` | `#FEFBCD` | 商品紹介エリアの淡いクリーム地 | 13% | 画素の実測 | | `tint-1` | `#FDDA98` | 導入文エリアの焼き色グラデ地 | 7% | 画素の実測 | | `dark-section` | `#5C3027` | コピーライト帯・見出しリボンのこげ茶 | 5% | 画素の実測 | | `accent-2` | `#DA5B0B` | 焼き菓子のキャラメル茶 | 5% | 画素の実測 | | `cta` | `#FEEA02` | スライダー矢印ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#222222` | 黄色ボタン上の矢印 | 0% | 推定 | | `text` | `#533F31` | 見出し・本文の濃茶文字 | 1% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | フッターカード・白地 | 10% | 画素の実測 | | `background-alt` | `#F7F7ED` | フッターの生成り地 | 10% | 画素の実測 | | `marker` | `#E60012` | click吹き出しの赤い矢印 | 0% | 推定 | - 物語パートは若草色の地にし、濃い緑と黄緑の木々で奥行きをつける - 導入文と商品紹介は、クリーム色や焼き色の暖色地に切り替える - 見出しリボンとコピーライト帯にはこげ茶を使い、ページを締める - 黄色は操作ボタン（矢印）だけに使い、押せる場所を目立たせる - 文字は黒ではなく濃い茶色にして、菓子らしい温かさを保つ - 赤はクリック誘導の小さな三角だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し（立体的な黄色文字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | リボン見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.05em | | `headline-md` | お店の看板文字 | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.3 | 0.05em | | `body-lg` | 導入文（手書き風・中央揃え） | 手書き・筆 | Yomogi | 400 | 15px | 2.2 | 0.1em | | `headline-sm` | 商品名・価格 | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.5 | 0.03em | | `accent` | click吹き出し・scroll表記 | 欧文サンセリフ | Fredoka | 600 | 18px | 1.0 | 0.0em | | `note` | リンクテキスト・コピーライト | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.0em | - 導入文は手書き風の書体で中央揃えにし、行間は広めにとる - 見出しは太い丸ゴシックで、尖った印象を避ける - 英字の誘導語は小文字の丸い書体にする - リンクは太字にして下線を引く - 価格には（税込）を添え、商品名の下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。イラストは全幅で背景のように敷く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - お店のイラストを1画面に1軒ずつ置き、間に scroll 表記と下向き矢印をはさむ - お店は中央に置き、左右を木やキャラで埋める - 商品紹介は中央に1点を大きく見せ、左右に隣の商品を少しだけのぞかせるカルーセルにする - フッターのバナーは2つ並べ、それぞれ下にテキストリンクを置く ## Elevation & Depth - 影は基本的に使わず、フラットなイラストで見せる - お店や木の足元に、楕円の淡い影を置く - click吹き出しには、ごく薄い影で浮いた感じを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品写真は背景を切り抜き、白い六角形の上に置く - **セクション境界**: ゆるい波形のカーブで地色を切り替える - 矢印ボタンは黄色の正円にする - 見出しは斜めストライプのこげ茶リボンに入れる - 吹き出しは楕円の白地で、とがった部分を1つつける - 看板は白地に濃いグレーの枠の長方形にする ## Components - **お店イラスト**（`shop-illustration`）: テント屋根のお店。屋根の色を店ごとに変え、上に看板を載せる。タップで商品へ移る - **click吹き出し**（`click-bubble`）: お店の左に置く白い楕円の吹き出し。赤い三角で押せることを示す - **スクロール誘導**（`scroll-cue`）: 小さな scroll の文字と下向きの山形矢印 - **リボン見出し**（`ribbon-heading`）: 斜めストライプのこげ茶の帯に白い文字。端にキャラを添える - **商品カルーセル**（`product-carousel`）: 白い六角形に商品の切り抜きを置き、下に商品名と価格を並べる - **黄色矢印ボタン**（`arrow-button`）: カルーセルを送る黄色の円ボタン - **関連バナー**（`banner-link`）: こげ茶の枠つきバナー。下に下線つきの太字リンクを置く - **コピーライト帯**（`copyright-bar`）: こげ茶の細い帯に、小さな白い文字 ## Do's and Don'ts **Do** - 地色を物語パートは若草色、商品パートはクリームと、きっちり分ける - キャラクターや小動物を画面のあちこちに散らし、見つける楽しさを出す - お菓子の写真は切り抜き、イラストの中になじませる - 操作できる場所は黄色の丸ボタンか吹き出しで示す - 文字は濃い茶色にして、温かい印象をそろえる **Don't** - 黒地や寒色のメインカラーを使わない - 角ばったゴシックの細い文字を見出しに使わない - 長い本文を詰めて組まない - 写真を四角いまま並べない - 強い影やグラデーションのボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観とロゴを見せる）: 白地の周りを葉と焼き菓子の写真で囲み、中央にロゴ、下に森の丘とキャラクターを置く 2. **導入メッセージ**（コラボの趣旨を伝える）: 中央が明るい焼き色の放射グラデ地に、手書き風の文字を中央揃えで6行ほど組む。左右に六角形の菓子アイコンを置く 3. **お店めぐり（1軒目）**（商品ジャンルへ誘導する）: 若草色の地に、茶色い屋根のお店とclick吹き出しを置き、上にscrollを入れる 4. **お店めぐり（2軒目）**（別のジャンルへ誘導する）: 屋根をピンクに変えた同じ形のお店を、木々の中に置く 5. **お店めぐり（3軒目）**（別のジャンルへ誘導する）: 屋根を青に変えたお店。足元にキャラを寝転ばせる 6. **商品紹介**（商品と価格を見せる）: 波形の境界からクリーム地に切り替え、リボン見出しと六角形のカルーセルを置く 7. **関連リンク**（ブランドサイトへ送る）: 白地にバナーを2つ並べ、下に下線つきのリンクを置く 8. **フッター**（運営情報と問い合わせ先を示す）: こげ茶のコピーライト帯の下に生成り地を敷き、ナビと問い合わせカードを置く ## Imagery - 太めの線を使わないフラットなイラストで、木や茂み、テント屋根のお店を描く - 茂みには白い小花をドットで散らす - 足あとやクローバーの小さなモチーフを、背景にまばらに置く - 焼き菓子は暖かい光で撮った切り抜き写真を使い、周りに散らす - キャラクターはぬいぐるみの質感で、リスなどの森の動物と並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでも1カラムのまま、イラストは全幅で縮小して使う - お店イラストは画面幅の85%ほどにし、click吹き出しをお店に重ねる - カルーセルはSPでは1点を中心に置き、隣の商品が左右に少しのぞく形にする - 関連バナーはSPでは縦に積む - ロゴは画面幅の70%ほどに収める ## 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-84834995`（元 LP の URL から採番） - **元 LP**: https://lotte-shop.jp/shop/e/eLrilakkumagoods202506/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。