DESIGN.md — 生成り地と淡色パステルの園芸企業 LP（Botanical Mincho Corporate Gardening LP）

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

Overview

• 業種: その他 ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい、信頼・誠実
• キーワード: 生成り・明朝体・縦書き・水彩イラスト・丸抜き写真・余白
• 地の質感: ファーストビューとフッターは細かい紙のような粒の入った生成り地。それ以外は白の平面。
• 形: 四角い写真と円形に抜いた写真を組み合わせる。角丸は小さいバッジだけに使う。
• 温度感: ややあたたかい自然光。緑と花の色が穏やかに映える。

Colors

• 地は白と生成りの 2 色だけ。生成りは FV とフッターに限定する。
• 文字は墨色と深緑の 2 色にとどめ、純黒は使わない。
• 事業カードは淡いパステルで 1 枚ずつ色を変え、番号バッジはその色を濃くした同系色にする。
• 鮮やかな色は写真とイラストにまかせ、UI には使わない。
• 写真の上の文字は白にし、暗いグラデーションを敷いて読めるようにする。
• number-badge は文字 #FFFFFF × 背景 #DAB4AA のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B0614D、4.5:1）を使う。

Typography

• 和文はすべて明朝体で統一する。
• 日本語見出しの下か上に、字間を広くとった大文字の英字ラベルを組み合わせる。
• FV キャッチと小見出しの一部は縦書きにする。
• 本文は小さめの文字に行間 2 以上を組み合わせ、静かな印象にする。
• 太字や大きなジャンプ率は避け、サイズ差は控えめにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は事業カード 2+3 列、特徴セクションは左テキスト・右写真の 2 カラム。
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• FV では大小の写真をずらして重ね、コラージュ状に配置する。
• 見出しブロックは左揃え、特徴セクションは中央揃えにする。
• 全幅の写真を本文の間に挟み、リズムを作る。
• お知らせは細い線で区切ったリスト型にする。
• 余白は大きくとり、セクション間は 80px 前後空ける。

Elevation & Depth

• 影は使わずフラットにする。
• 奥行きは写真の重なりと色面の切り替えで表現する。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の写真と正円の写真を使い分ける。事業カードの写真は正円にし、縁に水彩の花を重ねる。
• セクション境界: 直線で切り替える。区切りには細い横線を使う。
• カードと写真の角は直角にする。
• 番号バッジだけ小さなピル型にする。
• MENU ボタンは細線の正円にする。
• リンクは小さな円の中に矢印を入れ、下に点線を引く。

Components

• 点線下線のテキストリンク（link-arrow）: 明朝の文言と円内矢印を並べ、下に点線を引く。主要な導線として使う。
• パステル事業カード（service-card）: 淡い色面の中に番号バッジと英字ラベル、円形写真、括弧書きのサブ見出し、名称、説明を中央揃えで置く。
• 番号ピルバッジ（number-badge）: カード左上に置く 2 桁番号のピル型バッジ。色はカード色を濃くした同系色。
• 和英見出しセット（section-label）: 明朝の日本語見出しと、字間を広げた英字ラベルを上下に組む。
• 点線付き番号（number-dotted）: 特徴の番号を中央に置き、下に短い点線を添える。
• 写真バナーリンク（photo-banner）: 全幅の写真に暗いグラデーションを敷き、英字ラベル・リード・下線付きタイトルを白で左下に置く。
• お知らせ行（news-item）: 上に細線、右に英字ラベル、その下に見出しと日付を並べる。
• 円形 MENU ボタン（menu-circle）: 細線の正円の中に小さな英字を置く。

Do's and Don'ts

Do - 和文は明朝体、英字はセリフ体の大文字で字間を広くとる。 - 余白を広くとり、1 画面に置く情報は少なくする。 - 円形写真に水彩の植物イラストを重ね、手作りのやさしさを出す。 - 事業ごとにパステル色を割り当て、全体のトーンはそろえる。 - CTA はボタンではなく、矢印付きの控えめなテキストリンクにする。

Don't - 彩度の高いボタンや大きな塗りの CTA を置かない。 - ゴシック体の太字見出しを使わない。 - 影・グラデーションボタン・角丸の大きなカードを使わない。 - パステル以外の強い背景色を UI に使わない。 - テキストを詰め込まない。

Page Structure

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

1. ファーストビュー（世界観と理念を伝える）: 生成り地に大小の写真をコラージュし、縦書きの明朝キャッチと短いリード 3 段を置く。
2. 理念・事業概要（会社の役割を一言で示す）: 英字ラベル・明朝の 3 行見出し・英文を置き、水彩の手と植物のイラストと長めの本文を続け、最後に点線リンクを置く。
3. サービス一覧（複数の事業を紹介する）: パステルのカード 5 枚を縦に積み、それぞれに円形写真・番号・英字ラベルを入れる。
4. 特徴（強みを 3 点で説明する）: 縦書きの小見出しと中央揃えのリードを置く。番号・見出し・本文・全幅写真を 3 回繰り返す。
5. 歴史・海外事業バナー（背景や信頼の根拠へ誘導する）: モノクロとカラーの全幅写真に白文字を重ね、2 枚並べる。
6. お知らせ（最新情報を伝える）: 線で区切ったリストに日付を添え、最後に一覧リンクを置く。
7. 採用バナー（採用サイトへ誘導する）: 職場写真を横に並べ、中央に白の英字と文言を置く。
8. フッター（サイトの各ページへの導線）: 生成り地に縦書きのキャッチ、多列のサイトマップ、住所、SNS を置く。

Imagery

• 人と植物が写る自然光の屋外写真。色は少し淡く、やわらかく仕上げる。
• 花・野菜・作業の手元など、仕事の現場を写したドキュメンタリー調の写真。
• 手や植物を描いた透明感のある水彩イラストを、写真の縁に重ねる。
• 歴史のパートには白黒写真を使う。
• 空と海、温室など、余白の多い風景写真も混ぜる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は左に縦書きのキャッチとリード、右に写真コラージュを置く。
• PC の事業カードは上段 2 列・下段 3 列のグリッドにする。
• PC の特徴セクションは左にテキスト、右に大きな写真の 2 カラムにする。
• PC では歴史・海外のバナーを横に 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 行書くと起動時に読み込まれる。