DESIGN.md — 生成り和紙と縦書き明朝のスープ素材LP（Washi Cream Japanese Soup Product LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 生成り和紙・縦書き明朝・淡い和柄・水彩イラスト・クラフト紙・湯気の温かさ
• 地の質感: 紙の繊維感がある和紙やクラフト紙の地に、麻の葉・青海波の柄をごく淡く敷きます。
• 形: セクションの境目は筆で引いたような波形の曲線にします。カードは角丸なしの白い長方形で、薄い影を付けます。
• 温度感: 暖色寄りです。クリーム、ベージュ、焼き色の茶でまとめ、温かい印象にします。

Colors

• 地は生成りを基本にします。章が変わるところでクリームやクラフトの茶に切り替えます。
• 原色は使いません。強調は朱色の小さな点と金茶のアイコンだけにします。
• 文字は墨色とこげ茶にします。真っ黒は避けます。
• ボタンは白地＋細い枠線＋金茶の丸矢印にし、ボタンの面を色で塗りつぶしません。
• ブランドのロゴや透かしの紋章は、地より一段濃い同系色で淡く敷きます。

Typography

• 見出しは縦書きの明朝にします。
• 縦見出しの要所の文字の脇に朱色の点を打ち、傍点のように強調します。
• 本文は細いゴシックで小さめに組み、行間を広く取ります。
• キャッチの一語だけを大きくしたり、金の地に乗せたりして強調します。
• 英字や太いゴシックの見出しは使いません。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムです。レシピカードは 2 列にします。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 10px（375px 幅換算）
• 縦見出しは右寄せに置き、写真やイラストを左右非対称に配置します。
• 写真は画面端まではみ出させて、動きを出します。
• レシピカードは均等なグリッドに並べ、右上に調理時間の丸バッジを付けます。
• セクション間の余白は大きく取り、静かな間を作ります。

Elevation & Depth

• カードとボタンには、ぼかし8px程度の薄い茶色の影を付けます。
• 商品パッケージには少し強めの影を付けて浮かせます。
• それ以外の面はフラットにし、紙の質感で奥行きを出します。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理は切り抜きか正方形にします。人物は長方形の写真にします。商品は白い円の上に乗せます。
• セクション境界: 筆で描いたようなゆるい波形の曲線で、地の色を切り替えます。
• カードやボタンはほぼ角丸なしの長方形にします。
• 調理時間バッジと矢印アイコンは正円にします。
• 和柄は帯状か波の形に敷きます。

Components

• レシピを見るボタン（button-recipe）: 白地に細い枠線を付け、右端に金茶の丸矢印を置いた横長ボタンです。
• レシピカード（recipe-card）: 白いカードの上に料理写真、下にレシピ名と小さなリンクを置きます。
• 調理時間バッジ（time-badge）: カード右上に付ける白い丸バッジで、分数を入れます。
• 縦書き見出し（vertical-heading）: 明朝の縦書き見出しで、脇に朱色の点を添えます。
• 透かし紋章（watermark-emblem）: 見出しの背後に、動物モチーフの円形紋章を淡く敷きます。
• 商品円台座（product-circle）: 白い正円の上に商品パッケージを置き、下に詳細ボタンと購入ボタンを並べます。
• 通販サイトボタン（ec-banner）: 白い横長の枠の中に、通販サイトのロゴを並べます。

Do's and Don'ts

Do - 見出しは縦書きの明朝で組みます。 - 地は和紙の質感と淡い和柄で仕上げます。 - 湯気やとろみが伝わる、柔らかい光の写真を使います。 - 強調は朱色の点などに絞り、ごく少量にします。 - 余白を広く取り、静かで上品な印象を保ちます。

Don't - 彩度の高い赤や黄色のボタンを置かないでください。 - 太い角ゴシックの見出しを使わないでください。 - ピル型ボタンやグラデーションのボタンを使わないでください。 - 純白一色のフラットな背景にしないでください。 - 情報を詰め込んだ訴求バナーを入れないでください。

Page Structure

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

1. ファーストビュー（料理のシズル感と商品を一目で見せます。）: スライダーで料理写真を大きく見せ、縦書きキャッチと商品パッケージを重ねます。
2. 商品紹介（商品の概要と使い道を伝えます。）: 左に商品パッケージ、右に縦見出しと透かし紋章、その下に本文を置きます。
3. 料理の解説（料理の由来とおいしさの理由を伝えます。）: 水彩風の鍋と器のイラストで挟み、縦見出しと本文を中央に置きます。
4. アレンジレシピ（多様な使い道を見せます。）: クラフト紙の地に白いレシピカードをグリッドで並べ、縦見出しを添えます。
5. 利用シーン（暮らしの場面に共感してもらいます。）: 女性の食事写真を左右交互に置き、縦書きの小見出し、本文、レシピボタンを添えます。
6. 商品ラインナップ（関連商品と詳細ページへ誘導します。）: 波形の砂色の帯の上で、白い円の上に商品を並べ、2つのボタンを付けます。
7. 購入導線（購入先の通販サイトへ送ります。）: 小見出しの下に、通販サイトのロゴ入りボタンを横に並べます。

Imagery

• 料理は白や淡色の器に盛り、斜め上から柔らかい自然光で撮ります。
• 鍋や器は水彩画風のイラストにし、液体が注がれる動きを入れます。
• 人物は家庭のキッチンや食卓で、自然な笑顔の女性を撮ります。
• 麻の葉・青海波の和柄と、動物の紋章を淡く透かして敷きます。
• 商品パッケージには影を付け、立体感を出します。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約480px相当の幅に、非対称なレイアウトで組んでいます。
• SP ではレシピカードを3列から2列にします。
• SP では縦見出しを写真の上に重ねず、写真の上部の右寄せに置きます。
• 利用シーンは写真と本文を縦に積み、写真は画面端まではみ出させて全幅にします。
• 通販サイトのボタンは、SP では縦積みか2列にします。

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