SNS/コミュニティ設計ガイド -- "Dark Lounge"
SNSのUIデザインは、最も過酷な耐久レースだ。ユーザーは一日に何時間もアプリに滞在し、何千ものメッセージを読み、リアクションし、投稿する。その間、UIは完全に透明でなければならない。目立った瞬間、それは失敗を意味する。
本記事では、Discord と Twitter という二つの巨大プラットフォームから着想を得た「Dark Lounge」というデザインシステムを解説する。チャットアプリ、フォーラム、コミュニティプラットフォーム、ソーシャルネットワークなど、SNS領域全般に適用可能な実戦レベルのテンプレートだ。
核心となる設計思想
コンテンツが主役、UIは引き立て役。ユーザーが生成するテキスト・画像・リアクションこそが視覚の中心であり、インターフェースは透明な器に徹する。UIが目立った瞬間、それは設計の失敗を意味する。
1. デザイン哲学 -- 「ダークラウンジ」
コンテンツファーストのダークUI
このテンプレートの根底にある考え方は、「深夜のオンラインラウンジ」だ。
暗い壁の中にメッセージが浮かび上がり、オンラインインジケーターの緑のドットが空間に生命を吹き込む。ダークUIは目の疲労を軽減し、長時間の利用に耐える。背景色の微妙な差分（#111214 → #1e1f22 → #2b2d31 → #313338）で深度を表現し、影はほぼ使わない。
チャットUIプレビュー
以下はこのテンプレートを適用したチャットUIの実例だ。ダーク背景、Blurpleアクセント、リアルタイムインジケーター、リアクションピルが統合されている。
2. カラーパレット
このテンプレートのカラーパレットは、長時間の利用に耐えるダークUIを基盤としながら、コミュニティの活気をステータスカラーで表現する。
パレットストリップ
#111214deepest#1e1f22base#5865f2blurple#23a55aonline#f0b232idle#f23f43dnd#80848eoffline3. コンポーネントプレビュー
ボタンバリエーション
バッジ & ステータス
ユーザーカード
リアクションピル
4. 使用ガイドライン
適合するプロジェクト
- チャットアプリケーション（Discord, Slack風）
- コミュニティフォーラム
- ソーシャルネットワーク
- チーム協業ツール
- ライブ配信プラットフォーム
- ゲーミングコミュニティ
適合しないプロジェクト
- コーポレートサイト（明るいUIが求められる）
- EC・ショッピング（商品写真が暗い背景で映えない）
- 教育プラットフォーム（親しみやすさが必要）
カスタマイズのポイント
- accent-primary: Blurple (#5865f2) はブランドカラーに変更可能
- Status Colors: オンライン/アイドル/DND/オフラインの4色は変更しないことを推奨（ユーザーの認知パターン）
- 角丸: Discord は 4-8px が基本。より丸みを出す場合は 8-12px に
- 背景色の4段階: 層の数を増減させてレイアウトの複雑さを調整可能
テンプレートファイル
完全な9セクションの DESIGN.md テンプレートは以下に格納されている:
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/SOCIAL_MEDIA.mdStitch への投入方法は SOCIAL_MEDIA.md 内の「Agent Prompt Guide」セクションを参照のこと。