Category · チャットUI
チャットUIのデザイン例とAIプロンプト
Discord・Slack・iMessage 風のチャットインターフェイスのAIプロンプト集。サイドバー＋メッセージリスト＋スレッド・リアクションなど現代の定番構成を収録。
このカテゴリのデザイン
選択肢で絞り込む右下のサポートチャット
Webサイトの右下に常駐する問い合わせ用のチャットウィジェット。用件を選択肢で絞り込む自動応答、営業時間に応じて約束を変える表示、時間外はメールで引き取る導線、閉じている間の未読数までを備える。
既読と日付区切りのある和製トーク画面
日本のスマホで最も見慣れたトーク画面の文法を再現したチャットUI。青みの地に緑と白の吹き出し、吹き出しの外に置く時刻と既読の人数、日付の札、連投でしっぽと名前を省く組み方までを1枚にまとめる。
流れて出るAIアシスタントのチャット画面
左に会話の履歴、中央に質問と回答を並べるAIアシスタント型のチャット画面。回答が一文字ずつ流れて出る表示、生成の停止、コードのコピー、日本語入力の変換確定で誤送信しない入力欄までを1枚で再現する。
マンガの吹き出しで進むサポートチャット
太い輪郭線と尻尾付きの吹き出し、網掛けの紙地でサポート対話をマンガのコマとして見せるチャットUI。解決の瞬間だけ叫び吹き出しに切り替えて感情の起伏を作ります。
Discord/Slack風の3ペイン・チャット画面
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。
チャットについて
コミュニケーション系プロダクトの中核。Discord、Slack、iMessage、LINE などが定着させた、左のチャンネル一覧から中央のメッセージ、右の詳細パネルという3ペイン構造が王道です。アバター、リアクション、スレッド、コードブロック、ファイル添付、未読バッジが積み重なります。独創的なレイアウトは、それ自体が学習コストです。骨格を踏襲するのは怠慢ではなく、認知資源を会話そのものへ回すための判断。個性は骨格ではなく肌に乗せてください。
チャットのプロンプトを組み立てるよく使われる場面
- コミュニティ・Discord 風プロダクト
- 社内コラボレーション・Slack 風 SaaS
- ゲーム内チャット・対戦マッチング
- カスタマーサポート・チャットボット
- AI チャットアプリ（ChatGPT 風）
成功のポイント
- メッセージ密度は1ページ20-40件が標準
- 送信者アバターは常時表示・名前は連投時非表示
- リアクションは 6-8 個に絞る
- スレッドはモーダルでなく右ペインに
- コードブロックは monospace + 言語タグ