チャットUI
メッセンジャー風の吹き出し。相手は左（淡色）、自分は右（藍）に並ぶ。入力欄に打って送るとJSで自分の吹き出しが増え、タイピング中を示す3点アニメの後に返信が届く。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 1 対 1 のメッセンジャー・サポートチャット
- 相手の入力中を示したい会話画面
- 送信で即座に自分の発言を並べたい UI
- 避ける場面
- スレッド・引用が要るチーム会話
- 長文や添付が主体の問い合わせフォーム
- 構成要素
- ヘッダー
- 相手の吹き出し
- 自分の吹き出し
- 入力中インジケータ
- 入力欄
- 送信ボタン
- 持っている状態
- 通常
- フォーカス
- 押下中
- 無効
- 読み込み中
- キーボード
Tab で入力欄→送信へ、Enter で送信（form submit）。空のときは送信が disabled
- 支援技術
ログは aria-live=polite で新着を読み上げ。入力欄・送信に aria-label、送信アイコンは aria-hidden、入力中の吹き出しは role=status＋aria-label「入力中」。reduced-motion で出現と点滅を停止
- 動き
吹き出しが 180ms で下から拡大しつつ現れる。入力中は 3 点が 1.2s で順に跳ねる
デザインの要点
- 自分は右・藍、相手は左・淡色に固定し、吹き出しの下角を差し手側だけ 4px に絞る。誰の発言かを形でも言う
- 吹き出しの最大幅は 74%。全幅にすると会話の左右が消え、狭すぎると 1 行ごとに折れる
- 送信後は入力欄を空にして即フォーカスを戻す。連続で打てないチャットは会話にならない
- 「入力中」の 3 点は 1.2s 周期で控えめに跳ねる。速いと急かされ、止まっていると届いていないように見える
コード（コピーして使えます）
<div class="chat" id="chat">
<div class="chat-head">
<span class="chat-ava" style="background:linear-gradient(135deg,#2b50c7,#7fa4ff)" aria-hidden="true">み</span>
<div class="chat-meta">
<span class="chat-name">みお</span>
<span class="chat-status"><span class="dot" aria-hidden="true"></span>オンライン</span>
</div>
</div>
<div class="chat-log" id="chatLog" aria-live="polite">
<div class="msg in"><div class="bubble">こんにちは！最近どう？</div></div>
<div class="msg out"><div class="bubble">ばっちりだよ、ありがとう😊</div></div>
<div class="msg in"><div class="bubble">今日の予定はもう決まった？</div></div>
<div class="msg in" id="typingRow">
<div class="bubble typing" role="status" aria-label="入力中">
<span></span><span></span><span></span>
</div>
</div>
</div>
<form class="chat-input" id="chatForm">
<input type="text" id="chatText" placeholder="メッセージを入力" aria-label="メッセージ" autocomplete="off"/>
<button type="submit" class="send-btn" id="sendBtn" aria-label="送信">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
<path d="M2 9l14-6.5L11 16l-2.5-5L2 9z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" fill="none"/>
</svg>
</button>
</form>
</div>