AIタイピングインジケータ
AIが考え中の「・・・」3点バブルから、回答が1文字ずつ流れ込むストリーミング風表示。チャットUI・AIアシスタントの定番フィードバック。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- AI チャットの「考え中」と回答の流し込み
- ストリーミング応答の見た目
- 返答が来ることを待たせる間の合図
- 避ける場面
- 数秒以上の待ちを 3 点だけで済ませる
- 静的な返答を演出のために遅らせる
- 読み上げ利用者に途中経過が要る画面
- 構成要素
- ユーザーの吹き出し
- AI の吹き出し
- 3 点インジケータ
- 点滅カーソル
- もう一度ボタン
- 持っている状態
- 通常
- 読み込み中
- キーボード
Tab で「もう一度」へ、Enter／Space で最初から再生。吹き出し自体は操作対象でない
- 支援技術
3 点は aria-hidden の装飾。考え中→回答完了は sr-only の role=status で「考え中」「回答: …」と読み上げ、文字の流し込みは 1 文字ずつ読まれない。reduced-motion で 3 点と点滅を停止
- 動き
3 点 1.2s バウンス（0.18s ずつ遅延）、1.3s 後に 45ms/文字で追記、カーソル 0.8s 点滅。reduced-motion で静止
原則ドハティの閾値
デザインの要点
- 考え中は 3 点バウンス、返答はカーソル付きの文字追記。「待っている」と「届いている」を別の形で見せる
- 3 点は 0.18s ずつ遅らせて波にする。同時に跳ねると点滅に見えて、処理が止まったように感じる
- 文字の追記は 45ms/文字。速すぎると一括表示と変わらず、遅いと読める速度を下回って苛立つ
- 読み上げには 1 文字ずつ流さない。role=status に「考え中」と完成した回答だけを渡す
実装メモ
考え中(3点アニメ)→1文字ずつ追記(typing)の2段構え。実際はサーバ送信完了で点滅を止め、ストリーミングのチャンク受信ごとにテキストを追記します。タップ／クリックで最初からやり直せます。
コード（コピーして使えます）
<div class="chat">
<div class="bubble user">AIってどんな返事するの？</div>
<div class="bubble bot" id="botBubble">
<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
<p class="chat-sr" id="chatStatus" role="status" aria-live="polite"></p>
<button class="chat-replay" id="chatReplay" type="button">もう一度</button>
</div>