workbuddy_skills/open-design/design-systems/slack/DESIGN-ja.md

Slack に着想を得たデザインシステム

Category: 生産性・SaaS 職場向けコミュニケーションプラットフォーム。深いオーベルジーヌを主色に、マルチアクセントのロゴパレット、ダークサイドバーを組み合わせた明るいサーフェス。温かみがあり親しみやすい。

1. ビジュアルテーマと雰囲気

Slack のアイデンティティは、「仕事は人間らしく、少し楽しくあるべきだ」というコンセプトに基づいています。標準的なサーフェスは明るい——白いコンテンツエリアに深いオーベルジーヌ（#4A154B）のサイドバー——ダーク優先のツールとは対照的です。このコントラストは意図的なもので、サイドバーは落ち着いた常設のナビゲーションアンカーであり、コンテンツエリアは明るく開放的です。

ロゴパレット——青、緑、黄、赤——は主にハッシュタグアイコンやマーケティングの文脈で使用され、UI 全体に散りばめられてはいません。製品内では、Slack はオーベルジーヌを唯一のブランドアンカーとして使用する、節制された専門的なカラーシステムを採用しています。

主な特徴：

• 明るさ優先のコンテンツサーフェス：ホワイト #FFFFFF とニアホワイト #F8F8F8
• 深いオーベルジーヌ #4A154B のサイドバー——ブランドで最も象徴的な UI 要素
• 4 つのロゴアクセントカラー（青、緑、黄、赤）はハイライトのみに少量使用
• 見出しに Larsseit（マーケティング）、UI にはシステムサンセリフ
• 丸みはあるがカートゥーン調ではない：ほとんどのコンポーネントで 4〜8px の角丸
• 密度があり息づかいのある：コンパクトなメッセージ行と明確なスレッド階層
• 温かく会話的なトーン——絵文字、リアクション、イラストはファーストクラス

---

2. カラーパレットと役割

ブランドプライマリ

トークン	Hex	役割
--color-aubergine	#4A154B	サイドバー背景、ブランドプライマリカラー
--color-aubergine-dark	#350d36	オーベルジーヌサーフェスのホバー状態
--color-aubergine-light	#611f69	サイドバーのアクティブアイテムハイライト

ロゴアクセントカラー（少量使用——ハイライト、アイコン、マーケティングのみ）

トークン	Hex	名前	役割
--color-blue	#36C5F0	スカイブルー	チャンネルアイコン、リンク、情報状態
--color-green	#2EB67D	ティールグリーン	オンラインステータス、成功状態
--color-yellow	#ECB22E	ゴールド	離席ステータス、警告、ハイライト
--color-red	#E01E5A	ルビー	通知、エラー、メンションバッジ

サーフェスと背景

トークン	Hex	役割
--bg-primary	#FFFFFF	メインメッセージエリア、モーダル
--bg-secondary	#F8F8F8	スレッドパネル、セカンダリサーフェス
--bg-tertiary	#F1F1F1	入力欄の背景、ホバー状態
--bg-sidebar	#4A154B	左サイドバー（オーベルジーヌ）
--bg-sidebar-hover	rgba(255,255,255,0.1)	サイドバーアイテムのホバー
--bg-sidebar-active	rgba(255,255,255,0.2)	アクティブなサイドバーアイテム
--bg-message-hover	#F8F8F8	メッセージ行のホバー

テキストカラー

トークン	Hex	役割
--text-primary	#1D1C1D	メインボディテキスト（ニアブラック）
--text-secondary	#616061	タイムスタンプ、ミュートラベル
--text-sidebar	rgba(255,255,255,0.9)	サイドバーのチャンネル名
--text-sidebar-muted	rgba(255,255,255,0.6)	サイドバーの非アクティブアイテム
--text-link	#1264A3	メッセージ内のインラインリンク
--text-mention	#1264A3	@メンションのテキストカラー

セマンティックカラー

