Slack はチームのコミュニケーションと協業のための「AI ワークプラットフォーム」で、プロジェクト管理、ワークフロー自動化、安全な連携をチャンネルに収めます。UI はライト優先（#FFFFFF/#F8F8F8）で、最も目を引くブランド要素は茄子紫のサイドバー（#4A154B）。4 色のロゴカラー（青・緑・黄・赤）はごくわずかなハイライトにのみ使われます。Larsseit がマーケティングページの見出しを、システムフォントがアプリ UI を担当し、角丸は 4〜8px で丸みがあるものの決してカートゥーン的にはなりません。協業ツールと SaaS プロダクトの UI に適しています。
Slack生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Slack-inspired interface. - Light-first content surfaces: white #FFFFFF and near-white #F8F8F8; - Deep aubergine #4A154B sidebar — the brand's most recognizable UI element; - Four logo accent colors (blue, green, yellow, red) used sparingly as highlights only; - Larsseit for headings (marketing), system sans-serif for UI; - Rounded but not cartoonish: 4–8px radius on most components. Colors: #4A154B, #350d36, #611f69, #36C5F0 with #4A154B accent.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Slack aesthetics. Use Slack color identity with #4A154B accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Slack style. Use Slack color identity with #4A154B accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Slack design language. Use Slack color identity with #4A154B accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Slack visual identity. Use Slack color identity with #4A154B accents. Compelling, conversion-focused.
使用例
Slack アプリ
WebBuild a web app with Slack design language and #4A154B color system.
Slack ダッシュボード
ダッシュボードCreate a dashboard using Slack style with data visualization and modern typography.
✅ 適した用途
- SaaS 製品
- チームコミュニケーションと協業プロダクト
- 仕事のシーンのソーシャル UI
❌ 適さない用途
- 厳粛な金融取引システム
- ミニマルな黒のアーティストサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。