[CV2] スタイルガイド

共通 CSS(css/main.css)と共通 JS(js/core)の確認用ページ。Figma「01 Foundations」「02 Components」「05 Blog B-01 本文スタイル」と見比べる。

色

--cv2-color-primary
--cv2-color-primary-dark
--cv2-color-primary-light
--cv2-color-secondary
--cv2-color-accent
--cv2-color-text
--cv2-color-heading
--cv2-color-text-sub
--cv2-color-border
--cv2-color-bg
--cv2-color-bg-subtle
--cv2-color-danger
--cv2-color-closed
--cv2-color-overlay
--cv2-color-on-dark
--cv2-color-on-dark-sub
--cv2-color-on-dark-line

文字(PC / SP で値が切り替わる)

h1 見出しのサンプル(--cv2-fs-h1)

h2 見出しのサンプル(--cv2-fs-h2)

h3 見出しのサンプル(--cv2-fs-h3)

h4 見出しのサンプル(--cv2-fs-h4)

body-lg 本文のサンプル。サンプル株式会社のサンプルクラウドは、営業・マーケティングの情報をひとつにまとめます。

body 本文のサンプル。サンプル株式会社のサンプルクラウドは、営業・マーケティングの情報をひとつにまとめます。

body-sm 補足のサンプル。サンプルクラウドは最短 2 週間で導入できます。

caption 2026.10.21

eyebrow sample

h1 の改行(.cv2-br-pc。SP では改行しない)

営業とマーケティングを
ひとつにつなぐ

余白(--cv2-space-1〜12)

--cv2-space-14px
--cv2-space-28px
--cv2-space-312px
--cv2-space-416px
--cv2-space-524px
--cv2-space-632px
--cv2-space-740px
--cv2-space-848px
--cv2-space-964px
--cv2-space-1080px
--cv2-space-1196px
--cv2-space-12120px

角丸・影

radius-sm
radius-md
radius-lg
radius-full
shadow-card

コンテナ・グリッド

.cv2-container--narrow
.cv2-container--default
.cv2-container--wide
.cv2-grid--3
2
3
.cv2-grid--4 .cv2-grid--sp-2
2
3
4

Button

size=md

size=lg

Badge / Tag

お知らせ 受付中 受付終了 オンライン NEW

Tag

Section Heading

Service

サンプルクラウドの特長(h2 / default / left)

サンプル株式会社のサンプルクラウドは、営業・マーケティングの情報をひとつにまとめます。

Service

サンプルクラウドの特長(h2 / lg / center)

サンプル株式会社のサンプルクラウドは、営業・マーケティングの情報をひとつにまとめます。

サンプルクラウドの特長(h2 / sm / eyebrow・lead なし)

サンプルクラウドの特長(h3 / default)

Card

導入までの流れ(card)

サンプルクラウドは最短 2 週間で導入できます。専任の担当者が設定から運用定着までご支援します。

詳しく見る

導入までの流れ(plain)

サンプルクラウドは最短 2 週間で導入できます。専任の担当者が設定から運用定着までご支援します。

詳しく見る

導入までの流れ(icon)

サンプルクラウドは最短 2 週間で導入できます。専任の担当者が設定から運用定着までご支援します。

詳しく見る

Post Card

layout=list(thumb あり / なし)

お知らせ

冬季休業期間のお知らせ(本文なし・リンクなし)

Pagination / Breadcrumb

Breadcrumb

Form Field

.cv2-field(自前のマークアップ)

お名前を入力してください。

.hs-form(HubSpot フォームと同じマークアップ)

本文スタイル(.cv2-prose)+目次(js/core/toc.js)

営業 DX の進め方 5 ステップ

営業 DX は、ツールを入れるだけでは成果につながりません。まずは現在の営業活動を見える化し、どこに時間がかかっているかを把握することが大切です。

ステップ 1:現状の営業プロセスを洗い出す

まずは、問い合わせから受注までの流れを書き出します。担当者ごとにやり方が違う部分こそ、改善の余地が大きいところです。詳しくは「営業プロセスの可視化ガイド」で解説しています。

  • 問い合わせの受付方法(フォーム・電話・メール)
  • 商談化の判断基準
  • 見積もり・契約までの承認フロー
項目確認すること
リード獲得月あたりの問い合わせ件数と流入元
商談化問い合わせから商談になる割合
受注商談から受注までの平均日数

本文に挿入したモジュール(目次の対象外)

「入力のルールを決めてから、チーム全員が同じ画面で状況を確認できるようになりました。」

ステップ 2:顧客情報を一元管理する

  1. 名刺・展示会のリストを集める
  2. 重複を整理する
  3. 担当者を割り当てる

導入後の効果

洗い出しが終わったら、次のステップで顧客情報の管理方法を決めます。b タグの太字も strong と同じ見た目になります。

h4 の見出し

本文のサンプルです。

受付判定(js/core/deadline.js)

締切 2100-01-01(受付中になる)

締切 2026-01-01(終了になる)

スクロール登場(data-reveal)

data-reveal 1
data-reveal 2
data-reveal 3