--- version: alpha name: Blue Gradient Corporate Network Service LP description: シアンから紺への斜めグラデーション帯で CTA と資料訴求を挟んだ法人向け回線サービスの LP です。特長 4 つはそれぞれオレンジ・シアン・紺・黄緑で色分けし、続く詳細セクションの地色と見出し帯も同じ色で揃えています。白カードと薄い影、図解、表を使い、信頼感と情報量を両立させています。 colors: primary: '#23A2D4' dark-section: '#1C4D8C' cta: '#96C33A' on-cta: '#FFFFFF' secondary: '#9AB461' background: '#FEFEFE' background-alt: '#ECECEC' tint-1: '#FEF4E8' tint-2: '#EAF5F9' surface: '#E6EAF2' accent-1: '#DF971A' accent-2: '#F6F8EB' accent-3: '#DC393C' text: '#333333' line: '#D8DDDC' on-dark: '#EFFEFE' cta-accessible: '#638026' secondary-accessible: '#677C3B' typography: display: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.45 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px 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.sm}' height: 44px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px cta-gradient-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 240px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 220px heading-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 76px check-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px diagram-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 340px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px --- # DESIGN.md — 青グラデと色分け特長の法人回線サービス LP（Blue Gradient Corporate Network Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、情報量多め・訴求型、清潔・爽やか - **キーワード**: 法人向け・青グラデーション・色分け特長・図解・白カード・資料ダウンロード - **地の質感**: フラットな面と薄い影。CTA 帯だけは斜めグラデーションで、半透明の大きな曲線モチーフを重ねる - **形**: 角丸 8px 前後のカード、角丸が小さめのボタン、ピル型のステップラベル、灰色の大きな円の装飾 - **温度感**: やや寒色寄り。セクションごとに淡いクリーム・水色・藍灰・若草色を地に敷いて温度を変える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#23A2D4` | ブランドのシアン（ステップラベル・リンク・特長アイコン） | 8% | 画素の実測 | | `dark-section` | `#1C4D8C` | グラデーション帯の紺側・濃紺アクセント | 5% | 画素の実測 | | `cta` | `#96C33A` | 主 CTA（資料ダウンロード）の黄緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 主 CTA の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#9AB461` | サブ CTA の黄緑文字・白ボタン | 0% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地・カード面 | 33% | 画素の実測 | | `background-alt` | `#ECECEC` | 悩み・FAQ セクションの薄灰地 | 7% | 画素の実測 | | `tint-1` | `#FEF4E8` | 特長1詳細のクリーム地 | 4% | 画素の実測 | | `tint-2` | `#EAF5F9` | 特長2詳細と流れの水色地 | 8% | 画素の実測 | | `surface` | `#E6EAF2` | 料金表セクションの藍灰地 | 7% | 画素の実測 | | `accent-1` | `#DF971A` | 特長1のオレンジ（見出し・帯） | 1% | 画素の実測 | | `accent-2` | `#F6F8EB` | 特長4の黄緑地・帯 | 6% | 画素の実測 | | `accent-3` | `#DC393C` | 図解の警告レッド・下線 | 0% | 画素の実測 | | `text` | `#333333` | 見出しと本文の濃灰 | 3% | 推定 | | `line` | `#D8DDDC` | 表の罫線・見出し上の短い線 | 0% | 画素の主要色に補正 | | `on-dark` | `#EFFEFE` | グラデ帯・フッター上の白文字 | 1% | 画素の実測 | | `cta-accessible` | `#638026` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#677C3B` | AA を満たす補正値（計算） | | 計算 | - CTA 帯はシアンから紺への斜めグラデーションに限定し、白文字を乗せる - 主 CTA は黄緑の塗りに白文字、サブ CTA は白の塗りに黄緑文字の 2 段にする - 特長 4 つにオレンジ・シアン・紺・黄緑を 1 色ずつ割り当て、詳細セクションの淡い地色と見出し帯の色も同じ系統でそろえる - 見出し帯は左を濃く右を透明にした横グラデーションにし、濃灰の太字を乗せる - 図解の赤は危険・障害の表現だけに使い、正常な状態はシアンで示す - フッターは黒の塗りにし、ロゴとコピーライトを白で置く - `button-primary` は文字 `#FFFFFF` × 背景 `#96C33A` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#638026`、4.52:1）を使う。 - `button-secondary` は文字 `#9AB461` × 背景 `#FEFEFE` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#677C3B`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | CTA 帯の訴求見出し（白・太字） | ゴシック | Noto Sans JP | 900 | 22px | 1.45 | 0.02em | | `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 900 | 20px | 1.45 | 0.03em | | `headline-md` | 特長カードの色付き見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | グラデーション見出し帯の文字・悩みリスト | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文（重要語は太字） | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | ※注釈・表の補足 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.04em | | `accent` | ステップ番号などの欧文ラベル | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.05em | - 全体をゴシック 1 書体で統一し、太さの差で強弱をつける - 特長見出しは助詞だけを小さくし、名詞を大きく見せる - 本文の重要語は太字にし、図解の説明では色付きの下線も引く - セクション見出しは中央揃え、詳細本文は左揃えにする - CTA 帯の上の誘導文は、左右を斜線で挟んだ形にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。CTA 帯の資料紹介だけ 2 カラムにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 18px - 特長カードは幅約 65% で中央に縦積みする - 詳細セクションは、見出し帯→本文→短い線→白カード（図解・表）の順に並べる - CTA ブロックはページ上部・中盤・末尾の 3 か所に置く - ロゴ一覧は 4 列グリッドにする ## Elevation & Depth - 白カードには薄くぼかした影（0 2px 10px rgba(0,0,0,.1)）をつける - FAQ とステップのカードは影なし、またはごく薄い影にする - ボタンは影なしのフラットにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 12px の横長長方形。資料画像は扇状に重ねて斜めに配置する - **セクション境界**: 基本は直線で切り替える。悩みセクションの下端だけ下向きの V 字にする - ステップラベルは全幅のピル型にする - 吹き出しは紺の円に、しっぽを付ける - 背景に灰色の大きな円を半分見切れる形で置く - 見出しの前に、太さ 3px・長さ 60px の短い色線を置く ## Components - **主 CTA ボタン**（`button-primary`）: 幅いっぱいの黄緑の塗りに白い太字 - **サブ CTA ボタン**（`button-secondary`）: 白の塗りに黄緑文字。細い枠線をつける - **グラデーション CTA 帯**（`cta-gradient-band`）: シアンから紺への斜めグラデーション。斜線で挟んだ誘導文とボタン 2 つを置く - **色分け特長カード**（`feature-card`）: 白カードに色付きの見出し・短い説明・同色の丸い下矢印アイコンを並べる - **グラデーション見出し帯**（`heading-band`）: 左が濃く右に向かって透明になる横帯に、2 行の太字見出しを乗せる - **悩みチェックリスト**（`check-list`）: シアンの丸いチェックアイコンと太字の悩み文を縦に並べる - **図解カード**（`diagram-card`）: 白カードの中にアイコンと矢印で通信の流れを図示し、赤とシアンで対比する - **料金・帯域表**（`spec-table`）: 灰色の見出し行と細い罫線だけで組んだ中央揃えの表 - **FAQ アコーディオン**（`faq-item`）: 白い角丸バーの左にシアンの Q、右に下向きシェブロンを置く - **ステップカード**（`step-card`）: 上部にシアンのピル型 STEP ラベル、その下に工程名を置く白カード。カードの間にシェブロンを挟む ## Do's and Don'ts **Do** - 特長の色を、カード・詳細見出し帯・地色まで一貫させる - CTA は主・サブの 2 ボタンを必ずセットで置く - 技術的な説明は図解と表で見せ、文章だけにしない - 注釈は※付きの小さな文字で、本文の下に添える - 白カードの影はごく薄くする **Don't** - 主 CTA を青系にしない（黄緑で背景から浮かせる） - グラデーション帯を CTA 以外の箇所に多用しない - 特長カードに 5 色目以上を足さない - 警告の赤を装飾目的で使わない - 明朝体や手書き書体を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの要点と実績を一目で伝える）: 淡色地の右に人物写真、左に太字のキャッチを置く。下に丸アイコン 4 つと月桂樹付きの実績数字を並べる 2. **キャンペーン CTA**（特典を示して資料請求と相談に誘導する）: 斜めグラデーション帯に、斜線で挟んだ告知文とボタン 2 つを置き、資料紹介を 2 カラムで並べる 3. **導入企業ロゴ**（実績で信頼を補強する）: 白地に見出しを置き、ロゴを 4 列グリッドで並べる 4. **悩みの提起**（課題を自分ごと化させる）: 灰色地に大きな円の装飾を置き、チェック付きの悩みを 3 つ並べる。下端は V 字にする 5. **解決策（特長一覧）**（4 つの強みを提示する）: 色分けした白カードを 4 枚縦に積み、各カードに下矢印を付ける 6. **特長詳細 1**（安全性を図解で説明する）: クリーム地にオレンジの見出し帯を置き、本文の下に利用前後を比べる図解カードを置く 7. **特長詳細 2**（専有型の利点を比較で示す）: 水色地にシアンの見出し帯を置き、2 カラムの比較図解カードを置く 8. **特長詳細 3（料金表）**（プランの幅を示す）: 藍灰地に紺の見出し帯を置き、帯域表を複数並べる 9. **特長詳細 4（サポート）**（保守体制で安心させる）: 若草地に黄緑の見出し帯を置き、オペレーター写真・本文、紺の吹き出し付きの白カードを続ける 10. **中間 CTA**（詳細を知りたい層を受け止める）: グラデーション帯に誘導文とボタン 2 つを置く 11. **よくある質問**（導入時の疑問を解消する）: 灰色地に白いアコーディオンを 5 本並べる 12. **導入の流れ**（手順を明確にする）: 水色地に STEP カードを 6 枚縦に並べ、間にシェブロンを挟む 13. **最終 CTA とフッター**（最後の申込を促す）: 冒頭と同じグラデーション CTA を置き、その下に黒地のフッター（ロゴ・コピーライト）を置く ## Imagery - 人物写真はスーツ姿のビジネスパーソンやヘッドセットを付けたオペレーター。明るいオフィスで撮った自然光の写真 - 資料の表紙画像は複数枚を扇状に重ね、斜めに傾けて立体感を出す - 図解は灰色の人物シルエット、紺の円形サーバー、赤い悪意者アイコンなど、フラットなピクトグラムで描く - 強調数字は赤いギザギザ形状のバッジに白文字で載せる - グラデーション帯には、白の半透明で大きな曲線ロゴ風のモチーフを重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% 幅のコンテナに収める - 特長カードは PC で 4 列横並びにする - 図解の利用前後比較は PC で左右 2 カラムにする - 料金表は PC でタブ切り替えにまとめる - サポートセクションは PC で写真左・本文右の 2 カラムにする - ステップは PC で 6 列横並びにし、CTA ボタン 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-e4a7a66b`（元 LP の URL から採番） - **元 LP**: https://gate02.ne.jp/lp1/internet_gb/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。