DESIGN.md — 生成り地×果実色帯の果実酒ブランドLP（Pastoral Orchard Cider Brand LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい
• キーワード: 生成り・果樹園・明朝の余白・大角丸パネル・商品色の横帯・手書き英字
• 地の質感: 無地の生成り地で紙のような柔らかさ。写真は自然光で明るく、影は薄い
• 形: 白いパネルは角丸60px前後の大きな角丸。写真は角丸なしの矩形を互い違いに配置
• 温度感: 暖かい。クリームとりんごの赤、蜂蜜色のアクセント

Colors

• 地は生成り一色。章の塊は白の大角丸パネルで区切る
• アクセントは蜂蜜色1色に絞る。番号・英字サブ見出し・年号・CTA枠線に使う
• 商品色（黄・灰・桃・淡黄緑）は商品紹介の全幅横帯だけに使う
• 文字は純黒を避け、温かい墨色を使う
• 赤は商品名の欧文ラベルなど最小限にとどめる
• 濃紺は企業フッターだけに使い、LP本体には入れない
• step-apple-number は文字 #FFFFFF × 背景 #E0A63A のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9C6E18、4.51:1）を使う。

Typography

• 和文は明朝を基本にする。字間は0.1〜0.2emと広め
• コンセプト文は短い句で改行し、行間を2以上にする
• 見出しの下に蜂蜜色の英字サブ見出しを小さく添える
• 装飾として手書きの筆記体英字を斜めに置く（Caveat等）
• 商品ラベルは太い欧文サンセリフ大文字＋字間広め
• 長い説明文だけゴシックの小サイズにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは写真とテキストの2カラム互い違い
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 写真とテキストは左右を交互に入れ替え、段差をつけて並べる
• 章ごとに白の大角丸パネルを置き、パネル外の余白を広くとる
• 商品紹介は全幅の色帯の上にボトル写真をはみ出させて置く
• 製法の手順は番号付きで3列＋2列に並べる
• 年表は中央に年号と罫線を置き、写真を左右に振り分ける

Elevation & Depth

• 基本はフラット。白パネルに影はつけない
• ボトル写真だけ床に柔らかい接地影を落とす
• 動画サムネは白い太枠で囲み、額装のように見せる

Shapes

• 角丸: 小 8px ／ 中 24px ／ 大 60px。ボタンは角丸の長方形。
• 写真の切り抜き: 風景写真は角丸なしの矩形。人物は円形に切り抜く
• セクション境界: 直線の境目はつくらない。大角丸パネルと全幅色帯の端で区切る
• 章パネルは60px級の大きな角丸にする
• 店舗検索ボタンは角丸大きめの細枠カード
• 商品の詳細リンクは白い細線の円形ボタン
• 番号は蜂蜜色のりんご形アイコンに白数字で入れる

Components

• 大角丸の白パネル（panel-rounded）: 章（製法・声・歴史・通販）を包む白い面。角丸大
• りんご形の番号（step-apple-number）: 蜂蜜色のりんごシルエットに白数字。横に明朝の工程名を置く
• つくり手の声（voice-card）: 左に円形の人物写真と所属、右に蜂蜜色の鉤括弧付き見出しと本文
• 商品色の横帯（product-band）: 全幅の商品色の帯。欧文ラベル・味の一言・度数を置き、ボトルを帯からはみ出させる
• 円形の詳細ボタン（circle-link）: 帯の上に置く白い細線の円。中央に明朝の短いラベル
• 店舗検索ボタン（button-store）: 白地に蜂蜜色の細枠。ピンアイコンとNEWりんごバッジ付き
• 年表の年号（timeline-year）: 蜂蜜色の欧文セリフ年号と下の灰色横罫。説明と写真は左右交互
• Read moreの開閉（read-more）: 細い山形の矢印と小さな欧文セリフ文字

Do's and Don'ts

Do - 余白を多めにとり、ゆっくり読ませる - 明朝の短い詩的な句を改行して並べる - 産地の四季の写真を互い違いに配置する - 商品ごとに専用の色帯を使い分ける - アクセントは蜂蜜色1色にそろえる

Don't - 赤や原色の大きな購入ボタンを置かない - 太いゴシックで煽る見出しにしない - 写真に強い影や枠を多用しない - 純白をページ全体の地にしない - 商品色を商品帯以外に広げない

Page Structure

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

1. ファーストビュー（産地と商品の世界観を一目で伝える）: 果樹園と山の全幅写真。手書きコピー・明朝ロゴ・ボトル写真を重ねる
2. グローバルナビ（章への移動）: 生成り地に小さな明朝のリンクを横一列に並べる
3. コンセプト（やすらぎのブランド価値を伝える）: 2行の明朝リード＋本文と、手でりんごを持つ写真を左右に配置
4. 産地紹介（土地のストーリーを伝える）: 四季の写真4枚を段違いに並べ、手書き英字と短い縦並びの句を添える
5. 商品の価値（無添加と飲用シーンを伝える）: 風景写真と商品写真を左右交互に置き、短い句を3行添える
6. ブランド動画（情緒的な没入）: 白い額縁の中に再生ボタン付きのサムネとキャプション
7. こだわりの製法（工程ごとに品質を説明する）: 白い大角丸パネルに、りんご形の番号・写真・短文を5工程並べる
8. つくり手の声（人の想いで信頼を得る）: 円形の人物写真＋鉤括弧見出し＋長文を2名分。Read moreで開閉
9. 製品ラインナップ（味の違いを選ばせる）: 商品色の全幅帯にボトルを左右交互に置き、円形の詳細ボタンを添える
10. 期間限定品（限定品を訴求する）: 淡黄緑の帯で同じ形式にそろえる
11. 販売店検索（購入場所への導線）: 蜂蜜色の細枠カードボタンを中央に置く
12. ブランドの歴史（伝統の裏付け）: 白パネル内に中央年表。年号は蜂蜜色、写真は左右に振り分ける
13. オンラインショップ（EC購入への導線）: 白い角丸パネルにECモールのロゴを横並びにする
14. フッター（企業情報）: 白地のリンク一覧とSNS枠、最下部に濃紺帯

Imagery

• 自然光の果樹園・山・四季の風景。明るく淡い色調
• 手でりんごを包む・もぐなど、人の手を見せる寄りの写真
• ボトルは白抜きの切り抜きで、床に柔らかな影を落とす
• 人物は作業着姿の自然な笑顔を円形に切り抜く
• 蜂蜜色の手書き筆記体英字をアクセントに斜めに置く
• 年表には古いモノクロ・セピアの写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは写真とテキストを縦積みにし、写真は全幅または左右に寄せた段差で見せる
• 製法の工程はSPで1列または2列にする
• 商品帯はSPでボトルを帯の上に置き、ラベルを下に積む
• 年表はSPで年号と罫線を左寄せにし、写真を下に置く
• 白パネルはSPで左右に余白16px、角丸は40px程度にする

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