DESIGN.md — 夏空ブルー×生成り布の和スイーツ LP（Summer Sky Blue Handmade Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、親しみ・手作り感、和風、清潔・爽やか
• キーワード: 夏空・生成りの麻布・手書き太字・のれん・木桶・ひんやり
• 地の質感: 麻布・クラフト紙の織り目テクスチャと、雲のある青空の写真背景
• 形: ちぎれた紙のような不定形の縁、筆で描いたような帯、波打つ境界
• 温度感: 青で涼しく見せつつ、赤・生成り・木の色で温かみを足す

Colors

• 地の色は青空と生成り布を交互に切り替え、セクションの区切りをはっきりさせる
• 青地の見出しは白、強いコピーは黄色にする
• 生成り地の見出しは赤を主にし、藍色を添える
• 藍色の帯の中に生成りの文字を入れて、キーワードを目立たせる
• ラインナップの面だけティールにして、商品の色と合わせる
• ブランド紹介の部分は淡いクリーム地と明朝体で静かにまとめる

Typography

• 見出しは太い手書き風にし、文字ごとに少し傾けたり大きさを変えたりして揺らぎを出す
• 助詞は小さく、名詞は大きく組んで、リズムを作る
• 強調語の上に点を並べる（傍点）か、藍色の帯に入れる
• 青地の文字には軽い影をつけて読みやすくする
• ブランド紹介だけは明朝体の縦書きにして、トーンを変える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。工程は左右交互の千鳥配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 商品写真は画面幅いっぱいに大きく置く
• コピーは中央揃えが基本
• 工程の部分は、イラストと文章を左右交互に並べる
• 注釈は左揃えの小さい文字でまとめる
• セクションの境界は、ちぎった紙や雲の形でつなぐ

Elevation & Depth

• 商品カップの写真に白い光彩をつけて、ひんやり感を出す
• 動画カードには影をつけず、白い縁取りで浮かせる
• バナーには濃い茶色の影をずらして置き、紙を貼ったように見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物写真は不定形の楕円や波形で切り抜き、商品は背景を抜く
• セクション境界: ちぎった紙の縁、雲、波打つ曲線
• 直線の四角はなるべく使わず、縁をギザギザにするか手描きの線にする
• のれん・巻物・木桶の形を見出しの枠に使う
• ボタンは縁が手描き風のピル型にし、右端に丸い矢印をつける

Components

• のれん型見出し（noren-heading）: 上辺がのれんのように切れた生成りの布に、赤と藍の大見出しを入れる
• 藍色の帯（indigo-band）: キーワードを、筆で描いたような藍色の帯に生成り文字で入れる
• 赤いバッジ（red-stamp-badge）: 赤い円や判子の形の中に、白い手書き文字で補足を入れる
• 生成りのピル型ボタン（button-secondary）: 生成りの面に藍色の手描き風の縁取りと、右端の丸い矢印をつける
• 動画カード（video-card）: 左にサムネイルと赤い再生ボタン、右に動画タイトルを置く白縁のカード
• 縦長の値札（price-tag）: 白い短冊に縦書きで商品名と価格を書き、写真の上に斜めに重ねる
• 黄色い雲形の吹き出し（yellow-cloud-note）: 工程のポイントを、黄色い雲形の吹き出しで添える
• 商品カルーセル（flavor-carousel）: 木桶と氷の上に商品を置き、下に丸い色違いのサムネイルを並べ、左右に矢印をつける

Do's and Don'ts

Do - 青空と生成り布の地を交互に使い、季節感と手作り感を両立させる - 見出しは太い手書き風にし、赤・藍・白・黄色だけで色分けする - 商品は背景を抜いて大きく見せ、光彩をつけて涼しげにする - 工程はイラストと手書き文字で、絵本のように見せる - 注釈や販売条件は青地の下部に白い小さな文字でまとめる

Don't - 細いゴシックだけの無機質な見出しにしない - まっすぐな直線の四角い枠や、硬い区切り線を多用しない - 原色の青と赤を同じ面積でぶつけない - テクスチャのない真っ白な背景を広く使わない - 明朝体を楽しげなセクションに混ぜない

Page Structure

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

1. ファーストビュー（季節限定の新商品を告知する）: 青空の上に縦長の布の幟を置き、赤い大見出しと季節限定の判子を入れる。下に商品と値札を並べ、藍色の帯で販売中を伝える
2. 驚きの導入（意外な組み合わせへの興味を引く）: 生成り布の地に赤い見出しを置き、楕円に切り抜いた驚き顔の人物写真を挟んで、藍色の大文字で問いかける
3. 食感の訴求（上の層と下の層の食感の違いを見せる）: 青空の地に、スプーンですくった写真とカップの写真を大きく置き、白い手書き文字で擬音を書く
4. 新食感の秘密（製法のこだわりを伝える）: 黄色の大きなコピー、人物写真、生成り地の藍帯キーワード、赤いバッジのついた素材写真の順に並べる
5. 想いのメッセージ（ブランドの想いを伝える）: 青地に、黄色と白の文字を中央揃えで組み、点線の下線を引く
6. ラインナップ（4 種類の味を見比べてもらう）: ティールの地に、巻物型の見出しと木桶のカルーセルを置き、色違いの丸いサムネイルを並べる
7. 店舗案内・注釈（販売状況とアレルギー情報へ誘導する）: ピル型のボタン、テキストのリンク、白い小さな注釈を並べる
8. 製造工程（店で手作りしていることを伝える）: のれん見出しと職人のイラストのあと、ベージュ地に工程のイラストと見出しを千鳥に置く
9. TVCM（広告動画を見てもらう）: 藍色の吹き出しの見出しの下に、白縁の動画カードを 2 枚縦に並べる
10. 関連商品バナー（ほかの商品へ誘導する）: クラフト紙の地に斜線つきの見出しを置き、影つきの写真バナーを置く
11. ブランド紹介（素材と製法へのこだわりを伝える）: クリーム地に明朝体の縦書きコピーを置き、粉の写真の上に縦書きの白文字と白いボタンを置く

Imagery

• 商品は透明カップを真横からやや上の角度で撮り、背景を抜いて光彩をつける
• 背景は雲のある鮮やかな青空の写真を使う
• 人物は驚いた表情を、店内の柔らかい自然光で撮る
• イラストは太めの線と淡い色の、手描きの絵本風にする
• 木桶・氷・のれん・きらめきマーク・雪の結晶を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央に SP 幅（約 375〜400px）の 1 カラムを置く
• PC の左右の余白は青空の色で塗り、雲を置く
• PC では左側にナビの縦長の短冊（色違いの付箋）と、販売状況へのボタンを固定表示する
• PC の右側には、メインビジュアルの幟の拡大版を置く

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