--- version: alpha name: Corporate Blue Academic Event Support LP description: 濃紺から青へのグラデーションを枠と地に使い、白とごく薄いグレーの面で情報を整理した BtoB サービスの LP。主 CTA は金（マスタード）色で、信頼感と上品さを両立している。斜めの帯状シェイプと人物写真を重ねたビジュアル、英字ラベル付きの二重線見出し、番号付きの白カードが特徴。 colors: primary: '#0189D3' secondary: '#1455A5' cta: '#CE9D36' on-cta: '#FFFFFF' background: '#FFFFFE' background-alt: '#F2F2F5' surface: '#FCFCFC' text: '#120E10' accent-1: '#1A357C' accent-2: '#806725' dark-section: '#0E64B4' on-dark: '#E5F6FC' line: '#5A6478' tint-1: '#E3E5EB' text-muted: '#7A7F88' cta-accessible: '#947024' primary-accessible: '#0174B2' text-muted-accessible: '#71767F' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 14px full: 999px spacing: unit: 8px card: 24px section: 72px 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.md}' height: 60px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px tel-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 96px section-label: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 24px heading-bar: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 40px check-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 180px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 740px reason-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 560px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px category-link: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px --- # DESIGN.md — 青グラデと金ボタンの学会運営支援 LP（Corporate Blue Academic Event Support LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、クール・先進的、清潔・爽やか、情報量多め・訴求型 - **キーワード**: コーポレートブルー・斜めの帯シェイプ・金色 CTA・二重線の英字ラベル・白カードの整理・実績訴求 - **地の質感**: フラットな白・薄グレーの面に、青のリニアグラデーション。うっすらした方眼の地模様と大きな薄い英字の透かしを使う - **形**: 角丸は小さめ（4〜8px）。ボタンは角丸長方形、検索ボタンだけピル型。斜め帯と下向き三角でセクションを区切る - **温度感**: 寒色が中心。金色の CTA と見出しで少しだけ温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0189D3` | ブランドブルー（ボタン・見出し強調） | 10% | 画素の実測 | | `secondary` | `#1455A5` | 濃い青（グラデ地・ページ枠） | 12% | 画素の実測 | | `cta` | `#CE9D36` | 主 CTA の金色 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFE` | 基本の白地 | 26% | 画素の実測 | | `background-alt` | `#F2F2F5` | 薄グレーの区切り地 | 16% | 画素の実測 | | `surface` | `#FCFCFC` | カード・FAQ の面 | 4% | 画素の実測 | | `text` | `#120E10` | 見出しの黒文字 | 2% | 画素の実測 | | `accent-1` | `#1A357C` | 紺の見出し文字 | 2% | 画素の実測 | | `accent-2` | `#806725` | 理由見出しの金茶文字 | 0% | 画素の実測 | | `dark-section` | `#0E64B4` | 濃紺のグラデセクション | 9% | 画素の実測 | | `on-dark` | `#E5F6FC` | 青地上の白文字 | 1% | 画素の実測 | | `line` | `#5A6478` | 区切り線・枠線 | 1% | 推定 | | `tint-1` | `#E3E5EB` | 番号バッジ・タグの薄青 | 0% | 画素の実測 | | `text-muted` | `#7A7F88` | 注釈・プレースホルダ | 0% | 推定 | | `cta-accessible` | `#947024` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#0174B2` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#71767F` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレーを交互に置き、信頼性の強いセクションだけ青グラデにする - 画面の左右端に濃い青の細い枠を通しで入れ、ブランド感を出す - 金色は申込・相談の主 CTA だけに使う。電話枠は白地に金の線と金文字 - サブボタン（詳しく見る・一覧）はブランドブルーで塗り、白文字に白丸の矢印 - 見出しの強調は紺文字。青地の上のカード見出しは金茶文字 - 分類ごとの縦線アクセントに青・赤・緑を少しだけ使う - `button-primary` は文字 `#FFFFFF` × 背景 `#CE9D36` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#947024`、4.56:1）を使う。 - `button-secondary` は文字 `#E5F6FC` × 背景 `#0189D3` のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0174B2`、4.57:1）を使う。 - `case-card` は文字 `#7A7F88` × 背景 `#FFFFFE` のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#71767F`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し | ゴシック | Zen Kaku Gothic New | 500 | 28px | 1.5 | 0.05em | | `headline-lg` | 紺の強調コピー・締めのメッセージ | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.6 | 0.05em | | `headline-md` | サービス名・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.04em | | `accent` | 二重線つきの英字ラベル・透かし英字 | 欧文サンセリフ | Montserrat | 500 | 14px | 1.2 | 0.1em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.05em | | `note` | 受付時間・注釈・フッター | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.6 | 0.05em | - 和文はクセのない細めのゴシックで、字間を少し広げる - 大見出しは中太で中央揃え。2〜4 行に分けて改行位置を整える - 英字ラベルは大文字・字間広めで、見出しの直上に置く - 電話番号は細めの欧文で大きく、金色で表示する - 本文は行間を広め（1.8〜1.9）にして読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カテゴリのチェック項目だけ 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算） - 左右に 25px 前後の余白をとり、ブロック幅をそろえる - セクションの頭は英字ラベル＋二重線、その下に大見出しと短いリードを置く - サービス紹介は写真→見出し→本文→青ボタン→区切り線を繰り返す - 実績カードは横スクロールのカルーセルにする - セクションの間に全幅の現場写真を挟んで場面を切り替える ## Elevation & Depth - ボタンは右下に薄いグレーのずらし影（ぼかし小さめ）を付ける - カード・FAQ はほぼ影なしのフラットな面 - 青地の上の白カードは影なしで、コントラストだけで浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。メインビジュアルは斜めの帯状シェイプの中に人物を切り抜いて重ねる - **セクション境界**: 基本は直線。悩みセクションの下端は下向きの三角（V字）にする - CTA とサブボタンは 6〜8px の角丸長方形 - 検索とクリアのボタンだけピル型 - 番号バッジは薄青の円 - FAQ の開閉アイコンは青い丸に白の＋ ## Components - **金色の相談ボタン**（`button-primary`）: 左に白丸のメールアイコン、右に小さな『無料』タグを付けた全幅ボタン - **青の詳細ボタン**（`button-secondary`）: 左寄せの白文字と、右端の白丸に入った矢印 - **電話番号ボックス**（`tel-box`）: 白地に金の細い枠。小さな前置き文、大きな金色の電話番号、受付時間を縦に並べる - **英字ラベル見出し**（`section-label`）: 左右を二重線で挟んだ大文字の英字。その下に黒の大見出しを置く - **縦バー見出し**（`heading-bar`）: 左に太い青の縦バーを付けた紺の中見出し - **分類チェックカード**（`check-card`）: 白カードの左端に色付きの縦線。見出しの下に、チェックボックス型の項目を 2 列で並べる - **実績カード**（`case-card`）: 白の角丸カード。上にポスター画像、下に『項目名＋薄青タグ』を並べ、右に青い丸の矢印 - **番号付き理由カード**（`reason-card`）: 写真の上端に薄青の円の番号をかぶせ、白地に金茶の見出しと本文を置く - **FAQ アコーディオン**（`faq-item`）: 薄グレーの面に青い細字の Q、質問文、右端に青い丸の＋ - **分野別リンク**（`category-link`）: 白地に紺の枠線。左に線画アイコン、太字のラベル ## Do's and Don'ts **Do** - 左右端の青い枠と、青グラデのセクションでブランドの統一感を保つ - 金色は主 CTA と電話の表示だけに使う - 実績は数字・地域・形式をタグで並べ、具体的に見せる - 人物写真はスーツや白衣の専門職で、明るいオフィスの光にする - 見出しには必ず英字ラベルを添える **Don't** - ピンクやオレンジなどの暖色をメインの面に使わない - 角丸を大きくしすぎてポップな印象にしない - 太すぎるディスプレイ書体や手書き書体を使わない - 青ボタンと金ボタンの役割を入れ替えない - 写真に強いフィルターや装飾の枠を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの内容と対象をすぐに伝える）: 明るいオフィス写真を背景に、ロゴと短いリードを置く。斜めの青と黒の帯に人物2人を重ね、白地に紺文字のキャッチを入れる。その下に金と青のボタンを縦に並べる 2. **実績サマリー**（対応範囲を短い言葉で示す）: 半透明の白パネルに、月桂樹の飾りで挟んだアイコン付きの特長を3つ縦に並べる 3. **代表メッセージ**（誰に向けたサービスかを語りかける）: 縦バー見出しと本文。下にずらして配置した写真2枚と、薄いロゴシンボルの透かし 4. **対応範囲**（対応できる分野・種類・形式を一覧にする）: 薄グレー地に、左端の色線で区別したチェックカードを3枚 5. **実績事例**（具体的な実績で信頼を得る）: 方眼地に横スクロールのカードを置き、一覧ボタン、分野別リンク、検索フォームを続ける 6. **中間 CTA**（相談を促す）: 青グラデの角丸ボックスに英字の透かし、白い見出し、金ボタン、電話ボックスを入れる 7. **悩みの提起**（お客様が自分ごととして読めるようにする）: 斜線の飾り付き見出しの下に、写真と2行の悩みを4つ縦に並べる。紺の解決コピーで受け、下端はV字で区切る 8. **サービス紹介**（提供メニューを説明する）: 写真・紺の見出し・本文・青ボタンの組みを、区切り線を挟んで6つ繰り返す 9. **選ばれる理由**（強みを示して差別化する）: 全幅写真から青グラデの地に切り替える。番号付きの白カード3枚と白文字のまとめ、青ボタン 10. **お問い合わせ**（最終的な申込を促す）: ぼかした写真の地に英字ラベルと大見出し。金ボタン、電話ボックス、斜め帯に重ねた電話中の人物 11. **よくある質問**（不安を解消する）: 薄グレーのアコーディオンを5つ。下に大きな薄い英字の透かし 12. **フッター**（会社情報とナビゲーション）: 青グラデの地に白ロゴ、認証マーク、リンク一覧、金ボタン、電話ボックス、コピーライト ## Imagery - 人物はスーツや白衣の専門職で、自然な笑顔。背景を白っぽく飛ばした明るい写真にする - 業務の写真はオフィス・会議・会場など実際の現場を、広角で記録写真風に撮る - メインビジュアルは青と黒の斜め帯（矢印・S字状）に人物の切り抜きを重ねる - アイコンは紺の細い線画。分野ごとのモチーフで描く - 大きく薄い英字の透かしと、うっすらした方眼の地模様で奥行きを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにグローバルナビと金の問い合わせボタンを横に並べる - PC のファーストビューは左にロゴ・コピー・ボタン、右に人物の帯ビジュアル。縦書きのキャッチを添える - 実績カードは PC で 3 列グリッドにし、SP は横スクロール - サービス紹介は PC で左に番号付きリスト、右に写真と説明を出すタブ型 - 理由カード・悩みの項目は PC で横に並べる（3〜4 列） - 中間 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-caa34ec1`（元 LP の URL から採番） - **元 LP**: https://k-gakkai.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-23、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。