DESIGN.md — 白と水色の爽やか健康調味料 LP（Airy Blue Healthy Dressing LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、やさしい・柔らかい、親しみ・手作り感
• キーワード: 白地と余白・水色のグラデーション・細い明朝・吹き出し・黄色マーカー・円形グラフ
• 地の質感: 前半はフラットな白と淡い水色のグラデーション。後半は青地に紙のような細かい質感をのせる。
• 形: 角丸の写真、カギ括弧の装飾、ドーナツ型の円グラフ、ゆるい楕円で切り抜いた写真、手書き風の傾いた吹き出し。
• 温度感: 涼しく清潔。後半は明るく、にぎやかで温かい。

Colors

• 前半は白地に濃いグレーの文字を置き、色は水色の線とグラフだけにする。
• インタビュー本文は淡い水色のグラデーションパネルにのせる。
• 座談会パートは明るい青の地に切り替え、白い吹き出しを重ねる。
• 見出し帯とQ見出しには濃い青か紺を使い、白抜き文字にする。
• 強調語は黄色のマーカー下線だけで目立たせる。赤は使わない。
• 商品カードの地は、素材を思わせるベージュや緑にする。
• button-link は文字 #3E8EE0 × 背景 #FEFEFF のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2177CF、4.52:1）を使う。
• banner-recipe は文字 #3E8EE0 × 背景 #E3F4FE のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2177CF、4.53:1）を使う。
• donut-stat は文字 #3E8EE0 × 背景 #FFFFFF のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2177CF、4.56:1）を使う。

Typography

• 前半の見出しは細い明朝体にし、字間を広く取る。
• 英字見出しは細いサンセリフの大文字にし、先頭に短いダッシュを付ける。
• 座談会パートは丸ゴシックの太字に切り替え、親しみを出す。
• 本文は行間 2.0 前後でゆったり組む。
• 強調語は太字と黄色マーカーで示し、文字色は変えない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピカードは 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と文章は左右にずらして重ね、余白を多く取る。
• 写真ブロックは片側を画面端まで出して裁ち落とす。
• 商品紹介は中央のカードと左右に見切れたカードのカルーセルにする。
• 座談会パートは写真の周りに吹き出しを散らして配置する。
• テキストを中央揃えにするのは座談会パートだけ。

Elevation & Depth

• 基本はフラット。影は使わない。
• 吹き出しは濃い青の細い枠と、ずらした影でカード状に見せる。
• 商品ボトルの写真は、カードから上にはみ出させる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 前半は角丸の四角。座談会パートはゆるい楕円や円で切り抜く。
• セクション境界: 座談会パートの冒頭だけ、上辺を大きな弧にする。ほかは直線で地色を切り替える。
• リンクボタンは細い枠のピル型にし、右に矢印を付ける。
• 見出しをカギ括弧の線で囲む。
• 吹き出しには尾を付け、少し傾ける。
• 数値はドーナツ型の円グラフで見せる。

Components

• 枠線ピルボタン（button-link）: 白地に水色の細い枠、右に矢印を付けた小さな詳細リンク。
• 横長リンクバナー（banner-recipe）: 水色の枠と淡いグラデーションの地。左に誘導文、右に商品を並べる。
• カギ括弧見出し（heading-bracket）: 明朝の見出しを、左上と右下の L 字の線で挟む。
• 紺の帯見出し（heading-pill）: 紺のピル型の帯に白い丸ゴシックの文字を置き、下に小さな三角を付ける。
• Q見出しカード（question-card）: 濃い青の箱の左上に大きな「Q」のアウトライン文字を重ね、白文字で問いを書く。
• コメント吹き出し（speech-bubble）: 白地に紺の枠と尾を付けた吹き出し。強調語に黄色マーカーを引き、最後に名前と年齢を小さく添える。
• 円グラフ統計（donut-stat）: グレーのリングに青のグラデーションの弧を描き、中央に項目名と割合を書く。
• レシピカード（recipe-card）: 角丸の料理写真の下に料理名を書き、ピルボタンを付ける。
• 青パネルのレシピ紹介（recipe-panel）: 濃い青のパネルに、傾けた白枠の写真と吹き出しを 2 つ重ねる。

Do's and Don'ts

Do - 前半は余白を大きく取り、細い明朝で静かに語る。 - 色は水色と青の濃淡に絞る。 - 数値の訴求は円グラフで視覚化する。 - 後半は吹き出しと黄色マーカーでにぎやかさを出す。 - 英字見出し、日本語のリード、本文の 3 段で見出しを組む。

Don't - 赤や黒の太い訴求ボタンを使わない。 - 前半に太いゴシックや派手な装飾を入れない。 - 写真に濃い影や太い枠を付けない。 - マーカーに黄色以外の色を使わない。 - セクションを詰めて情報を過密にしない。

Page Structure

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

1. ファーストビュー（ブランドの印象と主な数値の訴求）: 左に大きなロゴと、数値入りの青い円バッジを 3 つ並べる。右に淡い水色の地に置いた料理と商品の写真と、縦書きのコピーを置く。
2. コンセプト（健康とおいしさを両立する思いを伝える）: 明朝のリードと行間の広い短い文を並べ、右に角丸の商品写真を置く。
3. 調査データ（ターゲットの意識を数値で示す）: 年代別の見出しの下に円グラフを 2 つずつ並べ、出典の注釈を添える。
4. シリーズ紹介（商品ラインナップを見せる）: 白い空間に商品を並べた写真を左に裁ち落とし、右にカギ括弧の縦組み見出しを置く。
5. 商品紹介（各商品の素材と味を紹介する）: 素材写真を背景にしたカードのカルーセル。左右に矢印を付ける。
6. レシピ（使い方を提案する）: マーカー付きのリードの下にレシピカードをグリッドで並べ、最後に横長バナーを置く。
7. 開発者インタビュー（開発の背景で信頼を高める）: 人物写真とカギ括弧見出しを並べ、本文は淡い水色のパネルにのせる。
8. 座談会レポート（ターゲット層の生の声を見せる）: 上辺を弧にした青地で始め、楕円の集合写真にタイトルロゴを重ねる。
9. Q&A・コメント（具体的な食生活の声を見せる）: Q見出しカードを置き、写真の周りに吹き出しを散らす。まとめ文はマーカーで強調する。
10. 動画（試食の様子を伝える）: 青地の中央に 16:9 の動画プレーヤーを置く。
11. 試食レシピ（実際の感想とレシピをつなげる）: 紺の帯見出しの下に、青パネルのレシピ紹介を 3 つ交互に並べる。
12. クロージング（ブランドの印象で締める）: 点線の飾りを付けた一文の下に、楕円で切り抜いたキャラクターとの集合写真を置く。

Imagery

• 料理は真上か斜め上から撮り、白い皿で明るく爽やかに見せる。
• 商品は淡い水色の背景に影を薄く落として撮る。
• 素材写真（ごま、玉ねぎなど）はベージュや緑の地にコラージュする。
• 人物は明るい室内で自然な笑顔を撮り、楕円や円で切り抜く。
• 装飾は点線、カギ括弧の線、小さなキラキラ程度にとどめる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真と文章の 2 カラムを左右にずらして配置する。SP では写真を上、文章を下に積む。
• SP では縦組みの見出しを横組みに変えるか、短く改行する。
• レシピカードは PC の 3 列を SP では 2 列にする。
• SP では吹き出しを写真の上下に並べ直し、重なりを減らす。
• 商品カルーセルは 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 行書くと起動時に読み込まれる。