DESIGN.md — 墨色×橙アクセントの食品OEM企業LP（Charcoal and Orange Food OEM Corporate LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、クール・先進的
• キーワード: チャコール・焼き橙・生成り・実績数字・食品写真・余白
• 地の質感: 石板風の暗い写真と、紙のようなざらつきのある生成り地
• 形: 角丸ほぼなしの四角いカードと写真。丸いアイコンボタンとピル型CTAだけが曲線
• 温度感: 落ち着いたやや暖かいトーン。暗色で引き締め、橙で温度を足す

Colors

• 白・生成り・チャコールの3種の地を交互に切り替えてセクションを分ける
• 橙は英字ラベル・番号・バッジ・見出し横の短い線・CTAだけに使う
• 暗色面の上の文字は白、ラベルだけ橙
• カードは白で、ベージュの枠やベージュ地の上に置く
• 写真以外に彩度の高い色を足さない
• button-primary は文字 #FEF5E4 × 背景 #DD7522 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC5B1B、4.55:1）を使う。
• news-tag は文字 #DC762B × 背景 #FFFFFF のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B65E1E、4.56:1）を使う。

Typography

• 和文は太字ゴシックだけで、字間を広めに取る
• 見出しの上に橙の英字ラベルを小さく置く
• 実績の数字は大きく、単位はその半分ほどのサイズにする
• 本文は行間2.0で、読みやすく余白を取る
• 特長の番号は橙の太字英数字で、写真の左上にかぶせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。製品品目だけ2カラムのグリッド
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約17px
• 見出しは左寄せが基本で、暗色セクションは中央寄せ
• 実績数字は縦線で区切った2×2グリッド
• ケースカードはベージュの枠の中に縦に積む
• セクション末尾のテキストリンクは右寄せ

Elevation & Depth

• 影は使わず、面の色の差で階層をつける
• カードは平面の白い面だけで表現する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの横長の長方形
• セクション境界: 直線で地の色を切り替える
• カード・写真・バッジは角丸0
• テキストリンクには丸い枠線の矢印アイコンを添える
• 見出しを左右の弧で挟む括弧型の装飾を使う
• CTAだけ完全なピル型

Components

• 問い合わせピルボタン（button-primary）: 橙の面にメールアイコンと白文字。暗い写真の上に中央配置する
• 矢印テキストリンク（link-arrow）: 下線つきの太字テキストと、黒い枠線の円に矢印。右寄せで置く
• 英字ラベル（eyebrow-label）: 見出しの上に置く、字間を広げた橙の英大文字
• 横線つき見出し（heading-line）: 左寄せの見出しの右側に、橙の短い横線を添える
• 実績数字グリッド（stat-grid）: 暗色の面に、橙のラベル・白の大きい数字・括弧書きの補足を並べ、縦線で区切る
• ケースカード（case-card）: 白いカードの左上に橙のCASE番号バッジ。中央寄せで小見出しと説明を入れる
• 製品品目カード（product-card）: 写真・品目名・小さい例のリスト・最小ロットを入れた生成りの帯を、2列で並べる
• 番号つき特長（feature-item）: 暗色の地に、写真・その左上に重なる橙の大きい番号・白の見出しと本文
• お知らせタグ（news-tag）: 橙の枠線と橙の文字の小さい四角いタグ

Do's and Don'ts

Do - 地の色を白・生成り・チャコールで交互に切り替える - 橙はラベル・番号・CTAの数か所だけに絞る - 実績は数字を大きく見せ、補足は小さく添える - 食品写真は明るく、おいしそうに見える色で使う - テキストリンクには必ず丸い矢印アイコンを添える

Don't - カードや写真に角丸や影をつけない - 橙を広い面の背景に使わない - 手書き書体やポップな装飾を足さない - 暗色セクションに色付きの文字を多用しない

Page Structure

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

1. ファーストビュー（企業理念を印象づける）: 暗い石板の上に料理を置いた写真。中央に橙の英字ラベルと白い3行のコピー、円形のSCROLL表示
2. 実績数字（規模で信頼を示す）: チャコールの面に、中央の見出しと2×2の数字グリッド
3. 企業紹介（会社の姿勢を伝える）: 白い地に英字ラベル・引用符つきの見出し・広めの行間の本文と、会議の写真
4. 対応ケース（顧客の課題に当てはめてもらう）: 括弧型の見出しの下、ベージュの枠内にCASEバッジつきの白いカードを5枚。最後に矢印リンク
5. 特長（強みを3つ示す）: チャコールの地に、橙の線と英字の大見出し。番号つきの写真と白文字の説明を縦に並べる
6. 製造品目（対応できる品目と最小ロットを示す）: 白い地に2列の製品カードグリッド
7. 国内外の拠点（グローバルな体制を伝える）: 生成りの地に本文と矢印リンク。その下に橙のピンを立てた淡い色の世界地図
8. お知らせ（最新情報を伝える）: 日付・枠線のタグ・タイトルを1行ずつ並べ、区切り線と一覧への矢印リンク
9. CTA（問い合わせへ誘導する）: 暗い食材写真の上に白い3行のコピーと、橙のピル型ボタン

Imagery

• 黒い石板やスレートの上に、料理・調味料・ハーブを上から撮った暗いトーンの写真
• 工場・検査室・農地など清潔で明るい現場の写真で、品質を伝える
• 製品写真は白い器に盛り、明るい自然光で寄りで撮る
• 地図はベージュの単色にし、橙のピンで拠点を示す
• ロゴ以外のイラストは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは横幅いっぱいのヒーローで、ナビは横一列。右上に橙の問い合わせボタンを置く
• 実績数字はPCで4列を横一列に並べる
• 企業紹介はPCで左にテキスト、右に写真の2カラム
• ケースカードはPCで3列のグリッド
• 特長はPCで3列、製造品目はPCで6列
• お知らせはPCで見出しを左、一覧を右に置く2カラム

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