DESIGN.md — 赤×紺×クリームの童話風スイーツ LP（Fairytale Illustrated Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、レトロ、上品・高級、親しみ・手作り感
• キーワード: 絵本・童話・星降る夜・りんご・レトロ北欧調・ギフト
• 地の質感: ざらつきのあるグワッシュ風イラストと、マットな物撮り写真の組み合わせ。赤地には菱形の細い線柄を敷く。
• 形: アーチ窓・角丸カード・ピル型の線ボタン。写真は角を立てた四角で、イラストが枠からはみ出す。
• 温度感: 暖かい。クリームとピンクの地に、深紅と紺で締める。

Colors

• 地はクリームを基本にする。物語と催事のセクションだけ淡いピンクに切り替える。
• 深紅はロゴ・物語見出し・カード枠・フッターに使う。ブランドの象徴として扱う。
• 商品の見出しは墨色にし、その下に添える英字サブタイトルだけを赤にする。
• 紺・緑・金はイラストと写真の背景に限る。UI の文字色には使わない。
• フッターは深紅の地に白文字。細い菱形の線柄を薄く敷く。
• 写真の背景色は紺・黄・赤・ピンクで毎回変え、単調にしない。

Typography

• 和文はやや丸みのある細めのゴシック。字間を 0.1〜0.15em と広めに取る。
• 見出しは「和文タイトル＋赤い英字サブ」の 2 段で組む。
• 物語の本文は中央揃え。短い行ごとに改行し、詩のように見せる。
• 商品の説明文は左揃えで、1 行 20 字前後にする。
• 太字は商品名だけに使い、本文は細く軽く保つ。
• 英字はジオメトリック系のサンセリフで統一する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストを左右交互に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 140px、基本単位 8px、カード内 32px（375px 幅換算）
• 写真は左右に約 4% の余白を残して全幅近くまで広げる。
• テキストは写真の下に左揃えで置く。左右の余白は約 8%。
• 商品ブロック同士の間は 120px 以上空け、ゆったりさせる。
• イラストは写真の角やテキストの右側に重ね、枠からはみ出させる。
• View more ボタンは中央に置く。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• 物語カードは赤い紙を傾けて重ね、奥行きを出す。
• 立体感は物撮り写真の中の陰影だけに任せる。

Shapes

• 角丸: 小 4px ／ 中 20px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 商品写真は角を立てた四角。ファーストビューのイラストは上が半円のアーチ窓で切り抜く。
• セクション境界: 直線で背景色を切り替える。区切り線は破線の中央に星を置く。
• ボタンは細い線のピル型。中は塗らない。
• 物語カードは角丸 20px のベージュ面を赤い太枠で囲む。
• イラストは枠の外へはみ出させてよい。
• 円形のりんごアイコンの周りに文字を回し込み、リンクにする。

Components

• View more ピルボタン（button-outline-pill）: 墨色の細い線で囲んだピル型。中は塗らず、英字を入れる。
• 物語カード（story-card）: 傾けた赤い紙を何枚か重ね、その上にベージュの角丸カードを置く。中身は赤字の中央揃え。
• りんご型リンク（apple-circle-link）: 赤いりんごのシルエットに矢印を置き、周りに英字を円弧状に添える。
• 商品紹介ブロック（product-block）: 四角い写真の下に、和文見出し・赤い英字サブ・本文・ボタンを縦に並べる。写真の角にイラストを重ねる。
• 和英 2 段見出し（heading-bilingual）: 上に太い和文タイトル、下に赤い英字サブを置く。
• 星付き破線の区切り（star-divider）: 赤い破線の中央に、8 方向に光る星のマークを置く。
• 催事の店舗リスト（event-list）: 店舗名と期間を 2 列に並べた赤字のリスト。罫線は入れない。
• 柄入りフッター（footer-pattern）: 深紅の地に菱形の細い線柄を敷く。楕円の飾り枠で囲んだ白いロゴと、白い注釈を置く。

Do's and Don'ts

Do - 見出しは必ず和文と赤い英字サブの 2 段にする。 - 写真の角に手描きイラスト（動物・花・人物・星）を重ね、物語を感じさせる。 - 写真の背景色は紺・黄・赤・ピンクで毎回変える。 - 流れ星やゴールドの星を余白に散らす。 - 字間を広く取り、余白をたっぷり残す。

Don't - 塗りつぶした大きな CTA ボタンや、価格を強く訴求するデザインは使わない。 - 影・グラデーション・光沢など、デジタルっぽい装飾は使わない。 - 太いゴシックで本文を詰めて組まない。 - 蛍光色や寒色の UI 色を加えない。 - 写真を角丸にしたり、円形に切り抜いたりしない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（ブランドの世界観をひと目で伝える）: 生成り地に、アーチ窓で切り抜いた夜空のイラストを置く。上部に弧状のコピー、下部に英字の大きなロゴを入れる。右端に縦書きの Scroll 表示。
2. ブランドストーリー（主人公の物語で世界観に引き込む）: ピンク地に赤い紙を重ねたカードを置く。赤字の中央揃えの短い詩文と、りんご型リンクを入れる。
3. 商品紹介（複数）（商品ごとに物語のワンシーンとして紹介する）: クリーム地で、写真・2 段見出し・本文・View more を 1 組として繰り返す。毎回違うイラストを重ねる。
4. 催事情報（販売店舗と期間を知らせる）: ピンク地に、バラのイラスト、英字見出し、星付きの区切り線を置く。その下に店舗名と期間の 2 列リストと注釈。
5. 集合写真（商品ラインナップ全体を見せる）: 赤と黄色の台に商品を並べた全幅写真。左上に筆記体の飾り文字を入れる。
6. フッター（会社情報と注意書きを示す）: 菱形柄の深紅地に、楕円の飾り枠で囲んだ白いロゴ、所在地、注釈、コピーライトを置く。

Imagery

• イラストは不透明水彩風のフラットな手描き。少しかすれた質感を残す。
• モチーフは、赤いワンピースの少女・りんご・ユニコーン・うさぎ・月・人魚・花・流れ星。
• 物撮りは単色の背景紙と円柱の台を使い、やや俯瞰で撮る。
• 撮影小物として、写真の中に金色の線や星を散らす。
• 使う色は赤・紺・緑・金・クリームに絞る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを左右交互に並べ、イラストを間に重ねる。
• PC のファーストビューは左にロゴ、右にアーチ窓のイラストの 2 分割。
• PC の物語カードは開いた本の形にし、左ページにイラスト、右ページに本文を置く。
• PC の催事リストは 2 段組にする。
• PC のフッターは左に集合写真、右に赤い地の会社情報の 2 分割。
• PC はグローバルナビを右上に小さな文字で並べる。SP はハンバーガーメニューにする。

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 行書くと起動時に読み込まれる。