Category · チャットUI
チャットUIのデザイン例とAIプロンプト
Discord・Slack・iMessage 風のチャットインターフェイスのAIプロンプト集。サイドバー＋メッセージリスト＋スレッド・リアクションなど現代の定番構成を収録。
チャットについて
コミュニケーション系プロダクトの中核。Discord、Slack、iMessage、LINE などが定着させた、左のチャンネル一覧から中央のメッセージ、右の詳細パネルという3ペイン構造が王道です。アバター、リアクション、スレッド、コードブロック、ファイル添付、未読バッジが積み重なります。独創的なレイアウトは、それ自体が学習コストです。骨格を踏襲するのは怠慢ではなく、認知資源を会話そのものへ回すための判断。個性は骨格ではなく肌に乗せてください。
よく使われる場面
- コミュニティ・Discord 風プロダクト
- 社内コラボレーション・Slack 風 SaaS
- ゲーム内チャット・対戦マッチング
- カスタマーサポート・チャットボット
- AI チャットアプリ（ChatGPT 風）
成功のポイント
- メッセージ密度は1ページ20-40件が標準
- 送信者アバターは常時表示・名前は連投時非表示
- リアクションは 6-8 個に絞る
- スレッドはモーダルでなく右ペインに
- コードブロックは monospace + 言語タグ
