DESIGN.md — 紺×バター黄のイラスト食品ブランド LP（Butter Yellow Navy Illustrated Food Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、ポップ・元気
• キーワード: バター黄・濃紺・手描きイラスト・紙のざらつき・縦書き英字ラベル・マーカー見出し
• 地の質感: 背景に細かなノイズ。紙や布のような質感を出し、縦ストライプや点々の手描きの模様を重ねる
• 形: 丘のような緩い曲線、縁がぎざぎざの紙片カード、角丸の白パネル、ピル型ボタン
• 温度感: 暖かい。クリーム色と黄色で温かみを出し、ミントと若草色で爽やかさを足す

Colors

• 文字は本文も見出しもすべて濃紺で統一し、黒は使わない
• セクションの地色は白、クリーム、ミント、若草の淡い色を交互に使う
• 黄色は見出し下のマーカーと商品カラーだけに使う
• ボタンは白地に紺の文字と紺の枠線。色で塗りつぶしたボタンは使わない
• 強調ラベルの帯は紺地に白文字にする
• 大きな年号など装飾の数字はくすんだ青で薄く背景に置く

Typography

• 見出しは極太で中央揃えにし、文字の下半分に黄色マーカーを敷く
• セクションごとに英字ラベルを画面端に縦書きで置き、横に細い線を添える
• 特長の説明文は字間を広く取り、2 行で中央揃えにする
• 本文は太めのゴシックで短く、2 行程度に収める
• 文字色は濃紺だけにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品とレシピは 2 列グリッド、PC は 3〜4 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央、英字の縦書きラベルは左端か右端に交互に置く
• 特長の 3 項目は 2 個＋1 個のずれた配置にする
• 商品カードは 2 列で、左右の高さを少しずらして並べる
• レシピは大きな白パネルの中に写真の 2 列グリッドを入れる
• セクションの最後に中央のピル型ボタンを 1 つ置く

Elevation & Depth

• バナーカードには白い縁と薄い影を付ける
• レシピの白パネルは影を付けず、角丸だけで背景から浮かせる
• それ以外は平面で、影はほとんど使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸 4px 前後の長方形。商品は切り抜きで配置する
• セクション境界: 丘のような緩い曲線、縦ストライプの手描き帯、ぎざぎざの紙の縁
• Point バッジは紺の波形の円にする
• 商品カードは四辺をぎざぎざにした紙片の形にする
• ボタンはすべてピル型で、紺の 1px 枠線を付ける
• トップへ戻るボタンは紺の正円にする

Components

• リードの帯ラベル（lead-ribbon）: メインコピーの上に置く紺地に白文字の帯。右端を斜めに切る
• マーカー見出し（heading-marker）: 極太の紺文字の下半分に黄色の帯を敷いた見出し
• 縦書き英字ラベル（vertical-label）: 画面端に縦書きで置く英字のセクション名。細い線を添える
• Point バッジ（point-badge）: 紺の波形の円に黄色い数字を入れたバッジ。線画イラストに重ねる
• 商品カード（product-card）: ぎざぎざした縁のクリーム色の紙片に、商品の切り抜き、商品名 3 行、詳細ボタンを入れる
• ピル型ボタン（button-primary）: 白地に紺の枠線と紺の文字。右端に矢印アイコンを付ける
• Pick UP バナー（banner-card）: 白い縁と薄い影の付いた正方形に近いバナー画像
• レシピパネル（recipe-panel）: 白い角丸パネルの中に、写真と料理名の 2 列グリッドを並べる
• トップへ戻るボタン（pagetop）: 右下に固定する紺の正円に白い矢印

Do's and Don'ts

Do - 文字色は濃紺だけにし、見出しには黄色マーカーを敷く - セクションごとに縦書きの英字ラベルを入れる - 淡い地色に紙のノイズ感を重ねる - 人物や料理は手描き風のフラットなイラストで添える - ボタンは白地に紺枠のピル型で統一する

Don't - 真っ黒の文字や彩度の高い原色を使わない - 塗りつぶしの派手な CTA ボタンを作らない - 角の鋭い四角いカードを並べない - 写真を背景いっぱいに敷いて文字をのせない - 黄色を広い面に使いすぎない

Page Structure

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

1. ヘッダー（ロゴとメニューの表示）: 白地の中央にロゴ、右端にハンバーガーメニューを置く
2. ファーストビュー（商品の価値を一言で伝える）: ミントから若草色の丘を背景に、紺の帯ラベル、マーカー付きの 2 行コピー、中央の商品、周りに生活シーンのイラストを置く
3. ピックアップ（注目のコンテンツへ誘導する）: 縦書きラベルを添え、白い縁のバナーを縦に 2 枚並べる
4. 特長（便利さの要点を 3 つ伝える）: クリーム地に縦ストライプを敷く。Point バッジ付きの線画イラストと 2 行の説明を 2 個＋1 個で配置する
5. 商品ラインナップ（商品の種類を見せる）: ぎざぎざの紙片カードを 2 列で並べ、それぞれに詳細ボタンを付ける
6. 取扱店検索（購入先へ誘導する）: 薄い枠線の横長ボタンにアイコンと短い文を入れる
7. レシピ（使い方の幅を見せる）: 黄緑の曲線背景の上に白パネルを置き、料理写真 6 枚を 2 列で並べる。最後にもっと見るボタン
8. ヒストリー（ブランドの歴史を伝える）: 大きな薄青の年号の上に、歴代パッケージを矢印でつないで並べ、詳細ボタンを置く

Imagery

• 人物や家具を描いた手描き風のフラットなイラスト。紺、黄、緑、グレーで塗り、輪郭は控えめにする
• 特長の説明は黒の線画に黄色を一部だけ塗り、英字の手書きワードを添える
• 商品は背景を切り抜いた正面の画像
• 料理写真は明るく温かい色調で、真上や斜め上から撮る
• 背景には緑の点々、斜線、縦ストライプの手描き模様を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーメニューをロゴの左右に 2 つずつ振り分ける
• PC の FV は、左にコピー、右に商品、下にバナー 2 枚を横並びにする
• 特長は PC で 3 列横並びにする
• 商品カードは PC で 4 列、レシピは 3 列にする
• 縦書きラベルは 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 行書くと起動時に読み込まれる。