DESIGN.md — 深緑×淡緑の清潔な給食サービスLP（Fresh Green Institutional Catering LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、ナチュラル
• キーワード: 深緑・ミント地・英字透かし見出し・線画イラスト・食事写真・チェックリスト
• 地の質感: フラットな面。ドット柄をわずかに散らし、写真に緑の半透明を重ねる
• 形: 角を1つだけ大きく丸めたセクション・カード。ボタンは小さめの角丸長方形
• 温度感: やや涼しげで清潔。差し色の赤とオレンジで温かみを足す

Colors

• 地は白・薄グレー・ミントの3色を交互に使い、セクションの切り替えを示す
• 深緑は面ではお知らせ帯・エリア見出し・フッターに限定する
• 赤は見出し内の強調語と丸い矢印アイコンにだけ使う
• オレンジは主CTAと対象タグにだけ使う
• 写真の背景には緑の半透明を重ね、色調を揃える
• 本文は純黒を避け、墨色の#333を使う
• button-primary は文字 #FFFFFF × 背景 #ED990C のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A46A08、4.52:1）を使う。

Typography

• セクションは英字ラベル＋日本語小見出しの2段で始める
• 英字は細めのジオメトリック体にし、薄グレーで日本語見出しの背面に重ねる
• 本文は字間を広めの0.08emにとる
• 強調語だけ赤にし、太さは見出しと揃える
• 番号はジオメトリック体の淡い緑で大きく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FAQ やフッターのリンクだけ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約16px
• サービス紹介は写真を全幅に置き、その下に番号・見出し・タグ・本文を並べる
• 番号の横に斜めの細線を引いて区切る
• 悩みカードは縦に3枚積む
• セクション間に下向きの緑三角を置き、流れを示す

Elevation & Depth

• 影はほぼ使わずフラットにする
• カードは白地に細い枠線か、地色との差で浮かせる
• 連絡先ボックスは半透明の白を写真に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。ナビバナーは片側の角だけ大きく丸める
• セクション境界: ミント地の角を大きく丸めて区切る。悩みの直後に下向き三角を置く
• カードやセクションは対角の1角だけを大きく丸める
• タグはピル型の小さなラベルにする
• ボタンは角丸4px程度の長方形にし、右端に赤い丸矢印を付ける
• Qアイコンは緑の正方形にする

Components

• メール問い合わせボタン（button-primary）: オレンジ面に封筒アイコンと白文字を置く横長ボタン
• 白枠ボタン（button-secondary）: 白地に灰枠。中央に文字、右端に赤い丸矢印を置く
• 悩みチェックカード（worry-card）: 左上の角を丸めたグレー見出し帯の下に、赤チェック付きのリストを3行並べる
• マーカー見出し（heading-marker）: 行ごとに淡緑の帯を敷いた2行見出し
• 対象タグ（tag-pill）: 緑・オレンジ・グレーのピル型タグ
• 英字＋和文の見出し（section-title）: 緑の英字の下に灰色の小さな和文を添える。英字は透かしにすることもある
• FAQ行（faq-item）: 緑の四角Qと質問文、右端に緑の山形矢印。行の間を細線で区切る
• 写真ナビバナー（nav-banner）: 緑を重ねた写真に白いアイコン・英字・和文を載せ、角を1つ丸める
• 赤丸バッジ（badge-circle）: 白縁の赤い円に白文字で受付中などを示す

Do's and Don'ts

Do - 緑を軸に、白・グレー・ミントの地を交互に敷く - セクション名は英字＋和文の2段で入れる - 写真は明るく清潔な食事と、笑顔のスタッフを選ぶ - ボタンには赤い丸矢印を付けて統一する - 角丸は片側の角だけを大きく取る

Don't - 赤を面に広く使わない - 濃い影やグラデーションボタンを使わない - ピル型の大きなCTAにしない - 原色の強いイラストを使わない。線画の単色に留める - 本文を詰めすぎない

Page Structure

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

1. ファーストビュー（対象と提供価値を一目で伝える）: 写真スライダーの中央に白枠のロゴ風パネルを置く。リボン型の対応エリア表示、線画の人物、強調語を赤にしたコピーを入れる
2. お知らせ帯（更新情報を出す）: 深緑の帯に日付と1行テキスト、赤丸矢印を置く
3. 悩みの提起（現場の課題に共感する）: 薄グレー地にドット柄と線画イラストを置き、分類別のチェックカードを3枚並べる
4. 解決の提示（任せられる安心感を示す）: 下向きの緑三角の下に全幅写真を置き、マーカー見出し・本文・白枠ボタンを続ける
5. サービス紹介（提供形態を3つ説明する）: ミント地に写真・番号・小見出し・サービス名・タグ・本文を3回繰り返す
6. 導入事例（実績で信頼を得る）: 緑を重ねた写真の背景に、事例カードともっと見るボタンを置く
7. 代表メッセージ（企業の姿勢を伝える）: 人物写真、マーカー見出し、本文、右寄せの署名を並べる
8. ナビバナー（会社情報へ誘導する）: 緑を重ねた写真バナーを2本並べる
9. 新着情報・対応エリア（最新情報と対応範囲を示す）: 白いニュースカードを置く。エリアは緑の見出し帯に地図イラストを添え、下にリストを並べる
10. よくある質問（不安を解消する）: 淡い写真の背景に、ミント地のQ付きリストを置く
11. CTA（電話・メールの問い合わせを促す）: 暗めの写真の背景に赤丸バッジ・英字見出し・半透明の電話ボックス・オレンジボタンを置く
12. フッター（サイト内を回遊させる）: 深緑地に白文字のリンクを2列で並べ、コピーライトを入れる

Imagery

• 自然光で明るく撮った食事のトレイ写真を使う
• 医療・介護スタッフが笑顔で配膳するシーンを入れる
• 灰色の単線で描いた人物や食器のイラストを添える
• 写真には緑の半透明を重ねて背景に使う
• 背景の隅にドット柄を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約1000pxにし、悩みカードを3列で並べる
• PC のサービス紹介は写真と本文を左右に置き、行ごとに左右を入れ替える
• PC はヘッダーにグローバルナビ・電話番号・赤い問い合わせボタンを横並びにする
• PC はニュースとエリア、ナビバナー2本を横に並べる
• PC はFVで写真をグリッドに並べ、中央にパネルを置く

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