--- version: alpha name: Olive Gold Corporate Device LP description: くすんだオリーブゴールドと濃いオリーブブラウンを軸にしたBtoB機器LPです。白〜淡グレーの地に斜めのスラッシュ装飾と大きな欧文見出しを置き、ビジネス写真で信頼感を出しています。グラデーションの帯とボタンで高級感を足し、ショールーム予約や問い合わせへ誘導します。 colors: primary: '#A59A4B' secondary: '#AD9E4D' dark-section: '#565030' cta: '#5B5325' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F5F5F5' text: '#171516' text-muted: '#999999' accent-1: '#D1322E' line: '#DFE0E0' tint-1: '#BFB399' typography: display: fontFamily: Oswald fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px feature-number: textColor: '{colors.tint-1}' typography: '{typography.accent}' height: 40px worry-box: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 120px function-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px spec-tab: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 100px faq-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px phone-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 64px form-step: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 36px --- # DESIGN.md — オリーブ金×白グレーの法人向け会議機器 LP（Olive Gold Corporate Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、上品・高級、クール・先進的、情報量多め・訴求型 - **キーワード**: オリーブゴールド・斜めスラッシュ・大きな欧文見出し・オフィス写真・グラデーション帯・カード型機能紹介 - **地の質感**: 白と淡グレーのフラットな地。濃いオリーブのグラデーション帯と、うっすら見える大きな欧文透かし文字 - **形**: 角丸は小さめ。斜めにカットした平行四辺形の帯やラベルをアクセントに使う - **温度感**: ややあたたかいニュートラル。金系の色で落ち着いた高級感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A59A4B` | 見出しの欧文とブランドの金色 | 4% | 画素の実測 | | `secondary` | `#AD9E4D` | ショールーム帯のオリーブ地 | 4% | 画素の実測 | | `dark-section` | `#565030` | 濃いオリーブの帯・お悩みボックス | 9% | 画素の実測 | | `cta` | `#5B5325` | 予約ボタンのオリーブブラウン地 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地・カード | 33% | 画素の主要色に補正 | | `background-alt` | `#F5F5F5` | セクションの淡グレー地 | 18% | 画素の実測 | | `text` | `#171516` | 見出し・本文の黒 | 4% | 画素の主要色に補正 | | `text-muted` | `#999999` | 補足文のグレー | 2% | 画素の実測 | | `accent-1` | `#D1322E` | フォームとフッターの赤（企業カラー） | 3% | 画素の実測 | | `line` | `#DFE0E0` | 罫線・リンクボックスの枠 | 1% | 画素の主要色に補正 | | `tint-1` | `#BFB399` | ベージュ系の淡い金 | 2% | 画素の主要色に補正 | - 地は白と淡グレーを交互に使い、濃いオリーブの帯はコンセプトやスペックの区切りにだけ使う - 欧文の大見出しは金色、その下の和文の小見出しは黒にする - CTAボタンとお悩みボックスは、オリーブブラウンから暗いオリーブへのグラデーションにする - チェックアイコンと強調文字は金色にする - 赤はフォームのステップ表示・必須バッジ・フッターだけに限定する - 写真の上の文字は白にし、暗いオーバーレイで読みやすくする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文サンセリフ | Oswald | 700 | 44px | 1.1 | 0.02em | | `headline-lg` | コンセプトのキャッチ・和文見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.05em | | `headline-md` | 特長カードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em | | `headline-sm` | 機能カードの小見出し・FAQの質問 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・営業時間 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 番号・英字ラベル・透かし文字 | 欧文サンセリフ | Montserrat | 600 | 28px | 1.0 | 0.05em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - セクションの見出しは、大きな金色の欧文と、その下の小さな黒い和文の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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-668bfb2b`（元 LP の URL から採番） - **元 LP**: https://www.officecom.co.jp/service/maxhub.html - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。