DESIGN.md — 藍と生成りの涼感和風レシピ食品LP（Cool Summer Washi Recipe Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: 夏空の藍・生成りの和紙・氷の涼感・青海波・レシピ解説・専門家の推薦
• 地の質感: 和紙のような細かい繊維テクスチャと、青海波の薄い地紋。青空の写真で背景を切り替える
• 形: 角丸の小さい細線の枠、アーチ型のセクション上端、円形の人物写真、ピル型ボタン
• 温度感: 藍・水色を基調にした涼しい配色。金茶と朱を差し色にして和の温かみを足す

Colors

• 地色は生成り、淡いブルーグレー、白、金茶を交互に切り替えて、セクションを区切る
• 藍色はメインの見出しと主ボタンに使う
• 朱赤は購入 CTA と強調語 1〜2 語だけに使う
• 金茶は大見出しの文字と専門家欄の背景に限る
• 重要な本文は薄黄色のマーカーで強調する
• 水色は氷・涼しさの装飾とサブボタンに使う

Typography

• 見出しは 2 段組みにし、一部の語だけ色を変えて強調する
• 大見出しの下に藍色の二重線を引く
• 本文は中央揃えにし、行ごとに点線の罫線を入れる箇所がある
• 番号は筆記体風の英字（Point. / #01）で添える
• 体験コメントは手書き風の書体で書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリットは写真の周りにカードを放射状に配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地色を全幅で切り替える
• 作り方は料理写真→材料→細線の枠の順に並べる
• ポイントは左にイラスト、右に見出しと本文。項目の間は区切り線で分ける
• 専門家欄は白いカードの中に、丸い写真とプロフィールを横に並べる
• CTA はページ末尾に縦に 3 つ積む

Elevation & Depth

• CTA ボタンには白い縁取りと下方向の濃い影をつけ、立体的に見せる
• カードはごく薄い影か、影なしの細線で区切る
• 白いカードは色付きの地の上に置いて浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理は切り抜きの角形。人物は円形に切り抜く
• セクション境界: 生成り地の上端を大きなアーチ状にする。専門家欄は背景を斜めに塗り分ける
• 作り方の枠は細い茶色の線で、角丸は小さくする
• ラベルは左上に付く茶色のタブ型にする
• 専門家カードは上部をアーチ状に盛り上げる

Components

• 購入ピルボタン（button-primary）: 朱赤のピル型ボタン。白縁、右に三角矢印、下に影
• サブピルボタン（button-secondary）: 藍色または水色の同じ形のボタン
• 作り方枠（recipe-box）: 茶色いタブ型ラベル付きの細線の枠。中に番号付きの手順を並べる
• ポイント番号（point-label）: 藍色の楕円の線の中に、筆記体風の Point.N を入れる
• メリットカード（merit-card）: 白地に細線のカード。#番号を上に重ね、料理写真から引き出し線を伸ばす
• コメントカード（comment-card）: 白地に斜めのタグラベルを付け、鉤括弧付きの朱色見出しと手書き風本文を入れる
• 専門家カード（expert-card）: 上部がアーチ状の白いカード。円形の写真、肩書き、マーカー付きの推薦文を入れる
• オレンジ帯ラベル（tag-label）: オレンジの小さな帯に白文字のキャッチを入れる
• ページ内ナビ（anchor-nav）: 白地に藍色の文字と小さな三角を付け、2 列 × 2 段に並べる

Do's and Don'ts

Do - 地色を数セクションごとに切り替え、リズムをつくる - 氷・雫・青海波の装飾を余白に散らす - 強調語は朱色とマーカーで最小限にとどめる - 手順は番号付きにして細線の枠で囲む - 人物写真は円形に切り抜き、明るい背景にする

Don't - 原色の派手なグラデーションを多用しない - 角丸を大きくしすぎない（ポップになりすぎるため） - 朱赤を背景の広い面に使わない - 重いドロップシャドウをカードに付けない - 明朝体を本文に使わない

Page Structure

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

1. ファーストビュー（季節のメニューを印象づける）: 料理の実写を全面に敷き、縦長のカプセル型ロゴ枠を重ねる
2. ページ内ナビ（各セクションへの誘導）: 白地に 2×2 の藍色テキストリンクを並べる
3. 導入文（季節の悩みと解決を語る）: 青空の写真の上に、白文字の中央揃えで本文を置く
4. 作り方（簡単さを伝える）: アーチ形の生成り地に料理写真、材料、手順の枠を 2 品分並べる
5. スタッフコメント（体験談で共感を得る）: 淡い青緑地の上の白いカードに、手書き風の本文と商品写真を入れる
6. ポイント（利点を 3 つ示す）: フラットなイラストとポイント番号を付け、区切り線で縦に並べる
7. メリット（こだわりを説明する）: 青海波の地紋の上で、中央の料理写真の周りに番号付きカードを 5 枚置く
8. 専門家の推薦（権威付け）: 金茶と水色の斜めの地にアーチ状の白いカードを置き、人物 2 名を並べる
9. アレンジレシピ（活用の幅を示す）: 英字の大見出しとオレンジのラベルを付け、写真、材料、手順、監修者のコメントを並べる
10. バナー・CTA（購入への誘導）: キャンペーンバナーの後に、色違いのピル型ボタンを 3 つ縦に並べる

Imagery

• 料理は明るい自然光で斜め上から撮る。ガラスの器と氷で涼感を出す
• 背景は木の天板と青い布、緑の葉を添える
• イラストは線のないフラットな塗りで、くすんだ色にする
• 氷の粒・雫・雪の結晶を淡い水色で小さく散らす
• 地紋は青海波を薄い線で敷く
• 人物は明るい背景で胸から上を写し、円形に切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文を中央の約 900px 幅にまとめ、地色は全幅に伸ばす
• ポイントは PC では縦の区切り線で 3 カラムに並べる
• レシピは PC では写真と材料を左右 2 カラムにする
• ページ内ナビは PC では 1 行 4 項目にする
• CTA ボタンは PC では幅 約 240px で中央に置く

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