チャットのワークスペース
左にチャンネル一覧（未読バッジ）、中央にスレッド、下に入力欄の3段構成。送信すると吹き出しが追加され、少し遅れて相手からの返事が届く。チャンネルを切り替えると未読が消える。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- チャンネル型のチームチャット
- 未読を数と太字で追わせたい会話一覧
- Enter 送信・Shift+Enter 改行の慣習に従う入力
- 避ける場面
- 1 対 1 だけのサポートチャット（一覧が不要）
- 長文の投稿が主のフォーラム
- 構成要素
- チャンネル一覧（未読バッジ）
- ヘッダー（チャンネル名／人数）
- スレッド
- 吹き出し（アバター／名前／時刻／本文）
- 入力欄
- 送信ボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab でチャンネル→入力欄→送信の順。入力欄で Enter 送信・Shift+Enter 改行（IME 変換中の Enter は送信しない）。チャンネルは Enter/Space で切替
- 支援技術
nav aria-label、現在チャンネルは aria-current=page。スレッドは aria-live=polite で新着を読み上げ、別チャンネルへの到着は role=status で通知。未読は数字バッジ＋太字＋隠し文「件の未読」
- 動き
新着の吹き出しが 200ms でフェード＋6px 上昇して入る
デザインの要点
- 未読は数字バッジと太字の 2 重で示す。バッジだけだと一覧をスクロールしたとき見落とす
- 連続する同じ人の発言はアバターと名前を省いて時刻だけ薄く出す。会話の密度を上げる
- 入力欄は常に最下段に固定し、Enter で送信・Shift+Enter で改行の慣習に従う
- スマホは左のチャンネル一覧を上の横並びチップに畳み、同じ DOM を並べ替えるだけにする
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="cs-app">
<nav class="cs-side" aria-label="チャンネル">
<p class="cs-ws">ミナト工房</p>
<ul class="cs-channels" id="cs-channels">
<li><button type="button" class="cs-ch is-on" data-ch="general" aria-current="page"><span class="cs-hash">#</span>general</button></li>
<li><button type="button" class="cs-ch is-unread" data-ch="design"><span class="cs-hash">#</span>design<span class="cs-badge" data-badge="design">3<span class="cs-sr">件の未読</span></span></button></li>
<li><button type="button" class="cs-ch" data-ch="dev"><span class="cs-hash">#</span>dev</button></li>
<li><button type="button" class="cs-ch is-unread" data-ch="dm"><span class="cs-presence"></span>田村 直樹<span class="cs-badge" data-badge="dm">1<span class="cs-sr">件の未読</span></span></button></li>
</ul>
</nav>
<section class="cs-main">
<header class="cs-head"><h1 class="cs-h1" id="cs-title"># general</h1><span class="cs-members">メンバー 12</span></header>
<div class="cs-thread" id="cs-thread" aria-live="polite" aria-label="メッセージ"></div>
<p class="cs-sr" id="cs-status" role="status"></p>
<form class="cs-composer" id="cs-form">
<label class="cs-sr" for="cs-input">メッセージ</label>
<textarea class="cs-input" id="cs-input" rows="1" placeholder="# general へメッセージを送る"></textarea>
<button type="submit" class="cs-send" aria-label="送信">
<svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path d="M3 10 17 3l-3.5 14L9.5 11z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
</button>
</form>
</section>
</div>