--- version: alpha name: Clean Navy Industrial Equipment Upgrade LP description: 白と淡い水色の地に濃紺のブロックを置いた BtoB 産業機械向けの LP。グラフや比較表、フローで数値の根拠を示す情報量多めの構成。赤系は削減率と主 CTA にだけ使う。 colors: primary: '#014999' background: '#FEFEFE' background-alt: '#ECF9FF' tint-1: '#EEF0EA' cta: '#EA415A' on-cta: '#FFFFFF' secondary: '#1A8AC8' accent-1: '#D0202E' accent-2: '#52BBCA' marker: '#F59AB0' text: '#244671' text-body: '#3A3A3A' dark-section: '#666666' tint-2: '#D7E6FA' line: '#CACACA' on-primary: '#E6F9FD' cta-accessible: '#E6213E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 52px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Archivo Black fontSize: 22px fontWeight: 800 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: Montserrat fontSize: 30px fontWeight: 500 lineHeight: 1.2 rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px 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.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px heading-slash-line: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 20px solution-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 170px pickup-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 200px stat-chart: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 340px compare-table: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 190px speech-bubble: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 180px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 290px spec-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 30px form-field: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 52px --- # DESIGN.md — 紺×水色の清潔な産業機械 BtoB LP（Clean Navy Industrial Equipment Upgrade LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 濃紺ブロック・淡い水色の地・数値訴求・グラフ・比較表・線画イラスト・フォームで完結 - **地の質感**: ほぼフラット。淡い水色やグレージュの地にごく薄いドット柄を敷く - **形**: 角丸 16〜24px のカード、細い枠線のピル型ラベル、見出し下に斜線の切れ目が入った横線 - **温度感**: やや寒色寄り。誠実で落ち着いた印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#014999` | 濃紺のブロック・強調面 | 4% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地 | 49% | 画素の実測 | | `background-alt` | `#ECF9FF` | 淡い水色のセクション地 | 12% | 画素の実測 | | `tint-1` | `#EEF0EA` | 製品紹介セクションのグレージュ地 | 6% | 画素の実測 | | `cta` | `#EA415A` | 主 CTA ボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#1A8AC8` | 見出し文字・区切り線の水色 | 1% | 推定 | | `accent-1` | `#D0202E` | 削減率など数値の強調赤 | 0% | 推定 | | `accent-2` | `#52BBCA` | 補助金ラベル・枠のティール | 1% | 画素の実測 | | `marker` | `#F59AB0` | 濃紺地上の強調ピンク | 0% | 推定 | | `text` | `#244671` | 見出しの濃紺文字 | 2% | 画素の実測 | | `text-body` | `#3A3A3A` | 本文の文字 | 3% | 推定 | | `dark-section` | `#666666` | 概要の項目見出しバー | 1% | 画素の実測 | | `tint-2` | `#D7E6FA` | フロー・吹き出しの淡青 | 2% | 画素の実測 | | `line` | `#CACACA` | フォーム枠・区切り線 | 0% | 画素の実測 | | `on-primary` | `#E6F9FD` | 濃紺地上の白文字 | 0% | 画素の実測 | | `cta-accessible` | `#E6213E` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡水色・グレージュの3色を、セクションごとに順番に切り替える - 濃紺は解決策の提示ブロックとピックアップカードの面に使う - 赤は削減率などの数値と主 CTA だけに使い、多用しない - 見出しの文字は水色か濃紺。本文はダークグレー - グラフで他社のバーは薄グレー、自社のバーは濃紺にして対比させる - フォームの必須バッジは青地に白文字 - `button-primary` は文字 `#FFFFFF` × 背景 `#EA415A` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E6213E`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のプラン名 | ゴシック | Zen Kaku Gothic New | 400 | 52px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.05em | | `headline-md` | 製品名（斜体欧文） | 欧文サンセリフ | Archivo Black | 800 | 22px | 1.3 | 0.0em | | `headline-sm` | カード内見出し・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `accent` | 削減率などの大きな数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ボタン・ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `body-lg` | Pick UP などの英字見出し（斜体） | 欧文サンセリフ | Montserrat | 500 | 30px | 1.2 | 0.0em | - 見出しは中央揃えで2行に収め、太字にする - 数値は欧文太字で大きくし、単位は小さく添える - 本文は左揃え。字間は少し広めにとる - 英字の製品名・ラベルは斜体の太字にする - 強調したい語だけ赤か水色マーカーにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。表は 4 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクション見出しの下に、斜線の切れ目が入った水色の横線を置く - 製品カードは左右に余白をとった白い面にする - 比較グラフは1項目ずつ縦に並べる - フォームは1カラムで、ラベルを入力欄の上に置く - サポートのフローは左にイラスト、右に縦帯の工程を並べる ## Elevation & Depth - 影はほぼ使わずフラットにする - カードは地色との差と枠線で区切る - 吹き出しは淡い青の面と紺の細線で表す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 製品写真は白背景の切り抜き、加工部の写真は四角に切り抜く - **セクション境界**: 直線で背景色を切り替える。濃紺ブロックの上には下向き三角の切り欠きを入れる - CTA は角丸 12px 程度の横長ボタンにする - ラベルは細い紺枠で角丸にする - 番号付きの見出しは角丸の枠線で囲み、上辺に見出しを重ねる - 工程の円形バッジは正円にする ## Components - **主 CTA ボタン**（`button-primary`）: ピンク寄りの赤地に白文字。右端に丸い下向き矢印を付け、上に斜線で挟んだ前置き文を添える - **斜線入り見出し下線**（`heading-slash-line`）: 水色の見出しの下に、左寄りの位置で斜線が切れ目を作る横線を置く - **濃紺の解決ブロック**（`solution-block`）: 悩みのチェックリストを載せた白いカードの下に続く濃紺の面。白文字と強調ピンク文字を使う - **ピックアップカード**（`pickup-card`）: 濃紺のカード。左に白いピル型ラベル・説明・区切り線とスペック、右に写真を置く - **削減率グラフ**（`stat-chart`）: 角丸の枠で囲んだ見出しと棒グラフ。比較対象のバーは薄グレー、自社のバーは濃紺。矢印の横に赤で大きく削減率を示す - **比較表**（`compare-table`）: 見出し行は淡い青。差分の列だけ濃紺のグラデーションに白文字 - **吹き出し**（`speech-bubble`）: 淡い青の円形吹き出しを紺の細線で縁取り、線画の人物イラストの横に置く - **申込ステップカード**（`step-card`）: 淡い水色の地に置く白いカード。番号付きの見出し、グレーの線、グレーのアイコン、説明の順に並べ、カード間に下向きの山形を入れる - **概要の項目バー**（`spec-bar`）: 濃いグレーの帯に白文字で項目名を書き、下に本文を置く - **フォームと必須バッジ**（`form-field`）: 太字のラベルに青い必須バッジを付ける。入力欄はグレー枠で角丸。送信ボタンは濃紺の四角 ## Do's and Don'ts **Do** - 数値は必ずグラフか表で根拠と一緒に示す - 注釈は小さいグレー文字で図の直下に置く - セクションごとに地色を切り替えて区切る - 人物やアイコンは単色の線画イラストにする - 製品写真は白い背景で清潔に見せる **Don't** - 赤を見出しや面に広く使わない - 濃い影や立体的な装飾を付けない - 手書き風やポップな書体を使わない - グラフで自社以外のバーに色を付けない - 写真に過度なフィルターをかけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（プラン名と設備更新の訴求）: 白〜淡グレーの地。上下を線で挟んだリード文、大きな細ゴシックのプラン名（一部を赤）、旧機種→矢印→新機種の写真、その下に主 CTA 2. **悩みの提起**（維持コストの悩みに共感する）: 淡い水色の地。人物の線画と、チェックアイコン付きで悩みを3つ並べた白カード。下に濃紺の解決ブロックを置く 3. **製品ラインアップ・補助金**（選択肢の広さと補助金の併用を伝える）: 上下を線で挟んだ紺の見出し、製品写真を横一列に並べる、ティールのピル型ラベル、注釈 4. **ピックアップ**（代表的な強みを2つ示す）: 斜体の英字見出し。濃紺のカードを縦に2枚並べ、右に写真を置く 5. **導入メリット**（削減効果を数値で証明する）: 白い地。3種類の削減率を角丸見出し付きの棒グラフと図解で示す。囲み枠のまとめ文を添える 6. **試算例**（具体的な年間削減額を示す）: 淡い水色の角丸パネルに比較表、算出条件のラベル付きリスト、部品写真を入れる 7. **おすすめ製品**（機種ごとに特長を紹介する）: グレージュの地に白いカード。枠線ラベル・斜体の製品名・左に縦線の入った説明・写真・動画埋め込みパネルの順に並べる 8. **サポート体制**（購入後の安心を伝える）: 番号付きの枠見出し。吹き出しとイラストを添え、受付から復旧までを縦帯のフローで示す。最後に時間を強調した囲み 9. **申込の流れ**（手続きの手軽さを示す）: 淡い水色の地に白いステップカードを3枚縦に並べ、カード間に山形の矢印を入れる 10. **プラン概要**（条件と注意事項を明示する）: グレーの帯見出しの下に本文と箇条書きを置く。重要な部分は赤い太字 11. **申込フォーム**（そのまま申し込んでもらう）: 1カラムの入力欄に必須バッジを付ける。住所欄は小見出しで区切る。濃紺の確認ボタン 12. **フッター**（企業サイトへ誘導する）: 黒い帯、リンク群、ロゴ、コピーライトを並べる ## Imagery - 製品は白背景で斜め前から撮り、切り抜く - 加工部は暗い背景のクローズアップ写真にし、寸法線を白文字で重ねる - 人物はグレーの丸を背景にした線画イラスト。服は青系で塗る - アイコンはグレー単色のフラットな形にする - 地には薄いドット柄をうっすら敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せで、コンテンツ幅を約 1000px にする - PC ではピックアップカードを2枚横に並べる - PC では削減率グラフを3列に並べる - PC では申込ステップを横3列にし、間に矢印を入れる - PC ではサポートのフローを横向きの工程帯にする - フォームは PC でも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-e460eea2`（元 LP の URL から採番） - **元 LP**: https://www.brother.co.jp/product/machine/sp/replace/index.aspx - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。