DESIGN.md — 若草色と深緑のキャラクターコラボカフェLP（Soft Green Character Collaboration Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: やさしい・柔らかい、ナチュラル、かわいい、親しみ・手作り感
• キーワード: 若草色・深緑・線画キャラクター・切り絵風の丘・商品グリッド・余白多め
• 地の質感: フラットな面に、紙のように柔らかな影が付いた草や丘のイラストを重ねる
• 形: 丸い丘や葉の有機的な形と、小さな角丸のカード・ピル型ボタン
• 温度感: あたたかく穏やか、春らしい

Colors

• 地色は生成りと淡い若草色をセクション単位で交互に切り替える
• 見出し・価格・ボタンは深緑1色に統一する
• 強い差し色は使わず、商品写真のパステル色を彩りにする
• 深緑の塗り面は寄付など特別な告知カードに限定する
• 本文は黒ではなく濃いグレーでやわらげる
• 注意事項は明るい黄緑の地にまとめて区切る

Typography

• セクション見出しは深緑の太い欧文大文字だけで組む
• コンセプト文は短い行に区切ってセンター揃えにし、行間を広く取る
• 商品名は太字、英語名は小さく下に添える
• 価格は太字の深緑にして目立たせる
• リンクは「＞」を頭に付けた小さな文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は1カラム、商品は2列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは地色を変えて区切り、見出しは中央に置く
• 商品はラベル→商品名→価格→リンクの順に縦に積む
• 大きな余白の中にキャラクターや丘のイラストを置いてリズムを作る
• 告知系は幅を絞った角丸カードに入れて中央に置く

Elevation & Depth

• 基本は影を付けずフラットに組む
• 商品写真の下にだけ薄い接地影を付ける
• 草や丘のイラストには内側に軽いグラデーション影を付けて立体感を出す

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜きで背景に溶け込ませ、カード系は角丸の長方形にする
• セクション境界: 直線で地色を切り替え、境界に丘や草のイラストをはみ出させる
• ボタンはピル型で右に矢印を付ける
• 販売チャネルのラベルは角丸ほぼなしの小さな長方形
• 有機的な丘の曲線を画面の端から覗かせる

Components

• 深緑ピルボタン（button-primary）: 白文字＋右矢印。詳細・公式サイトへの誘導に使う
• 淡色ピルボタン（button-light）: 深緑のカード上で使う生成り地に深緑文字のボタン
• 販売チャネルのラベル（channel-label）: 枠線タイプと深緑塗りタイプの2種類で販売場所を見分ける
• 商品アイテム（product-item）: 白抜き写真、ラベル、商品名、価格、＞リンクを縦に並べる
• カテゴリのアンカーナビ（anchor-nav）: 深緑の欧文ラベルの下に小さな▼を付け、ボタン枠なしで並べる
• 開始日の枠付きバッジ（date-badge）: 深緑の細枠で囲んだ太字の日付表記
• 告知カード（info-card）: 生成りまたは白の角丸カード。見出し・画像・注釈・ボタンを中央揃えで入れる
• 深緑の告知カード（dark-card）: 社会貢献などの告知を深緑の面に白文字で中央揃えにする

Do's and Don'ts

Do - 地色は淡い緑と生成りの2〜3色を交互に使う - 見出しは深緑の太い欧文1語にする - 線画キャラクターや丘のイラストを余白に置く - 商品は白抜き写真で揃えた格子状に並べる - テキストはセンター揃えで短く改行する

Don't - 赤やオレンジなど強い差し色をボタンに使わない - 濃い影や光沢のある装飾を付けない - 商品写真を背景付きの四角い写真のまま並べない - 見出しに明朝や手書き書体を混ぜない - 情報を詰め込んで余白をなくさない

Page Structure

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

1. ファーストビュー（コラボの世界観と開始日を伝える）: ミント地に丘のイラストとキャラクターを置き、ロゴと日付バッジを中央に置く
2. コンセプト（企画の想いを伝える）: 欧文の引用見出しの下に、短く改行した本文をセンター揃えで置く
3. キャラクター紹介（企画用キャラクターを紹介する）: 左にロゴとイラスト、右に短い説明文を並べる
4. カテゴリナビ（商品カテゴリへ移動させる）: 深緑の欧文ラベルと▼を2段に配置する
5. ドリンク・フード（主力の新商品を訴求する）: 生成り地に、大きな商品写真と説明文を左右に並べ、下に2列の商品を置く
6. タンブラー・マグ（グッズを一覧で見せる）: 若草色の地に4列の商品グリッドを置き、下にキャラクターを添える
7. グッズ（アパレルや雑貨を一覧で見せる）: 生成り地に4列の商品グリッドを何段も並べる
8. カード（プリペイドカードを紹介する）: 3列のカード画像と、デジタル版をまとめた角丸の生成りカードを置く
9. ギフト（オンラインギフトを紹介する）: スマホのモックアップの周りにカード画像を傾けて散らす
10. 会員特典・寄付（特典と社会貢献を伝える）: セージ地に生成りカードと深緑カードを縦に並べる
11. 注意事項・関連施設（購入時の注意と関連情報を伝える）: 黄緑の地に※付きの注釈を並べ、ロゴイラストと白い角丸カードを置く
12. フッター（アンケートやサイトのリンクをまとめる）: 白・グレーの地に小さな文字のリンクを3列で並べる

Imagery

• 商品は真上より少し上から撮った白抜き写真にし、柔らかな接地影を付ける
• キャラクターは黒い線画にし、差し色は深緑だけにする
• 丘や草は緑のグラデーションを付けた切り絵風のイラストにする
• 雲は白いシンプルなシルエットで画面の端に置く
• ギフトカードは少し傾けて重ね、遊び心を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約70%幅に組み、商品は4列に並べる
• SP では商品を2列、カードを1〜2列にする
• PC の左右に分けた配置は、SP では画像を上・文章を下の縦積みにする
• 装飾のイラストは SP では小さくして画面の端に寄せる
• セクションの余白は PC の約120pxを、SP では72px程度にする

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