--- version: alpha name: Navy and Lime Disaster-Prep Water System LP description: 濃紺の地にライムグリーンの差し色を使った、防災・BCP 向け設備の BtoB LP。水滴や泡の装飾、太いゴシックの大見出し、表や図解で信頼感と緊急性を両立させる。悩み→必要性→製品特長→構成→事例→問い合わせフォームの順に情報を積み上げる訴求型の構成。 colors: primary: '#0C3E83' cta: '#C7EB03' on-cta: '#0D1C2D' secondary: '#2E419F' background: '#FEFEFE' background-alt: '#F4F4F4' tint-1: '#B1E0F1' accent-1: '#C8EE14' marker: '#FEED63' text: '#2D2C2E' surface: '#E9E9E9' accent-2: '#EDE8DA' dark-section: '#353333' on-dark: '#FFFFFF' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Roboto fontSize: 26px fontWeight: 900 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 16px 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.full}' height: 76px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px doc-request-card: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 82px speech-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 50px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px point-number: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 120px step-chevron: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 150px tag-chip: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 34px circle-photo: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 200px form-field: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px --- # DESIGN.md — 紺×ライムの防災浄水設備 BtoB LP（Navy and Lime Disaster-Prep Water System LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 濃紺・ライムグリーン・水滴・泡・防災・図解・太字ゴシック - **地の質感**: フラットな単色面に、写実的な水泡・水しぶきの画像を重ねて透明感を出す - **形**: 角丸は控えめ。番号は上半分の弧線、ポイント枠は角を斜めに切った線囲み、工程は下向き五角形 - **温度感**: 寒色中心でクール。ライムと黄マーカーで要所だけ熱を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C3E83` | メインの濃紺地（製品特長・フォーム） | 25% | 画素の実測 | | `cta` | `#C7EB03` | 主 CTA・送信ボタン・強調帯 | 2% | 画素の実測 | | `on-cta` | `#0D1C2D` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#2E419F` | 明るい青の見出し文字・吹き出し・帯 | 3% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 31% | 画素の実測 | | `background-alt` | `#F4F4F4` | 悩みセクション等の薄グレー地 | 8% | 画素の実測 | | `tint-1` | `#B1E0F1` | CTA まとめ帯の水色地 | 2% | 画素の実測 | | `accent-1` | `#C8EE14` | 番号見出し・小見出しのライム文字 | 0% | 画素の実測 | | `marker` | `#FEED63` | 黄色マーカー・ギザ丸強調 | 2% | 画素の主要色に補正 | | `text` | `#2D2C2E` | 白地の見出し・本文文字 | 3% | 画素の主要色に補正 | | `surface` | `#E9E9E9` | タグ・表の淡いグレー面 | 2% | 画素の実測 | | `accent-2` | `#EDE8DA` | タグのベージュ面 | 1% | 画素の実測 | | `dark-section` | `#353333` | 比較見出しの黒帯 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 紺地上の白文字 | 3% | 画素の主要色に補正 | - 地は白・薄グレー・濃紺を交互に切り替え、製品説明パートは長い濃紺ブロックにまとめる - 濃紺地の小見出し・番号はライム、本文・大見出しは白 - 白地の大見出しは明るい青で太く組む - ライムは主 CTA と送信ボタンに限定して目立たせる - 黄色はマーカー線やギザ丸で、危機を示す語の強調だけに使う - タグは淡いグレー・ベージュ・薄紫で分類ごとに色を分ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大コピー | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.02em | | `headline-md` | ポイント見出し・中見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.0em | | `headline-sm` | カード見出し・ラベル | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.02em | | `note` | 注釈・キャプション | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 製品名などの欧文斜体 | 欧文サンセリフ | Roboto | 900 | 26px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | - 見出しは極太ゴシックで、2行程度に収める - 製品名だけ欧文イタリック極太でライム色にする - 本文は行間 1.9 前後でゆったり組む - セクション上に小さな黒の英語なしラベルを置き、その下に青の大見出し - 数値は大きく太く、単位は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、施設・事例は 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右余白は約 18px - 濃紺地の中に白いカードを置いて図解・検査データをまとめる - 比較表は横スクロールで見せる - 工程は縦に積んだ下向き五角形で流れを示す - ポイントは 1〜5 の番号付きで縦に並べる ## Elevation & Depth - 基本はフラットで影を使わない - FV 直下の資料請求カードだけ薄い影を付ける - バナーにも軽い影を付けて浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 対象施設は線付きの円形切り抜き、その他は角丸なしの矩形 - **セクション境界**: FV は斜めカットで写真と紺面を分ける。他は直線で切り替える - 主 CTA とサブボタンはピル型 - 番号は上半分だけの弧線で囲む - 吹き出し見出しは角丸の帯に下向きの三角 - フォームの入力欄は角丸なしの白い矩形 ## Components - **ライム主 CTA**（`button-primary`）: ライム地のピル型ボタン。上に小さなアイコンを置く - **白枠サブボタン**（`button-outline`）: 白地に青の線と青文字のピル型 - **資料請求カード**（`doc-request-card`）: 対象と製品名を左に、縦線で区切って右に行動ラベルとアイコンを置く横長カード - **吹き出し見出し**（`speech-heading`）: 青い角丸帯に白文字。下に三角のしっぽ - **マーカー強調見出し**（`marker-heading`）: 上下に線を引き、語の背後に黄色のギザ丸や太線を敷く - **番号付きポイント**（`point-number`）: 弧線で囲んだライムの数字と、ライムの小見出し・白の大見出しを組む - **工程ボックス**（`step-chevron`）: 白の細線で描いた下向き五角形に、工程名と下線・説明を中央揃え - **分類タグ**（`tag-chip`）: 淡色面の角丸チップを2列に並べる - **円形写真カード**（`circle-photo`）: 青い線の円形写真の下に、青の見出しと小さな説明 - **フォーム入力欄**（`form-field`）: 紺地に白ラベルと細い下線、白い矩形入力欄 ## Do's and Don'ts **Do** - 濃紺とライムの組み合わせを全体の軸にする - 数値や比較は表・グラフ・図解で見せて信頼感を出す - 紺地の背景に水泡や水しぶきを散らして水らしさを出す - CTA はページ中盤と末尾にまとめて置く - 危機を示す語は黄色マーカーで強調する **Don't** - ライムを本文や広い背景に使わない - 暖色や彩度の高い赤を主要色にしない - 細い明朝体で見出しを組まない - 大きな角丸カードや強い影を多用しない - 紺地の上に青文字を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（防災ニーズと製品カテゴリを一目で伝える）: 上下の写真に斜めカットの紺面を挟む。バッジ、大コピー、製品写真と2つの効果、ライムの製品名、丸い CTA 2. **資料請求導線**（対象別にすぐ行動させる）: ライムと白の横長カードを2段で並べる 3. **問題提起**（災害時の断水リスクを示す）: 白地に青の大見出しと本文 4. **悩みの提起**（対策しない場合の損失を列挙）: 薄グレー地に吹き出し見出し、マーカー見出し、箇条書き、写真カード 5. **データ比較**（断水の復旧が遅いことを示す）: 黄色マーカーの黒い大見出しと、横スクロールの比較表 6. **対象施設**（必要な施設を示す）: 青帯の見出しに円形写真を2×2で並べる 7. **製品概要**（製品の能力を紹介）: 紺地に白文字、動画、円形写真と説明の横並び 8. **仕組み・効果**（浄水の原理と除去対象を示す）: 紺地の上の白カードに写真、分類タグ、グラフ、検査書 9. **適合施設・悩み**（規模感と課題の解決を示す）: 横に流す写真列と、角を切った線枠にライム帯の見出し 10. **5つのポイント**（特長を詳しく説明）: 番号付きの見出し、本文、写真。途中に工程ボックスと比較の黒帯 11. **相談 CTA**（問い合わせを促す）: チェック付きの質問リストと人物写真。水色帯にピル型ボタン3つと電話 12. **構成図・活用例**（システム構成と用途を示す）: 横スクロールの図解、番号リスト、写真グリッド 13. **導入事例・費用**（実績と見積もり方針を示す）: 写真の下に太字の事例名と説明。費用の説明とバナー 14. **問い合わせフォーム**（問い合わせを受け付ける）: 紺地に泡の装飾、白い入力欄、ライムの送信ボタン ## Imagery - 透明感のある水泡・水しぶきの写真素材を紺地の端に散らす - 被災した道路など危機を伝える報道写真風の画像を FV に使う - 施設・学校・病院は明るく自然光の写真を円形に切り抜く - 製品は白背景の実機写真に寸法線を入れて図示する - 人物はスーツの案内役や子どもが水を飲む写真で安心感を出す - 構成図は細線と点線の配管図に色分けの枠を付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにナビと電話番号を横に並べる - PC の FV は左右の写真の間に中央の紺台形を置く - 資料請求カードや悩みの2項目は PC で横並びにする - 対象施設やポイントは PC で4列、またはテキストと画像の2カラムにする - 工程ボックスは PC で横4列の矢印型に並べる - フォームは 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-9263d185`（元 LP の URL から採番） - **元 LP**: https://www.arukas-rb.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。