--- version: alpha name: Navy and Sky Blue Corporate SaaS Illustrated LP description: 濃紺と水色を軸に、黄色のマーカーとバッジでアクセントを付けた法人向け SaaS の LP。白と淡い水色の地を交互に敷き、フラットな人物イラストと不定形の水色ブロブで Before/After や機能を図解する。モノクロ人物写真と太いゴシックの FV で目を引き、ピル型の 2 連 CTA を何度も繰り返す。 colors: primary: '#1F4778' secondary: '#59A8CD' cta: '#1F4778' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#EDF6FB' tint-1: '#DCEEFA' accent-1: '#DDCC33' tint-2: '#FFF1AD' accent-2: '#C9A46A' text: '#000000' text-muted: '#818588' dark-section: '#2D3540' on-dark: '#DBE1E8' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 52px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 20px 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: 44px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px cta-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 150px label-yellow: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px tag-pill: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px badge-number: backgroundColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 52px before-bar: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 44px speech-card: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 170px step-card: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 70px check-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 20px --- # DESIGN.md — 紺×水色の図解型 法人向けサービス LP（Navy and Sky Blue Corporate SaaS Illustrated LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 濃紺×水色・黄色マーカー・フラットイラスト・不定形ブロブ・2連ピルCTA・図解 - **地の質感**: フラットな単色面。影はほぼなく、淡い水色地と白カードで区切る - **形**: ピル型ボタン、大きめ角丸の白カード、有機的なブロブ形、ギザ丸の番号バッジ - **温度感**: やや寒色寄りで清潔。黄色で少しだけ温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1F4778` | ブランド濃紺（主ボタン・帯・グラフ） | 5% | 画素の実測 | | `secondary` | `#59A8CD` | 水色（強調文字・サービス帯） | 3% | 画素の実測 | | `cta` | `#1F4778` | 主 CTA の塗り | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 主 CTA 上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 41% | 画素の実測 | | `background-alt` | `#EDF6FB` | 淡い水色のセクション地 | 28% | 画素の実測 | | `tint-1` | `#DCEEFA` | イラスト背後の水色ブロブ | 4% | 画素の実測 | | `accent-1` | `#DDCC33` | 黄色（ラベル帯・マーカー） | 1% | 画素の実測 | | `tint-2` | `#FFF1AD` | 淡黄のタグ地 | 0% | 画素の実測 | | `accent-2` | `#C9A46A` | ゴールドの実績バッジ | 0% | 推定 | | `text` | `#000000` | 見出し・本文の黒 | 3% | 画素の実測 | | `text-muted` | `#818588` | 注釈のグレー | 1% | 画素の実測 | | `dark-section` | `#2D3540` | フッターの墨紺 | 3% | 画素の実測 | | `on-dark` | `#DBE1E8` | フッター文字 | 0% | 画素の実測 | - 地は白と淡い水色を交互に敷き、セクションを切り替える - 見出しの強調語は水色の文字にする。黒文字との2色で組む - 強調フレーズの下に黄色の半透明マーカーを敷く - 主 CTA は濃紺の塗り＋白文字、サブは白地＋濃紺の枠線 - グラフは濃紺・灰紺・水色の3段階でつくり、大きな数値は黄色 - フッターだけ墨紺の暗い面にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大キャッチ（極太） | ゴシック | Zen Kaku Gothic New | 900 | 52px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.5 | 0.08em | | `headline-md` | カード・ポイントの小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.05em | | `headline-sm` | 黄ラベル・帯見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em | | `body-md` | 本文・チェックリスト | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.02em | | `note` | 注釈・調査出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | Before/After・数字・％ | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 見出しは中央揃えで 2〜3 行に改行する - 見出し内の強調語は水色に、数字は大きく欧文太字にする - 本文は小さめで、行間をゆったり取る - 大きな数字に小さな単位（％・円・社）を添える - 装飾の斜線や集中線で短い見出しを挟む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、CTA は 2 ボタンを横並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに白と淡い水色の地を交互に敷く - Before と After は縦に積み、下向きの点線矢印でつなぐ - After は白い角丸カードに入れて目立たせる - 数セクションごとに 2 連 CTA の帯を挟む - ロゴ列は横スクロール風に端まで並べる ## Elevation & Depth - 基本は影なしのフラットな面にする - 白カードに薄い影を付けて水色の地から浮かせる - 料金ボックスは濃紺の板を右下にずらして重ね、立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は切り抜きのモノクロ人物。イラストは水色ブロブの上に配置し、アイコンは円形に入れる - **セクション境界**: 直線で背景色を切り替える - ボタンとタグはピル型にする - 番号バッジはギザ丸（スカラップ）の濃紺にする - 吹き出しは濃紺の枠線＋下向きの三角 - ラベル帯は角丸なしの黄色の長方形 ## Components - **資料請求ボタン**（`button-primary`）: 濃紺のピル。上段に小さく水色の所要時間、下段に白い太字 - **無料トライアルボタン**（`button-secondary`）: 白地に濃紺 2px の枠のピル。主ボタンの右に並べる - **コスト訴求 CTA 帯**（`cta-band`）: 集中線で挟んだ短い一文と大きな数字の下に、2 連ボタンを並べる帯 - **対象者ラベル帯**（`label-yellow`）: 黄色の長方形に黒い太字で役職・立場を書く - **対象タグ**（`tag-pill`）: 淡黄と水色の小ピルタグ。どの立場向けの特長かを示す - **ポイント番号バッジ**（`badge-number`）: 濃紺のギザ丸に小さなラベルと白い2桁数字 - **Before 課題帯**（`before-bar`）: 欧文の Before 見出しの下に、濃紺の全幅帯で白文字の課題を 2 行 - **アンケート吹き出し**（`speech-card`）: 白地＋濃紺の枠の角丸吹き出し。黄マーカー付きの結果文をグラフの上に置く - **導入ステップカード**（`step-card`）: 白い横長カードに水色の番号、線画アイコン、見出し。カードの間に灰色の下向き三角 - **チェックリスト**（`check-list`）: 水色の丸チェックアイコン付きの短い箇条書き ## Do's and Don'ts **Do** - 強調語は水色、強調フレーズは黄マーカーと使い分ける - イラストは必ず水色ブロブの上に置く - 2 連 CTA の帯を 3〜4 回繰り返す - 数値の実績は大きな欧文数字とドーナツグラフで見せる - 白と淡い水色の地を交互に敷いてリズムを作る **Don't** - 赤やオレンジなど暖色の強い CTA を使わない - 立体的・写実的なイラストを混ぜない - 濃い影やグラデーションのボタンにしない - 明朝体や手書き書体を使わない - 本文を中央揃えのまま長く続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（課題の転換を宣言し、実績で信頼させる）: 極太の大キャッチ＋黄マーカー、モノクロ人物写真、ゴールドの実績バッジ、水色のサービス説明帯、2 連 CTA 2. **導入企業ロゴ**（社会的証明）: 白地にロゴを横一列に並べる 3. **サービス概要**（提供価値を 3 つに要約する）: 淡い水色地にビル街のシルエット。濃紺の吹き出し帯の下に、白い円の中へアイコンと短い見出しを 3 つ 4. **立場別メリット**（経営・管理・利用者ごとの利点）: イラスト→黄ラベル帯→水色強調の見出し→チェックリストを、区切り線で 3 回繰り返す 5. **Before/After**（導入前後の変化を図解する）: 濃紺の課題帯とイラスト、点線矢印、白カードの After。これを 3 セット 6. **CTA**（コスト不要を訴えて行動を促す）: 集中線で挟んだ大きな 0 円と 2 連ボタン 7. **4 つのポイント**（機能ごとの詳細）: ギザ丸の番号、対象タグ、見出し、短い説明、水色ブロブ上の大イラスト 8. **満足度データ**（アンケート結果で効果を証明する）: 淡い水色地に吹き出しカードと濃紺系のドーナツグラフ、出典の注釈 9. **導入実績**（企業数とロゴで信頼を補強する）: 斜線で挟んだ見出しとロゴ列 10. **導入ステップ**（開始までの手軽さを示す）: 白い横長カード 3 枚を下向き三角でつなぐ 11. **料金体系**（料金の仕組みを単純に見せる）: 影をずらした枠ボックス 2 つを大きな×でつなぎ、下に三角を置く 12. **最終 CTA・フッター**（問い合わせに誘導する）: 淡い水色の CTA 帯の下に、墨紺のフッターでリンクと所在地 ## Imagery - FV はスーツ人物の切り抜きモノクロ写真で、渋い大人の印象を出す - イラストは濃紺・水色・黄・グレーだけのフラットな人物と端末 - イラストの背後に淡い水色の不定形ブロブを敷く - 画面 UI のキャプチャを斜めに置き、赤い点線矢印と拡大ルーペで要点を示す - アイコンは水色の線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV でキャッチを左、写真を右の 2 カラムにする - PC はヘッダー右上に小型の 2 連 CTA を常設する - 立場別メリットはテキストとイラストを左右交互に並べる - Before/After は左右に並べ、横向きの点線矢印でつなぐ - PC はグラフを 2 つ横並びにし、ロゴは 5 列のグリッドにする ## 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-f97110d5`（元 LP の URL から採番） - **元 LP**: https://go.goinc.jp/business/lp/brand03/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。