DESIGN.md — 生成り×オリーブベージュの波形食品通販 LP（Organic Wavy Kraft Food EC LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい
• キーワード: 生成り・波形の区切り・不定形の写真・点線ピル・手描き風イラスト・産地の温度感
• 地の質感: 紙のようなマットな無地。グラデーションや影はほぼ使わず、平らな色面と点線で質感を出す。
• 形: ゆるい波線、丸みのある不定形（小石型）マスク、ピル型ボタン、角丸カード。
• 温度感: 暖色寄りのニュートラル。土や藁を思わせる落ち着いた温かさ。

Colors

• 地は生成りとオリーブベージュの 2 色をセクションごとに交互に使い、境目は波線にする。
• ブランド A は赤、B は緑に固定し、タグ・ボタンの矢印丸・英字ラベルの色を揃える。
• オレンジは英字の小見出し・日付・イラストだけに使う。面には使わない。
• ボタンは白か生成りの面に焦げ茶の文字を載せる。強い色のボタン面は作らない。
• 文字は真っ黒ではなく焦げ茶にする。

Typography

• 見出しは英字の小ラベル → 日本語の 2 行見出し、の 2 段で組む。
• 本文は中央揃えで短く改行し、行間は 2.0 前後と広めにとる。
• 字間は 0.05〜0.1em 開けて柔らかく見せる。
• 和文は太さを中〜太に揃え、極太は使わない。
• 欧文ラベルは丸みのあるジオメトリック系を使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ブランド紹介はロゴ大＋写真 2 枚の 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上下には波線を置き、余白を大きくとる。
• 商品は 1 枚ずつ横にスライドするカルーセルにし、隣のカードを端から少しのぞかせる。
• ボタンは中央に 1 つ、幅は 6 割ほどにする。
• 写真とイラストは左右に互い違いに配置して動きを出す。

Elevation & Depth

• 影は基本的に使わずフラットにする。
• 奥行きは地色の切り替えと白い面だけで出す。
• 枠は点線 1px で軽く囲む。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 主要な写真は小石のような不定形の有機シェイプでマスクする。商品写真は角丸 8px の長方形にする。
• セクション境界: ゆるやかな波線で地色を切り替える
• ボタンとタグはすべてピル型にする。
• サブボタンは白地のピルに点線の枠線をつけ、右端に丸い矢印アイコンを置く。
• フッターは上の角を大きな角丸にする。
• ブランドロゴのパネルは角丸 24px 前後にする。

Components

• 点線ピルボタン（button-dotted-pill）: 白地のピルに焦げ茶の点線の枠線。左に文字、右端にベージュの丸と「›」を置く。
• ブランド別もっと見るボタン（button-brand-more）: 生成り地の枠なしピル。右端の矢印丸はブランド色で塗る。
• ブランドタグ（tag-brand）: 商品名の下に置く小さなピルタグ。ブランド色の地に白文字。
• 英字小見出し（label-en）: 見出しの上に置くオレンジの英字 1 語。
• 内容量の円バッジ（badge-weight）: 商品写真の右上に置く、白い細線の円。中に重量を書く。
• 吹き出し見出し（speech-bubble）: 白い大きな角丸の吹き出しに太字の問いかけを 3 行。横に人物イラストを添える。
• レシピカード（card-recipe）: 点線の角丸枠。上部に料理の皿写真をはみ出させ、左右に白い丸の矢印ボタンを置く。
• お知らせリスト（news-list）: 点線で区切った行。左にタイトル、右下にオレンジの日付。
• スライダードット（slider-dots）: 小さな灰色の丸を並べ、現在位置だけブランド色にする。

Do's and Don'ts

Do - 地色の切り替えには必ず波線を使う。 - メインの写真は不定形の有機シェイプで切り抜く。 - オレンジの素朴な手描き風イラスト（人物・家・トラック）を余白に散らす。 - ブランドごとに色を固定し、ラベル・タグ・アイコンで揃える。 - 本文は中央揃えで短く改行する。

Don't - 赤や緑の大きなべた塗りの CTA ボタンを作らない。 - ドロップシャドウや光沢のあるグラデーションを使わない。 - 純黒の文字や直線だけのセクション境界にしない。 - 鮮やかな原色を背景に使わない。 - 情報を詰め込んだ訴求バナーを置かない。

Page Structure

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

1. ヘッダー（ロゴとカート導線）: 生成り地。左にロゴ、右にカートとハンバーガーメニュー。
2. ファーストビュー（暮らしと食の世界観を伝える）: 不定形に切り抜いた料理写真と風景写真を互い違いに配置。3 行のリードとオレンジのイラストを添える。
3. ブランド紹介（産地と 2 つのブランドを紹介する）: ベージュ帯。英字ラベル＋見出し＋段落の横に白い地図のシルエット。ブランドごとにロゴパネルと写真 2 枚を並べ、説明ともっと見るボタンを置く。
4. 商品ラインナップ（ブランド別に商品を見せる）: 生成り帯。上にトラックのイラスト。ブランドの丸アイコン、商品カードのカルーセル、点線ピルボタンを順に置く。
5. レシピ（使い方を提案する）: ベージュ帯。吹き出しの見出しと人物イラストの下に、点線枠のレシピカードのスライダー。
6. 読み物・お知らせ（産地の情報発信）: 縦書きの見出しと不定形の写真 2 枚。英字ラベル、点線で区切ったお知らせリスト、ボタンを続ける。
7. フッター（サイト内リンクと会社情報）: 上角が角丸の淡いベージュ面。2 列のリンク、白い枠のロゴ、住所、法人向けボタンを置く。

Imagery

• 料理写真は自然光で明るく撮り、箸で持ち上げる手元や白い皿を入れる。
• 生肉は灰色のコンクリート調の背景に置き、真上や斜め上から撮る。
• 風景は青空・草原・渓流など産地の自然を、不定形のマスクで切り抜く。
• イラストはオレンジと茶の平塗り。線は少なく、素朴な人物や家、配送トラックを描く。
• 地図は白いシルエットで、下に向かってグレーへ溶けるようにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを横に並べ、各項目の下に色付きの英字の小ラベルを添える。
• PC の FV は写真を左に置き、コピーと小さな風景写真を右に置く。
• PC のブランド紹介は 2 ブランドを横 2 列に並べる。
• PC の商品は 3 枚を同時に見せるカルーセルにする。
• PC の読み物は、写真を左、リストを右に置く 2 カラムにする。
• PC のフッターは、ロゴと住所を左、リンクを右に置く。

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