チャットUI Chat UI

メッセージの送受信を表示するチャットインターフェース。リアルタイムコミュニケーションの基本UI。

使用場面: カスタマーサポート、チームチャット、AIチャットボットなどのメッセージ表示 採用例: LINE, Slack

ライブデモ

S
サポートチーム
オンライン
こんにちは！何かお手伝いできることはありますか？
14:00
アカウントの設定について質問があります。
14:01
もちろんです。どのような設定でしょうか？
14:01

ソースコード

<div class="demo-chat">
  <div class="demo-chat-header">
    <div class="demo-chat-header-avatar">S</div>
    <div>
      <div class="demo-chat-header-name">サポートチーム</div>
      <div class="demo-chat-header-status">オンライン</div>
    </div>
  </div>
  <div class="demo-chat-messages">
    <div class="demo-chat-msg demo-chat-received">
      <div class="demo-chat-bubble">こんにちは！何かお手伝いできることはありますか？</div>
      <div class="demo-chat-time">14:00</div>
    </div>
    <div class="demo-chat-msg demo-chat-sent">
      <div class="demo-chat-bubble">アカウントの設定について質問があります。</div>
      <div class="demo-chat-time">14:01</div>
    </div>
    <div class="demo-chat-msg demo-chat-received">
      <div class="demo-chat-bubble">もちろんです。どのような設定でしょうか？</div>
      <div class="demo-chat-time">14:01</div>
    </div>
  </div>
  <div class="demo-chat-input-area">
    <input class="demo-chat-input" type="text" placeholder="メッセージを入力..." />
    <button class="demo-chat-send">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
    </button>
  </div>
</div>
.demo-chat { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 340px; }
.demo-chat-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--ui-primary); color: #fff;
}
.demo-chat-header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 16px;
}
.demo-chat-header-name { font-weight: 600; font-size: 14px; }
.demo-chat-header-status { font-size: 11px; opacity: 0.8; }
.demo-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f9fafb; }
.demo-chat-msg { display: flex; flex-direction: column; max-width: 80%; }
.demo-chat-received { align-self: flex-start; }
.demo-chat-sent { align-self: flex-end; }
.demo-chat-bubble {
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
  border-radius: 12px;
}
.demo-chat-received .demo-chat-bubble {
  background: #fff; color: #333; border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}
.demo-chat-sent .demo-chat-bubble {
  background: var(--ui-primary); color: #fff;
  border-bottom-right-radius: 4px;
}
.demo-chat-time { font-size: 10px; color: #999; margin-top: 4px; }
.demo-chat-sent .demo-chat-time { text-align: right; }
.demo-chat-input-area {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e5e7eb;
  background: #fff;
}
.demo-chat-input {
  flex: 1; padding: 10px 14px; border: 1px solid #e5e7eb;
  border-radius: 20px; font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.demo-chat-input:focus { border-color: var(--ui-primary); }
.demo-chat-send {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--ui-primary); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
.demo-chat-send:hover { opacity: 0.85; }
(function(){
  var input = document.querySelector('.demo-chat-input');
  var sendBtn = document.querySelector('.demo-chat-send');
  var messages = document.querySelector('.demo-chat-messages');
  function sendMessage(){
    var text = input.value.trim();
    if(!text) return;
    var msg = document.createElement('div');
    msg.className = 'demo-chat-msg demo-chat-sent';
    var now = new Date();
    var time = now.getHours()+':'+String(now.getMinutes()).padStart(2,'0');
    msg.innerHTML = '<div class="demo-chat-bubble">'+text+'</div><div class="demo-chat-time">'+time+'</div>';
    messages.appendChild(msg);
    input.value = '';
    messages.scrollTop = messages.scrollHeight;
    setTimeout(function(){
      var reply = document.createElement('div');
      reply.className = 'demo-chat-msg demo-chat-received';
      reply.innerHTML = '<div class="demo-chat-bubble">承知しました。確認いたします。</div><div class="demo-chat-time">'+time+'</div>';
      messages.appendChild(reply);
      messages.scrollTop = messages.scrollHeight;
    }, 1000);
  }
  sendBtn.addEventListener('click', sendMessage);
  input.addEventListener('keydown', function(e){ if(e.key==='Enter') sendMessage(); });
})();

AIプロンプト

Basic 
チャットUIをHTML/CSS/JSで作ってください。送信/受信メッセージが吹き出し形式で表示され、入力欄からメッセージを送信できます。
Custom 
以下の仕様でチャットUIを実装してください。
- ヘッダー（アバター、名前、オンライン状態）
- 送信メッセージ（右寄せ、プライマリカラー背景）
- 受信メッセージ（左寄せ、白背景）
- タイムスタンプ表示
- メッセージ入力欄と送信ボタン
- プライマリカラー: #2563eb
- 自動返信デモ機能
Advanced 
リアルタイム対応のチャットUIを実装してください。
- WebSocket対応のメッセージ送受信
- タイピングインジケーター（相手が入力中の表示）
- 既読表示（チェックマーク）
- 画像・ファイル添付対応
- メッセージの引用返信
- インフィニットスクロール（過去メッセージの遅延読み込み）
- オフライン時のメッセージキューイング
- プッシュ通知対応
← カタログに戻る