DESIGN.md — オリーブ金×白グレーの法人向け会議機器 LP（Olive Gold Corporate Device LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、上品・高級、クール・先進的、情報量多め・訴求型
• キーワード: オリーブゴールド・斜めスラッシュ・大きな欧文見出し・オフィス写真・グラデーション帯・カード型機能紹介
• 地の質感: 白と淡グレーのフラットな地。濃いオリーブのグラデーション帯と、うっすら見える大きな欧文透かし文字
• 形: 角丸は小さめ。斜めにカットした平行四辺形の帯やラベルをアクセントに使う
• 温度感: ややあたたかいニュートラル。金系の色で落ち着いた高級感を出す

Colors

• 地は白と淡グレーを交互に使い、濃いオリーブの帯はコンセプトやスペックの区切りにだけ使う
• 欧文の大見出しは金色、その下の和文の小見出しは黒にする
• CTAボタンとお悩みボックスは、オリーブブラウンから暗いオリーブへのグラデーションにする
• チェックアイコンと強調文字は金色にする
• 赤はフォームのステップ表示・必須バッジ・フッターだけに限定する
• 写真の上の文字は白にし、暗いオーバーレイで読みやすくする

Typography

• セクションの見出しは、大きな金色の欧文と、その下の小さな黒い和文の2段で組む
• 特長の番号は、細い輪郭の大きな数字に小さな英字ラベルを添える
• 写真や帯の背景に、薄い大きな欧文を透かしで置く
• 本文は中央揃えで短く改行し、カード内は左揃えにする
• 電話番号は太い欧文数字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能カードは 2 列、ショールーム一覧は 1〜2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長は写真と文章を左右交互に配置し、SPでは写真を上に積む
• 写真ヘッダーに白いパネルを重ね、パネルの中で機能を説明する
• お悩みボックスは濃い帯に斜めのラベルを載せ、チェックリストで見せる
• CTAボタンは主要セクションの後に中央配置する
• フォームはラベルと入力欄の2列（SPでは縦積み）で、罫線で区切る

Elevation & Depth

• 機能カードの写真に、ごく淡いドロップシャドウ
• CTAボタンに軽い影
• 写真ヘッダーに重ねる白パネルはフラットにし、影は薄く

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形。特長写真の角を斜めのオリーブ帯で欠いたような装飾を加える
• セクション境界: 基本は水平。背景に淡いグレーの斜め面を重ねる
• 見出しの前に、斜めの太いスラッシュ（黒や金）を置く
• ラベルは平行四辺形（スキュー）の黒帯にする
• ボタンは角丸の小さい長方形にし、左にアイコンを付ける

Components

• 予約CTAボタン（button-primary）: オリーブのグラデーション地に白文字。左にメールアイコン、幅広で中央に置く
• 欧文＋和文の見出し（section-heading）: 大きな金色の欧文の下に、黒の和文サブタイトルを置く
• 特長番号ラベル（feature-number）: 斜めの黒スラッシュ、小さな英字、輪郭だけの大きな数字を組み合わせる
• お悩みチェックボックス（worry-box）: 濃いオリーブのグラデーション地に、黒い斜めラベルを重ねる。金色のチェックと白い文字のリストで構成する
• 機能カード（function-card）: 写真の下に、太字の中央揃え見出しと小さな説明文を置く
• スペック選択カード（spec-tab）: 白いカードの上部に円形のアイコン、下にオリーブの帯と矢印を付ける
• Q&A行（faq-item）: 金色の大きなQと黒いAを使い、下に罫線を引く
• 地域別の電話ブロック（phone-block）: 黒い斜めラベルに地域名、金色の電話アイコン、太い番号、営業時間を並べる
• フォームのステップ表示（form-step）: 3段階の矢印型。現在のステップを赤地に白文字にする

Do's and Don'ts

Do - 金色はくすんだオリーブ寄りにし、彩度を抑える - オフィスで実際に使っている人物写真を多く使う - 見出しの前には必ず斜めスラッシュを入れて統一感を出す - 機能は短い見出しとカードで、細かく区切って見せる - CTAは同じデザインで繰り返し配置する

Don't - 鮮やかな黄色や純粋なゴールドを使わない - 大きな角丸やピル型ボタンにしない - 赤をフォーム以外の強調に使わない - イラスト中心のポップな表現にしない - 欧文見出しを細い書体にしない

Page Structure

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

1. ファーストビュー（製品の認知と体験予約への誘導）: 左にロゴ・キャッチ・CTA、右に会議で使っている写真。黒いラベルで体験を訴求する
2. 拠点紹介帯（体験できる場所が多いことを示す）: オリーブ地に白い見出しと地図のシルエット。拠点のサムネイルを横に並べる
3. コンセプト（製品の位置づけを説明する）: 暗い写真にオーバーレイをかけ、透かしの欧文、白いキャッチ、本文を中央に置く
4. 特長（主な価値を3つ伝える）: 番号付きのテキストパネルと写真を左右交互に並べる
5. お客様の声（導入事例で信頼を得る）: 白いカードに写真・社名・抜粋を入れ、矢印リンクを付ける
6. ショールーム案内（見学予約を促す）: 写真帯のあとに、店舗カードを3列のグリッドで並べ、最後にCTAを置く
7. スペック概要（機能を3つに分類して示す）: 濃いオリーブの帯にアイコン付きのカードを3つ置き、下に説明ボックスを付ける
8. 機能詳細（機能ごとの悩みの解決と仕様を伝える）: 写真ヘッダーに白パネルを重ね、お悩みボックス・機能カード・使い方動画の順に並べる
9. よくある質問（導入前の疑問を解消する）: Q/Aを縦に並べ、罫線で区切る
10. 問い合わせCTA（電話と予約へ誘導する）: 黒地に金色の欧文見出し。写真の背景に白パネルを重ね、CTAと地域別の電話番号を並べる
11. 関連サービス（他のサービスへの回遊を促す）: 枠付きのリンクボタンを3列のグリッドで並べる
12. メールフォーム（問い合わせを受け付ける）: ステップ表示、必須バッジ、罫線区切りの入力行、赤い送信ボタンで構成する
13. フッターCTA（最後のひと押し）: 赤い地に白い電話番号と、白枠のメールボタンを置く

Imagery

• 明るい現代的なオフィスで、大型ディスプレイを囲む会議風景を撮る
• スーツやオフィスカジュアルの男女が自然に操作している様子
• 写真ヘッダーは暗めに補正し、白文字を載せる
• 機能の説明には、画面のUIや製品の単体写真を白背景で使う
• 背景に、淡いグレーの斜めの面と薄い欧文の透かしを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約800px幅で組む。SPは画面幅の90%で1カラムにする
• 特長の左右交互レイアウトは、SPでは写真を上・文章を下に積む
• PCで3列の機能カードやショールーム一覧は、SPでは2列または1列にする
• 欧文の大見出しは、PCの約64pxからSPでは44px程度に縮小する
• 電話ブロックは、PCの2列からSPでは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 行書くと起動時に読み込まれる。