--- version: alpha name: Orange and Charcoal Business SaaS LP description: 明るいオレンジと濃いチャコールを軸に、薄グレーの地と淡いピーチ色のグラデーションを組み合わせた BtoB SaaS の LP。モノトーンにオレンジを差した線画イラスト、角括弧で囲む見出し、白カードの機能紹介で、信頼感と親しみやすさを両立している。 colors: primary: '#FF813A' cta: '#FE813A' on-cta: '#FFFFFF' secondary: '#292531' background: '#FFFFFF' background-alt: '#EEEEF0' tint-1: '#F6E4DC' dark-section: '#59565F' surface: '#F5F4F6' accent-1: '#DCDCDE' accent-2: '#C8C7CC' text: '#37343C' text-muted: '#6E6A72' on-dark: '#FCFBFD' cta-accessible: '#CE4B01' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px 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.full}' height: 46px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-demo: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px heading-bracket: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 64px card-problem: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 150px card-point: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 210px tile-feature: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 75px label-category: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px band-demo: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 150px card-support: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 270px --- # DESIGN.md — オレンジ×墨色の業務システムSaaS LP（Orange and Charcoal Business SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: オレンジアクセント・チャコール・角括弧見出し・白カード・モノトーン線画イラスト・業務効率化 - **地の質感**: フラットな面に淡いピーチの大きな曲線グラデーションを敷き、帯部分は暗い写真に半透明オーバーレイを重ねる - **形**: 角丸 8px 前後のカード、ピル型ボタン、円形アイコンバッジ、下向き三角の区切り - **温度感**: やや暖かい。オレンジとピーチで温度を足し、グレーと墨色で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF813A` | ブランドオレンジ（帯・強調・POINT番号） | 9% | 画素の実測 | | `cta` | `#FE813A` | 問い合わせボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#292531` | 資料DLボタン（濃色） | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地（白） | 26% | 画素の実測 | | `background-alt` | `#EEEEF0` | 薄グレーの地 | 20% | 画素の実測 | | `tint-1` | `#F6E4DC` | 淡いピーチのグラデ地 | 9% | 画素の実測 | | `dark-section` | `#59565F` | 暗い写真帯のオーバーレイ | 9% | 画素の実測 | | `surface` | `#F5F4F6` | 機能アイコンタイル | 7% | 画素の実測 | | `accent-1` | `#DCDCDE` | システム分類ラベル地（グレー） | 4% | 画素の実測 | | `accent-2` | `#C8C7CC` | 悩みセクションの方眼グレー地 | 6% | 画素の実測 | | `text` | `#37343C` | 見出し文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#6E6A72` | 本文の補足文字 | 1% | 推定 | | `on-dark` | `#FCFBFD` | 暗帯上の白文字 | 0% | 画素の実測 | | `cta-accessible` | `#CE4B01` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレーを交互にし、オレンジは帯・ボタン・番号だけに使う - CTA は濃チャコール（資料）とオレンジ（問い合わせ）の2色ペアで並べる - デモ誘導帯と最終CTA帯は全面オレンジで目立たせる - サービス相関や機能紹介の前に暗い写真＋グレーオーバーレイ帯を挟む - イラストはモノトーンにして、オレンジを1点だけ差す - ピーチのグラデーションは FV とサポート節の背景だけに留める - `button-primary` は文字 `#FFFFFF` × 背景 `#FE813A` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE4B01`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.5 | 0.08em | | `headline-lg` | 角括弧付きのセクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.1em | | `headline-md` | POINT カードの見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.05em | | `headline-sm` | 悩みカード・サポートカードの見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.05em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.04em | | `accent` | POINT 01 などの欧文番号 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.4 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `note` | フッター・小さな補足 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | - 見出しは太字ゴシックで字間を広めにとる - セクション見出しは2行に分け、中央揃えにする - 本文は左揃え・グレーで行間を広くとる - POINT 番号はオレンジの欧文で見出しの上に置く - FV のサブコピーはオレンジのグラデーション帯に白抜きで載せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みは 2×2、機能一覧は左に分類・右に 2 列タイル - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右 12px 前後の余白でほぼ全幅 - セクション見出しの下は 24px 空けてコンテンツを置く - 悩みから解決へは下向き三角でつなぐ - CTA ブロックは中央揃えでボタンを横に 2 つ並べる - サポートカードは幅 60% 程度で中央に縦積み ## Elevation & Depth - 白カードはごく薄い影（0 2px 8px rgba(0,0,0,.06)） - ボタンは下に濃い色の影をずらして立体感を出す - 機能タイルは影なしで薄い枠線だけ - 暗帯の上のパネルは半透明の黒地で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: イラストは円形のグレー背景に入れるか切り抜きで置く。UI 画面はPCモックの中に表示する - **セクション境界**: 基本は直線。悩みから解決へは下向きのオレンジ三角、背景はピーチの大きな曲線 - CTAは全てピル型 - アイコンは白い円形バッジに入れる - 見出しは L 字の角括弧で挟む - サービス相関はシェブロン型のアイコン列にする ## Components - **問い合わせボタン**（`button-primary`）: オレンジのピル型。白文字とメールアイコン、下に濃いオレンジの影 - **資料ダウンロードボタン**（`button-secondary`）: チャコールのピル型。白文字とダウンロードアイコン - **デモ希望ボタン**（`button-demo`）: オレンジ帯上の白いピル。左に『無料』のオレンジ丸バッジ、右に三角矢印 - **角括弧見出し**（`heading-bracket`）: 左上と右下に細い L 字線を置き、中の 2 行見出しを挟む - **悩みカード**（`card-problem`）: 方眼グレー地に白カードを 2×2 で並べる。小見出しと線画イラスト - **POINT カード**（`card-point`）: 白カードの左にオレンジ番号・見出し・本文、右に UI の抜粋図 - **機能タイル**（`tile-feature`）: 薄グレーで細枠の正方形に近いタイル。線アイコンと 2 行ラベル - **システム分類ラベル**（`label-category`）: 濃いグレーのブロックに白い円アイコンとラベル。右側の機能タイルとまとめて見せる - **デモ誘導帯**（`band-demo`）: 全幅オレンジのグラデーション帯。左にノートPCモック、右に一文とデモボタン - **サポートカード**（`card-support`）: 白の縦長カード。上に円形グレー背景のイラスト、見出しと本文が続く ## Do's and Don'ts **Do** - オレンジは帯・CTA・番号・アイコンの差し色だけに絞る - CTAは濃色とオレンジの 2 ボタンを必ずセットで並べる - イラストはモノトーンの線画にオレンジを 1 点だけ差す - 機能説明には実際の UI 画面を簡略化した図を添える - 見出しは角括弧で囲み、中央に 2 行で置く **Don't** - オレンジの面を本文エリアに広く使わない - 写真の人物を大きく使わない（線画イラストで統一） - 角丸を大きくしすぎない（カードは 8px 程度まで） - 原色の青や緑を足さない - 影を濃くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと問い合わせ導線）: 白地に左ロゴ、右に小さなオレンジのピルボタンとハンバーガーメニュー 2. **ファーストビュー**（サービス概要と提供範囲を示す）: ピーチのグラデ地。オレンジ帯のサブコピー、大見出し、モニターのモックの周りに円形アイコンを環状に配置 3. **デモ誘導帯**（早い段階でデモ申込へ誘導）: 全幅オレンジ帯にPCモックと白いピルボタン 4. **悩みの提起**（業務の悩みを 4 つ並べる）: 方眼グレー地に角括弧見出し、2×2 の白カードに線画イラスト 5. **解決の提示**（サービスで解決できることを示す）: 下向きオレンジ三角、見出し、PC を操作する人物イラスト 6. **CTA**（資料請求・問い合わせ）: 薄グレー地に一文と 2 色のピルボタンを横に並べる 7. **特長**（できることを 4 つの POINT で説明）: 暗い写真帯に白見出し。その下に白カードを重ね、番号・見出し・本文・UI図 8. **機能一覧**（機能の網羅性を示す）: 分類ラベルの右に機能タイルをグリッドで並べる 9. **サービス連携**（関連サービスとの連携を示す）: 暗い写真地に半透明パネル。シェブロン型アイコン列で業務フローを示し、最後はオレンジで強調 10. **最終CTA**（資料請求・問い合わせの最終導線）: オレンジ写真帯に白見出し、白カード 2 枚にそれぞれボタン 11. **導入サポート**（導入後の安心感を伝える）: ピーチ曲線の地に縦長の白カードを 3 枚、円形イラスト付き 12. **フッター**（会社情報と規約）: 薄グレー地に小さな文字リンクとコピーライト ## Imagery - 人物はビジネス服のモノトーン線画。ネクタイやPCなど 1 か所をオレンジにする - 業務 UI は白いウィンドウに簡略化した表やボタンを描いた図にする - 製品は白いモニターやノートPCのモックで正面から見せる - 暗帯の背景はオフィスや街並みの写真を暗いグレーで覆って使う - アイコンはグレーの線画。分類アイコンには白い円とオレンジのアクセントを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左右 2 分割にし、左に見出しと 2 ボタン、右にモニターを置く - PC の悩みカードは 4 列横並び - PC の POINT カードは中央に幅 70% 程度で縦に積む - PC の機能タイルは右側を 3 列にする - PC の最終CTAカードとサポートカードは横に並べる - PC のヘッダーはグローバルナビと 2 ボタンを表示 ## 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-2bdfa16b`（元 LP の URL から採番） - **元 LP**: https://service.itandi.co.jp/lp/kikan - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。