国内利用者数No.1

Design System Preview
Chatwork — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

無料ではじめる DESIGN.md を読む
98万社
導入社数
No.1
国内利用者数
7年連続
シェア1位
01 / Colors

カラーパレット

Brand
Brand Red
#f03748
主要CTA・ブランドカラー
Link Red
#df1c13
テキストリンク
Yellow Accent
#ffbe2e
バッジ・ハイライト
Neutral — Dark Navy Scale
Dark Navy
#13202f
見出し・フッター
Body Text
#191919
本文テキスト
White
#ffffff
カード面・コンテンツ
Surface & Background
Background
#f5f5f4
ページ背景（warm stone）
Surface
#ffffff
コンテンツ面
Surface Gray
#f6f6f6
セカンダリ面
Surface Alt
#f8f8f8
まとめセクション
Surface Warm
#f7f1e7
ウォームアクセント面
Border
#ebebeb
区切り線・ディバイダー
Semantic
Danger
#f03748
エラー・Brand Red共用
Success
#22c55e
成功・完了
Warning
#ffbe2e
警告・Yellow共用
02 / Typography — Design Tokens

タイポグラフィ階層

導入社数98万社
--rise--fontSize-other-large: 48px / 800 / line-height: 1.5 / letter-spacing: 2px数値強調 Display
国内利用者数No.1 — Headline 1
--rise--fontSize-headline1: 40px (2.5rem) / 700 / line-height: 1.5セクション大見出し
ビジネスチャットで働き方を変える — Headline 2
--rise--fontSize-headline2: 32px (2rem) / 700 / line-height: 1.5サブセクション見出し
だれでも簡単に使える — Headline 3
--rise--fontSize-headline3: 24px (1.5rem) / 700 / line-height: 1.5小見出し
チャット・タスク管理・ビデオ通話 — Subtitle
--rise--fontSize-subtitle: 20px (1.25rem) / 700 / line-height: 1.5サブタイトル
本文テキスト — ビジネスチャットで社内外のコミュニケーションを効率化。メールや電話よりも気軽に、スピーディーなやり取りを実現します。line-height: 1.6 のベースリズム。
--rise--fontSize-body1: 16px (1rem) / 400 / line-height: 1.6 (base)本文
機能説明テキスト — グループチャットでプロジェクト単位のコミュニケーションが可能。必要なメンバーだけを招待し、情報を整理して共有できます。行間を広くとり、長文でも読みやすく。
--rise--fontSize-body1: 16px / 400 / line-height: 1.85 (feature)機能説明
補助テキスト — 詳しくはヘルプページをご確認ください。Body 2 (14px)
--rise--fontSize-body2: 14px (.875rem) / 400 / line-height: 1.6ナビ・補助
キャプション — プライバシーポリシー | 利用規約 | 特定商取引法に基づく表示
--rise--fontSize-caption: 12px (.75rem) / 400 / line-height: 1.5キャプション
無料ではじめる
CTA Label: 21px / 700 / line-height: 1.3 / white on Brand RedCTA ボタン
03 / Content — SaaS 機能説明

コンテンツサンプル

日本製ビジネスチャット、Chatworkとは?

Chatworkは、中小企業に最適なビジネスチャットツールです。メールや電話に代わる新しいコミュニケーション手段として、社内外のやり取りをシンプルにします。

だれでも簡単に使えるビジネスチャット

ITに詳しくない方でも直感的に操作できるシンプルなインターフェース。導入時のトレーニングコストを最小限に抑え、チーム全体がすぐに使い始められます。導入事例を見る

他にも使える便利機能

国内利用者数No.1のビジネスチャットとして、多くの中小企業に選ばれ続けている理由がここにあります。

04 / Buttons

ボタンバリエーション

無料ではじめる
Primary CTA (pill, 21px, 700)
無料ダウンロード
Primary (16px, 700)
お問い合わせ
Secondary Outline
ログイン
Login Link (text)
Badge
おすすめ
Highlight Badge (yellow)
NEW
Brand Badge (red)
05 / Cards

カードコンポーネント

Industry Cards (radius: 5px)
🏢

IT・情報通信業

リモートワークの社内コミュニケーションを効率化。プロジェクト単位でのチャット管理が可能です。

🏗

建設・不動産業

現場とオフィスの連絡をリアルタイムに。写真やファイルの共有もスムーズに行えます。

🏫

教育・学習支援業

教職員間の情報共有や、保護者とのコミュニケーションに活用いただけます。

Resource Cards (radius: 16px)
📊

Chatwork 導入ガイドブック

はじめての方でも安心。ステップバイステップで導入手順を解説。

無料ダウンロード →
📝

業務効率化 事例集

導入企業の成功事例を業種別にまとめた資料です。

無料ダウンロード →
📱

リモートワーク活用術

テレワーク環境でのChatwork活用ノウハウをご紹介。

無料ダウンロード →
06 / Forms

フォーム要素

デフォルト — border: #ebebeb, radius: 5px, height: 44px
フォーカス — border: #f03748 (Brand Red)
正しいメールアドレスを入力してください
エラー — border: #f03748 (Danger)
07 / Elevation — Depth & Surface Contrast

Depth & Elevation

Level 0: Flat
shadow: none (基本)
Level 1: Hover
0 2px 8px rgba(0,0,0,.06)
Level 2: Dropdown
0 4px 16px rgba(0,0,0,.08)
Level 3: Modal
0 8px 32px rgba(0,0,0,.12)
Surface Contrast Hierarchy

Chatwork は box-shadow をほぼ使わず、背景色とサーフェスのコントラストで立体感を表現する。

Background

#f5f5f4 (warm stone)

Surface

#ffffff

Surface Warm

#f7f1e7

Dark Navy

#13202f (footer)

08 / Layout — Spacing & Grid

レイアウト & スペーシング

Spacing Scale (8px grid)
4px
XS
8px
S
16px
M
24px
L
48px
XL
80px
XXL
Border Radius Scale
4px
Small
5px
Medium
16px
Large
26px
Pill
Container Width
Max Width 1200px
Content Area ~940px
Article / Form ~700px
Grid Demo (3-column, gap: 24px)
Column 1
Column 2
Column 3
grid-template-columns: repeat(3, 1fr) / gap: 24px