DESIGN.md — 生成り水玉と丸い窓のやさしい発酵飲料LP（Soft Rice Dot Minimal Fermented Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、シンプル・ミニマル、ナチュラル、清潔・爽やか
• キーワード: 生成り・白い水玉・角丸の窓・縦書き・淡いグレー・余白
• 地の質感: フラットで紙のようにマットな面。影はほぼ使わず、写真の白い光でやわらかさを出す
• 形: 四隅が大きくふくらんだ角丸スクエア（餅や米粒のような形）を、写真の窓・水玉・特長カードに繰り返し使う
• 温度感: ほんのり暖かいニュートラル。生成りと淡いブルーグレーを交互に置き、温度差をつける

Colors

• 地色は白・生成り・ブルーグレーの 3 色だけ。セクションごとに切り替える
• 生成りの面には白い角丸の水玉パターンを重ね、ブランドらしさを出す
• 文字はすべてグレー系にし、純黒は使わない
• 強調色はチャコールの購入ボタンだけにする。鮮やかな色は写真の中にだけ出てよい
• 見出しの頭には薄いベージュの丸点を付け、色で強く主張しない
• timeline-item は文字 #6F6E67 × 背景 #E4E9EC のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6A6962、4.51:1）を使う。

Typography

• 見出しは細め〜標準の太さにし、太字は使わない
• セクション見出しの下には、小さな丸と英字ラベルを中央揃えで添える
• セクションの補足コピーは縦書きにし、写真の横に置く
• ファーストビューのキャッチは写真の窓の縁に沿って弧状に配置する
• 本文は行間を広めにして小さめのサイズで組む
• 番号は細い欧文の大きな数字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書き見出しを左右に置く非対称の配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右どちらかに寄せ、反対側に縦書きの見出しを置く
• 色付きのセクションは左右に約 4% の余白を残し、角丸のパネルとして浮かせる
• 特長カードは少しずつ重ねながら、左右にずらして縦に並べる
• 本文ブロックは右寄せの約 65% 幅にすることが多い
• 仕様は 2 列の表にし、横罫線だけで区切る

Elevation & Depth

• 影は基本的に使わない
• 奥行きは地色の切り替えと角丸パネルで出す
• FAQ の開閉ボタンだけ、ごく薄い枠線を付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 60px。ボタンはピル型。
• 写真の切り抜き: 四辺がふくらんだ角丸スクエア（スクワークル）に切り抜く。大・中・小のサイズで散らして配置する
• セクション境界: 細いグレーの水平線、または角丸パネルの切り替えで区切る
• 写真・水玉・特長カードはすべて同じふくらみのある角丸の形にそろえる
• 商品カードとセクションパネルは角丸 16px 程度にする
• ボタンと FAQ のトグルはピル型にする
• 特長カードは白地に細い線の枠を付ける

Components

• 購入ボタン（button-primary）: チャコールのピル型。右端に白い丸の中に入ったバッグアイコンを置く
• セクション見出し（section-heading）: 中央揃えの和文見出しの下に、ベージュの丸と英字の小ラベルを置く。上に細い区切り線を引くこともある
• 特長カード（feature-card）: 細い線で描いた角丸スクエアの中に、番号・丸点付き見出し・本文を中央揃えで入れる。カード同士を少し重ねて交互にずらす
• 丸点付き項目見出し（dot-heading）: 行頭にベージュの小さな丸点を付けた細字の見出し
• 水玉パターンパネル（pattern-panel）: 生成りの地に白い角丸の水玉を格子状に並べ、角丸のパネルにする
• 商品カード（product-card）: 淡いグレーのカードに、枠付きの容量ラベル・商品写真・価格・購入ボタンを縦に並べる
• 時間帯リスト（timeline-item）: 時計アイコンと縦書きの時刻、見出し、白丸付きの箇条書き、対象者の短文を並べる
• FAQ 行（faq-item）: Q 番号と質問文を並べ、右端に枠線付きのピル型トグル（▼）を置く。行の間は横罫線で区切る
• 容量ラベル（size-label）: 細い黒枠で囲んだ容量表記。数量表記を横に並べることもある

Do's and Don'ts

Do - 写真は必ず同じ形の角丸スクエアに切り抜き、大小を混ぜて散らす - 生成りの水玉パターンをファーストビュー・中盤・フッターで繰り返す - 見出しや本文はグレーの細字にし、余白をたっぷりとる - 縦書きの見出しを写真の横に置き、紙面のようなリズムをつくる - 強調はチャコールのボタンと丸点だけにとどめる

Don't - 赤や黄色のセールバッジや太いゴシックで煽る表現をしない - 四角いままの写真や円形の写真を混ぜない - 純黒の文字や濃い影を使わない - 地色に彩度の高い色を使わない - 1 画面に文字を詰め込まない

Page Structure

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

1. ファーストビュー（やさしい世界観と商品を一目で伝える）: 生成りの水玉地に、人物・素材・商品の写真を角丸の窓で散らす。縦書きの商品名と弧を描くキャッチを添える
2. 特長（やさしさの理由を 3 点で示す）: 中央の見出しと縦書きの補足コピーを置き、線画の角丸カード 3 枚を重ねながら交互にずらす
3. ベネフィット（飲み続けることで得られる良さを伝える）: 縦書き見出しに、角丸写真と丸点見出し・本文のセットを 3 回くり返す
4. ブランドストーリー（作り手の背景と信頼性を語る）: 水玉パネルの中に、角丸写真・縦書きの問いかけ・物語調の本文を置く
5. 原料と産地（原料へのこだわりを示す）: 風景写真を大きな角丸で見せ、生産者の写真を小さく添える
6. 製造管理体制（品質管理の安心感を伝える）: 生成りのパネルに、左の小さな角丸写真と右の短い見出しを組み、その下に本文を 3 段並べる
7. 楽しみ方（飲むタイミングを提案する）: ブルーグレーのパネルに、縦書き見出しと時計アイコン付きのタイムラインを置き、下に人物写真を入れる
8. 動画・イメージ（製造現場の空気感を伝える）: 角丸の大きな写真パネルに、白の縦書きの商品名を重ねる
9. 商品一覧（購入へ誘導する）: 淡いグレーの商品カードを縦に 3 枚並べ、価格とピル型の購入ボタンを付ける
10. 届け方のこだわり（配送品質の安心感を伝える）: 左揃えの見出しに、大きな細字の番号と丸点見出し・本文を 3 項目並べる
11. 商品仕様（仕様と成分を明示する）: 横罫線だけの 2 列の表で示す
12. よくある質問（不安を解消する）: 角丸の人物写真の下に、Q 番号付きのアコーディオンを 10 件並べる
13. フッター（ブランドの余韻を残す）: 水玉パネルに縦書きのロゴ風組版と SNS の丸アイコンを置き、ページトップへ戻るピル型ボタンを付ける

Imagery

• 白〜淡いグレーの明るい背景で、高めの露出で撮った清潔感のある写真
• 白い服の人物が穏やかに笑う、自然光の生活シーン
• グラスに注いだ白い飲料や米粒など、素材のクローズアップ
• 田園風景や生産者の姿など、緑のあるナチュラルな写真をアクセントに入れる
• 装飾は生成りの地に白い角丸の水玉を格子状に並べたパターンだけ。イラストは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では特長カード 3 枚を横に並べ、中央のカードを少し下げて重ねる
• PC ではベネフィットの写真とテキストを左右交互に配置する
• PC では商品カードを 3 列に並べる
• PC では届け方を左に見出し・右に 3 列、仕様と FAQ を左に見出し・右に本文の 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 行書くと起動時に読み込まれる。