チャットのワークスペース
左にチャンネル一覧（未読バッジ）、中央にスレッド、下に入力欄の3段構成。送信すると吹き出しが追加され、少し遅れて相手からの返事が届く。チャンネルを切り替えると未読が消える。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- 未読は数字バッジと太字の 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="true"><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></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></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>
<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>