DESIGN.md — くすみパステル×版画風の限定コラボ商品 LP（Pastel Section Riso-Print Collaboration Merch LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、シンプル・ミニマル、やさしい・柔らかい
• キーワード: くすみパステル・セクション地色切替・網点・リソ風装飾・太い欧文見出し・白抜き商品グリッド・深緑アクセント
• 地の質感: フラットな単色面に、網点やストライプで塗った紙切り風の装飾パーツを重ねる印刷物の質感
• 形: 四角い面の切り替えが基本。ボタンはピル型、装飾は葉・稲妻・炎・不定形のブロブ
• 温度感: やや暖かいニュートラル。くすみ色で落ち着かせ、黄・ピンク・青緑の装飾で賑やかさを足す

Colors

• セクションごとに地色を1色決め、グレージュ→クリーム→グレージュ→セージ→水色→サンド→グレージュ→クリーム→ブラウンと切り替える
• 地色はすべて彩度を落としたくすみ色にする
• ブランド色の深緑はCTA・販路タグ・小見出しだけに使う
• 黄・ピンク・青緑の鮮やかな色は網点装飾とイラストだけに使い、文字には使わない
• 見出しと本文はほぼ黒。ブラウン地の上だけ白文字にする
• 白はピル型のサブボタンと情報カードに使う

Typography

• 大見出しは英字の太いサンセリフにし、和文の小見出しを下に添える
• コンデンス系とジオメトリック系の2種類の英字書体をセクションで使い分ける
• 和文キャッチは短い行で改行し、行間を広くとって左揃えにする
• 商品情報はブランド行→商品名→価格→詳細リンクの順に縦に積む
• 価格は商品名と同じ大きさで、太字にしない
• 注釈は※で始め、小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション見出しは中央揃え。上に約80px、下に約50pxの余白をとる
• 商品はカードの枠を付けず、白抜き写真の下に直接テキストを置く
• 商品同士の縦の間隔は約40px
• 装飾パーツは画面端からはみ出させ、セクション境界にまたがらせる
• CTAは中央に置き、幅は画面の約55%

Elevation & Depth

• 影はほぼ使わずフラットにする
• セクションの区別は地色の切り替えだけで付ける
• スマホ画面の画像やチケット画像だけに、ごく薄いドロップシャドウを付ける

Shapes

• 角丸: 小 2px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜き（切り抜き）写真。人物写真は全幅の四角。担当者は円形に切り抜く。イラストは角を切り欠いたチケット型の枠に入れる
• セクション境界: 直線で地色を切り替える。不定形のブロブや炎の形の装飾を境界に重ねる
• CTA・サブボタンは完全なピル型
• 販路タグは角丸ほぼ0の小さな長方形
• 情報カードは角丸16px程度
• 装飾は網点やストライプで塗った手切り風の形

Components

• 深緑ピルCTA（button-primary）: 中央に置く白文字の購入・遷移ボタン
• 白ピルのサブボタン（button-sub）: ストーリーなど関連ページへの誘導ボタン。1〜2行の黒文字
• 販路タグ（塗り）（tag-channel-solid）: 店舗販売を示す深緑塗り・白文字の小タグ
• 販路タグ（枠線）（tag-channel-outline）: オンライン販売を示す深緑の枠線と文字の小タグ
• 商品アイテム（product-item）: 白抜き写真の下にタグ・ブランド行・商品名・価格・詳細リンクを積む。カードの枠なし
• 英字大見出し（section-heading）: 太い英字を中央に置き、下に和文の一言を添える
• カテゴリアンカーナビ（anchor-nav）: 英字カテゴリ名と下向き三角を5つ並べる。背景に薄いアイコンの線画を敷く
• 担当者プロフィール（staff-profile）: 円形の顔写真の横に、深緑の肩書きと名前を置く
• ライブ告知カード（info-card）: 白い角丸カードの上部に深緑の日時バーを置き、イラストと商品写真を並べる
• スライダー（carousel-dots）: 左右に細い山形の矢印、下に黒と白の丸ドットを並べる

Do's and Don'ts

Do - セクションごとにくすみ色の地色を変えて、カテゴリを区切る - 網点・ストライプで塗った葉・稲妻・炎・ブロブの装飾を、画面端に1〜2個ずつ置く - 商品写真は白抜きにし、地色の上に直接並べる - 深緑はCTAとタグに限って使う - 英字の大見出しは中央揃えで大きく扱う

Don't - 地色に鮮やかな原色を使わない - 商品にカードの枠や影を付けない - CTAを深緑以外の色にしない - 装飾を本文やボタンに重ねない - 見出しを細い明朝体にしない - グラデーションの背景を使わない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: グレージュ地に円形のイラストと紙吹雪を置き、下にロゴを「＋」で縦に並べる
2. 導入コピー（企画の物語を伝える）: 左に大きな和文キャッチと短い本文、右に斜めに傾けたドリンク写真を重ねる
3. カテゴリナビ（各商品カテゴリへ移動させる）: 英字カテゴリ名と下向き三角を3段に配置する
4. 看板商品の特集（限定ドリンクを主役として見せる）: クリーム地にトゲ型の網点バッジと英字見出しを置き、商品写真・価格・担当者プロフィールを並べる
5. 購入特典（購入の動機を足す）: 左にステッカーの画像、右に特典の説明と大きな「プレゼント」の文字
6. 企画の背景（裏側の物語で共感をつくる）: 英字の大見出し、短い文、全幅の集合写真、白ピルのボタン
7. ストーリー（イラストに込めた想いを伝える）: チケット型の枠に入れたイラストのスライダーと英文スローガン
8. グッズ導入（使う場面をイメージさせる）: グレージュ地に見出しと短い文、人物が商品を持つスライダー
9. 商品一覧（カテゴリ別）（全商品を比べて選べるようにする）: カテゴリごとに地色を変え、2列のグリッドに白抜き写真とタグ・価格を並べる
10. デジタルギフト（オンラインで贈る使い方を案内する）: サンド地に大きな円形のカード画像と小さなバリエーション画像、深緑のCTA
11. ライブ告知（配信へ誘導する）: クリーム地に炎形の装飾、英字見出し、CTA、白い告知カード
12. 注意事項・フッター（販売ルールと権利表記を示す）: ブラウン地に白文字の※注釈を並べ、イラスト・スローガン・ロゴで締める

Imagery

• イラストはリソグラフ風。緑・黄・ピンク・水色の限られた色に網点やハッチングを重ね、版ずれ感を出す
• 装飾は網点・斜めストライプで塗った葉・稲妻・炎・不定形ブロブ。手で切り抜いたような白いふちを付ける
• 商品は正面から撮った白抜き写真。影は付けない
• 人物写真は明るいグレー背景のスタジオ撮影。笑顔で商品を持たせる
• 紙吹雪とリボン状の曲線をあしらい、祝祭感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもSPと同じ幅の1カラムを中央に置き、左右はグレージュの余白にする
• PCでは左上にロゴを固定表示する
• 商品の2列グリッドとセクション構成はPCでもそのまま使う
• PCへ広げる場合も、本文幅は最大約480pxにとどめる

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