DESIGN.md — 淡いグレーと明朝体のイタリアン冷凍食品LP（Light Gray Italian Mincho Frozen Pasta LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、シンプル・ミニマル、ナチュラル
• キーワード: ライトグレー地・明朝体・欧文スクリプト・真上から撮った皿の写真・余白多め・レストラン風
• 地の質感: フラットな単色の地に、浅い影の付いた白い皿の写真を置く。装飾は細い唐草線と淡いスクリプト文字だけにする。
• 形: 四角い写真のブロックと、丸い皿のシルエットを組み合わせる。ボタンや角丸カードは使わない。
• 温度感: やや暖かいニュートラル。料理の赤・橙・黄が暖色のアクセントになる。

Colors

• 地はライトグレー#F0F0F0を基本にし、ブランド実績やこだわりのセクションは白に切り替えてリズムを作る。
• 色の強さは料理写真に任せる。UIの色はグレー階調に抑える。
• ワインレッドは新商品バッジなど小さな要素にだけ使う。
• 金色は実績メダルにだけ使い、面積を最小にする。
• スクリプト文字は薄いグレーで、日本語見出しの背後に重ねる。

Typography

• 和文はすべて明朝体で統一し、ゴシック体は使わない。
• 本文は小さめにし、行間2.0で上品に見せる。
• 導入文は中央揃え、こだわりの説明は左揃えにする。
• 欧文スクリプトは日本語見出しの左上に重ね、薄いグレーにする。
• キャッチは前置きを小さく、強調語を大きくするサイズ差で組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。こだわりは写真と文章の左右分割、ラインアップとレシピは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 8px（375px 幅換算）
• こだわりのセクションは写真を画面端まで寄せて半分の幅で置き、反対側に文章を置く。
• こだわりのセクションごとに写真の左右を入れ替える。
• ラインアップは皿写真を2列に並べ、下に中央揃えで商品名を置く。
• 上下の余白を広く取り、要素を詰め込まない。
• サブ写真は2枚を横に並べ、右下に注釈を付ける。

Elevation & Depth

• 白い皿には下方向にぼかした柔らかい影を付ける。
• カードやボタンには影を付けず、フラットにする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの四角に切り抜く。皿は真上から撮り、白地に丸く見せる。
• セクション境界: 直線で地の色をグレーと白に切り替える。
• 角丸は使わない。
• 円形の要素は皿とNewバッジだけにする。
• レシピ写真の下に白いキャプション帯を付ける。

Components

• スクリプト重ね見出し（script-heading）: 薄いグレーの欧文スクリプトの右下に、明朝の日本語見出しを重ねる。
• 唐草飾り見出し（ornament-heading）: 中央揃えの見出しの左右に細い唐草線を置き、下にリード文を添える。
• Newバッジ（badge-new）: ワインレッドの細い線の円の中に欧文を入れ、皿の左上に重ねる。
• 皿写真カード（plate-card）: 白い皿を真上から撮った写真に、影と中央揃えの商品名を付ける。
• レシピカード（recipe-card）: 正方形の料理写真の下に、白いキャプション帯で料理名を2行まで載せる。
• 実績メダル（award-medal）: 金色のメダル画像を中央に置き、上に見出し、下に説明と注釈を置く。
• 写真と文章の分割ブロック（split-feature）: 半分の幅の大きな写真の横に、見出し・サブ見出し・本文・サブ写真2枚を置く。
• パッケージの横並び（package-row）: 商品パッケージ3点を等間隔で横一列に並べる。

Do's and Don'ts

Do - 料理写真を主役にし、UIの色は無彩色に抑える。 - 和文は明朝体で統一し、余白を広く取る。 - ラインアップは同じアングル・同じ白皿で写真を揃える。 - こだわりのセクションは写真の左右を交互に入れ替える。 - 写真の下に小さく「イメージです」と注釈を付ける。

Don't - 派手な原色のCTAボタンや太いゴシック体を使わない。 - 角丸カードやポップなアイコンを入れない。 - セクションの地にグラデーションや柄を入れない。 - スクリプト文字を濃い色にして本文より目立たせない。 - 皿写真の背景やアングルを不揃いにしない。

Page Structure

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

1. ファーストビュー（看板料理とロゴでブランドを印象付ける）: グレー地に、皿を持つ手元と料理のアップを置き、上部中央にロゴを重ねる。
2. キャッチとパッケージ（食感の価値を一言で伝え、商品を見せる）: サイズ差を付けた明朝のキャッチの下に、パッケージ3点を横に並べる。
3. ブランド紹介文（歴史と手軽さを説明する）: 中央揃えの明朝本文を6行ほど、広い行間で組む。
4. 実績訴求（市場No.1の信頼を示す）: 白地に見出し・金のメダル・説明・出典注釈を中央揃えで縦に並べる。
5. 麺のこだわり（素材と製法の魅力を伝える）: 左に麺の写真を大きく置き、右にスクリプト見出し・2行のサブ見出し・本文・サブ写真2枚を置く。
6. ソースのこだわり（ソースの品質を伝える）: 麺のこだわりと左右を反転させ、右にソースの写真を置く。
7. ラインアップ（豊富な味の種類を一覧で見せる）: グレー地に唐草飾りの見出しを置き、真上から撮った皿写真を2列で並べる。新商品にはNewバッジを付ける。
8. アレンジレシピ（応用の楽しみ方を提案する）: 正方形の料理写真に白いキャプション帯を付けたカードを2列で並べる。

Imagery

• 料理は白い丸皿に盛り、真上から撮って背景を白〜グレーに飛ばす。
• 素材の写真は粉をまぶした生地や木の台を使い、自然光で柔らかく撮る。
• トマトやハーブなど鮮やかな素材を、暗い背景でシズル感を出して撮る。
• レシピの写真はチェック柄のクロスや木製の台で、家庭的に演出する。
• 装飾は細い唐草線と欧文スクリプトだけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約900pxの幅で組み、地の色は全幅に敷く。
• ラインアップはPCで3列にする。
• レシピカードはPCで4列を1行に並べる。
• こだわりの左右分割はPCでも同じ構成のまま、文章の改行を減らす。
• サブ見出しはPCで1行にまとめる。

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