--- version: alpha name: Monochrome Gray Enterprise SaaS LP description: 薄いグレーの地に白カードとチャコールの濃色パネルを重ねた、BtoBデータ連携ツール向けの落ち着いたLP。強調色は紫の矢印リンク・問い合わせボタンと、黄のチェック・タグだけに絞る。大きな薄い英字見出しと3D線画の装飾で先進的に見せつつ、情報は整理して並べる。 colors: primary: '#404853' background: '#F2F2F2' surface: '#FFFFFF' cta: '#8B65EB' on-cta: '#FFFFFF' secondary: '#8979BB' accent-1: '#F6C35A' text: '#424242' text-body: '#575C67' tint-1: '#E5E3E0' background-alt: '#E2E2E2' line: '#C8CCCF' tint-2: '#E4E3E3' on-dark: '#FFFFFF' cta-accessible: '#825AEA' typography: display: fontFamily: Roboto fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em accent: fontFamily: Roboto fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.03em headline-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px link-arrow: textColor: '{colors.text}' typography: '{typography.label-button}' height: 20px section-heading-en: textColor: '{colors.tint-1}' typography: '{typography.accent}' height: 60px check-list: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px feature-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px tab-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px case-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 150px news-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 85px --- # DESIGN.md — グレー×チャコールに紫と黄を差す業務SaaS LP（Monochrome Gray Enterprise SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル - **キーワード**: ライトグレー地・白カード・チャコールパネル・薄い英字の大見出し・紫の矢印リンク・黄のチェック - **地の質感**: うっすらノイズのかかったグレー地に、影の柔らかい白カードを浮かせる。3Dワイヤーフレームの立体を淡く敷く - **形**: 角丸は小さめ（4〜16px）の長方形が基本。チェックは丸、図版はアイコン化した幾何形 - **温度感**: やや寒色寄りのニュートラル。黄が少しだけ温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#404853` | チャコールの濃色パネル・主ボタン | 8% | 画素の実測 | | `background` | `#F2F2F2` | ページ地のライトグレー | 45% | 画素の実測 | | `surface` | `#FFFFFF` | カード・帯の白 | 30% | 画素の実測 | | `cta` | `#8B65EB` | 問い合わせボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#8979BB` | 矢印リンクの紫 | 0% | 画素の実測 | | `accent-1` | `#F6C35A` | チェック丸・特長タグの黄 | 1% | 推定 | | `text` | `#424242` | 見出し文字 | 2% | 画素の実測 | | `text-body` | `#575C67` | 本文 | 2% | 画素の主要色に補正 | | `tint-1` | `#E5E3E0` | 背景大英字の淡色 | 1% | 画素の主要色に補正 | | `background-alt` | `#E2E2E2` | 問い合わせ帯のグレー | 6% | 画素の実測 | | `line` | `#C8CCCF` | 区切り線・枠線 | 0% | 画素の主要色に補正 | | `tint-2` | `#E4E3E3` | カテゴリ小タグ地 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃色パネル上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#825AEA` | AA を満たす補正値（計算） | | 計算 | - 地はライトグレー、情報のまとまりは白カード、重要な機能・価格はチャコールパネルにする - 紫は問い合わせボタンとテキストリンクの矢印だけに使う - 黄はチェック丸・機能タグ・見出し前の小ドットなどの小さい点に限る - セクションの英字見出しは地より少し濃いだけの淡グレーにする - ロゴ帯や実績帯は白の全幅帯にして、グレー地から切り替える - 写真の多色は使わず、図版はチャコールと淡グレーの2色で描く - `button-cta` は文字 `#FFFFFF` × 背景 `#8B65EB` のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#825AEA`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きな英字ラベル | 欧文サンセリフ | Roboto | 700 | 44px | 1.1 | 0.02em | | `accent` | セクション背景の淡い英字見出し | 欧文サンセリフ | Roboto | 900 | 30px | 1.1 | 0.03em | | `headline-lg` | セクションの和文リード見出し | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.03em | | `headline-md` | カードの見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.02em | | `headline-sm` | 小カード見出し・事例タイトル | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.02em | | `note` | タグ・日付・注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.03em | | `label-button` | ボタン・矢印リンクの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.08em | - 英字の大見出しを淡色で置き、その下に和文の小さめ見出しを重ねる2段構成にする - 和文の見出しは中太で、大きくしすぎない - 本文は小さめにして行間を広く取り、読みやすさを保つ - リンクやボタンの文字は太字にして字間を少し開ける - 数字やチェック項目は短い2行の箇条書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能タブ・活用カードは 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右に約16pxの余白を取り、カード幅をそろえる - セクションの頭は英字見出し、和文見出し、リード文の順に左揃えで並べる - 補足ボタンはセクションの最後に中央揃えで1つ置く - 事例やお知らせは縦にカードやリストを積む - 問い合わせ帯は全幅のグレー面にして、白カードを3枚重ねる ## Elevation & Depth - 白カードには下向きの柔らかく広い影を付ける（0 4px 16px 程度・薄いグレー） - 活用シーンのカードは白から淡グレーへの縦グラデーションに影を付ける - チャコールパネルは影なしのベタ面にする - FVのメインパネルは半透明の白にして、背景の3D画像を透かす ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は使わない。ロゴは白カードの中央、アイコンは単色のフラットな幾何形にする - **セクション境界**: 直線で切り替える。白の全幅帯とグレー地の境目で区切る - ボタンは角丸が小さい長方形にする - FVの機能カードだけは角丸16pxで柔らかく見せる - サブボタンは白地に1.5pxの黒枠を付ける - タグは角丸のラベル型にする ## Components - **濃色資料ボタン**（`button-primary`）: チャコールの面に白い太字を載せた中央配置のボタン - **問い合わせボタン**（`button-cta`）: 紫の面に白文字を載せた主CTA - **枠線サブボタン**（`button-outline`）: 白地に黒枠と黒い太字のボタン。セクションの最後に置く - **矢印テキストリンク**（`link-arrow`）: 太字のテキストの右に紫の長い矢印を付ける - **淡色英字見出し**（`section-heading-en`）: 大きな淡グレーの英単語の下に和文の小見出しを置く - **黄チェック箇条書き**（`check-list`）: 黄色の丸に白いチェックを入れ、太字の短文を2行で添える - **黄色機能タグ**（`feature-tag`）: 濃色パネル上に並べる黄地・黒文字の小さいラベル - **機能タブ**（`tab-grid`）: 2×2の白タブ。選択中はチャコールの面に白文字で、頭にチェックを付ける - **事例カード**（`case-card`）: 白カードの中央にロゴを置き、カテゴリタグ、太字タイトル、矢印リンクの順に並べる - **お知らせ行**（`news-row`）: 日付とグレーのタグの下に下線付きのタイトルを置き、右端に紫の矢印を付ける。行間は罫線で区切る ## Do's and Don'ts **Do** - 強調色は紫と黄の2色だけにし、どちらも小さい面積で使う - セクションの頭は必ず淡色英字と和文見出しのセットにする - 図版はチャコールと淡グレーのフラットな幾何形で描く - 白カードには柔らかい影を付けて地から浮かせる - 機能や価格のように重要なブロックはチャコールパネルにまとめる **Don't** - 鮮やかな原色のグラデーションや写真の背景を多用しない - ボタンをピル型や大きな角丸にしない - 紫を大きな面の背景に使わない - 見出しを極太で大きくして、圧迫感を出さない - 装飾の3D線画を濃い色で目立たせない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品カテゴリと価値を一目で伝える）: 3D背景の上に半透明の白パネルを置く。大きな英字ラベル、短いコピー、説明文を並べ、強み3つを角丸カードのグラフや図で見せ、資料ボタンを置く 2. **新着バナーカルーセル**（ウェビナーやニュースへ誘導する）: 白カードにサムネイル・タグ・タイトルを並べた横スライダー。下にドットのインジケーターを置く 3. **特長**（何をするツールかを図で説明する）: 淡色英字見出しとリード文の下に、左の連携元ボックス群から曲線の矢印でロゴへつなぎ、右の連携先へ流れる図を置く 4. **機能紹介**（主要機能をタブで切り替えて見せる）: 2×2のタブの下にチャコールパネルを置き、黄タグ、チェック、UIの線画、説明文を入れる 5. **活用シーン**（用途別の使い方を示す）: グラデーションの白カードを縦に積む。中央に単色アイコン、黄ドット付きの見出し、短い説明を入れる 6. **導入事例**（大手企業の実績で信頼を得る）: ロゴ入りの事例カードを3枚並べ、枠線ボタンで一覧へ誘導する 7. **導入実績ロゴ帯**（導入規模を数字で示す）: 白の全幅帯に企業ロゴを横に流し、中央に実績数の見出しと枠線ボタンを置く 8. **学習コンテンツ**（検討段階の見込み客を育てる）: 紫の丸い再生ボタン付きの動画リンクと、アイコン入りの白カードを縦に並べる 9. **価格・動作環境**（導入条件を示す）: チャコールパネルに白ボタンと白枠ボタンを置き、白カードの中に黄チェックのリストを入れる 10. **お知らせ**（更新情報を伝える）: 日付、タグ、下線付きタイトル、矢印の行を罫線で区切って並べる 11. **お問い合わせ**（問い合わせ・資料・体験版へ誘導する）: グレーの全幅帯に中央見出しと紫ボタンを置き、チェックボックス風アイコンの白カードを3枚並べる 12. **フッター**（サイト内を回遊させる）: 白地の中央にロゴを置き、2列のリンク一覧、罫線、小さいグレーの法務リンクとコピーライトを並べる ## Imagery - FVの背景は白〜灰色の立体ブロックが集まった3DCGで、ソフトフォーカスをかける - 背景装飾はトーラスや球体の細い3Dワイヤーフレームを淡いグレーで描く - 機能図はウィンドウ枠・ブロック・矢印・カーソルを簡略化した線画とベタ面で描く - アイコンはチャコール単色の太い幾何形にし、抽象的なモチーフにする - グラフは淡い線と黒い太線で比較を示し、黄のラベルで強調する - 学習コンテンツのアイコンは淡い紫の等角投影の箱で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは上部に白いグローバルナビの帯を置き、右上に紫の問い合わせボタンを置く - PCの活用シーンは先頭の1枚を全幅、残りを2列グリッドにする - PCのカルーセルは複数枚を同時に見せる - PCの価格・動作環境は内側のカードを2列に並べる - PCのフッターのリンクは4列にする - PCのコンテンツ幅は約900pxで中央にそろえ、余白を広く取る ## 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-d926abe9`（元 LP の URL から採番） - **元 LP**: https://waha-transformer.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。