トークン	Hex	役割
--color-success	#2EB67D	成功トースト、ポジティブな状態
--color-warning	#ECB22E	警告状態
--color-danger	#E01E5A	エラー状態、破壊的なアクション
--color-info	#36C5F0	情報ハイライト

ボーダーと区切り線

トークン	Hex	役割
--border-default	#DDDDDD	標準の区切り線、カードボーダー
--border-subtle	#F1F1F1	行間の微妙なセパレーター
--border-focus	#1264A3	フォーカスリングのカラー

---

3. タイポグラフィルール

書体

役割	公式	ウェブフォールバック
ディスプレイ / マーケティング見出し	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
UI / ボディ / クローム	Slack Lato（カスタム）	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
コード / 等幅	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack はマーケティングの見出しに Larsseit を使用し、製品内 UI にはカスタム Lato バリアントを使用しています。ウェブでの使用には、system-ui が最も安全なフォールバックです。

タイプスケール

レベル	サイズ	ウェイト	行高	字間	用途
Display XL	48px	800	1.1	-1px	マーケティングのヒーロー見出し
Display L	36px	700	1.15	-0.5px	セクションヒーロー
Heading 1	28px	700	1.25	normal	モーダルタイトル、ページヘッダー
Heading 2	22px	700	1.3	normal	カードタイトル、設定セクション
Heading 3	18px	700	1.35	normal	サブセクションヘッダー
Body L	16px	400	1.5	normal	メッセージテキスト、説明
Body	15px	400	1.46667	normal	デフォルト UI テキスト（Slack の基本サイズ）
Body SM	13px	400	1.38462	normal	セカンダリメタデータ
Caption	12px	400	1.33	normal	タイムスタンプ、ヒント
Code	12px	400	1.5	normal	インラインコード、コードブロック

タイポグラフィルール

• Slack の基本ボディサイズは 15px——密度を高めるため 16px より若干小さい
• 未読チャンネル：ウェイト 700——太字が主な未読インジケーター
• タイムスタンプ：12px --text-secondary、ホバー時のみ表示
• コードブロック：背景 #F8F8F8、ボーダー 1px solid #DDDDDD、角丸 4px
• フォントサイズを 12px 未満にしない
• マーケティング見出し：大きなディスプレイサイズには字間 -1px

---

4. コンポーネントスタイル

ボタン

/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }

入力フィールド

.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}

サイドバーチャンネルアイテム

.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}

未読バッジ

.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}

メッセージ添付ファイル / カード

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

リアクション

.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}

---

5. レイアウト原則

3 カラムレイアウト

┌──────────────┬──────────────────────────────┬─────────────┐
│   Sidebar    │        Message Area          │   Thread    │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optional   │
└──────────────┴──────────────────────────────┴─────────────┘

スペーシングシステム（ベースは 4px）

トークン	値	用途
--space-1	4px	タイトなギャップ
--space-2	8px	コンポーネントパディング
--space-3	12px	入力パディング
--space-4	16px	標準パディング
--space-6	24px	カードパディング
--space-8	32px	セクションギャップ

サイドバー構造

