DESIGN.md — 絵本風チャプター構成の菓子催事 LP（Storybook Chapter Chocolate Event LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 絵本・チャプター・手描き水彩・パステル面・チョコレート色・催事
• 地の質感: 紙や水彩の粒感があるイラストと、写真の実物感を同じ面に並べる
• 形: 角丸 8px ほどのパネル、ピル型ボタン、ポラロイド風の人物カード
• 温度感: 暖かい。チョコの茶色と黄色が基調で、水色の章だけ涼しく見せる

Colors

• 章ごとに面の色を変える（黄→チョコ→ベージュ→水色→ピンク）
• 章パネルは白地の上に左右少し余白を残して置く
• 文字は基本濃茶。チョコ色パネル上だけ白文字
• リンクボタンは全章共通で生成り面＋濃茶枠
• 章内の小分類は彩度高めのオレンジや紫の帯で区切る
• 純黒は使わず、黒の代わりにチョコの濃茶を使う
• subhead-band は文字 #FFFFFE × 背景 #FDA855 のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B95D02、4.53:1）を使う。

Typography

• 見出しとリード文は中央揃え
• 章タイトルは太い丸ゴシックで字間を広めにとる
• 章番号は欧文セリフを小さく入れ、本のアイコンを添える
• 商品情報は左揃え、ブランド名はかぎ括弧で太字
• 限定表記は角丸の小さな枠付きラベルにする
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。