DESIGN.md — マンゴー黄×ティールの季節限定カフェ LP（Sunlit Mango Yellow Seasonal Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: マンゴーイエロー・ティール1色・木漏れ日の影・円形クロップ・セリフ大見出し・リゾート
• 地の質感: 黄色の地に、斜めに差し込む木漏れ日のような淡い光と影のグラデーションをかける。紙のような細かいざらつきも薄く入れる
• 形: 円形の写真フレーム、アーチ型の窓、ピル型ボタン、ドアハンガー型のカードを使う
• 温度感: 暖色の地に寒色のティールと空色を差して、夏らしい爽やかさを出す

Colors

• 地色は全面マンゴーイエローの1色にし、セクションの区切りに別の色の帯は使わない
• 文字・線・ボタンはティール系の1色でまとめ、黒は使わない
• 主 CTA はティールで塗って白文字、サブ導線は透明地にティールの細い枠線
• 円形写真の背景には空色を差して、南国らしさと寒色のアクセントを加える
• 濃淡は光と影の大きなグラデーションだけで付け、色数は増やさない
• page は文字 #2E6E66 × 背景 #F9BD44 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#FCDD9F、4.52:1）を使う。
• door-hanger-card は文字 #FFFFFF × 背景 #F8B62A のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#9D6D05、4.54:1）を使う。

Typography

• セクションの見出しは大文字の英字セリフ体を2行に分け、中央揃えにする
• 日本語は明朝体で統一して、上品なカフェらしさを出す
• 導入文は中央揃えにし、短い行で改行する
• 価格は欧文サンセリフで書き、商品名のすぐ下に置く
• 注釈は小さい文字で、※から書き始める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品の一覧は 2 カラムまで
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真とテキストを左右交互に並べ、ジグザグに読ませる
• セクションの間は大きく空けて、余白で区切る
• セクションの最後に、ゴーストボタンの一覧リンクを中央に置く
• 大見出しは中央に置き、下に短い導入文を添える

Elevation & Depth

• 影はほとんど使わず、平面的に見せる
• 商品の切り抜き写真には、ごく薄い落ち影だけを付けてもよい
• 奥行きは、背景に差し込む光と影のグラデーションで出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 素材の写真は空色の円で切り抜き、写真の一部を円の外にはみ出させる。商品は背景を抜いた切り抜き写真にする
• セクション境界: 境界線は引かず、余白と光のグラデーションで区切る
• ボタンはすべてピル型にする
• 特集への導線は、ドアハンガー形のカードにする
• メインビジュアルにはアーチ型の窓を使う
• 認証マークは小さな円形バッジにする

Components

• 商品情報ボタン（button-primary）: ティールで塗ったピル型ボタンに白文字。商品ごとに1つ置く
• 一覧リンクボタン（button-ghost）: 透明地にティールの細い枠線を付けたピル型ボタン。セクションの最後に置く
• 英字大見出し（heading-serif-en）: ティールの大文字セリフ体を2行・中央揃えで置く
• 円形の素材写真（circle-photo）: 空色の円に素材のアップ写真を入れ、横に特徴ラベルを添える
• 下線付きの特徴ラベル（feature-label）: 2行の説明の下に、細い上下の線で挟んだ素材名を置く
• 円形の認証バッジ（badge-round）: 白地に黒文字の小さな円形マーク。商品写真のそばに置く
• ドアハンガー型の特集カード（door-hanger-card）: 黄色い葉の模様を入れた札の形。深緑の円に英字見出しを白で入れ、下にピル型ボタンを置く
• 円枠付きの見出し（circle-frame-heading）: ティールの細い円の線で見出しと短い説明を囲む

Do's and Don'ts

Do - 地色はマンゴーイエロー1色で通し、斜めの光と影を重ねる - 文字・線・ボタンはティール系だけを使う - 商品は背景を抜いた写真にし、果物や花を添えてシズル感を出す - 写真とテキストを左右交互に並べる - セクションの間は大きく余白を取る

Don't - 黒い文字や、真っ白な背景の帯を使わない - ボタンを角張った四角にしない - 暖色をもう1色足して、ティールとの対比を弱めない - 写真に太い枠線や強い影を付けない - 見出しを太いゴシック体にしない

Page Structure

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

1. ファーストビュー（季節限定メニューの世界観を一目で伝える）: 左にロゴタイプ、右にアーチ型の窓と空・海を背景にした主力商品の写真を置く
2. 導入コピー（商品の情緒的な価値を伝える）: 明朝体の3行キャッチと、短く改行した説明文を中央揃えで置く
3. 素材の特長（素材ごとの魅力を説明する）: 円形の写真と下線付きのラベルを左右交互に3組並べる
4. 商品の詳細（価格と購入への導線を示す）: 切り抜きの商品写真の横に、商品名・価格・注釈・塗りボタンを置き、その下に一覧へのゴーストボタンを置く
5. 特集への誘導（関連する特設ページへ送客する）: ドアハンガー型のカードを中央に置く
6. スイーツメニュー（フードを併せて買ってもらう）: 英字大見出しの下に、切り抜きの商品とテキストを左右交互に並べ、認証バッジを添える
7. ペアリング提案（フードとドリンクの組み合わせを提案する）: 円枠の見出しの下に、ケーキとドリンクの写真を並べる
8. コーヒー豆（物販商品を紹介する）: 2カラムでパッケージ写真・名前・価格・説明・ボタンを並べる
9. 季節のグッズ（グッズを紹介する）: 3カラムでボトル写真・名前・価格・ボタンを並べる
10. カード・ギフト（ギフト商品へ誘導する）: カード画像の横に名前・注釈・塗りボタンとゴーストボタンを置き、デジタル版はカードを2枚並べる

Imagery

• 商品は背景を抜いて切り抜き、マンゴーの角切りやジャスミンの花を添える
• メインビジュアルは、アーチ型の窓越しに青い空と海が見える南国リゾート風の構図にする
• 素材のアップ写真は空色を背景にして、円形に切り抜く
• 背景には、葉越しの木漏れ日のような斜めの影をぼかして入れる
• 装飾には、細い線画の建物アイコンや葉の模様を少しだけ使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、左右交互の配置は写真の下にテキストを置く縦積みにする
• 3カラムのグッズは、SP では2カラムか横スクロールにする
• 英字大見出しは、SP では 36〜40px で2〜3行に分ける
• ボタンは、SP では幅の 80% 程度・高さ 44px にする
• ファーストビューは、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 行書くと起動時に読み込まれる。