[ワークスペース名 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
  # general
  # random
  # design  ● (unread)
────────────────────
▼ Direct Messages
  John Doe
  Jane Smith

メッセージコンポーザー

• メッセージエリアの底部に固定
• border: 1px solid #DDDDDD、border-radius: 8px、margin: 0 16px 16px
• ツールバー：絵文字、添付、書式設定、送信ボタン

---

6. 深度とエレベーション

Slack は明るいサーフェスに軽いシャドウを使用しています：

レベル	用途	シャドウ
フラット	メッセージ行、サイドバーアイテム	none
低	カード、入力欄	0 1px 3px rgba(0,0,0,0.08)
中	ドロップダウン、ポップオーバー	0 4px 12px rgba(0,0,0,0.12)
高	モーダル、ダイアログ	0 8px 24px rgba(0,0,0,0.15)
オーバーレイ	モーダルバックドロップ	rgba(0,0,0,0.5)

---

7. すべきこととすべきでないこと

✅ すべきこと

• サイドバーにオーベルジーヌ #4A154B を使用する——Slack 最も象徴的な UI 要素
• メインコンテンツエリアを白く明るく保つ
• すべてのボディテキストに #1D1C1D（ニアブラック）を使用し、純粋な黒は避ける
• チャンネル名を太字にして未読状態を示す——ウェイトがインジケーター
• 4 つのアクセントカラーはセマンティックな役割（成功、警告、危険、情報）のみに使用
• メッセージの添付ファイルと埋め込みに border-left: 4px を適用
• タイムスタンプはホバー時のみ表示
• リンクとフォーカス状態に #1264A3 を使用
• サイドバーアイテムをコンパクトに保つ：高さ 28px、角丸 6px

❌ すべきでないこと

• メインコンテンツエリアをダークにしない——Slack は明るさ優先
• 青/緑/黄/赤を装飾的なアクセントとして散りばめない
• テキストに純粋な黒 #000000 を使用しない
• 吹き出しを使用しない——メッセージはフラットな行
• ボタンを大きな角丸にしない——4px が標準
• タイムスタンプを常時表示しない
• チャンネル名をすべて大文字にしない
• フォントサイズを 12px 未満にしない

---

8. レスポンシブ動作

ブレークポイント

ブレークポイント	幅	レイアウト
モバイル	< 768px	シングルパネル、サイドバーは左ドロワー
タブレット	768–1024px	サイドバー + メッセージエリアのみ
デスクトップ	> 1024px	フルの 3 カラムレイアウト

モバイルアダプテーション

• サイドバー：左ドロワー、右スワイプで開く
• ボトムタブバー：ホーム、DM、アクティビティ、プロフィール
• スレッドパネル：フルスクリーンオーバーレイ
• コンポーザー：キーボードの上に固定
• チャンネルリストアイテム：44px のタッチターゲット高さ
• モバイルでもオーベルジーヌのトップヘッダーバーを維持

---

9. Agent プロンプトガイド

Slack スタイルのデザインを生成する際は、以下のアプローチに従ってください：

カラーの適用：

メインキャンバスとして background: #FFFFFF を設定します。サイドバーには #4A154B（オーベルジーヌ）を使用します。すべてのプライマリテキストは #1D1C1D です。リンクとフォーカスリングは #1264A3 を使用します。4 つのロゴカラー——#36C5F0、#2EB67D、#ECB22E、#E01E5A——はセマンティック専用：情報、成功、警告、危険。

タイポグラフィ：

すべての UI に system-ui, -apple-system, sans-serif を使用します。ベースサイズは 15px です。未読チャンネル：ウェイト 700。ボディテキスト：ウェイト 400。タイムスタンプ：12px #616061、ホバー時のみ。コード：Monaco, Menlo, monospace、12px、背景 #F8F8F8。

レイアウト：

3 カラム：240px のオーベルジーヌサイドバー + フレキシブルな白いメッセージエリア + オプションの 400px スレッドパネル。サイドバーアイテム：高さ 28px、角丸 6px、未読時は太字。コンポーザー：底部固定、border: 1px solid #DDDDDD、border-radius: 8px。

コンポーネント：

ボタン：角丸 4px、高さ 36px、オーベルジーヌプライマリ。入力欄：1px solid #DDDDDD ボーダー、#1264A3 フォーカスリング。メッセージ行：フラット、吹き出しなし、36px の円形アバター。リアクション：ピル形 border: 1px solid #DDDDDD、border-radius: 24px。

トーン：

Slack は温かく、プロフェッショナルで、人間らしいです。空の状態にはフレンドリーなイラストを使用します。CTA は直接的：「Send message」、「Get started」。エラーメッセージは明確で助けになります。決して不安をあおらない。

避けるべきアンチパターン：

ダークなコンテンツエリア禁止。吹き出し禁止。純粋な黒のテキスト禁止。散乱したマルチカラーアクセント禁止。チャンネル名の全大文字禁止。12px 未満のフォント禁止。大きな角丸ボタン禁止。