DESIGN.md — ミント地×赤青の花柄アートなナッツ菓子 LP（Pastel Mint Botanical Art Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ポップ・元気、シンプル・ミニマル、やさしい・柔らかい
• キーワード: くすみミント・切り絵の花・欧文セリフ・アーチ切り抜き・広い余白・ナッツと土の質感
• 地の質感: フラットな単色面に手描き風の花イラストと細い白線の落書きを重ね、写真は土や木の質感が強い物撮り
• 形: 有機的な波形の境界、アーチ窓、正円、正円ボタン
• 温度感: 爽やかな寒色の地に暖色の花と茶色の菓子が映える中間温度

Colors

• 地はほぼ全面くすみミント一色で通し、セクション背景は切り替えない
• 赤・青・ピンク・オレンジは花イラストと装飾円に限定し、面として大きく使う
• 本文は黒ではなくブランド青で組み、軽やかさを出す
• ボタン色はセクションごとに赤（ストーリー）・青（商品）で使い分ける
• フッターだけ青の全面ベタにし、文字は淡い水色で同系に沈める
• 茶色は菓子と土の写真から自然に入れ、塗りでは使わない
• page は文字 #5085A7 × 背景 #AFDDDD のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#3A6078、4.55:1）を使う。
• button-round-arrow は文字 #FFFFFF × 背景 #EA554F のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E4271F、4.56:1）を使う。
• button-round-arrow-blue は文字 #FFFFFF × 背景 #3F83C4 のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#397AB8、4.52:1）を使う。
• footer-nav は文字 #8DB9DD × 背景 #3F83C4 のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 英字は全て小文字の欧文セリフで統一する
• 和文は小さめ12px前後で、行を短く区切り空行で詩のように組む
• セクション英字ラベルは画面端からはみ出させたり縦に回転させる
• セクション英字ラベルは地と近い色や赤で薄く置き、主張しすぎない
• 太字・大見出しの和文コピーは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、本文は左寄せのやや右オフセット配置
• 本文ブロックの幅: 画面幅の約 70%
• 余白: セクション間 120px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左余白を約115pxと広めに取り右寄りに置く
• 写真と文章を交互に縦積みし、間に大きな余白を入れる
• 商品は正円写真を中央に置き、その下に英名・和名・丸ボタンを中央揃え
• ニュースは細線区切りのリストで写真・タイトル・日付の順
• 装飾円や花は画面端からはみ出させる

Elevation & Depth

• 影は使わずフラットに統一
• 重なりは写真・イラスト・色面のレイヤーで表現する
• ファーストビュー写真は僅かに傾けた色面を背後に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 上辺が半円のアーチ形と正円で切り抜く。ニュース画像は小さい角丸長方形
• セクション境界: 土や紙をちぎったような有機的な波形の境界。フッター手前は左上に大きな角丸
• ボタンは直径約60pxの正円に細い矢印のみ
• 商品写真の周りに円形に沿った英字テキストを回す
• 直線的な帯や斜めカットは使わない

Components

• 丸矢印ボタン（button-round-arrow）: 正円に白い細線の右矢印。下に欧文リンク文字を添える
• 商品詳細丸ボタン（button-round-arrow-blue）: 青の正円ボタン、下に青の欧文ラベル
• 縦置き英字ラベル（section-label-vertical）: セクション名を大きな欧文セリフで縦回転し画面左端からはみ出させる
• アーチ写真（arch-photo）: 上辺半円の縦長写真を右寄せに配置
• 円形商品ビジュアル（circle-product）: 大きな正円写真に小さなパッケージ円を重ね、外周に英字を円弧配置し、背後に色付き装飾円と花
• ニュース行（news-item）: 細線で区切り、青文字タイトルと欧文日付
• 右上の小ボタン（header-pill）: menu の小さな丸点表示と半透明の角丸オンラインショップボタン
• 青ベタフッター（footer-nav）: 薄いロゴと欧文の階層リンク、縦書きのトップへ戻る

Do's and Don'ts

Do - 地色はミント一色を保ち、色は花と円の装飾で入れる - 英字は小文字の欧文セリフで上品に - 写真はアーチ・正円で切り抜く - コピーは短い行に分けて大きな余白で区切る - 装飾は画面端からはみ出させてリズムを作る

Don't - 太い和文ゴシックの大見出しや訴求バッジを置かない - 影・グラデーションのボタンを使わない - 白背景のカードで区切らない - 四角い角張った写真を多用しない - 原色を細かく散らしすぎない

Page Structure

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

1. ファーストビュー（ブランドの世界観を一目で伝える）: 中央に欧文ロゴ、下に少し傾けた物撮り写真、背後と下部に赤い花と青い葉の大きな切り絵
2. コンセプト（素材と想いを詩的に伝える）: 波形境界で切った全幅写真の上に白い短文を縦積み、右上に赤い欧文ラベル
3. ストーリー導入（商品の魅力を感覚的に伝え物語へ誘導）: アーチ写真→青い短文3連→アーチ写真→赤い丸矢印ボタン
4. お知らせ（最新情報を伝える）: 縦置き英字ラベルと細線区切りリスト、右上に see all
5. 商品紹介（商品ごとの詳細へ誘導）: 装飾円・花付きの円形写真、英名と和名、青い丸ボタンを商品数分繰り返す
6. フッター（サイト内回遊と企業情報）: 左上大角丸で切り替わる青ベタ、淡色のロゴとリンク一覧

Imagery

• 菓子をココアパウダーの土・流木・石の上に置いた箱庭風の物撮り
• 背景はターコイズの単色、硬めの光で影をくっきり
• 手で割る・持つ手元カットで食感を見せる
• 赤・青・ピンク・オレンジのフラットな切り絵風の花と葉
• 白い細い一筆書きの線を花の上に重ねる
• パッケージ柄も同じ花モチーフで統一
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューでロゴを左、花イラストを右に大きく横並び
• PC のコンセプトは全幅写真の中央に短文を置く
• PC のストーリーはアーチ写真2枚を左右にずらし中央にテキスト
• PC のニュースは日付・タイトル・サムネを横一行に
• PC フッターはロゴとリンクを3カラム横並び
• SP は全て1カラム縦積みで余白を大きく取る

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