--- version: alpha name: Hand-drawn Forest Character Snack LP description: クレヨン調の質感がある森のイラストを全面に敷き、焼き菓子のような茶色の見出しプレートと淡い黄色のカードで、キャラクター・アニメ・漫画の世界観を見せる菓子ブランドのファンサイト型 LP。画面全体が絵本の 1 ページのような作り。 colors: primary: '#ACCD22' secondary: '#94512D' surface: '#F4EF94' background: '#FEFBEA' background-alt: '#EBE403' accent-1: '#F39A1E' accent-2: '#049334' tint-1: '#9C6A6E' accent-3: '#C6804B' text: '#623711' dark-section: '#DD1D18' on-dark: '#FEFBEA' cta: '#059333' on-cta: '#FEFBEA' marker: '#FDE302' accent-2-accessible: '#04842F' tint-1-accessible: '#99666A' cta-accessible: '#04842E' accent-3-accessible: '#A36334' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Kiwi Maru fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Kiwi Maru fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 8px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-plank: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 40px subheading-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px character-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 560px hex-icon: height: 64px comic-tile: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px coming-soon-tile: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 60px news-bar: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 64px footer-outline-button: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — 若草色と焼き菓子茶の絵本風お菓子キャラクターLP（Hand-drawn Forest Character Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、ポップ・元気、親しみ・手作り感、ナチュラル - **キーワード**: 絵本風・森のジオラマ・クレヨン質感・動物キャラクター・焼き菓子カラー・六角形モチーフ - **地の質感**: 背景・カード・見出しすべてにクレヨンや色鉛筆のようなザラつきがあり、手描きのにじんだ縁取りが入る - **形**: 角丸の大きいカード、端が不揃いな木札型の見出しプレート、商品形状を思わせる六角形のアイコン - **温度感**: 黄緑と黄色が中心の、暖かく明るい春の森 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ACCD22` | 森の芝生の黄緑の地 | 30% | 画素の主要色に補正 | | `secondary` | `#94512D` | 見出しプレート・木札の焼き菓子茶 | 7% | 画素の主要色に補正 | | `surface` | `#F4EF94` | キャラクター紹介カードの淡黄 | 10% | 画素の実測 | | `background` | `#FEFBEA` | ヘッダー・お知らせ帯のクリーム | 8% | 画素の主要色に補正 | | `background-alt` | `#EBE403` | 4コマ漫画エリアの黄色い道 | 6% | 画素の実測 | | `accent-1` | `#F39A1E` | キャラクター名の英字オレンジ | 1% | 推定 | | `accent-2` | `#049334` | 濃緑のサブ見出し帯・ボタン | 4% | 画素の実測 | | `tint-1` | `#9C6A6E` | 話数ラベルのくすみ紫茶 | 2% | 推定 | | `accent-3` | `#C6804B` | Coming Soon タイルの赤茶 | 4% | 画素の主要色に補正 | | `text` | `#623711` | 本文の濃茶 | 2% | 画素の実測 | | `dark-section` | `#DD1D18` | コーポレートフッターの赤 | 10% | 画素の実測 | | `on-dark` | `#FEFBEA` | フッター上の白文字・白枠 | 1% | 画素の主要色に補正 | | `cta` | `#059333` | もっとみるボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FEFBEA` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#FDE302` | 話数番号の黄色丸 | 0% | 画素の実測 | | `accent-2-accessible` | `#04842F` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#99666A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#04842E` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#A36334` | AA を満たす補正値（計算） | | 計算 | - 地は黄緑の森イラスト。単色で塗りつぶさず、クレヨン調の質感を残す - 情報を載せるカードは淡黄、見出しプレートは焼き菓子茶に白文字 - 補助見出しやボタンは濃緑で、黄緑の地から浮かせる - 文字は黒を使わず濃茶にする - キャラクターの背景は六角形にパステル色（黄・紫・ピンク・水色）を割り当てる - コーポレート赤はフッターだけに使い、本編には持ち込まない - `subheading-band` は文字 `#FEFBEA` × 背景 `#049334` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#04842F`、4.65:1）を使う。 - `comic-tile` は文字 `#FEFBEA` × 背景 `#9C6A6E` のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#99666A`、4.53:1）を使う。 - `button-primary` は文字 `#FEFBEA` × 背景 `#059333` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#04842E`、4.65:1）を使う。 - `coming-soon-tile` は文字 `#FEFBEA` × 背景 `#C6804B` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#A36334`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風タイトル・英字のキャラクター名 | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.1 | 0.02em | | `headline-lg` | 木札プレートのセクション見出し | 丸ゴシック | Kiwi Maru | 700 | 20px | 1.3 | 0.08em | | `headline-md` | 物語の中のセリフ強調 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.5 | 0.02em | | `headline-sm` | 話数タイトル・相関図ラベル | 丸ゴシック | Kiwi Maru | 700 | 13px | 1.4 | 0.02em | | `body-md` | 物語・プロフィール本文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.8 | 0.03em | | `note` | お知らせ・フッターリンク | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.2 | 0.05em | | `accent` | 見出し上の小さな英字ラベル・ルビ | 欧文サンセリフ | Montserrat | 700 | 8px | 1.2 | 0.15em | - 本文も太めの丸ゴシックにして、子ども向けの親しみを出す - 見出しの難しい漢字には小さなルビを振る - 物語の本文は中央揃えにし、短い行で改行する - プロフィール本文は左揃えにする - 英字のキャラクター名は極太で太さに強弱がある書体を使い、オレンジにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。漫画は 2 列、動画サムネは 3 列、キャラクターアイコンは 5 個と 4 個を交互に並べたハニカム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 背景イラストは途切れずにつながる 1 枚の森として描き、セクションは道や木で区切る - 見出しプレートは左端から少しはみ出させて配置する - カードの左右にスライダー用の六角形矢印を置く - 装飾の木・家・どんぐりはカードの外側の余白に散らす - 4コマ漫画のエリアは黄色い道の上に載せる ## Elevation & Depth - 影はほとんど使わず、手描きの縁取りで面を区切る - 漫画のコマは茶色の太い縁取りで額装する - サブ見出しの帯は少し暗い緑の縁で厚みを出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラクターは切り抜きか六角形、漫画は角丸の四角に縁取り - **セクション境界**: 直線では区切らず、イラストの地形（道・森・池）で区切る。フッターだけ直線 - 見出しプレートは端が不揃いな木札の形 - 話数ラベルはカプセル型にし、黄色い丸の番号を重ねる - ボタンは角丸の長方形で、右端に矢印を入れる - ラベルは雲のような白い楕円にする ## Components - **木札見出し**（`heading-plank`）: 焼き菓子茶の手描き木札に白い丸文字の見出しを載せ、ルビを添える - **緑のサブ見出し帯**（`subheading-band`）: 更新日などの補足を濃緑の帯に白文字で載せる - **キャラクター紹介カード**（`character-card`）: 淡黄の大きな角丸カード。イラスト、英字の名前、和名、本文、担当と夢のラベルを順に並べる - **六角形キャラアイコン**（`hex-icon`）: パステル色の六角形にキャラクターの顔を入れ、ハニカム状に並べる - **漫画サムネイル**（`comic-tile`）: 茶色の縁取りをした角丸の絵。下にカプセル型のタイトルと黄色い丸の話数を付ける - **もっとみるボタン**（`button-primary`）: 濃緑の角丸ボタン。白文字で、右端に黄色の矢印を付ける - **近日公開タイル**（`coming-soon-tile`）: 赤茶の四角を緑の枠で囲み、白い斜体の英字を入れる - **お知らせ帯**（`news-bar`）: クリーム色の帯。左にラベル、右に白い角丸の箱を置き、日付と下線付きのリンクを入れる - **フッター白枠ボタン**（`footer-outline-button`）: 赤い地に白い枠線と白文字の角丸ボタン ## Do's and Don'ts **Do** - 背景は手描き質感の森イラストで、ページ全体を 1 つの地図のようにつなげる - 文字は濃茶、カードは淡黄、見出しは茶色の木札に揃える - 商品を六角形や擬人化した妖精のモチーフとして散りばめる - キャラクターごとにパステル色の六角形を割り当てる - 要素の間には木やどんぐりの家などの小さな装飾を置く **Don't** - フラットな単色ベタ塗りの背景や直線のセクション区切りにしない - 黒の文字や細い明朝体を使わない - コーポレート赤を本編の強調色に使わない - 写真主体の構成にしない（商品写真はファーストビューの縁取り程度に留める） - 影の強いカードやグラデーションボタンで質感を変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（企業ロゴ・商品ロゴ・メニューの提示）: クリーム色の帯の左に企業ロゴ、中央に商品ロゴ、右にメニューを置く 2. **ファーストビュー**（世界観とキャラクター全員の紹介）: 森の家の前にキャラクターが集合したイラスト。立体的な黄色のロゴを載せ、商品写真で縁取る 3. **お知らせ**（最新の更新情報を伝える）: クリーム色の帯に日付とリンクを 1 行で入れる 4. **物語の導入**（世界観のあらすじを伝える）: 黄色の円の中に中央揃えの本文を置く。上にウェルカムのアーチ、周りに妖精キャラを配置する 5. **アニメ**（動画コンテンツへの誘導）: 木札見出しの下に大きなサムネイルと再生アイコン。その下に話数タイルの 3 列グリッド 6. **キャラクター紹介**（キャラクターのプロフィールを見せる）: 淡黄のスライダーカードと左右の六角形矢印。下に六角形アイコンを一覧で並べる 7. **相関図**（キャラクター同士の関係を伝える）: グループごとの色付き角丸パネルを茶色の矢印でつなぎ、矢印の上に関係の言葉を添える 8. **4コマ漫画**（連載コンテンツの回遊を促す）: 黄色い道の上に 2 列で漫画サムネイルを並べ、最後に緑のもっとみるボタンを置く 9. **SNS・関連バナー**（公式アカウントやコラボ企画への誘導）: 森の上に 2 列のバナーを並べる 10. **シェア**（ページの拡散）: 白地に見出しと SNS の正方形アイコンを 3 つ並べる 11. **フッター**（企業情報とリンク）: 赤い地に白いロゴ、白枠のボタン 2 つ、三角記号付きのリンクリスト ## Imagery - イラストはクレヨンや色鉛筆の質感で、輪郭線は太めの茶色 - 森は黄緑の芝、丸い木、細長い針葉樹、黄色い道、池で構成する - キャラクターは二頭身の動物で、頬を赤くした丸い目の表情 - 商品は層が見えるパイの写真を縁飾りに使い、イラストでは顔付きの六角形の妖精として描く - 小物にどんぐりの家、ミツバチ、花、切り株を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにアンカーメニューを横並びで出し、中央寄せで約 70% 幅 - アニメの話数タイルは PC で 4 列 - PC のキャラクターカードはイラストを左、テキストを右に置く横並び - 六角形アイコンは PC で 10 個と 9 個の 2 段にする - 4コマ漫画は 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-9ad052bc`（元 LP の URL から採番） - **元 LP**: https://www.lotte.co.jp/products/brand/painomi/pienomioshinomori/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（7/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。