--- version: alpha name: Storybook Chapter Chocolate Event LP description: 手描き風の動物イラストと、章ごとに色を変えるパステルの面で、催事会場を絵本の旅のように見せる菓子イベント LP。黄・ブラウン・ベージュ・水色・ピンクのチャプター面を縦に重ね、生成り地に濃茶枠のピル型リンクボタンで各詳細へ案内する。 colors: primary: '#914734' background: '#FFFFFE' secondary: '#FFE869' cta: '#FEFCDC' on-cta: '#472C20' text: '#472C20' background-alt: '#F2DDC1' tint-1: '#EFC9C0' tint-2: '#DADBE3' accent-1: '#6E88B6' accent-2: '#FDA855' accent-3: '#C491BD' marker: '#AE220B' line: '#472C20' accent-2-accessible: '#B95D02' typography: display: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 14px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-link: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px badge-round: backgroundColor: '{colors.marker}' textColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px chapter-card: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 110px chapter-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 160px chef-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 100px subhead-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.background}' typography: '{typography.headline-sm}' height: 34px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px limited-tag: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 14px --- # DESIGN.md — 絵本風チャプター構成の菓子催事 LP（Storybook Chapter Chocolate Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 絵本・チャプター・手描き水彩・パステル面・チョコレート色・催事 - **地の質感**: 紙や水彩の粒感があるイラストと、写真の実物感を同じ面に並べる - **形**: 角丸 8px ほどのパネル、ピル型ボタン、ポラロイド風の人物カード - **温度感**: 暖かい。チョコの茶色と黄色が基調で、水色の章だけ涼しく見せる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#914734` | チョコ色の章パネルと見出し | | 画素の主要色に補正 | | `background` | `#FFFFFE` | ページの地（白） | | 画素の実測 | | `secondary` | `#FFE869` | 黄色の章パネル | | 画素の実測 | | `cta` | `#FEFCDC` | リンクボタンの面（生成り） | | 画素の実測 | | `on-cta` | `#472C20` | ボタンの文字と枠 | | 画素の主要色に補正 | | `text` | `#472C20` | 見出し・本文の濃茶 | | 画素の主要色に補正 | | `background-alt` | `#F2DDC1` | ベージュの章パネル | | 画素の実測 | | `tint-1` | `#EFC9C0` | ピンクの章パネル | | 画素の実測 | | `tint-2` | `#DADBE3` | 水色の章パネル | | 画素の主要色に補正 | | `accent-1` | `#6E88B6` | アイス章の見出し青 | | 画素の実測 | | `accent-2` | `#FDA855` | 小見出し帯のオレンジ | | 画素の実測 | | `accent-3` | `#C491BD` | 小見出し帯の紫 | | 画素の実測 | | `marker` | `#AE220B` | 丸バッジの赤茶 | | 画素の実測 | | `line` | `#472C20` | ボタン枠・飾り罫 | | 画素の主要色に補正 | | `accent-2-accessible` | `#B95D02` | AA を満たす補正値（計算） | | 計算 | - 章ごとに面の色を変える（黄→チョコ→ベージュ→水色→ピンク） - 章パネルは白地の上に左右少し余白を残して置く - 文字は基本濃茶。チョコ色パネル上だけ白文字 - リンクボタンは全章共通で生成り面＋濃茶枠 - 章内の小分類は彩度高めのオレンジや紫の帯で区切る - 純黒は使わず、黒の代わりにチョコの濃茶を使う - `subhead-band` は文字 `#FFFFFE` × 背景 `#FDA855` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B95D02`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 章タイトル | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.08em | | `headline-md` | エリアカードの名前 | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.4 | 0.04em | | `accent` | 章番号・欧文ラベル | 欧文セリフ | Playfair Display | 500 | 13px | 1.2 | 0.05em | | `headline-sm` | 章のリード文 | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 1.7 | 0.04em | | `body-md` | 商品名・価格 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | | `note` | 注意書き | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | リンクボタン | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 1.3 | 0.04em | - 見出しとリード文は中央揃え - 章タイトルは太い丸ゴシックで字間を広めにとる - 章番号は欧文セリフを小さく入れ、本のアイコンを添える - 商品情報は左揃え、ブランド名はかぎ括弧で太字 - 限定表記は角丸の小さな枠付きラベルにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。エリア紹介は 2 列カード、商品写真は 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 14px（375px 幅換算） - 章パネルは画面幅の約 94% で、パネル同士の間に白地を 30〜40px 入れる - 商品写真はパネルの左右端まで広げて 3 枚を隙間なく並べる - 各章の最後に全幅のピル型リンクボタンを置く - イラストはパネルの外へはみ出させて奥行きを出す ## Elevation & Depth - 影はほとんど使わずフラットに作る - 人物カードだけ白縁と薄い影でポラロイド風にする - 重なりはイラストのはみ出しで表現する ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は正方形に近い角丸なしで、横に並べて連結する。人物は白縁の縦長カード - **セクション境界**: 角丸パネルの色を切り替える。一部の章は森や屋根のイラスト縁で区切る - ボタンは生成り＋1.5px 濃茶枠のピル型、右端に外部リンクのアイコン - エリアカードは角丸 8px のベタ塗り面 - 吹き出しは白い丸で濃茶の細い線 ## Components - **ピル型リンクボタン**（`button-link`）: 生成り面に濃茶枠、中央に文字、右に外部リンクのアイコン - **丸バッジ**（`badge-round`）: FV の右下に重ねる赤茶の円。白文字とリンクアイコン入り - **エリア紹介カード**（`chapter-card`）: 章ごとの色面に、章番号タブ・短いリード・エリア名・イラストを入れる - **章見出し**（`chapter-heading`）: 欧文セリフの章番号＋開いた本のアイコン＋リード文＋大きな丸ゴシックの章タイトル - **人物ポラロイドカード**（`chef-card`）: 白縁の中に水彩の似顔絵、下に手書き風の名前。写真の上に重ねる - **小見出し帯**（`subhead-band`）: オレンジや紫の横帯。左に白い小さな説明、太字の白い商品カテゴリ名 - **キャラクター吹き出し**（`speech-bubble`）: 動物イラストの横に白い丸い吹き出しで短い一言を置く - **限定ラベル**（`limited-tag`）: 商品情報の後ろに付ける細い枠の角丸ラベル ## Do's and Don'ts **Do** - 章ごとにパステルの面の色を変えて、旅の場面が切り替わるようにする - 動物キャラクターを各章に登場させ、吹き出しで案内させる - 商品写真は暖色の背景で撮ったものを 3 列で並べる - どの章もピル型リンクボタンで締める - 文字色は濃茶でまとめる **Don't** - 純黒の文字や直角のボタンを使わない - ネオンや寒色のビビッドな色を広い面に使わない - 写真だけの無機質な構成にしない（イラストを必ず添える） - 強い影やグラデーションのボタンを使わない - 章見出しの型を章ごとに変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（催事の世界観を一目で伝える）: 黄色地に全面の絵本イラストを置き、中央に装飾欧文のタイトル。右下に丸バッジ 2. **開催概要・ストーリー**（会場と会期、物語の導入）: 白地に中央揃えで会場・日付を太字で入れる。STORY ラベルを小鳥のイラストで挟む 3. **エリア一覧**（5 つの章を見渡せるようにする）: 色違いの角丸カードを 1 枚＋2 列×2 段で並べ、最後に会場マップのボタン 4. **第 1 章（黄）**（主力商品とつくり手の紹介）: 森の縁取りイラストで始める。ディスプレイ写真、人物カード付き 3 列写真、白枠の囲み 5. **第 2 章（チョコ色）**（体験型コーナーと予約への誘導）: 茶色の面に白文字。家のアイコン付きピル、皿の写真 3 列、人物カード、ボタン 2 つ 6. **第 3 章（ベージュ）**（焼き菓子と実演販売）: 写真 3 列＋価格。罫線見出しの下に 2 列の商品カード、ハリネズミの吹き出し 7. **第 4 章（水色）**（アイスの紹介）: 気球や雪の木のイラストを散らし、切り抜きのアイス写真を高さを変えて並べる 8. **第 5 章（ピンク）**（カテゴリ別の商品リスト）: 色帯の小見出し、写真 3 列、番号付きの商品リスト 9. **締め・フロア案内**（来場を促し、館内案内へつなぐ）: 飛び出す絵本のイラストとキャラの吹き出し。大きな白いピル型ボタン ## Imagery - 水彩と色鉛筆調の手描きイラスト。服を着た動物や洋館、気球、旗のガーランド - 商品写真は暖色やくすみ色の背景、真上か斜め上から自然光で撮る - アイスなどは背景を切り抜いてイラストと同じ面に置く - つくり手は写真ではなく似顔絵にしてポラロイド枠に入れる - 章の区切りに開いた本のアイコンを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750〜960px 幅の列にし、左右はページ地の色で埋める - エリアカードは PC で 3 列にしてもよい - 商品写真の 3 列は PC でも保ち、余白を広げる - FV のイラストは縦長のまま中央に置き、両脇に装飾イラストを足す ## 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-60b80737`（元 LP の URL から採番） - **元 LP**: https://website.hankyu-dept.co.jp/honten/h/valentine/9f_3.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。